{"_id":"@material/tab-bar","_rev":"1661-5b8c28dc672af3522836c0e990094d5f","name":"@material/tab-bar","description":"The Material Components for the web tab bar component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.38.0":{"name":"@material/tab-bar","version":"0.38.0","keywords":["material components","material design","tab","bar"],"license":"Apache-2.0","_id":"@material/tab-bar@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"296f4dcd2a7c2cc5fd9001111061f06dc6d41fae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.38.0.tgz","fileCount":12,"integrity":"sha512-IWysrdJW8fPqxhbO2Od0+wZNX5aR/RMqLl8X2KoTniXXZ2JGA3iIN6EMTtv4FySH8CqsQdAMvezxqPMLfuiusQ==","signatures":[{"sig":"MEUCIBYXB5fAOfepvZUBr/8AnyWHQ/cKRnfY9e4Xy7u/0GGpAiEA3juukOvwa3Vt48MDu/oSd1IpvkglnLfc3dNakAkx1ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XxCRA9TVsSAnZWagAAYBQP/0syA610ZkcqeasI1OOU\n5oA9Ogs1vKXrcdomzXNG/SxURvzfG5QPtVL0hQK0/zwkcdI5UCwV4m8i680J\nP7dvacLhkgULoqAlhaGoy6V5NZ9DWN9YCorXNCJK17cF/aNo5L+R6ybESTXT\nJzdZm8YMbQvMerrFY94DgqVpv96/IlS4DShcLd0SIm1kzrFJWJbfllSRzyGt\nWLhg6XMqn7J5TBnV42Xi6vJejYJVHdFlHZPR8r6gh/MH2KQOwtjRtJmSCZ+x\ni4S8heMaxLAdtCIhxe3NSxKX/auKxvsg7pePoWgmLoBo374RcHnb3RmmdW35\nNBz9MCW4ROx3ImeHi5I80Rh15XZxjdo42aR8wbwkdMP7PiTX+rQXxXhcbD4A\nTLuCInUkUdMh14JFsDykoqdpdd8Liap6Zq9kcEOiPqmLoQNOvjypr7go0UWl\nCkUcIcxs9iHbZb6xT4D0gmiqdtheNYw7ZNT6kLp8nM73vdgxT+GpWcGkrcQJ\nU1HSvIi8/46ynJ8wpL0+ofwe2gu4AoEkm7gDS/RZZULgtZt7yynrpuahdl7v\nKYbQT8InNAchxP5mt066MVnfIUEzt9qsJOi/s03lT5IQVu9jDItmpMutOUvw\nKyJWOnmtb/larFv/OOlIIezAtl5szFiGf/7iOHY78O23pnohxsr5YeOaPgl8\ngRAj\r\n=TMq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/tab":"^0.38.0","@material/base":"^0.35.0","@material/elevation":"^0.38.0","@material/tab-scroller":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.38.0_1532970480886_0.6966981181715122","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/tab-bar","version":"0.38.1","keywords":["material components","material design","tab","bar"],"license":"Apache-2.0","_id":"@material/tab-bar@0.38.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"539b7a844ea290a92f9fcd05dda00dd2fb8b04c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.38.1.tgz","fileCount":12,"integrity":"sha512-tfQKK60ZHNt3tsRy6M6x09J1zw4BfaP2lftuCFxmvE/3VWpGurKIyttj69uuSjfOPQRTVWlK5NF2hmOQMZBXgQ==","signatures":[{"sig":"MEUCIQDcG73P2TE3hxkxL46Oc4BoHQhw9QA+8MiMj1Gg2UcHVwIgL4UTkJG2WrlSkrjZnoqig8baBvDCvzq0/ezRPbTtFSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyNCRA9TVsSAnZWagAAxHIP/1dJ0mCxoO6WBlcyZQc9\nrEgYk8Vere1DYORZtSu3qSSv9y3GS1bIbE4Vfd5rFk88tKdW+55dEtfyaZER\n3mai823TZFgoSN053qqqVL5gOiYQK+u5X22zmwo3y/aqXDTil/Sv1+GRK1KE\n1aJOLWYIRRgdaXWGMFlHlytNnFnVhtlj0gyfSL48pgDdKLnP1ClgUe0nL0mP\nlqngQX0/7Z4EwvaIVUaiTeuxaPfpBqBLKICG+jjwapeIOeXV6Sv/nQJeQIzN\nmi3LenQu0Ucx4lvfKK//Mc90uK/iPFdBR6y8gDQqqZv1y2YIhR1wyFSs4hkO\nd8tCJosiAdg4UC8WRRDW/iDe6UzmWZqGHYbY5LzNPos+B3CLNBc9ifePlT8c\nDhlUl5POGcHOuUFbi37lW8BlzFsrjQNHND5VH8WpvbIFBEbAkQmLRTjBNjLO\nFmkGaGoQiCU5cIOlOcHvv+I/ybY6DTMbRgokics/4oSyI4qaj0SCdThz31Ta\nQX2Mx4RIGJEPF6yTA/RKNKd6iKMrMDRNBQ6jbvNDjhGC0LfXG76tE8S2tK5a\nnBIbRC1cVMOMp2WMHbv+jDdNC4Sin3vAX71wJ4OuQmV1cvrtpC9Sa4VgXlnf\nFn6GyxZeCLYtdyXM5VYAjWPQECi6qPMiK8w8aIGjrqG62gJZ1Ax2N7rwivbQ\n9eK/\r\n=qiKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.38.1","@material/base":"^0.35.0","@material/elevation":"^0.38.0","@material/tab-scroller":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.38.1_1534192780621_0.16577262871354925","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/tab-bar","version":"0.39.0-0","keywords":["material components","material design","tab","bar"],"license":"Apache-2.0","_id":"@material/tab-bar@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1655ac1028d23d2f4de8ecaadea4144dedf02a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.0-0.tgz","fileCount":12,"integrity":"sha512-Fs35BIN8U3pBI3sbnoUEeB921ho+nVNSfbrLTX+UN4jAVJY79rpRB/YtoXAjltXkOI9PRrmRXg5rtKkv2uRiRg==","signatures":[{"sig":"MEQCIHnBVu20PE/T5nQnGa9r4LrKpybB8tbrJCWeJslUHI3zAiAphsJg/URquxTRqQnCe0/88pJh9IJDYYyLpJZ33/f1Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVlCRA9TVsSAnZWagAAhxoP/19QALqCGRySdk0IvSo1\nheAPu9v+ZKmfbW9pgCr+KaQQdQkTtIrN3X9lPgvTlR3iXXbDf28ImDBqVlet\nbNri/yBXPUDqkQJNX0hMbP7t4DBZvli/rE633tb8Y7dskTuJpjhnG2B/9Nwt\nb5Ygcr3F7u130ITOIe6iUSUwsNJv1MJuCFhfW9nazYmoCfUrnFN+shR+8I73\ntHZsxoHmvFZZHIf7vyLAK/Bxb9IN/Zuv+npKXlwlPrqAl8TKNbSiACRTH0rv\ncw6dhZ3+XjofgXDwgcCf2rt7bqqAFkYU/GQS2t6gH/Sl/NvfbXlUcJi72Q/h\nk6db2umjWiQBsP5H+LP8g80xs2gF8cjfPvKUKln2c0fdA/x7WrTlceugyzdy\n24The6ArstTlcnY91ly1m/ZuD4/6IKktKTZ2jXf7PnmSh4vLeT54S6Hu1ax0\n592W3nQJXVYn6iYnIE47ojTQiMwdOdidH7WsyAXmrXG/rnKEi2tToO6xrOv1\nQvo3jJQujOeVcA0EykScQf4bcOTqqGPTXCL6Eifcj6S0g8w9l7BD24oGPqtQ\nxDUlIWp1utdvqWNKYOC8PQ3PHt4if893f3lDYCbwPzggLHhx2erEheURoBhk\nodg8dI15J1dxlJ3RAouRX3PMMFAAwBULgqo/cksxUSuv4ugGKCVF6WfLccrA\n1rDZ\r\n=jMxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon\">heart</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getActiveTabIndex() => number` | Returns the index of the active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the Tab at the given index.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.39.0-0","@material/base":"^0.35.0","@material/elevation":"^0.38.0","@material/tab-scroller":"^0.39.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.0-0_1534432612637_0.510258299945693","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/tab-bar","version":"0.39.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9f5e54bcbdbbd8dc0390e0c2d9a8887e0be2c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.0.tgz","fileCount":12,"integrity":"sha512-BkGUAjfra9Ugu7FVnOMN2YxTKIdkhEHM7mlkuDlSR7mR6kUTwlFBimF2Oc/5T8YBGootKpGe5LyCse3S6RLXqQ==","signatures":[{"sig":"MEUCIGYLm7MYBkkJsiCavACARcmZPFbiiPBmZO5F7GznDMsZAiEA2E9LE84yMlceyAtkhr0B0pP8bKPDwc3A/9YQlso0Kbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDfBCRA9TVsSAnZWagAAUk0P/0jpAI2uXm8BSrjA4ytk\n2B6xhMa0eMvm/qKlfbJ1nJNFbpD3Z87a/JlepWPBOaEFFbiVDj6VXJ93rgmR\nM/onmmBQIO2E/M7MbTxVlKkCsevQSleUTJDxXwuBoQXqz1pG9jcmEFb3PiJU\nMaAHLNHvC7GCe9KpO8S/Lzg58+KLRJyUa4QeTBC3yHJOUP/nH2u3LhiLqy9f\nTtaW66k0h34gDvn4aJywU7sPpk8cSuu1E9u4YpFpNqDQfRkFqAJU1IP5Skq+\n/3bqAU6tBs7CbbvVzK258UoZTRidzIeWcJD3uczL88ASH0lbtCVh+2b2c2V/\nSdnhw4zIMs5jGhTewTE6+daxVWbqQXxvV3YKDUII8F5gQ+NbRDHKRYbMsSqx\nCjNBUnGmRonWqBb4oV627hGwMX7fuqeELbT9HCAXrqq8A4RkssJZVoRdlaMV\nr9EkRsvCLwafF19j1Cl0L1UV7AQsxssRvj1Wrofd0XJIXH1PE3QU6DgfEn6C\nlNu4gsJvXZwT0ChhpbhyJ2ymLjVXbJoh42s2ox/RIhzs2Tj+VI4m7gCBVvcl\nBM0/MUMgW61lyz8LEMipRMw9Rwbmhaopr092igz5xuSr9IXB7PsrxIk4f/Qb\n7WoUNVpBhTxS+kbR7f+Cpd9nEu5op74L+ATD133trc51g6vA3s9FHJNP8Lrl\nkfnT\r\n=tiMb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.0","@material/base":"^0.39.0","@material/elevation":"^0.39.0","@material/tab-scroller":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.0_1535391681201_0.015870888206386047","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/tab-bar","version":"0.39.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2b7939109a990572f5bfa4046c4e572ef809e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.1.tgz","fileCount":12,"integrity":"sha512-RPPX8nM/4UxvMlUFFuWo4oaWLmSNXPWtloP7RZzYeDTfv5cHqnd7alq0YqKAvtlu4CS8mBxos7eNjZ0MqsEdNg==","signatures":[{"sig":"MEQCIFKGOk4mQ0tOXHSz/SAYUYP4Tn0ZQ2iHpe5m95No0clTAiAYdJn9dLwn6q6W348+CwEGG1z+QFn9KEADCLQY4IHWGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibUGCRA9TVsSAnZWagAA3v8QAIhz0CuVvunZs73Kzecl\nXWeIpsq3Y/lNyiIf64Kfqie3P8F88xXf2T/o/g6gh+E5f7GWxhpazTWgB5vH\nVsgpjt/TgaMvzSQScMDukYUoKvw2e+6VLxpemfOvU2sQpkySlZjyLdKZRaLy\nemAfSIr95H3O038EnTwurSqxst052d/0+3p9HHmvROGGi2ZHS8rWzgywKGmD\nPq2cPJXNZrZekmOzDt+L3r9AKA4/R6PGVd+n5iC7cpR3fE+2VNkjeXcgO6my\n7xYI5bKDduqFNEuuWMREhyf/86NlDi8+X91Cka3u0bNkqJG8AD7d7bUz6vpo\nxapAS7w/RMgIoOeMBYA3SmSs63h8btkURc6nVtBpzTyKncoLGjZ3x5gUmtwP\nFtUqNoaao2T2ppF5cM/gnBSoTRIzWdVYR4k9NhC0a1HqOiYA5mCJbCQx/NRJ\nCcB2ymI1F8WJ7ucPLHC9jV5XuCDZyqybFEoAOvr0ky+lLsTMHUA3bFC3ClE7\nYj6beOzQMZetBxbbGbglzJ1Z/OubEk3ipDh+vRokTJM3LzbvofUy56UJ9+6J\n0tQzgBCLJvEiwfx1663qMWW1KZKWQuSl5TelXCZBQG01IdMr4aI76W0/C44X\n4/FaY+5rnCh1Gmk5jXXHExxpxoWbIzKa5Vc5uucwCng+/akagE9579H/Yh8r\niH4G\r\n=CbLj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.1","@material/base":"^0.39.0","@material/elevation":"^0.39.1","@material/tab-scroller":"^0.39.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.1_1535751430078_0.9344608868588888","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/tab-bar","version":"0.39.2","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f28e54b4f76f344159c6802616c2a7a30b580ed8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.2.tgz","fileCount":12,"integrity":"sha512-MS3zKp7IalJieHYMtdRRDzbhKuZj5yjw2uFmXVDOUu/IvZ5XTuQWBeEx99BA/cUzl2gFu7H+sKNopAb/iPHtSg==","signatures":[{"sig":"MEQCICNkTu0HHg4PJ/JGZhaofdOXydi1Sqx46mmAeK2wmgBEAiAL2u/WGWeXeMn6FwgpjR0iM0Kd9enuVCOzHcObUOBkew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OTCRA9TVsSAnZWagAA01EP/A+W+cCzbjaFbFq08zao\n7ZCKGPRR9mvfvdJOIgCAAy0Zkn95SZLyugVUmcWkCp4Icxy5yN/uLslOXEIt\nHU+ZQtJcjoshpRXuIinp5q4ZSObxCBPB+IQKPIodshpqyC9MEfkQoF1djtw+\nb8XXlnaC43eHguQTTct16ec0KXWMmc8c6WZv9JMKvD1GJMk77TQJs3a1a90C\nwLiwE5xUmf/GZdbqD1otQ+sVcLnj9vCs3u2nGtzScUJ/LInqoWq+Lmwo0mkV\n00zXhUGRwjKxF5UegJWkBP87EHra6MgI3iixbRBrq70mPuq0QxVYVfQ5iSe0\n2p774DhLoO+slRWZn5kHkOXGLBKG3Jd3QOYpqo2/zUgx5LC1lAUyZ48SHXbR\nLQKshhqhtjwbrAf6/8gUgaf91vjoYe2fFFV8CPxwIaSy3RBXE0KUa1vOnNAc\nRMifVwTneKR7u4ONs8YKBi5r8TK89qTDdRt5WV40+UdYXYszd8D8DXojiaL6\nG5nLYS7IsPVdM1YPdRsDlUxsCnYXKEETvPpyU6jDR/tBV6LfOfrrzNjVvMGi\nxqUAOzbvwZazc201LXAev/bM5cFh30lhE/7OYIgCE+F92JvVgHkNQVVx7GsV\n+Gp/LlQ7t3wwe8TkUfbUbnzBxmOADz7nO3RL8IS3sNSJ14wb1CIQ/oZB/ZpW\nujED\r\n=zCyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.2","@material/base":"^0.39.0","@material/elevation":"^0.39.1","@material/tab-scroller":"^0.39.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.2_1536684946595_0.4722048132578853","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/tab-bar","version":"0.39.3","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be2ee4f5516fd45b587b2ab6990206b71f8414c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.3.tgz","fileCount":12,"integrity":"sha512-DF33bY39cnoLg0zK9EjXz4GOVj0pk7J8DSup7aLhHr0UgLOEmVX/o3XmQBG7esdSScQcwwluiEiYbwqqYkWcZQ==","signatures":[{"sig":"MEYCIQCS9ieGIj6YbDvCeFobjN9n8Ul0bxfKi/EA6/4JHvCJhAIhAK3832mRTnHjWs8ZDo+Gmf9bhhGo3dEJ+ut79BhP4j6u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kuCRA9TVsSAnZWagAAAysP/jb9VovwVVgDuEsetQhp\nHBQ3D9t884OuserNvE+R474BNO4TVip+xumz4Jm4J/WR2ahWm8qljQnSBOsq\nCAOLPk5uElKYtePGXPuBrxcyK4n/Byg3Tvg3Az9QGHtDhbS4+XawnhfYF6mC\nErpBZJVVzA6/c9zSbBG3dgX6k8gNyojGXux8AQiUW9tiF7GOCnEPaH1wC3Qu\nzgmdjbafYuqX5BZQnX9ceFkZ5V/fHEHXzIVSHDK+hmX2Lp11MDAMoJGV3lRa\nTePt+nz4lmf3Btiy9w4lHsojEykadZ9LD42IVtDT2lmg1l2iphHf9MXuBfbw\nbw68tc/kO9jaxUFfG4j3tkrrczjI36czR0qjpp+8G9lMqwqulBttlf0k9FYA\nPf6dtsMc1PTWBr/vIty+OA1g1oRIF+yIs9dmSCev3uoJ9UcXP94rSCIEelf7\niYDZfGVKHEKXxS6MKXkXyXyc+JivpPy4j8fw+ctzKt/bBXmnrYUPplDSep4i\nReW/vXOstmqrmj88Fr1g2EidF0RXniSs7gxL0ajZZugwqqpU3hCGLIxyiC2N\n09kWmoLJz+9c1Rl+ZkAfaHU7MzzudAic0nTBkFhvX8x/qh1Sq6TndA2RpY8/\n2/m+2QhyNg5c1jLAw9IyUkWoqb8N08DjWpDQ+03JDmjNIa7bBV3kmEp4Znzx\nbIQK\r\n=T4G9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.3","@material/base":"^0.39.0","@material/elevation":"^0.39.1","@material/tab-scroller":"^0.39.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.3_1536686381372_0.2279817417777663","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/tab-bar","version":"0.40.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d357da74dfc380d6f5954af090f982d28201f3e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.40.0.tgz","fileCount":12,"integrity":"sha512-Bl5/tWJ5sf2DB/r/BtULs+6usObl1EGxkQwjhL/VTMIt9+5+SG3QtyV31hCFzHRs1YDkud9KE7I0qFCthPA0YA==","signatures":[{"sig":"MEQCIHTKKb8i/xj9rHB24KwtwjiqUvKMV0PZsoDa0+nyt+NKAiB49Q13YKfxsJrb9uChvbhLPuyNFf1dgxP9AQos8C0fRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULhCRA9TVsSAnZWagAAj4QP/i5a3HFe5UTVmJoTX8Tu\nd8VC3gmUrVqJs0XBD8Fk7H8MRxniZ2olFUOrB62EqjZkCmhN826+oC/anJln\nbPiuRUDAL7P1o2FKDjeBu8EcCaeAE93cD8ECtOBu0GL0CunNH08bbwh/KpPF\nEUXaVNNmQww+mxK5GFpGeVQxcVDCYIAqUHuZ4H1Yh06diYuZfKn6SWWPm4m3\nkXkOvC4CDMHxDl9lMLRzBVnhw2WGvr2B5XWGqTy9Cg0X3+VW/2xxEdNshvSp\nhYijna4bGfQ+nBG9LJ9BT+5TxUhpFlTnJSJL/hOD8PjeJQ8Cco59x9UXUlM5\npx3lIoDwp1NxkpOFxXPUTGTn+KUZl6kID+lCfGzVzLeIaE/2v8oz9GLFokCH\nUoO5WFz4PoLLM1jGw398eM3QfVix9VrkeUpK1dsOZs9ZhNiImVoYIbmgao7S\np/wyq/XTaZPkRWcu1ytzhyZt1GzuwJhoN0I1hhRHA23HxcA6Pl+vRJLFhQlg\n2Zx6lfOKH8etPruOIlnlJLQ96f/Zrla4I1z/0SF8ZBNJfEnw8cL/KxHp16Eq\n8Xv7YB4NU9vkPZWBhLaLKmNpMvdAz45ruaYsVo0SBHCCZGwsNEJbMnNPhJkk\n+64D1sF1W6HpXP1cfmKvUdEQsKR4nWUHxgjYnTU2R15Ftz/kMk0POCGEod41\nqDGs\r\n=w/y4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/tab":"^0.40.0","@material/base":"^0.39.0","@material/elevation":"^0.40.0","@material/tab-scroller":"^0.40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.40.0_1537819360596_0.15048619222452198","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/tab-bar","version":"0.40.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a324ca8d67e7427f5a6664c79419ede6b71d7b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.40.1.tgz","fileCount":12,"integrity":"sha512-8VDVnPlyskGf8gh6js1ePPo4RCpSFm6s0GOG2KJr7LNqB3pCm/27ACdpy5qqYm9oPbAYZhu0uEohSDY4wW5Rzg==","signatures":[{"sig":"MEYCIQCGvuKqvneJwdCCCaWsJolGMaxkvXN6OYmNxGN7oXdL7AIhAKVdG+Qye13s9nzZI3+D6Qo3uJkcx05PRQIrRzxPZQfF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8j6CRA9TVsSAnZWagAADgEP/3+YXNJ+ez32ElvG7S9P\nI3Hkx0dkn08U3ZmyHEpLkgnm9HIcOhJvz8UPuNWR0BdORXKFEylRdXBvexVX\nerEF9JCU3YogBwBGxeonkhFeMSE4e03QReCZbhADpmyu/zn+He7vXESaDJmC\nb+EADWyjXguwiGgfBix2rDAAOwV7IbjnWszbl2ojdYTU3G6MOBXQ342t4grc\nLrjE4UOlFBAee6t6qYPdVQToiOqYDwPfOVtNX93S3c+QOCZXo2NnYhA/exC5\nTxqItScwfa0AbzE5jLIgcnQnB9m6cQfQ6O+NGkMIFY/Uo9f6cdzibEN9XOpz\nBk6p4g9dXiIlr98bm19837U+icrOiSOcIUTlyjEGZGRdPNdGYDPM8iAz+n+3\norfqhkITMs21Y4ZxDeocE5C+RgfCGp8SiNw/90r7Q8daB5V1qAFMhTgrXC54\nwRhzdMS46DhN08lzLLsBmUvKYL1TAmV2XD6Z71f+rdnV775doTre77V0lOVH\n9WpcvRafSTcP86ltGkBBchaukasoohmHPB+t3zYsOcGD8lGGCRZ0eQjfwc8r\nYxrBZLUjGEzp2d97RvPkAeCDvTKdIeXpFCP21h+pSEP3MFIOQl4WoxqkHkAl\nigOEL4Oe7Ud2Kccj3XyV14PLqauk+6C9TrMe0rcVtygoXBQpOIpYvB1YUVUJ\nZqAg\r\n=58Hx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/tab":"^0.40.1","@material/base":"^0.40.1","@material/elevation":"^0.40.1","@material/tab-scroller":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.40.1_1539033337686_0.8080025949701193","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/tab-bar","version":"0.41.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f54233dd0595a68a66daacf279614fba534cfb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.41.0.tgz","fileCount":12,"integrity":"sha512-RL+0CA4ZeZAmhz3vlyFsm8h9sLim8JHTLkosfZSYRnx2o9iQHQHpV58jz76ZSWG+0iuDoHFnwZ2oNKNmImn0KQ==","signatures":[{"sig":"MEQCIDyWUwoi7a3N1JP0/DGbaQ99tdJy836M+GCTh87/SBRpAiBFWUJpddqcqX58OMfsO85SU6FCGsO1HT2WKTcVyGkwdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wUCRA9TVsSAnZWagAA4i8QAIMjz+O/5tikSt9g9iQc\nS6WNyzKYYhaD6dBELDmKbK/SYkCD616hY6ObTxjwvUn5A/jMk8UQt+2EnUrT\nHZ6QDzkzcCk0HIal8P8VkqUwMrWvL2XE7FagrGj7tlr0Bl/0d7U48B7cgXNz\nD2OWymQ3MyEE2cg4pqQLx/nVeTZaX2wXgjWRG+h9uesFJjIHeL1gT213uk1o\n2HEBM1vX5SgJQdvk9rtJY/a80m7lB0X1uzqNBRvQ3lyEXTLsq3ZSqTTfCS2e\ndWKmM40f5PQGXXrG6HOhE/0nuAWn0+JQ1vorZCjRJQh6y2WkXQdoNwyWxzdu\nBrZ5Ga7GreCJed26r0zQexONfcqboxCwpVYemNphCNal8TGhA1Z+JMyfBYQZ\nViWTuA97oUPc8UP3qbz87R9U3fmZ401dpXFsQ8oy9i0BGnFbo1/zQ/nARO1+\nXmzBmIM62uCA6ITzWPAQv5VyVOqquoOM72E8tJ15X2M1qnqETXlqr4CXD+6x\n6OvkXM4J48cvBnJCyrt/GlIqpudM1p0mIkznjQAB0HYa1Gj+a726nvZkbpWh\nqQ7Lm2zerGiesS96P5HacVbzLZXYq9nLHUiQaI/4fVjhygMF4uUNjaCqT8hD\nKkIMUPGXLmyTeo8ZHgVr1Lh33hLqeKr7EvNlsRAPax01JnBKa43HYz6wmn+t\nxYxR\r\n=3eZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.41.0","@material/base":"^0.41.0","@material/elevation":"^0.41.0","@material/tab-scroller":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.41.0_1540844564113_0.9484784918328772","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/tab-bar","version":"0.42.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8acc21a597c2d1b0310e2ab007b541a5bb0e4a2d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.42.0.tgz","fileCount":12,"integrity":"sha512-uJynKwaxErOcgGjQikpLDm7jC98+h4jVmp1sX6VAl+5jpgR9pQ6WEmKX3/yn+JNc1UX+6zlSzQFjAwr6DKW8xQ==","signatures":[{"sig":"MEYCIQDgayrF9CRsUXp7GNIAMlXeeJTXg90APUWYGNkye612QAIhAISHvExA/n6aMGIPqVRNN3evGV+ohNaq51f2GxMcl8Hg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXbCRA9TVsSAnZWagAARbQQAJVSGdep2+9YjI4FN9LW\npOfPchfuhTN2jOgSDARyqZSvPCxYH3z+YVdTfbyb1HfOS9MdApduP1M8IVZO\nuySekhEtyXgBemyz9W+mZuLSanLCC6N0yLDBMKTnNXC5Hs3bQX4rdpevBr31\nGfwNrVAhaDBivDEj8YFCztzimcGyinSrDzf21/fFyML2cIVtiK+7qwz7QA4E\nqnGDKWYG8J6niVK+P22oHn1r36D8wCV+KmDEuT+rx1/FumwU96nftXYaW1ZY\n0tY2qYZaG9d7wEcFq/CtzcFb3JQq4F6J4+Su4TKWBc7R/FjNjKAnxODAnNk1\nenR+QlK+dko0MqjXgXBIMuQaHoykuXietYlCpMQnWzso0JK0Q75erMlGEYgo\npZUtnn9t9yMjzyZS0tFNuDNxJzptR7uY22BqOCqxELVv6fPcFF9zGpyBJqRb\nW7yE1me/XJc4WpLfkvgt8eaqi8wc/p4//6vey8TQphnbZ24DIUEdF1uzvabQ\nJKOjELXw7sziPrRXnPuITnkqs/A875kt+o1GQMKDkdd9mAB5JoP6mol/FVGj\n5sHHkPFG2SwyBXnFy2JxWUNcS0XPUWNendlzVj+t/4Ag7KIzaw33AIMLavYJ\nhzR/4l/MFwaspniF7KdimhDcDtcjkxbjM6SV+U1evo+R60LLfowLG+rtXbBA\nqzpv\r\n=I9UP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/tab":"^0.42.0","@material/base":"^0.41.0","@material/elevation":"^0.41.0","@material/tab-scroller":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.42.0_1543964121475_0.8193228419542127","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/tab-bar","version":"0.43.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a237f1f591bd99bc3624906340c6a5f646f8bf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.43.0.tgz","fileCount":16,"integrity":"sha512-M1lPqVULqAAuH1EDijypxswae5wfNHQFsW1Mn/iTaIpOtu0tZzkAdO/gDpQoQHlS8AsFfV9CU+YuTy2HtOICFA==","signatures":[{"sig":"MEUCIQDd8na8YcVxCSNFjYBc+XlBZOTh9i60e3eXsRIXf6LYVwIgAt50fjpPxYOt7igRvorIOBRGg7jbR937n+3WhxnthCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1020098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61gCRA9TVsSAnZWagAAbHsP/iUWJu4ZCtjGwCnsKcET\nUP5m17JAkHdZ2X8I61bAnRtU4GkSLaJsE2etHnhzskLlcHYmzLhsiRbP2ot9\niEOmvgTmu9Sqy5U9tLplyeXcpHwLfMVWa3jD0DiRiZ59nWbNq24Dd4HYzl6U\nfPmXNsIZg7riaD3okHG375y1WJdK0cdMK0fYLzzFKjvztTVCbWgMPR/mSxzY\nz0VIabUJQEel7xnb5kvTy+cTNfpQJPMlNWnkhT0KRIOqw3AAhlsKLjY1ZBP9\npHJa5SJnXrUz94gnJuonUZfyi8IUzOi25/hCErtGRi5ogxBu4377Urio1UBf\nE9kGqLaa9J0NUpQG6HuXvgdXubDjG3XDuBhz9mcyZlMm/E0bwJ8B7n/X+eSu\n8FWEzzEviaT2WQnU94dkgVf5tUga6lqC8CuN2qfrB48Axrc0MSUHL1oliEpF\nTK10sFCT10izHaa1nGHNZAGqwigln2dd54JLH/Xt0PWzAy9XaHiebRL4NSyK\n1DJymstcjAQ5ecII9vVpdAHiUeaSM5zPqK8WzPNiYeiminU94R4ZiTqSs6R4\nQ28hheqbNETOM7y1zo/4nL8SFtUWOW4PeMH+PJYZ8sudrcxA+TEUYX8MU5n1\nIN69O93jUX30xo26QJmBfCUia38Q4PWCNev1KmBcSyFy4CzQyg2UXU65GNbS\n90Vw\r\n=sKA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/tab":"^0.43.0","@material/base":"^0.41.0","@material/elevation":"^0.43.0","@material/tab-scroller":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.43.0_1546890591602_0.5182405659505624","host":"s3://npm-registry-packages"}},"0.43.1":{"name":"@material/tab-bar","version":"0.43.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.43.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c417e616f79d077c5a6589393ad6720a5e4da293","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.43.1.tgz","fileCount":16,"integrity":"sha512-V473tg/nasdtbpmzurvAFt1CbETYaa9QXkBFkHi4tfqF6JnCBPHkw2LQHF/5a1Aa+cbmwmmZBv/dmrEywRqWPQ==","signatures":[{"sig":"MEQCICqsdaR0PG/drOwwaujY7uUmk5PhgHh1suLsVephf6VAAiBA4ZXDO9mBuy8IBhbV0dg6ieDSTSFNxH2I3tQ8Twvd0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1020066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5yCCRA9TVsSAnZWagAAPAYQAIycUtiWCvCFJ8boTc/0\n7X4yQElD92HwbHvAPnEtT7rNhsQHulqUiZY1naD6ZufFvA49PvtpF77O1ZKR\nbm0fjLmXN60qE9EL4jVnOpQJMwMaSxY8YBfxcOAWlyGP6jYh6IZ56u2buY0p\nH2hq/II2ZS8Nb5DjGQfuqan9TiPWwjFQu4br9B2tAWXEYG+xVjLB92IC+8kN\nSSlKie/182aNqTTHAe7cYNmrv4mz/y4xoelJweoerLs3iJ+RuinqNx3egoeP\nyJqcPkbG0JLLNB7x7S2BW50/zqDcz0a2tOX+1wrL6aFOMTNsF2PSZp06qyNO\nYy1Q5HPMGLpzUunh2kV8uyZOAVi1wSZA4TYvXXaM8NN0zkDHgTPtnlcAmwTB\nqJ7L9M7dyNtNWwjC93mtjdgloeS/xNA30yJC3FGpkKOZKsh25hryODkvwoUJ\ndKYKinKo9jO252gTgfvCoK/ilAoaKZzbJGlJwc/LnGmgnuWR4mSn6ZIRTZjp\nWmOnmkS85fN/TYNr3C4MPEc5aBmSVSMvbB3z4/WcqpmI5ztABp4bMuk7plLR\n7PBOpaLOhAETv0CM8uoh6KhEkk6ZimjglTru0j3Oni8VKBQoaZAEOMJxD6Vx\no18+Vgk1Vn+jZa0Bh/V3TMl2z18D9aDw0AgYjaCHlvLFUxJLhip5xAMPY3BP\nbpTP\r\n=/Bfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/tab":"^0.43.0","@material/base":"^0.41.0","@material/elevation":"^0.43.0","@material/tab-scroller":"^0.43.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.43.1_1548196993488_0.46419786653666484","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/tab-bar","version":"0.44.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b17d791bd557b1d84892fef1a1d8b8d6fef7c6d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.44.0.tgz","fileCount":16,"integrity":"sha512-kCrt05d61YXyY43SNc0dPGuqysbcLr/KRDBvzpXgE4gv2jCCVhhjAH10KPlx8pthp/UtvrYJHb34acAKEGzdHA==","signatures":[{"sig":"MEUCIQDDRvQ+zt2+ZyMpG+ZiiS4NHHxeuEGe/+n7gDjLOwL6pAIgH+aS3W1jRjJCnE0lHLTwFDNMgJHiPe4zjWMEpJoJ3Dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1020096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIN3CRA9TVsSAnZWagAATPUP/RK4I0CXLTChkWC2LCaf\nwUZ+5SzSydt5sXPQfJTgYAETM0FP29GxsFxSXnK6Bt6kzcZbIJWwhtO78BLE\nKeN9k2jqyqIiXprybPBCl/tGf1Z0ODjdxhkN5zYTlopi/O9cnGet8ScEVhHR\nk1OBm+kEoFahk35mWm4QLRWbDcl15OQ9ZS1O9RM7wdERkKkl+OaPGoPs3oLA\nMWgthZwVp+LdOyJS/LOvrBO/9oI47pPMy47T3EwQTxiFUadnW0RhBsC7PFRZ\nD46As7F3YhtEAXcTrW+5w8eZsclcRpv2K2lI8+33w1D79ukHy4f0JmEPm/T9\nMyMU9pSxfHGBqNM4YFQRGpe1t+n6fYdaUmJSSmQD/pIW8BaFk+R+RxgHqEH9\nzP1I8q4MZd/p5fwPYiIh7CHUE7esB6Mipt1Al9oSHbZMABSO1GYK6XePbzfZ\nAqWMAAVjcXFbBfLueGn0/oFVET8eVMl2IJFnf7RWPnprZ8FWMR0tFor+LLwE\n3cJRz3hxteosQ0jOjBUP/+WJIoq9N3R+17XlsrVk3MPLQJCOd4suIDRqkB32\ngQMeQpIcPahrjtZHjnVfVij7hF1Zz2+FBSKE2xdnVI+Rg1FkHI3vXZHeNxDB\nOqLuQ5aeD+/yf362GvhOaPjNKMSfTbtPgraQvzppuTWE6fMeHRaFzrmgbL6+\nwNOe\r\n=70RJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/tab":"^0.44.0","@material/base":"^0.41.0","@material/elevation":"^0.44.0","@material/tab-scroller":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.44.0_1549304694670_0.29701468579477264","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/tab-bar","version":"0.44.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfeffb192f20ca4fcaf5d438b9eb0d47a43748d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.44.1.tgz","fileCount":16,"integrity":"sha512-gtG6t4e1o7E+tl+V2gLBmLCe7dFV3OO5wg17XBQPjaVlRgzj6UeRRKUDmboFfBQmDEjja582AX7btOf0mfEXfA==","signatures":[{"sig":"MEQCIEiPgwNzBNV+vMaO2fpWapXhKlyTaQwjIAxdzyTLn7agAiBBNt1fbV00VXScqr4xt+XUZWPlDhtHf0HvZfgjihBGbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1020096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbItACRA9TVsSAnZWagAAUS4P/3IRlRZldLegnklup3Uy\nt8FQy0AHTwINItRWF7Z5V4M53cBO83m7e8F32k/pDXCDPEsx0dsRyKsfIIdW\nfBEM5juN/gGVNMs6KMqKfa8rp8vddzw0r6N3SFNugN4egTTyS7c72uSeJ96j\nS94LIRuWLaUzHLbhVQj4E9bHRZ1t8LdTckQ4Fq4+D/UZ/zKg+DU4O0fAEI3P\nGWSfOYUuAeLLpgDnEVHgFCvmsJOxhpahfUSTwLzhBCg6FtW+gJGMKD/KUobP\nBWaOhNuq1hPUGStZ288InBDW96QRwlo8x+yeEm0+w7JnIlrwb0IKgMEOUhiT\n/Ilz4PE8K3CSZxfQj8UgP1aSTVLW2uDvSZksIid7uXgUQX4wdkgVHvpdb+H2\nce8ezHa/n9j4yqKO11Xd39RaiYNYrgZOxNDXICJ+HUhvPVzaBG1/Gd8Kdp0h\nfniOhgObsrKYJunjSDJBlVXalwPTgo1hRVZiF2yyE+LfPtPXtJ0mrvet+Xs5\nte2ycybvGXZ4FoSQefDf5EFI40fv1Fr3PRjmP8oeGPgMABlFGd1D6+vg4NDa\nW0TLxgE/DRUkM15l4PbNUkLAi60/782r5fM8W9D4AI66e+6NaFmsrm91nyTk\nD3NY0GvSu0s0qjrJtKw5Ln1jhAeJvb9le8bPwfNTIFidujjhYtjhJocQt1jm\nVBjd\r\n=gCmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab bar component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/tab":"^0.44.1","@material/base":"^0.41.0","@material/elevation":"^0.44.1","@material/tab-scroller":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.44.1_1550617408112_0.7893085317040034","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/tab-bar","version":"1.0.0-0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff390a62500ae3562b12bc6c86bb006dade368e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.0.0-0.tgz","fileCount":31,"integrity":"sha512-6irIBiVhD1CWSeHvwJw4PYf7G1eT/bSiqaBgi7UFKuXl0XrYY1AnXYW6fmCEZin5R8F0TDNPUPNmDrB5SNPN4A==","signatures":[{"sig":"MEYCIQC1j1fmu8VjUMtOX2i3UzsprwGmElKUcoQG6Fz3OxCeYgIhAL4Evc5iE+1HBVzZEObw7ROmxpE49Mf4zeGxCbNrccUf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1207537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySTCRA9TVsSAnZWagAA5esQAJwzxZ5668o/+3cBzGfN\n3M8U4f7CIdBCqHZ7jXIe905B/d/WMyEtA1eXbBeG7ky/CPyTh6kTCU/2URc5\nhFtgR24b8Zb6zfV0m93umsyoENZ/+QWf7IHVkHfl3hBhjcVc2SKf3UnAJe6f\nUch7rr5M9sgxLEvjCU44mtgAx8u2uKDzy2MLIRRH+al0ul2cHDx65qUEyi5p\ngJfhW/iZtAtbmfmeVDj+cZGwLaAyyQmZ52zOaERAff8kIWwHK3+EUxUrfHM1\nfb4NFphNg/9dzGCVo3MVLexpbjWeY/WXzAnW5HDfA+4Dyn/4/g+1ShgIy32h\nhHKQ7A7uLQRD5yfboRFx2xY+zFafYaw4aI+kiUy6Gx5LVP2OVNMjFNTpT3jQ\n9ceApF72Qw9COA8t50o5/TjScp1r9Wphw3/JFi0THHSYdNyCIHBqwhGc5uLU\nELXJU4iP/rjUFZaE5exe8IwvTUeiVyR3lveeVDh1FD29gnvqJUR1Ln4IX5d+\npnVNU69zYpFsMMwZYJNbhCtJxGm7LqcJ1/tM4Bdsfy1CVFtIhLllTXukVaA9\nPoyFrMenfglrQJswFsRixr3IZCQjeEoQhRdeAoKMEY+pjunkHXTnePITchTU\nPUAS2M3C7KjiV6ra7UGLVNXD3TVHtsxp8+W22qnbsboSy833cwmjn6Os9Eat\n5u3T\r\n=DHk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.0.0-0","@material/base":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/tab-scroller":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.0.0-0_1551312019003_0.10003076149858914","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/tab-bar","version":"1.0.0-1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0226363d7e6dd59964c54dcc75af2fb402304b0e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.0.0-1.tgz","fileCount":31,"integrity":"sha512-/0UxIWIoLr+aYE0kyGlQtaWmsoZGZb/Vh3EomFuOHeR2ZX85wcFVOGPTdRcjAzuMJpxb2DsoHonxiSpwWz+0XA==","signatures":[{"sig":"MEUCIQCbCYl8mGOHtKWbupgn/LSni+UjxSgoAxE3uVfQU2UEEQIgXO1nRRWcmebQbKRXuAx8KIHpzi45nL/rWFS/sfOgy90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1207603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXsCRA9TVsSAnZWagAAdjAP/RcCND/1B0O+L4+I8pIU\n2pmmb6OUJlJzH198y0F6pkaxkaSjQZp00UAZcvQPwVptylz6oU5DDO3jtaBx\nJhD2dYQvPYGiY10aKe1TE1dVaY77phvT7bdlT0Z6+us9rQ+DpQc71uajLiCr\nG9QBefXvvPZtuHERxePSggVrh3ThoTcttNpC0KuNasCOmK+nh5QFokffRRJM\nQKgLvA8tBUgn2SSkSC4jESe57T9CVUpeq9BKIxkq4EBO3ICUmtDCyFRyfdKm\n98e7u0UJzEPczJZWSPFxGJDtvyPPnvQcyChCG4J1Z1X58tEFTzoVxDvJu65D\nSD88GA2Acv1WEDOzATNkrEiJQ929DxUf2n2uQDonXLcfBzRfM88rCs68N44Z\nsy2Z/F9oMcQqSbOJwr6r14uhBG2/M1pIEXQPvFYLH8Cq0pLAp8+y1lyIP3kc\nOy8EUO6h8MF2jgFG6rEbtDiUFpIQh52WPJRuWEFuYJfszIjrLfQcgAQWTyRp\nRLrNVWCbOagp/pykgMvTiu+NewQ6AxNF/HVrsdAdDbpp6d8qGQoftiofuRpV\nsbUCHC88QYvxVuVyq+ujo5JmmlPGrBQsVDVUBQ5DK1bI9p0P8vl5ChCRKQ1W\nGO9SYmoMuD+/2T4rJ1Gu6Fu3MbHXjuj7IhC5aw16gijZss8B24xkFqrzqwF4\nLrDm\r\n=11O0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.0.0-1","@material/base":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/tab-scroller":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.0.0-1_1551742444225_0.17284879956426868","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/tab-bar","version":"1.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f9359beb98bcc835b812492db3233e161aa07cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.0.0.tgz","fileCount":31,"integrity":"sha512-kw7xr+4dBDoNmZWqJHlr0db0LCXu3am0Ag4aw2Q0o8JhYssa1ViU4OfO+yh+VZsfbSVFk/R8ZgElXnQrIwV/vA==","signatures":[{"sig":"MEQCICNB8WBpWHkSocpL0Ozw9sEEOahmK2ZX8OkTR4aecrOpAiAu2YDzzSryi3F9BFEAbFLTY+tvZs0bSVgX1+zVEPBHRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1207593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbmCRA9TVsSAnZWagAAuoMP/0fg+sCqw2FKoyyneaXd\nupZk1bMgJPK2GbMV9X4aD889zfDmKZqOKeUM78V+Vr8mTMKOcoZiN2ONEYP4\nBhPpvdx01gks5KPMweEpmSUJDBNgBhI2AesJC0bbuGokdJtXUMHFexHgNge0\nYo2sdwG+PHyw+ExYbOn+HcBfVX9qU1mGKObmow8HiJjFusO7lga2mT0dkNfa\nE3UcNMn2BIr5HbZr5GN/DnggGh0lxeEeovRxXSDzJ8h925RJU0fSqIFrpKUg\naTOkuDSA5/2wYP6qk7DZDaVCTpRuzxaDpn3RZEtdX7HqV9jvTTmusNL+nP8t\nL/MflBfEqS6+whWWqqPt3AIIc9p+TiKcOWlcosJIvSBmsk7icAwiJMig5Cyn\nYs4gqkuo3K5zTynCmpxqiHBuACCRNg1Runo3/49ZAWzpUPb2bmnUHReNE9wh\nGVHIwkLxMt3r4GFlZtnDzC0ZVl+OSKd30lPeKW1URIn0pziel08MtEKBUdxa\n2w8TZWXzlYDrnqROU2IDL+WLIwnjyDDLU4jHv6Wv/3DAQIkU/nZKlGZ5uaeP\na7+fAtAC+/mWlTp2F4ac43Pewo3lwZSx1UzQKPClF17fNDGDdFHk6V+1cfgm\nnmaD74fDHSg4CLrvaBOTabwSjDWkmGAgvVr3EiG+7sete7SlQn5fmaNOwdvr\nWDK/\r\n=LHsF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.0.0","@material/base":"^1.0.0","@material/elevation":"^1.0.0","@material/tab-scroller":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.0.0_1551906533769_0.1630846228549916","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/tab-bar","version":"1.0.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02f0cc3a0924463d3e6e34e4052ca7d8be94ed1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.0.1.tgz","fileCount":31,"integrity":"sha512-zou4iUmTPW96uEepD3whGbkPeo4SvuaQCuR0FsRiBQA2fCdnGX2Eyn03GY5Kv41lDw9RpoEoMflkKU/njHK8gw==","signatures":[{"sig":"MEYCIQDp011mM2xTdIUC95DFXMfzzxA+dOm+aaHLV2Qaix1WggIhANo2NuPdyhrIJP8qb9Pc8gucD8/odi3CfWdIsbN3k7Ar","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtxLCRA9TVsSAnZWagAAL7cQAILSzuttzDey2D5xra5C\nRrAOl5oMZplrcBaH60/obIQdFYGTB7fKUr1ccKH765czGphFghmLTzYA4Zis\nSMKyKDYLfOaUCjrhFFl5IwgHjrRJxTD45GA0+pRq1bgcvkqLyUdcuNt19U1Q\n9AwGWFSEPhdreGFKK+l/O3ebsaJnzuXhYcQfZqEI+qKk22js1MCaayrGNVUd\n8BDn8l766Bz3UKPztZ3j+yLgeGxff+TGnViyULY93AV6OR8SdeGlWrTOl+qW\nvtedxA/NB9mxlfQiCWuUNXLbYY6YHVP6iyvvLZm7AWWiWatypvpBcASC6p2O\nvHcBli6US7giztstxKDFdYD5tDoP5hAzV5pGl73Af4DGx81wFg/cdIBQUmZF\nU5/KqwNFsmExt85sklOBqd+9yRsZqksIDGCdWUITxPTB1jysmYUJ/wVqVW+r\n0p7OLIAddWtP6IKupj5SSKkqJ0B8mxoR7It9sDuuLuahYznE+GQv1jNPA8O1\neu4cgI6dKpgSlpLRAleL1NZF0WvyQ3YNxmNjVr93kGxTkrtI8Reg1/cRPqPw\n+cXa+vB/0QNusMw/bTzI2L4F/QAhquk7i9rfearFHjxG6ijeayJvRhKqMvTm\nP82HQqWJmuCUvJdhClLgIsIePiOWZTF6CWEhWRzcX8+0jXBaLOO5E1owTtYf\nBxYK\r\n=4Uw3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.0.1","@material/base":"^1.0.0","@material/elevation":"^1.0.0","@material/tab-scroller":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.0.1_1552342090972_0.5112092077447794","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/tab-bar","version":"1.1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd278ee26d8a3d4bab151e187c694cf2810bc3d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.1.0.tgz","fileCount":31,"integrity":"sha512-uhtIRiyOvBVMZ5Wf6QctPfI/amXfWR9sXjHpYj+So6GPRNgmeQFkRJ1yyxU3KthBoyzfLvj57sgWEsBlSkiJzw==","signatures":[{"sig":"MEUCIQDUgI4+ieM4JtaBfeSgsxngrZZmXGscL4cHGQUZ2UoPVAIgJtRAekvYkFGHAET+4AJt+AE1Twnmuq8GDoaMFRuctyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzuCRA9TVsSAnZWagAADU0QAIdIdc9iAIsB+zgp73yt\nvqqs6Z4VtaEomZZYXH6eyuF0M2/Il6i03lPO8waCxFhK9u3B2W6j1N/3ZG96\nKY5uxYzAAxV0ZdDsNQHSWFbv874JnATxZ0CB9FujePmXMxD93hgmb2fQw2aX\nBDHR4WKON4c4FADDnutF+FRrx5tX3hL7A8PVs6ZaNQ0lRyucAzOzgQmgm8Sc\nTJRuBpxsecrIcgAL7gQEh7KiabDbyquPkNKav8pYcmhj+ivUGgANtPL6tn3o\nVXutmCw7P+yNnVBk4/2Vl4xV7c4/qXYbjuNdeJ1HC/6ZqSCuI+CM+7UeZtRN\n7KxjVwb27XBhdicYz8CZnCMEt4MwigFW4Pz6HvC+Ymyx890Nih60YhrTXlMP\nzIhYsWxszoxKJRIl0VcghcYIkVW09O+iJRBzTiAB+/s43HGW6Cqfo18wkm8g\npaoj8c/v2V3K+Fbx/9Y5aVPBkngbyXHDsBZfecj5A9sTsj4NXCvuTb5Hogpu\nCU8eUEgKSl0/lu9pm9PITZ0jOguEkfNFvTsLbXynkhkqf46zDZ5VwmDS6mfO\nBB77Spa9v7mNGTYpK0LWhZTPldH6NEisChH0Fh8lxrT4g63/XijCe8QjhRGn\nhI2bDgRou0ra2pQGJINj7JMXTQID2LvKkCOAZCWApm23d8x8Kqjsm/zTOYrP\nLwze\r\n=Ttuh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.1.0","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.1.0_1553628397902_0.8387527996612489","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/tab-bar","version":"1.1.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@1.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0f17fafd2e97b04d1a3dd7a3ad3861624d193b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.1.1.tgz","fileCount":31,"integrity":"sha512-BwMcZlaQmlN919jugVl4AOnt/sQYfv42/TRT2EFbFQGfFUN+8C0kwWL8m5TDhZkQ5S6IR5oPLX7kqC0NDYqW+Q==","signatures":[{"sig":"MEUCIECn4j5rZYLrc/m4tjs+pVKdAvZ3kUAgaj8kWrvh28+mAiEAhaQU3/OTrgGftMACN1JWA50qW2B22iNicXYpHj7959o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uaCRA9TVsSAnZWagAAnAQQAIZasvw2mFs68AXBgq5l\n9hf3t3R+qvx2YtagFrq8alT9n4BXhFigRWCFy/VPG01Si6uU2HPnasiFi9X8\nZBtaZneKeTh+rXidpFkF60Gh/vexgGMX651/iF5OCWYGiCPpX8hZ2uW5z7h7\n6NkIAno+8cTRpWrZ/0zBtcsrGcfbzqDV8LRvgRYszaUNke1qzj5NisivGXKY\nQat9+0o7o/zBnqjYqj2OAwFsfjCR1ajIBFZcEdSgK+TAfgh1zNpmQkGBmNHY\noLO9Ub8wHkvH63G7jB3yZuNEIdSM7RSQgiFp6Q4b6WDBtDEozP6z2rM8GmUU\nL3vR18ZplpKJVVLg8uZ0z8eoQdOyilhqGWdFoWZrgQLwW9ySvd9lKklEf1/C\nR3uUYAQuscNvIY6ZO98E8MC1XIUfpfLwd4TFtOULVhQLqW89Np+0zddyaHFj\noLePInGTNx/FO0OwP4xeRsqqYNITDzDUNftTpkOHTXbKX1Y4/qgHaYsVnkiT\nx9MdDNooZzfXMVfetT0Pr+aIFw08mE5AKY66ua7R64nfwXYnnbAXlVhirKZD\nQ4l/TIJWPkoh0uakbSqVVPb5N92/vSx3XvgMjXp9Nb1J8ZPbqTVdWQbVabNI\nbHwv4JnyTDiDGsdIb8A9Wgd6qQAk9apmo+DiOHHdQIL4UUEtajv19xbzD0E3\n/s+5\r\n=FYr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.1.1","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.1.1_1554754457981_0.46345689186091743","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/tab-bar","version":"2.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c05ee12cff3dec8b03334f6619925f53415a949","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-2.0.0.tgz","fileCount":31,"integrity":"sha512-xNLK3ZzpfhuP3HLYaSg3ROdKGFMyxWEGHK8TBPVnwfaBHWCaauwa15VElPhouBALJlcXKiY01mlvAqWw6hjn8A==","signatures":[{"sig":"MEQCIGbkUojvdTkBOMlcJOGa041w7oYyOHQ/IX+JhUSX0lGPAiAcIOLL4Dz3c9OBuXI6uDZpBdsKaRs8OlnyNryi2pWNKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcTCRA9TVsSAnZWagAAc14QAKUP3MTk/cE4758UQUKQ\n4/iTO13n90qaCNSYXGjVIjAqEP2Uz3dZ/JNWHJ++6M9hlSdLMDTtyXHtmA9S\nHL4iEW/imfCs5uxjxYWxzl4D7L+zfcW/KKY53Yp23/g9pHtw7oK3rNsPP1HU\nfZMzKxMJVLvk0HYKCa85pxSnmOfkyFPfpUXEVD7N++HRs4fYQqF5Cu/VsMTH\nox6T6jTxttiy6fFCP0PSAraVknyNbZSa42LOT9EYu7QWsZGBf655nzOLbal6\n9XT7DmGlXuK7iZ5+KL3gBzUyfkjrQaJMWDzsEQ1lwVazlS6pnZ8OInn70L/u\nkwkSaIy1fN91jtnWUqHza5Bcr+A8FZLfILzQFxX14RqcDtrIMzDPaxp1hQYW\ntpfaue2g9YeqcMRJxomIRV+GoCEd5OH++lYIA5O13h7poOB4sPaAZR7Oki5d\nWM4siqy0olHCu1Fxzk13IAZlL8+ri++eX9VtO1gKP5LtiIuv/inMCG1RKJUO\n2vJqn+KCQFlFOEds+Ijh+Or3focMelyXSc2UGNXrzJJlTxsfZMNg8YbiBTvz\nC+ev319MezN+co7B4oakGRt7FA/sYjsPlNwpzxDL2m3MaWtG/ndb4/+5KhPg\nonpX2PqLi8AukD/X0XCD2Jz1D6UahsOu0c+X+/qui4ZJfEpUrV4je09k3qEW\nJf8n\r\n=Ip9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^2.0.0","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_2.0.0_1556559635015_0.11196173781896901","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@material/tab-bar","version":"2.1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@2.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d9f6d9e003dc4877e94cb6076c253e245230e56","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-2.1.0.tgz","fileCount":31,"integrity":"sha512-UG31YVLJWZJKRi9vk0+YuyyFQz52jEl1uy3fy1a6qUZzw4AFgtc+oO0xbVwfw/6QLBmAl/3q0QIfUw4c37IAPA==","signatures":[{"sig":"MEYCIQCO7LrEqi3HehUKVMBEdL/1ejE0Hz4yf0jhk1zhSEIhxAIhAKhf8NPf/vG1Gvg6cobbjvqUOK4qzATiPbPHlm12u/Aw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0FPpCRA9TVsSAnZWagAArAcQAIqjsKttbXpbiQyXAAaz\nLSWqCahXnDkpUC4wvgeYzu3CUzsIHSgL/vrtuphZVQIQFM64uWO5dRsKYT0W\nvLwZ3dm+/sFmLoOdd6YBq6OlGSGf2DT6PM97g9TDoQKuqj/BJNDSM7EA/BQw\n4amFGPaqzOee1bQyXxukTRgqSvo88Iofwcp+0FoxQHN512FGmkelTA2+iJyr\n9piwlHTF1pqIhsG2o9k7tfZ6iFpfliZKfgsekHWe6WTwUl6sn63264gMGDmL\npoYJlgHCX+pq5flNBsXSy7hFDtLfG1o/sYqemQC72rD/z2kYy1ZeIM9vbNhH\n9hCsKRiPZvizNwAywZpM2D7mnKYpP9uMxF1N/ohktVum0RNf2Z2o8x+hKZGW\nHi+rm6I97B18wbqFcpTsadME5WfP2q0sLWjg/bmWXuZJUHyUS6rUPHTerTeI\n2kQcDriPTaCW+8TeTitmBcLdqR402CGD3YmbNapSWotbRVMBP+CvyRMVSmBM\n6qgIgQYeK4BOytNbRCgNPdLT1BO/dGAGCzNbq+J3rpt8VNXaasz3//bj2c0c\nL9j88HOPO7i24XoKEJxMwXOLcSLBQO1qIgTFoWwj8na95EKOsP965+HHdHtg\nJUAOaUCFW6KRFDJMRIklpnEeDgFWXt6T2rNAkujAAUpbiq540CEB8Ag5lgzl\njKmZ\r\n=t8JD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^2.1.0","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_2.1.0_1557156841029_0.8019796671026804","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/tab-bar","version":"2.1.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8388eb12ab357cef5a441ad5900d3ffdb5b2162","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-2.1.1.tgz","fileCount":31,"integrity":"sha512-/Tr/q2DJAs6P1h3fKrBSBR1R5CkY2JiGyRHaAImCDVfSg4Pb43inHaCmAegkahA1+5QlAn+Dc0QZy8zfTW4+7g==","signatures":[{"sig":"MEUCIQCVjJ5vTQUHMlpmcXnyw4kWX0wURfvNGocl4Yfm4XXMlAIgZ3hcweXQhACgN49xxnP8WyWBJCasULsvJHvPtsVK9Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQdCRA9TVsSAnZWagAAOWkP/2H1BAWYlo3FhYDMEMBR\n7OhssVW7nrH8S234WXR7F7ChIlaPp+MEDkLfeZUqQNB9jXdCnQdPH7qFzUlm\nxV1QtmLjgWL7tqOj66o7QX0COOcXZbsMDxYfIeZMtQwTlYpMsqtpGjgXX1by\n9aIwUJvOMylLlT3nnwvEQJHzGqTYqNSGeREyxv+W0ULE+GBKZ4ueNTJBnrHH\nmvNQkfKvOXhQvkU5HSs3eIRU5pshqqJj07PomucW+U7kUSuO8amTtZrbRG61\n/Rcqqhw/xrEu80LaIiNShriCFQKv1NiNkbPCK9OB6VbQVRBqYtYpqmIVxUW5\nPTBr2xxtwaoJJNK9Khg0/bEIq9Q/p8j06hVOTTu87HkHjyZomv/TmW6BuRYW\nNwboD1lh7Z1pYPIHue1V1DVO1F1EvgVsx6xtwc61xac5f5q9EaYUR80Xqirg\n9k9f3AKWwRmigmVL2cwbupStpnRdERpbuD/BMpnjmXGMOJb4eL5g/fLBh0gP\n+CK2B2xTdl7un5jbMYGTal7vgM1KJMi3KuxhrizFKwn8vozCNDnVeIzjU+w7\n2gZ4w2141MOlX9dllDblae5dq5OycPkuZKwW69YSaynOyG4bC64A1agmM69H\npibYNSW4gBM+uOd/qO7oW+ZduLZ6KaPreMS7g4f8dXNguji/blJUhieSv5/r\n67nf\r\n=VeyU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^2.1.1","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_2.1.1_1557509148798_0.3115442390914467","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@material/tab-bar","version":"2.2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@2.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee19d2f458bd07bdac1a960fa7c787b711babdb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-2.2.0.tgz","fileCount":31,"integrity":"sha512-XIkAa66afgWIGSb7kSDd0iOyOzOhsERfgXBp4vGhRtm4n9hhIvk76XT2xAJqKqomM6Mt2go8ACPsndrB2ejoNg==","signatures":[{"sig":"MEUCIQDDEjS5QhFWYbO5Vz95sadRKeKPxmQBfUg0Dlz72FnJlAIgDgU2MztdxGSXuwgDCjsF0vNzoGtJ4u5mX4s7HNk/jRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2ez1CRA9TVsSAnZWagAAm6oP/1vGLSlHtTeM1Ur1E1xA\nO2oZsaFkhKNThRxC4HNFXmjVXfIAfgQH04/RQJh4fB9M7E/yVSaElz0/BH9c\neTc6Do/lRPS8HbXhUcyfCV5PxFz2F8pFNpNBwAgEiM51i9RcBAxkvZfIpgkR\n0PvGBZCBDR0bLDavanaCP0NIQGcsz/tfJRGYmN6jMYyiLMSFPk2vVHlIjGKJ\ncFofY2qT97VzslKS/gj4uqS7kLdMMS7dE2s1zckWs+k1FkPBSTPWHxgLrGBf\nx+wYjC7fpxw2+PMr1NxTyrXbn+A0A0D7Zhl8txHJEdCZagpVTqlR3AGIyBWx\nl4+LLDDXbrAZdrIBuAL3dkfGi17z3gm+wt6cvMMKIcYGWOd5wj/T9nS1oMtm\npcQ8ku4mrz1akYt26FhacJ8lVWzLFQV6MgzmHJIapyt0mrabL/oWUEgT56fR\nBV1//2e1EU/y3EmEJ8PaKYpTU2fJSayWQkN8ftmXvFP/rMs3Ocdwj6dEFev8\n8Q36aKvtLpqm/nmoUjnmRLy9g8dU9UJon9qgJ+NxvkkREKpb1YxZP4uUdPEX\ndSYUV66Sbp0L7ELhkWmS3vH2QDcP2ZWQib7MERnL9QwoJc/tQmZRT8OPQzXQ\nNH+TsX2XSFQAU/pfa0rS0Jb8kmV84bZA/TSRZQSOk7YT3z/Bmk+yKn+hu/ho\nWpwe\r\n=43tm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^2.2.0","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_2.2.0_1557785845197_0.7711622761829076","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/tab-bar","version":"2.3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2d7b714cdec4ed766a4b1b7f3a871e19a4d47a1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-2.3.0.tgz","fileCount":31,"integrity":"sha512-p+uDZrhwolnwsaY42kehEc8mbe5ekzjlZEsoCAJCN9AL8VnbsRSS/qePFllhz7roUGrH6AYmYYoHNw1Qx2XT+Q==","signatures":[{"sig":"MEUCIAaxWuKz9CXV+plGbrufVsnfg8rI2cGKwDhHdAYWCe7gAiEAylvm+TmcEvXH1S9muPax5GoYHFjDiv0JhND84YJ1Yuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1035746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7acICRA9TVsSAnZWagAAYf0QAJOipSQfDXiVkc/0oiyM\npoaNdiRTU8RPPntDSwPNGelvnRP6xjiv+8eddz9rqDDIVFobhqfoZ0GBnTuu\ngIr3ggiunQg7wF8pw4SOLNyprMSQQwM2egwKLtasMvoa4ARpEG8SXTOAOunJ\nYs/xz7dXaYkEKZGvbv5SmU/AsGzPNiSg3ivAhaPih4yh/eb6ruPyukAfj8dI\nlwTVw0Znr5pt+4vM1N54PE0qK1T5ZUMOz0yCvKxM2+xzT4PVuYUgknxc7Oep\nZNWRU1v8dydLBRLAmlgkXcrkr90ce6MXqu1XH+K3/Xte87MTAIEibyfr2e1K\nBP7RP5tryWqLYOpPjJgMV9/llFuGRRtp6hd4x6e0jfY2yFA6yXspsRPNf5Wf\nm+r4caU88hNykJDT2GBly3JmM418jewqFgfhZeajarQf0H5yc0Awig+dy+Ig\nRCOH7UJeyc+PRx0rpCH83EgHM024B2Fv08g5FxJ0DDGxqKJH3B09auFLvTWF\nfY7s1MTJC6w4+YVt+3pmahhnR9eH/KEqhvwec+7hzh2yoGt03Yvsbe0GItwQ\nzrbZuUV+AkYuBwpYBdkxf4O2RkBY4NrBrCrkz+SqkCl2mQkGOiJITVcXSN1R\nwUeWXqqABtggHpO6GVAn0goGSlDiPAkB/cqfEISi4g+sBVlZRWOdTSIZAsVE\n697C\r\n=RmDr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^2.3.0","@material/base":"^1.0.0","@material/elevation":"^1.1.0","@material/tab-scroller":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_2.3.0_1559078663931_0.4286734517878241","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/tab-bar","version":"3.0.0-alpha.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a980753afa8bf3ef151dd055641b596d946e5b66","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.0.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-Cmt1qixGIO5vXjgmtyaRAvJmRhOyKhNj2jlnVJzdc1vytPTAIgCo5S2IwxNLAcwbDnkqsjO1C6VgoGneoIxewA==","signatures":[{"sig":"MEQCIFE3X7eBJaXhiIMoIWNPuOEgUGNixZmVETsm8nJgjq33AiAgxSc7aUXQfNXEO3u3/jUCzAE5Uw7wk9RXFUlbGW0sJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1036913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHp6CRA9TVsSAnZWagAAui8P/iF9r9HkIzpWdpx6VZNd\nnPoyxS/z7xvhgCXcnk5RdzzSIRrv8Abifg42jgRzR619fnDZzPFhhWIPlxE1\nLNJSxgpnetsPABXGid0rR+Wh/ZYrCid/q7OzzQSYtewhw00UQOVIuLZVMA3C\n6564wNNLCxHLNX6CojTDY7zhcOGZYzTbJHCuEbAFc82Fy2RG+244d2kIiPqU\n7t2LxJDS72q8vwPCyfVleIcjRLiIybV5Pn3kmRtj9vAHjk4h1L8zlOPznaz0\npNW7v/UtgZtNoCgV6Mm1/g2x7i/xG1bffPv7VJexmvTTUUBGWS/V6VZG30KB\nbaso6qIKfviKu2ZlZXEH2/H6XADn9uuQAWm9U2yYC6vQVPhlR/FuVgAVi3mC\nBxYmG9nM9/IiHIOMqSjtxj6PjFgXPUrVJx6XIoiP51pqB5YXp0czSvAcIUZp\nDl6josu2jUgtBxlNgtgXpuJtwu9q8IQ6ylvgSgjyMAcdNexaMDrkmH5j1hPL\nyse27Hqv8EeoNc87IIFfphEKPgXuAMFeEpZsj9TQNDByHQ1OQBMTgVBvybaO\n1gpCr1IRnbesxr9Ui35qxeEaNACdcwlmESbZkLf8gK5Mgq2tjFMdLb49iJku\n8IdNrKTpE9M9a6J34DBTFOaHAngtFcnY6WvIOrRtZ5J/+apEg02t0jth7y4X\ncm70\r\n=h5Sx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.0.0-alpha.0","@material/base":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/tab-scroller":"^3.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.0.0-alpha.0_1560312441378_0.3381643379265904","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/tab-bar","version":"3.0.0-alpha.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bff4ee3c2d010262e79c0cf162bcfb6c0d39b2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.0.0-alpha.1.tgz","fileCount":32,"integrity":"sha512-4i1AS73BdDfzigCUj7esdWNrt6jIb9nSPp+tOykeQRrYmP1ujQ1xfrSVtqjt97kH6V/NoniU3z6PsK3QQQ9b3g==","signatures":[{"sig":"MEQCIAtXBRFdRTKTHytX3FdHQ2f32/m34YYxCQlUHZuQ8fyiAiB//bCmbbi4OIN+vqDZY4LcTOdJJPUb/bwZ8POXq35+Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1036912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxTCRA9TVsSAnZWagAAO/sP/RzgDD9OhZ1fBt6v8StV\nOUf6V1unqMkmpBZsuzaMOYekVQICXpURbLLgZ+dM0u/WBINtQhzy5Z+Hv2TW\np4iEC3oNuSQtaKAHaidzGOka3C4HyFgBxdQTuHKwQ/TfzSlHpklyBfTwCfU8\nnubOcVa6z++hSdyH9FiV2KLohz80Cfgaq+08Lyck9n6yiUqxU2Y3eoFRwPSD\nXGnew3o7e8FcqDkOkpAYkt35ncjZdmTqXROM8DdN17zo7d24ccWWeTl2HnZK\nGAqYGptmiJ9c1+J6Z8GGukDE0S0guc47L1ofKZ0OVh6LebADfxO1OK+a2mNo\nby+5L6r9knvsaDGsxahYs/KsGZgGNYZ7M9PpwRxyJPGJoJQRw1EtCGSQ/xuq\n1EzJO5EPLZxHzMqryRpH44PffsJpT/mV/B1zcT6s2Yp3j6sevdj3RRgUAuW9\nzPF/I4r6FrubLLucGcAmmX9VrdsyhtoMYpdG/AmmSDDN0X3IIrefKnarp4DV\nEdGJER486h2jBtYdiResviW6G0riY/w9X+Cf3N2Pl19C95VODNmh9CAaaIvu\nvq5OPwp5hHlFLLQypIglmU2v6tg06USzBqo2Gamx6yePZ42hbQI7JHfLsGmG\nHGh48GQUtGLSwsCMxH03zVobb9RCP3cwqsef5SD/7UdOWwn+TOB1FM5Aek1j\nYP4h\r\n=67ji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.0.0-alpha.1","@material/base":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/tab-scroller":"^3.0.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.0.0-alpha.1_1560366162724_0.24120235414826108","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/tab-bar","version":"3.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa5194c43d1824f79a38e6f0a81b37c4060b521","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.0.0.tgz","fileCount":33,"integrity":"sha512-iJcFTXmxkQHJ8fHL2nmg5aabs2G2rN8JrXHK0noaoaV0MJtWoMVEHeUWKr87I63ybCXJ32wjjYJrwFGYero1Dw==","signatures":[{"sig":"MEUCIHEtTZVbrEX+tuDKOnJRDRQZN2pYinJ2XMiO+9VJSo7IAiEA4DGDkwzYYQCD7Z6dIQsQJHEDzebyST9n5PRYFOoqrEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1044559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/8CRA9TVsSAnZWagAAbIcP/R68FXDJInJ/C7duJ5Cy\nQEY72aVpHvln6ct1ery3Nz/aP1yyDJhyUieWC6V0THhpjmHSooJTCgVcyAiK\nyo9JtmeRecOxkbTiwmjPCgVls4kA9cYCLZVScPucXF6bIx62CT/HoRl8pDXH\nUqpLU50/Jjm49pOpaDvCLecK9XBV6mgL09EXWEMJPx+idlH+S/tgE5kHBuRj\naFMi7/NrpmJq753A8d63vxWEkK0Og7tZMOi0iWannHeawOgE0I0oCpC4af0b\n8lOZgbOlSGh6GZ8vTSlwFc29kmb7/XlA2BV10E/oD5ucUzQNFdf41MvmSr86\n6dCCC19dktJ6QZ9ai8RJN34NCVPVNsElPcMJpOn+4g+BcH6xVJGYNgY9cbBa\n4/Qti1w7Fbyu6Yb/MB/c9I8bpuYpHgu+lr9Wb6kH8opMHjigDTCDrYwcl1H0\nTyUAVoZOoKuGJGNeIW52Uco6jyhAZ98ZoBj49tZu/rPLQvMeuTIVhdgvgkb3\nB6wqP3ErTQB9oy8ghJAgza7hD495msPKbuFgLDmfiJffFqrwJ1NLlDHYarM4\nj0PwBEzpDXDLXnZkqz9nWzR0egVuhIB4sdqsj74LhsoXFn0y5k776NkQChlP\nLWPtohIR214hg0rYJuOPpqIbsHEDIbcmg/tpjuUw39jzcIII0OAqMJijZ1PU\nWjCL\r\n=YvTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.0.0","@material/base":"^3.0.0","@material/elevation":"^3.0.0","@material/tab-scroller":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.0.0_1561501691921_0.6193214916815448","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/tab-bar","version":"3.1.0-alpha.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3706257e3bbbf60909fa5273d2361c949e031742","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.1.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-KkSeqSZiyv2N+akXIk0zZorgcrcysb7cuRQFjSq749unZrXqEnQCpnrThWpOX/OrcnQRTlx+0LuD+4jaRnbxhQ==","signatures":[{"sig":"MEUCIQDjFeXY/cNrKVbHhoK761MaHEa/X7bXJIRlEhXCplObpQIgEN64iOgAu1zcHFNN8hyyWWhM+ZhAfbA9N1XdkNjV4bU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdFGCRA9TVsSAnZWagAAZPgQAI3xopTzOx90QC6wiHYw\n3hvX7QrBn/qEb2s3/QlAtNUgtAlXL5zeU8E6tne/dRUfcCVJRWb9sVhfi4Yd\npaYRx7AtOU5pt72dvDyq+FBs5a+CFdzhj0viFOFJBmjXnjk3T8zla6lohxhZ\nRehhU0ZDSFsCTimeKR5xNXuvkKLmc/Lp3FqkfCm4uEjuH/4k6z7Xi0oIgTkH\nRckHb/qrpSTh5pq2KVUATnJXwmfnSBp0601cN8nd7zY40Ng+/pU5jzI1ymLS\ngOyQoQdhOuWcnB4er0Vw3opgvzKB106upDw236+OMmw3VSxayKqwpzFXlO24\nksIYkiaeQCTS5Nf4Dga9QJVu1lA0sigNEqUextqA5l6xp9i9y8LszKFPaNXq\nYZ/9J4lUqlDVuovM6jFN6dJHQ6yt/XYZK+eWFWyqlgc1yZlT5qww/Wz9IDVz\ntqeXR8Ami2Jep8kzov+nwgN+FoFJuNxZB9OIUhUssR4jzRMHyj6/Tt5oN6sD\nVrUJTFNOspI52DkpyTkb7lQcUnSa+0UvDnqsUU5/gRfjD2YXI3NuPmOXEAhF\nIbOwiMm+L/rTICeP/2aO6Gx447eC5i9IwCNNM0Tzswtew81HmuA2Eq1rdbqC\nVMPxQpZjRisi50Vccvzn88yej4eCtMxWLbVpzqLuXQeeSTrGznYujUsaV2mY\nAHLi\r\n=6G/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.1.0-alpha.0","@material/base":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/tab-scroller":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.1.0-alpha.0_1563283781832_0.5989107456861511","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/tab-bar","version":"3.1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07a30103160f54928831f85c6a20b2d657407725","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.1.0.tgz","fileCount":32,"integrity":"sha512-ixfvNtSHlNKJ51M4BWvdsvpu2NKdOZTG6+9p77GdHQf0AUiRSWErWcG5yDPVLc7vkfcoszpJs1bgu01nVacQ3A==","signatures":[{"sig":"MEYCIQDVgolJZMMJHaY2F3HXC9DpEKY1yWA9tu5aUdqHp9PGiQIhAOCjLQFVGGjsHMnl4DT9kAT13PN5gNMGH6IyKP678VS5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKbCRA9TVsSAnZWagAAAosP/jvtB7jWjreqU5Yz9HnK\ncE+VCguHw+Y9/bq0pwVWcJDllhPnHKzpX+Znv/NASjovxXuIbC9CGRQf21uG\nVsbyU/FNo+0CsIvLR0sDNFIrB8AqtKH/UU2pwJx5u+3l8qivJ8MwcpwWfdWY\nvmLxYfWda717IFUJdS7AL1Scxetdg4sNDaLAlt/ZU3LZz3riqmWIN8L9IPVD\nUWE9zbxIDoE5+HKpm2/lzqmiWcFFl1CCWP8U9+gvefTyhdQHexTzKnvcPcdY\n3GjUkA5pAKL+J8MV2cc3H9l85GeE1Ot4vF4fQTQwWbg9mSGMOrn5nhkX4NrR\nT6pUOr1udPtegV1gHASPRdHyG+UqDGBzh2cAOGsYkwOqPmWsO1l+2eosbg6r\n6KGJerkZlRS3nQrwca/dRHD7bMZJSarNdbzsgiQ3lotdB/WTKedONU7EgFKw\numqWZpD7bjsME+IpVkZPXR8unbBIPdMvnEOLsQp/KvCmKkZ9a8UbeD/G5OO0\nPvodB0yZmGmzDrAjtjmn/DmgLu1IKURa7RMt8IxCtbc9ZClVwczB+Ex5FsRP\n2y1mzQC/R3u9BLNewzFvdAQVZrXgH6STJsbxMtmK017Ie2mmTyzTawC0pX4s\nOtQX1VXLVTIpSZPhP9cOyMmVUbjLtVTp4niMq0mOlfDOEIYKBn/zzYaMhZ9i\nVmHy\r\n=OTHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.1.0","@material/base":"^3.1.0","@material/elevation":"^3.1.0","@material/tab-scroller":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.1.0_1563832986361_0.17848147864272246","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/tab-bar","version":"4.0.0-alpha.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46511ea6975dbedefc728cd786abd3e116a2f6cf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-GrjaeO5ec3imsA1U4EbCyXdUftRpDqnJ5RzzLZK7ay8/35YXWt5z+fbU/J1usvRZQDIZyDJger+mJ/QsVIBNYg==","signatures":[{"sig":"MEYCIQCittolofqKSkYdy5RWhRnExdnU7P5bIiC7gTvpiCcfywIhAJlSdJgQCx0NZjfKbkDyY58WdkKg5viruApzFVJCPCZ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4yCRA9TVsSAnZWagAAQ9cQAId2IHUdOOH8ik8uqIYv\nuoDcdx+EN1HeVcUJCcVqUkwTb0B+AgAJlW0cotAxCRDiXXI7qUpIOklRdIXV\ncr2LfomN4ixcW30W6oyehNTvN4O8wGouOEkdtmI3mu/aPNiLd3UwcwBfUkH+\nxVYH0aFX0IO3CkAWmTaAkAT8A5kXSgycxdFkRrjXeFnqjuIoEY4rbgoxcRA8\n0vJrwSdEYsljKZc9ZLgpDEt+ODxHYF/GuAHgzeJ+y9XzLN92QGKw4lIiufkx\nDgwUjHVKkPqPQSdigwWw5jiufUOxtp1cnFv5iNkZmWavE9fCG1V1UqdItIHf\nXI1cHEZnhyGSSzRKxSYrIz0lZVX4CQhxqq+UDZYI4FJAx6wD0YY9gw1Ax0eh\nhKQFSHwUGM43cJ291jrzckJzNt+L4jtQfRoe47QIXEjaqEttg5URzRUw1dyb\nQ1QDxgSvb9qF7rgW4a/4ZOPJ4JllMmCiULzc47TZoRI68O1+Yr1+RjqMYh62\n7l3d+nvg5x0bdXEpRSez7trnFHIBFBad+b6Frf5DyTRPvHMzY4n2fT8XFkDz\n6gFDPQFH2FgKf8Kt7P6a3StWEgdRoXBd33ghHOO7x0jjcEC+XZaaOR+0RDv0\ne5reoCAlpngRH5733TG2wAiSZtb/2bMS/MNmpXY0mo2uAD8yst9I94E0fpHH\nhz30\r\n=kZmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/tab-scroller":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-alpha.0_1565212209973_0.4863092623241554","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/tab-bar","version":"4.0.0-canary.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9452566dd846751fb38423d6f621292c0c32a00b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.0.tgz","fileCount":32,"integrity":"sha512-cpl9FBc6RALb9hcAvL5icHyOlnzbl2K0pGNzRWz3B/kWOwJfNZkn/6uOK589EtrYqOH3BHWsMg2oQk1EzI4L9A==","signatures":[{"sig":"MEUCIEA+Ylcaz0vNu4X4uJ0gERirrZhFovXq48bGJMVPJZbKAiEAjr7zHiWhOkizA8XMD/eQAaQTlkJmiTCw0FVTZf6sNKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJE+CRA9TVsSAnZWagAAES4P/j8/U10g/tO1F+D/iRQq\nb6ooqy0jzMFTGCqr1swudL2Dp46VOzDO0UTNsfG8NqR3gY68ZL20Vy/5ZG1n\nLN74BRpTGdHgSUP5I0Fql1zPpxU/pSsqGNdPLMh3bYVVv16A52nP2lYC0IO/\nsXPAHXkDLEswFRLRK0CkHYev7H8FbD4k/T6J/Fu35kAlpa9OrbPAD2XaSIDp\nPAasXZAtVlCQYlz3Yzz1H9N+kxuhTBQyqVfzi7rHT9Iqr5WXheG3yt47o5XC\nQuKvDAK6vMcjWxlpOTbVOJ5Ki9MGPN0f2t4PnAb1mJuDV1TVVk9uwEZ1+oUT\nf/zFZzPk0i/mqAk+qj5c2jBQoxhnh7dSEPk5sM2t4/3hXv0pXiwwqsYzACbh\nG/EjMGix8O3qUZJ2Y9pdcgwJdiZgROin9hie9JuSwTXI3sWYCzpLUZMNIQgy\nm+oyR0SfCqEU09teeSA+yOMvv0N0tzxrqia4B9WeZIu/bpMDOWv138InFhS3\nZSxzjULZ7xT6w5HWVhurBv7FkMU+oBX+/BUBZgTXez78+k7momrOKP3X8Vtz\n+Iub0JvBVzzfog0hhL7m6fmmNa0xSb18hr46rW9yHoNZ+DERGkuDUidCD+16\n6Ww/3TzVFJghdVR0p3AzQQ1WpChspQl1VfdQNym8nLsb4+nhR9+mirluLv4g\nhyK9\r\n=y583\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/tab-scroller":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.0_1567658302410_0.29217733900888043","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/tab-bar","version":"4.0.0-canary.1","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e703dd73d8e34d736260ac0e90ba27bb1a4adbd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.1.tgz","fileCount":32,"integrity":"sha512-6ta7+0pfm0CNHSdyAuEhd1BL9umFYw3SLSopPO3nfbQSHGubQBTjeVtzfKmJju0fooKe4CuIvCh1gAZnkA7Crg==","signatures":[{"sig":"MEUCIBUZVrVNrZtTFPt3n/FnqWEw1fB+Ju3zKH/0r+em9vYDAiEAkewLidxgKrBBiuZo3GB9GFhEoGClV40GuZMkmuKiUP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQ7CRA9TVsSAnZWagAApw4QAJ9kRURJNoMx3886/CnF\n6Xwk0HskSIxhLep6AfnBYWyLoWVdHVD+/IC5caEQAXhbeSFdBAOqVQcmAhz0\neqAYX+4+2lX0XMBSBXJJU1tfH0XjjpVGmr7PhdJMhqOQdnJHSpZI/86Wx9d4\nT3H9AOmKoxyE6XvLPv6vgYfE82uRF7vTIcl4UUgjSBFjPsNG23FkCCIWZCe/\nfhcxKn1FDhYwVCViuN15QI8KBt0nz+vkT4HBXbwdBG2A6X2kGeqJxwQo8t/r\nu+Z45SXiKDM7SFrzv2ZlyjfDQvxEY6nrPG6zwYUZeTXzb+rRB1HPL0nDuGYk\nXWsnNmyXr2Qhr0g1kttKYx4EISOdqT8UTi5Un1WoMiZwODpSozO5fvs8r5Fs\n9K/ZR62JxctP/mlURdHvpWyDjewjHGtDCrf4PMvbGyE6jKxE2jYKDCHSUDzK\n/8IY4o+hRYWMpmejsrD02G5A7pN9f4GNSKPKLmRjlABNmNA5tlj3yZcC0vXB\nLYKOu+DVaaR+pP1hy8RR/l0Vup+PuojfEKEy9isly9XDUtTn5A79vOG1d0xz\ndpSNQjmJxPb1MiUFRbDJGY8w1q6U6hbxtkp2p/n54yMcv4621t7Jhq+tw8fT\nBZhPj1gExyw0EhMI44AGjbwDovDAmH9sxIzdhtbVBFdjG9QGAhyTCmx9Z/Yj\nzF3o\r\n=VAls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/tab-scroller":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.1_1568060474691_0.6096729542348003","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/tab-bar","version":"3.2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4909bffff6b1be591269a4ddf88efd8227725b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.2.0.tgz","fileCount":32,"integrity":"sha512-PMSGLhuDm0iE4BQb9DovgKJD9EoKowQhKwXQBt/+5rlSaRshV8X0Gd1YlKgFVX7EAGK2Dfz5u60TFq00gMemXg==","signatures":[{"sig":"MEQCIERVtn4wFOjh1v7vuM+zwIMzxqJhYhd+0wtxHquDUTNoAiBTmX4C5Y0v6Vz9Fygb18VNVuJ39hxM2pogRmAqIkrQ/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder58CRA9TVsSAnZWagAAfUoQAIxhs6PQZ1njr/tzTfhL\nbQ6+trsgOsYcfOULhqcK3XB6bMIMkuy47tc4ynvnq571zjq55P0zWSz7FY1P\nBU4QkTqdtttHxSWcWG65a65nzcwo7awUGXPhgLl8hXFyhS3mu9LScOzsvM9s\nUxNBt40MbXzmhRmwwiw21V6tEbRjaCUSCjHpaMCrQHdy4rn7Xgw3CxO9npWO\nJSpSwAOKMrnv9p2aC7dIoZlIeZFJo1tc8H6Cy6dxqHqC72liCOEpEgzG2rxe\nEF/L3tCFc3NYiPWaAOJ5syGDgjN4BNm7pWq3c9SNmAhtXgs8gkySoJ/PHR3a\ntuhCoY0etzx9Emu1TwgV4gDWTCLKM+IkCRwz/ZeXwiDcE3KEHxTb/seyF9WG\nT7C+AGH70nxMmXYVT2Mf474zC7tQC0RFLKl4jmSwStSnKCxV5q8cPZwo2CBt\nzHfWqO65iJnLQ54Z7BSV0oFthbvjjqoWPVmwRKWPUpFxDQ0gt1C3hKc+tx1T\n1NZy441snn22PPJsXRJ3Xjcziadq+VBqcEEYrW1OQkBmcKeD868WBu0dzgi4\nRPBnebqKspocT/Bz5y5eYA56uCC6nYI4NGT0ItNWKDrnpWq0rME9zcvjQIR/\njUAPdvGsvdHa/8hUJnOqLbldJ2dUcvYgm4xP0cfNMRZodcpH8bjW2RAF+PKh\n2ukz\r\n=yU4W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.2.0","@material/base":"^3.1.0","@material/elevation":"^3.1.0","@material/tab-scroller":"^3.2.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.2.0_1568325244310_0.7601584406544883","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/tab-bar","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"787a75ac879cbabe92d2b45e04607676ffd24676","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.79d881baf.0.tgz","fileCount":32,"integrity":"sha512-QLMZZIHpy6qtbm595XQTQlybEu30A2H0fTfwFCE4a8ZdpAJXG96SL8MtrcRbG+lZcrxwXD+5mR2gJvt3L7UuaQ==","signatures":[{"sig":"MEQCIEK8xXknhXfj0Hh5WvEleN7uKEZmNHy+t7LHgK2Gn1QgAiBG5pGGlNwMORKgt9Qh8dS2jMyW4SGO9+NvK6jeJnEAtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev1KCRA9TVsSAnZWagAAezsP+wQWrSgFSDInTj6maDeR\n6RGYGzI5851O9aYUOb6K9MYvszTUO7IA0xBOKXwXwekA4cCSafV91wS+M1tG\naA7ITVxUccelikC1wk84MS2XygR9vWjIqzAe39bk8scZldvp8zzMuJZKZUET\nGgR2dikEvRU+inObTuNyOMHgtUVVak+21a67rsEOlc8vqdnuuXkmg2vhycTl\nqt43n2DOUjG1GKVzjGDyeAlSBjeWW2kz6ZIC232iQ0CxIUSQzk/DZKUGg8/B\nRCmUDUSLAbv7TVy4NZfgEV0s0rx79mRkEJsDg0aw/vLUBrUII20hwmSq0MF1\nWOnm3gN6TAHPTfHih62Lxqqkv5ZT6W/4mIYzwh1uZmV1SjJDpl2bWPW7hfgB\n8Va4X6XZw66jO63XGikq84vCiG6HQfDXFLeTV9THyV7cLkOpIbIGhd7V5mxy\nNKXPcQ34QOMLGAuy/BbjGgAN2KSF5y1Wrd7o4htG8IxBh2TxcCD7f3OJL6v9\nobOn1dnbbhcLj6mVacnqeOZcXfSdPd7/yjO4iBLmuALgQucDRgJKWjVgqThq\nVmJJEqnTfbKzN14UtppMrCwQYSEtkPfbZHeeASRBt7/00OtNAz6PiU/vtl7z\nokO2ZHvI4nM5ztCDnoQLz6Z2yprJ2psnrxE9iEamzO74nYP3z+P0Nc0AA3EH\ncL2y\r\n=sE9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/tab-scroller":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.79d881baf.0_1568341321957_0.4297493983447078","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/tab-bar","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a518242cd80e542b718f8ee92b73ef616eee3507","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.e851d4f40.0.tgz","fileCount":33,"integrity":"sha512-6dqrOrB0GzGW8e0pGz6OGRK6WsZjwBFT7fu8cWHPKkvtPW1T2mVSxd7EzaXK3zOw7+IXPKAHrWkJxv2iKCBDrg==","signatures":[{"sig":"MEYCIQCVtLfatgSV00Nx2/I4buuQFKfz01DRjVKU7d+8vOoMrQIhAIA8XCNz+iAA/5ew27Rm2H68POMDgz+qHv7olFGOdcuf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYZCRA9TVsSAnZWagAA8FsP/3ROHutQ3pKIwKlUAvwD\nE7imfCcuL3qI0rYuFPV4yQe2wg/4rIiDz8j+DB/48oL9A2GJmbL12wso9HQT\nSIWlDKld+Fq10BBntCR+hT13tQajpzWelNzBp3kHsr5JMUsERE3RfRKgXjKG\nhoiPf4MlW/7wvY4WsnfFSqsmpvoc/+l3Nc5MG4SO4L5lXFYNddPIxCGz+HDd\nJ1gEW/ejwt0aYQs8AietoApX/A3xcaceRuJFiu+TOIuY0efQSIxAhVAeNdOE\nd9mAzNLw/e6EHWWB5KtrW+f49OIkb9cXUMtbqrxWBjgPgUYPlvpbDFCA5syh\n6qB51bMnqFAmmuJ+teuXXjN+1grwWAvQXv5IVGSoI9aIbM3Vm4jPZ7np0iDe\nYyJob/g2rYg1DTBfJ5Ju6nBzSV2rGZOcq25GPT43xNjyAFZgSnY2Y4gQoDud\ntra5OUHNyYg/AU7mObhgedQKn3j7F+pJ3MX58faVcMynS1xHoucamQM6oclP\nB1rX4zDg7dMJ531v4WuVpZKNO/oxrK+JnBlxmRKrE9ZW2wDlhtNrUpMl4QSM\nY9BLohb+D2tLnshqPoKBNDc0Z5vSD5WvDyJiBR8/35D1y1qRk/k28jFP1/Na\nT1MAqgKo3sPn/70FqnD//elEAWJGZkkVpcL1qUNoPcsyg4umkF8JJck1WVcE\nHpCH\r\n=bxRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/density":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/tab-scroller":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.e851d4f40.0_1568347672954_0.7617541418262566","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/tab-bar","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7292d7084ea7b35c838d175cf471de9b559f3430","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.905884690.0.tgz","fileCount":33,"integrity":"sha512-hxrjK+cupi1rJcLRlrWdgFyqaBm2+QSh1JawqutG90NbjKmRxGqTZz1mMlvU1EQEz+dw/Yr+RLYtJDVkT741GQ==","signatures":[{"sig":"MEYCIQDMiEsGhLx81avZoC8f78/d784SuF0me2+TA6Uc9wRzBAIhAMq4BCyesBvjaLNEbwvOdg85teDX0CRyye1/yAqfNe9A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9ZCRA9TVsSAnZWagAA93UP/Aq5zwrsaZTxXDO0wXZM\nzrQ5AJz7f/538Umj+OrkK7tLZdbOyr+5D0phMjy4+StntXwTjYejwNmzYmoC\nSds+D6KRopa0t3Mxu+QklHHCTorYIC5p8inca8IEokPVX80VHXxJ81wJ1EEp\ns06IFte930x+s825t6TZ1Yor38oXS+dd9Ta3O1plr1a1VPgHK8dstyK99ZUF\nzNrDJ4a59assqoCkEKR9J3cQ22mQ8ytAjqjyMmzRcSgTDeovmE4OQ6pxHQ6h\n5XMA9/9oEbed01JZ3cvAJy8LaoXjvz1UphF+7CY1jddp/Mkh8CrUVZR0WIGC\nDG3/01wUk8+NGjoGTLFd7FZ9EpBaWyFjsSpvOTkrVm2ibw+uqNtkq/SWCzzb\n8MMNXpTlcJSXDO/TGCodETfSyqSdlNXMWFE0MjfRAu9cvbUN047bY6VPMAwl\nJgcfBwucS4cTf51+GEJHUmD1S9hCw645Jxr3q2QXhXbgrekvbV4MHXckQdJR\nVOYXNo9csb4kqd+NXgcekhksAKSnXEDuT4om0ig/mtLjrjZD4dpFsVnRusjx\npPIbajnv/n/ZMohULlRzzxm2jQD6TjZujpJkpd9er2SNu+q64Vl5KH4c+BQj\n4xcpvwQ67fUKpV3/H4QIsnNylO2MwUpyfBwh27WlnUwsN/BnL4otrFfTlkhH\ny8GU\r\n=fk3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/density":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/tab-scroller":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.905884690.0_1568677721227_0.9653024580779557","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/tab-bar","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e03cef82f710c757d89d931f62527a7d7b7132a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.199534d61.0.tgz","fileCount":33,"integrity":"sha512-xixwyE7+MpEaKFJ1DY/Zoil/e2jMZ0MaD6gB5TBFPgqCwvXaowsrNiUKt+ub2mlr9MwWACNI2mo9AKplFrRr6Q==","signatures":[{"sig":"MEUCIQCnqTBpflCBanjTR+Rpcvmdj6xU3j3W0yjVof1h4GZN/wIgS8Epl6VR9+KlpFc9EPtAeQzitw7eptVmphsdtOmJHW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvUCRA9TVsSAnZWagAAOKsP/123Gm7k9idyPeKMKyjI\n0lB1/0L53BdZQS4W7Q7Obmw6fBTNhJBS/FFKhc7Ckv/WW5RhmBjrHtXpT3mh\nTw+h85wODdxPMe9D9F9U5Gg5NBExKMgAVrrdkaxCseSOLfqetc1sMwt4gQ5K\nB0wkVCfGep7Ss7akYNQk67vJVMur/tCWqeZ7ginxVSS9ZxQQHK1hThMOPP8i\nG5Np7spjNnJ7OON91KDWBdEnFykubIZ5CB0z9DvL+/TF8pfLj+/F9TXAjL+/\nV02nuDDC2Xa/ULqExR7iIpT8Y82GT25ryRlMbizzSq9xGI3He5g1IY+p/4b/\nbiZeWwxI/a1WU53J4d38ZkjIucJCN43/e1J9wG2lulSWorMOJVioA/MevnK7\nMPp/45yCvkVjoiflsqPsC0+EZ7iJy//DeJoSXaxGEM351awkW5q9oq/LfOmL\nM3TE5/E4NWe1JwxMu4FRxUvMs5DSKCpEU4FAfVxBZkcK7A2+73VlZlsDhe9a\n7naSxJKx/oDxUVNBuFxdGtawxT243fpdfly7SFPAbRIuHaLpM0/C+2V+fe0Y\nncIeJjVXXExo3rWkVDyi205nGBXrsbv/onI/7SBtgN/ME4UBx2DCw/sz/Oot\nyElls0mB7UDp3rItOcg8vKx58+Z7miWxweeA5gC3cGUI8gzHuQU6k4z1jtTk\n3EPN\r\n=3y7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/density":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/tab-scroller":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.199534d61.0_1569610707613_0.3124503944203354","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/tab-bar","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f74c11a9e919c3a5ac862c279fcd49e337e6bfc3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":33,"integrity":"sha512-spKw8ZvHJtFCDbOEvDlWbPfpVZeHh91PW09uiSCP97gmq/7dpc43qEy44k5Hu1p8TGcJ95noILShJgm3nC/UqQ==","signatures":[{"sig":"MEUCIQCOucTDIEgSY5RuKydwEa0DS+LN6qj3iHsl2+7PZLgbHwIgQOr0pGicVXOrkxOiNSFTBjlRgX8kdaHoamvp48+TPfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaoCRA9TVsSAnZWagAAfy0P/1uPNgbRkVWK7O29SJPq\nw8Bqb5gjAp07vwUqwJwTp5SJzmQV1cPdQRlMXMiVsGmpcXMhkqcD6rIwcDEV\nfK0qjoxovg3ksRS6zL//CxMo4iTUc4XfQ3WkrqCVhNYTEXZHm9EZRIPjWP5x\n4xjMdLMNlrY5ygL2TkbTuOzGWRstchfla5enlM4TbJ/leFTtBgfygzR374Se\nGgdF34GY7DUwhWxRI1pcTWaQZzaBmPwMFguJudxhseZvRAIamqvZ2NzinSQU\non+V6jcshMix6R+7I42gEB9Q0FHldpk8yaOEJG26t8w0FmGrle3WAs9n8qMo\n0fwzwBelMylUuxWEFNJ+Liv0+vxBD2MZkpwvTHPgCxCkhPkcNKbmkATZHRE/\nzOf5JR8d3Ik+JHSjEYNgOwOKtD9W9LlLOoCW+zIgVDWUV2Ds2Xr1/jHq2rjV\nZJBdf1L0cInsKRAA5KJjtNoM63/TfMO4WX97Zxh2zFoR6JDqPdYYKb53Mv+z\n5bkDUliK2UajNtm2o31CpdBWyKDhR3pIQK/t4nP5sBkqneIddI1Cm16Yhxb2\nysLSx6gZJ0m0YTq3uptCv/JAUdfLsp7y9fa/u8UYJY8b764byPwTwetyWkMS\nMUDb1E+9KI96VxBrFuFYgMVQt5KOogvkd8zzhodfa2/THiPRnSj3vDptkgsh\nWJZq\r\n=wFv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/density":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/tab-scroller":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.22d7ad2fb.0_1571165864267_0.5759986635595802","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/tab-bar","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3f10f07e82fa57a7577f7764fdb5b1d49e390a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.735147131.0.tgz","fileCount":33,"integrity":"sha512-zb/xqo1xOUHCOV7pC3P4UThITQwoK/0/ESdXL/yFndTLBs5ksgQoye52EukBluWjVYoO43VqMr+9Mckq3ob52A==","signatures":[{"sig":"MEUCIQDN0TIfBXFpBRWPzj4rTPhVxrLhvY4/6gxZC89hcyE0fAIgcKbFWZlogUci38H/OVREhQgQc5mxTzM0OsMBluFTIdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnE5CRA9TVsSAnZWagAAqccQAKEeFF7gHgmLfgyn9y7O\n45YMWriNMEweG69mHtqdNgXJtqc7PqGhN8Hkwmu4CSKHBZJ/8ARN0hxQWI98\nyUVgB+Lz3sQyWoOVyYSw5STjHhyIkhh/LpxCnbwA8L5cNef+JD/ITkKq7gn2\n7AuOImRF92rT9ByD1Ru/JDib5cwc0vgewT3ENzmmHlqnRspZ4wb2/ygihO5c\nV9gjVxY+UVQapVebFDswXLfUcvIxENkqmmp397dOSicHw5OI6DZO5K4AE5lb\npJOji4Z2jPGWCIxe2r/KhRt2oQHKsoPEkTe70Jiyl5XvUY6h3kwZVtrGGhPt\nHhpEIX59mmHmdzp+UBXYWTKkFxSvAt7wU3W4w/T5LpSjQdVfli8Dwat6myaF\nMoc6dckC3HnYMX6wC/0CrmQA6TLWy1jP5ZCSkgxvdRK25eKx1R93pdlEEjao\nAbDxfHl8ooN2TruunNJHwlElNiYGwFE/5J0SDtJkjCUa7BlBF+QTasWAAQMY\n77JkYZV41tn7uu36jEvZgR5xIGg7y1ZJYwDQ2JOJL1tHdbLI1cGE15p06QhP\noxCoA4MqORVs4RZXn9uJLjSTyJLNHDbRGQ8fr48UumF2jHeSxIRNEmb++hE1\ndquLpY6U2Drewk61GapQqY4TjR/lmvBilSDjY+NQ16+PNQ5p2aZgb41HX5Ui\nn+z3\r\n=Z8H0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/density":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/tab-scroller":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.735147131.0_1571189048759_0.9355206352168699","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/tab-bar","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26591c923fe359e4400e4a49aa805b51f7bf5b0d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.062ade5c0.0.tgz","fileCount":33,"integrity":"sha512-4iFpEZaQxtggqhoQVaMZbYoWrE3NUSxJN/q6//ySeM/y+NzqjMShtIw+/ZcEGpe79eLyciF4KTw9TRKa61nkYQ==","signatures":[{"sig":"MEYCIQC5YQicdFNcRFWO03kPLS1WkXPwoqr4w9j+/jHVU2pPPQIhAMH45p4ROs4fnHr+GwVw74J5u7d8XzTnHvCOxeQXFfP3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72MCRA9TVsSAnZWagAAItIP/2q4BqxNegNhrEXSZEbi\nAsaqMM/gOvHPeuVSt2WXlDPhyxa/n7KoE4rjdAtPftVhDFI1NXbgomzpA0QH\nod39lAUeNaohDl4G3pcdmRkvBFyYRcSyQKdo3bVFWyShLs/gILQLjAPzuxI9\nv9fWwuIKPn2ijdpYp+cyXX9LcA2C+uOKqX6Inw0TSegNGFnTabmbmPguxOQ5\nzfOS8kURnJ1ktpb58KQommTZf0yf3eBt8U2r1GYii3V6/Zevb3W4LYwMEDTB\nA0Xma2EnWTY+U7pkgKx7aZ/X3kOlc4AA78DBwBYLX3z4zkyuOMxSiGu5YAqu\nBYlhFCMplBeyVhW8PCoFVvvh36nRfrOuiQrtGx59FtE5xk6116eB9dHr4Qcc\ne5lstqvjAiBZPRG0WQJZfpkVaBsOwAUf6N1c51x/zrwl/cZZ2Lpa8HtIvWdo\nKolILj3GL8mH8AG6nBmH4/IwW8zIa4985tE5d6MFXbXw4W42qETNw1NbLm6j\nspu63dwNamIIfQXiB9E64ycCpvb+FMA0zgaXG1uAzNuFeisubqNY4s4+/IPi\ntT6fYtcMFW/pqPfvv+RpQLUSUBX1MOVb9FNGXw2Oenl9G8zUDDXaiHprGjpZ\nFb9h6BP0xb2g9lW1ebu5kNHq6NWzKgC0eOAhJvGVSLyJI6FpTS0ujrnNMBr/\njAT0\r\n=p+d/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/density":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/tab-scroller":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.062ade5c0.0_1571274124219_0.5083781136181853","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/tab-bar","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6ccbd05d5ff66267ca12407f611d99ee4b2e00","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.774ad4f8.0.tgz","fileCount":33,"integrity":"sha512-9uefjrJjDsxUnaXH+r+aV0cEqE6Sz1KAVDlZvXdxxgOOFBIWsmZlo++jpkv82j6JWyU42rdyBCwjRbdBBTTxIw==","signatures":[{"sig":"MEQCIC8IRzsCU7C6fYa57ALwFc61pAxgb9kofYa8Yg4akiRYAiAb9aFX/cAPsXx4yKqfu1YJ3NtjKQTwWGXgk7X+8ssaOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":531386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+iJCRA9TVsSAnZWagAAk3gP/RjGWB7RM1ODfSSaYVKw\nIJcI+7PFzMtMZpFv+9Zq0Z7YpiYBPfrgyEhkRI1rix4BPrKEWu6w7RVcQ/u5\niPpuPJlOKzeW9IVA3BC+xph3Tyijc44R+1BLxa0Aep5J+exAkQN4b3WRujXF\nF18MvWyhPQwTMf7OcVcu5dAQ9mX3iL6sk7UTs1VfLUmPjAkb6rDH1hHjZB2x\n2Va5HdeBb9tcMg4uD+FKK4A7E37p+oRXTg2zPqKgRYNlT8Usvb0j/Xb5HKnx\nPUMK/l4c68InDytv9sandnFMDRahQTt/5LusZX/c5ZGSo0G6N4SEUFjmeSzi\nqu7mXoHST9+Svrav+z7I0CdskHkzCVO9qXBGlc0sfBXsIc3He4p41xNH3LAW\nizicZIxsyjEnJfd29CnIAW1ySgnzVXNoO0DU1T+PP88dA1KAkQbIlp86rAL2\nxxoaDI6CTbY3ygMjU/DiuOXHGahYakA/BcDWHkWueHcYvF9SMpFDAdvuqe7Y\naiK5UYAYGOHF+EO16nq4UIVJPuxzYe+zCsIvX6zmue9Jm5ofaYah9c2YXImj\nDellZZ9DKSyK4gzGIIjIplQ9EAMMXBEjznlKnzJMatueXKTMf5rkCicK/ELJ\nApy5eI0NAkm+r9vb/9eNJHm7Fxa9RQ31mSuHyTuBX2HQiZUP4IbJDAAERg0m\nf9AJ\r\n=JqvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/density":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/tab-scroller":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.774ad4f8.0_1571285127633_0.46513194562906945","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/tab-bar","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0de7f9d7d2bc95976db68ebc4c0b6913fb207d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.5916d18c.0.tgz","fileCount":33,"integrity":"sha512-rzmqb/Sz27/jqnpFZkn8NztYSpMhHo8q5kCQxYIpL3ypSebpToJqb5W0RE/Hz/gS928LxtT8I1aCVukb2zTssw==","signatures":[{"sig":"MEYCIQCi7PqRwA/JmFRYeV+KcfaeY54MydnLEBXMgoeS/mnXjAIhAOwZe8hL61rQLuz2arSs/NeqWkYct4SXAoP0ltSjcv0l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":531572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhv6CRA9TVsSAnZWagAAbVIP/ilvnUhq2DtOHFjPZGHw\nN90w3gvctY7pBR00WVnyxd27dkoiT87kqz1nUKix+hdqdKjAm+VVJZn9IfYE\n9b0ByXKnc7Ym5HxiS1vQoOYPDUn3c4hKLNPBcb13ijNjkQZy9/W8BTf4DN7N\n3dlY0n37N2EHMamlPFolA6VFtHZP61cmPUwdWTT7AMX0Cv9AbsiXDKaAD2XL\nX6OQAPLbhBnwVm/bt2t+0TcvuuGEZ1WR5cwLn4n6TaElL9S0Ti6PXYz7w746\nxQhesXvb22E8Z8e5ANOc1Lla9pSmpqe/RelhEDyYj18xRrITXdneFErAVLQv\nD/JnZcaLu2LFGRVLpZRKcBZCQu4noKAABBr6fYYcTCcmOtIpRZKwWub3HgrL\njeKaox7Y3QxWG/10VJvXRf4uGZejOJA1PJWN5ThHdTtnOJ57nLsQdhIrlCaz\nKphmiyYe2fhVT9hKn62YlPS+hjKGrKm8JxU1Fgu8N1a81AiGA8RiilcMHkfe\neuhV8nwr4dFri4XgwdFPnSvHUcaQAFGpkIeSO+nvwT88EOqLw+A0aLJwfU9G\nlKoW28kZmjOk1i+cT4L75JOidB3/4CvLqGX0167HxG28Zwt6N/V7g/IIEjLt\nyulE5cGIsF6muVLLibBGo5BFsCz/CTT5aJB+rgw341UcT0h0aF7zvL76qiRP\nbVOc\r\n=llAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/density":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/tab-scroller":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.5916d18c.0_1571429369482_0.6911206884925838","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/tab-bar","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"813ce74af2985a45d2045fa38835f078146c7e0f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.d4141c95.0.tgz","fileCount":33,"integrity":"sha512-tQEKmkWHjfBjlVdXPU8bX4Re6q9BGQ1WzMpqXKpTj0SmRUZt8y3gsnHD1zCwjmIAWe4QdhqE9JUCOfZyAsDvhg==","signatures":[{"sig":"MEUCIQCUA4hvm3hHyo+w/pBRdvW+zZMHfpl91+8MF3WHOXL8DAIgcNeaz/xT4/YFGWLhtfaVJr6wnBvVT45JTGiO5+IL8D0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":531571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQC6CRA9TVsSAnZWagAA9qsP/jnDHomiihqYEZ90ptim\najua2RYtn8Ghe/6jTwG1t9cXGMLDMOVWlAuuTU3PdXSN2t6kWVWDLQN6Rn+p\nOpzFigGWq8asZtuDhSNs7GL6i3He6ck/VF431lOy3ChPqjhYjKkOuv/mX/5O\nB5sgi0CkoAq7v4Z+tLO82/u3Chd4KcHpoUK8zXCRh+Ws3hPB5z0kHnZ7WpQl\nWshGM9pgK1mPHI916Ioa2fOd5mB5Hw1yMkkxf4cHXVlmeml//5jIx8Y2cpId\nt4S8QYHVZWtYITzVK0+nuCj0Yad8xbidlE/e5gxFbDxxXt7kuJJjkjPy7+47\npoO0zkjKvcppHWXAps1MS5qEah3E+Dx2fjHXbK47kyFvyO5pmjX3GyTcG3zx\nw7DR04JOiwdUuSYm+X1W6QxIYt01+foCMeYyQ/R350dGCbKOeTvb7hUl4r5w\nT5o6uw1dL88WLwbUsMOgSKWeVaV1uTMmElgjTDnLsw6Q2GpjsMzy1z2pHglM\n+//Ey1653vL2Zj5GzMBJ8r+wT0qy47SxdF3K2niCyt/1E6vb79JaUpIJVERO\nOIEgqty/84EcCVM5IgRau02Neow2E+EVhQnYp4uHohVJyFzb/3sVzF7OaE1D\nCTGEAIPkLIzqOucALnWaHP4pvcHb+ccyi4deSrKBln1Z70SzheD4Gxyt5F+S\nbOCY\r\n=um0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/density":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/tab-scroller":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.d4141c95.0_1571881145941_0.8447219073038952","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/tab-bar","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b635bad3d419ffb09ee25e6a2024fdf7d4ac9d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.2b878b3e.0.tgz","fileCount":33,"integrity":"sha512-t6AcYJMNAwuk5b7kLXjwxL6tnvgvxG54bOeJAPqGKx/usrHOV8Ec71f2LsBfYUrBPTyZ1JOVWMAzig9qXV1M9g==","signatures":[{"sig":"MEQCIGF3jY3QYgZYBAXNrAEcBMYRFy8T9VPYmIJni9UUQyO0AiBp3sDHcUArOAqvafJD8IZhffI1WTnhgNFVMBKoP+kTwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslneCRA9TVsSAnZWagAAS7UP/2ZAxx54UkF2Msd/ezYH\ndjxiV4vAid7o1LEAdIGTZrMvyj8acue85/xq/JOQAVhr1y2QHG7B2/1wGcmo\n+V/HRHXV6A6U2GFI/NfgZi6g5H0rsk3lrmVOlrxUC9YBHv1ysHQe5MTlKa94\nT4rhVrkTOqatUHqf5Z/6Y66NjSMYobmMp7NLiPjxLGk6InvNqz09XESrwdh9\nfoeuV/21fUiyeZhHWsxSMdjUDnCituLzEyidByzbRTUQ3epl+ody1RvrtLkO\nQ0hS6lm2cwHTlGp0uKbbty2LxV4u38/+IoVLCNBKFsgwGn6b7MQbFZ5enHor\nTZ4HDiv5sY/2ksaljX8zIBRDJhhZuP3345eU9rR0f7NqGMTmkE8hN6omStGs\nlsERxcWa5a7znuQ0qbKWsMaM+47nl4voM8LaKCjBhnocZAusE0HJHa/j9WIx\nBjJqe5yteqBuzRUwuMx0vp76NboVwED5q+wsAZtoB6c39peaiOKv3PksKn77\nXoFXi2BeV/WJeq1vgDXRtHWjmf+O5Dyacx75fKpuDjumcxBz3+n1p8TiBO70\nbGG2w3y6sC65fKw1grnrNqd1jJvtvATGOWibkTH0nNmyAloye7nmvAx0H9jk\n9phIFh5UVO03H1cMqQBhsgbJtf8DzgOuN+4LU3Bp9sxTYC82hDv30jF5Gbbd\nWiar\r\n=w9dk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/density":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/tab-scroller":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.2b878b3e.0_1571969501745_0.9858502734071757","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/tab-bar","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22dd367d395aa40d687aba15dd08e84a40f50746","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.b06c0efe.0.tgz","fileCount":33,"integrity":"sha512-0bFF4uwFtEY6Z6qiTLtEAVvqS6WlA720udx1ovlOeYLoKl/MKPwzQ1kiUQi1UHgaP/mdP6VSG8t0omCW19VT/g==","signatures":[{"sig":"MEYCIQDMOrk6UdcmtC71gCZvzsLhWw9gd4ctwwYZJGQF+1XcpwIhALazOW6vQutgz6384cEZlbB1lYEaP1kaKxojI1g3Tusq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6L8CRA9TVsSAnZWagAAyO0P/2s9Mc9B4rIIOJxPDsZg\nIZ3DrbKqbRRhUkq73zpOYmECc/LU6VVLjwijfMhzhqONvDcLdcgobOtUlJ0X\nxnYZNbnat1qRq9ria6Qfgh8380gru/CZMYInzIPbqHIzI3Ru6+XkIwB6qqZ+\n8Y1vE8mNguLpKdsC2Th8b8bc2rCLWiZ/BtjJwCnOwzFOVDlabJhV1opit00s\nutwT77JDuGZ/7G2/gQnB0HFQDKZueC/2n+sps6nf5eqfH/4u+AMTVU+BkteW\nk3eV3+JtMz9GHzUOtrZt5sibxni6wdCvuIAuxBrCv8RBp8YKIsqjYVfPPSjr\n+hl47jQR+N6KMt7yaZojjF7keX08R73tXS6aaf+EH2z9SZO3alOHqz6sH8xc\nbSYWYgQkZZDZ7SM9WdwRuL5fCMTlNXShNRR1nxX91RviFfXkPMnBnk44ty8B\n08UfPq8CEK3i1hjPBA2b3knO378NmALtEd12movQ4188dvlw2lH45WpxINbA\nlyY6RGZoswBePEcQTx62dXZt20/f5R0zgZN3eVXT5Qq3huVnjr3RnHG5zZlp\nCVwkdpOGtsGy3ME0wKAomKDHxPN5GqINzJsdmQvVvSU0RN2yIAEa7MwSInDw\n6qZsyRoVmjcI5QP50BNKhhKnaWNqHJGWjpqeItUWLoeMhgzVx/LOdtVh7ysU\nzSx/\r\n=wxqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/density":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/tab-scroller":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.b06c0efe.0_1572053755869_0.81291828399999","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/tab-bar","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3afc073267283acbd24b6c7803e1a9bd1c7a844f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.01628efa.0.tgz","fileCount":33,"integrity":"sha512-ifwDJOYQTk56IJeJzGZUTivxGM48OGQbspPI2Gn7HZON6Wz0uOBIMolvrWpH6cuK9c11QOSHuG3OE4rhsisU3A==","signatures":[{"sig":"MEQCIEslfF4JVKQQ/wQDG10nSXOVqz8tIx7Y+3JZZn46OScoAiBXZo0FsxZi9/S7fo44nWY/AzAIUjysFGt4LnF8EOwDFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HrCRA9TVsSAnZWagAAqskP/0V/4+HOImQYlKsEDizJ\nih96dULDVPe7oODTl3BAEsx0X+0UQPN1kHm4OmbI++UNA8ITB2yfHEKDyD5v\nl3PNbZ68YEqh7tfFD5LQWAtjjUmQQckti8DDScpdzM0boyhx+5Fwj107vcYo\ntqSHaLK5qrZYkcTSJGoa2t7Vz6StcDpwE8vKpXAC0m7msSseK76syvykXwge\nc0RnSkJiLDttibRh0teoV7sMGEFxNbrLJyseREkOfbqOYk/FmFBzd9rBjT56\nIDjwOyJwD/dTeTIL8hVSPJ6mdFhZamf9OGHjVEqxua4Cn/5wN/6F8rnPqKrQ\nHU8e7Wxu0LmesX84K1oI5UtLHTRMQJDdQz+J23dLtJq0JIh73FIABjDIfmdU\nV79APFFii7JZquliEjhM9DbxWc0lt5yMIVBI7cpvPI/YzGOAEke8go65Fm9o\nwPUtwfWJBkcSLeKG+mZfEgdFATu4VbZ+t7qiztEBavLF6C3VJE227cQe/g4s\n/9MkXLNKPJlRTb+o+n9FCC+Rjds1BgBtMDwGyw9dwKGY3Yp+dxQUXXR/mjGv\nwTCFowDnY9ZfSFPJ65uEXsCeu6PbbCfAu6ZnkaSnj4XMFFze7fgKFj+VBjNU\noGU7+mDRo67fwfK62XFbtigDyhpVglGpYgoEsT7ofhoxJ4JUqMYtjoMQ8IMT\nhMYI\r\n=u6tF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/density":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/tab-scroller":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.01628efa.0_1572307435386_0.3672785192407162","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/tab-bar","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"571b28c4c965703356c63ad02d5253860106027a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.b5c6d66b.0.tgz","fileCount":33,"integrity":"sha512-CqzVRPTQWmfeLJuQjgMCAUa5qEpsQuHPTyD/BnytRkflWJ93V64qIW3eHvuQs6wEN2t2NmmxpSZvX/2/eGPj7A==","signatures":[{"sig":"MEQCIHOXTDY3OW3adaiwb3JAxkoGDYGS+lnMF0Ncr6ozRmzaAiBy8LfUYtFYLslUhVLm2Mlh3o7jW8cBrVb4zBlOen1ZCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2aCRA9TVsSAnZWagAA5GcP/1Z4ISECmhfjF+rbKnHd\nD1uH8WqwIFhaVzaOVfblfui6Y5AGjAO9U8woEDUhgnawSYgK+E3sTcAvt5+P\n0RVG2vSxLbMwBEZu4Dr1t85xpKVHVj54K6okrdzLfCWooGVGR/lFk7zQM4xu\nutk6zG0F+L53RXsWdp7EV/9BHd/qWX1p0MPfZsDmliUvSa0H9KCm1g2dVSfU\nh8wku01twFDt9cu7YEfu1mK+IcX92oR0M05vcZJUvcgnxNVSS1F3HXDXyPf8\nxv1ZFyQAEzLyOwSzfFLzs3po9aAdR4BM25C13pkoJGI6QSy/FuwJJCuGgxAR\n7wgfFuGEZNYZvta9Wc3b5is1RBSvfHEpJ2ZQ1WPvf8FMbXVs+xM515CaTFNB\ncYVmV94OyAu1yCHOWjFQchxO79HXhnbo9b6pYRitubVZVCQI9C+VtwvN07Uf\n5t4RFbPGyXee9UglnazeXEoMdm34RcLB0KzcLCC7kGqHseZdsRdjQMVNX7RL\nRAavkKunUBg24ZBL3WUMgXHhgAtTjyXk+KoCFzi1Ky6AR3o3LrA02BQlXwaR\noY7SsGRNUfXvgAiXcJRwa1v1HZTUJ5eUu/Y395I2XAhuaAvJD4OUDYOvktcB\nJehzB1N1aasWwEah7rJZd+GDnMbkWhZV0yBKng9YXFEAVIDvl24oIwsD2KBS\nXcEI\r\n=MuJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/density":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/tab-scroller":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.b5c6d66b.0_1572371866364_0.7466442221610001","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/tab-bar","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d243f2f0087fd8cf7546630d97a869f39317c0b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.cdf858ea.0.tgz","fileCount":33,"integrity":"sha512-zt7+GvGmpzknWT3eeBiDKOlcZO60B069J0ap7RK1acb7MCrrLG41Ux40ptJ1PgWxrjy/nujZ2zwDoIabukrwtA==","signatures":[{"sig":"MEUCIQCis10F3Uo/sCw0m3uafeVhE0O2Ok9WVqkCN31vXvsqZwIgDcNrapS+SrfQT5B3H9/Ad6sL8JZAUAZlEgwqOKKLWMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHKPCRA9TVsSAnZWagAASZAP/1U1o0ICr1T4DYPH0uIN\nwyPAHgyf2O3nUUVxeGZmoYCHoDYmeroUgdQ73491DsubycOrCN0cwUjfUfuV\nI+64ZL4ykDKvwF5Dw7wfuLvMN9SdZYqqEA/4o//tz5dmHWXGSiZMUqG8oOj5\n1SBs23C7vCBSirF3aiTQEJNc3Z8b5u9VQkgqUKjOTBx8p/FvYyeQx6dlgy2c\ngI7b+j3g+taqZNoO7EKCImCWXqcKdVGbMw3mrwScwml82VSYSnm9WCPBKlZS\naQPse+FSJsPLCeKUxcgDhJnBWAsfGSlNLHL56GfRUMJ5TnlXFjUh1n4UK4+k\nLmP8fAgN5+2mOfN1ezFtTBSWVNkiteFHwy9areatzqfpYOmrRNUGvy22Hsll\naTPdW8q+QWfget+mvOiBGDJQpFhMZIeyKEu9JDqLA4n2jwqlX4bmmA/5bqsU\nNPE6tCQB3MxVPMf15nLsGLjkgUJSa5uqISt6Qd66gMkaXEVdjNsv2nD3raJ7\n7jCpx5lmQqzaJDkZj+Mh8FaqLf0s/9fDHzsOafL9uXCYFgVjSwx/7x1JH4sv\ns7e0orOdEQ02igXJkeLTUM5gQjV5dsIusyA58ph0Xj8M5y7DUCuhV0f55Usc\n0bq+s/iU9oIpRJvr50qelnES6wAkUsi0naQc0u36tr4DwrMuwuJH7EK72me6\nEfqS\r\n=Z166\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/density":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/tab-scroller":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.cdf858ea.0_1572631182694_0.8739817147276328","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/tab-bar","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c658e73a6b8578ba061a9c0e21a79b7f25ea3d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.719b57e1.0.tgz","fileCount":33,"integrity":"sha512-JDjI4CzRwazktX/jcRHgMARqgza1rRfDAy9DG6LDA9K8F9YZCHlx522Dvst4+iXIesP2fRVT7ce/o7pSOe2rAg==","signatures":[{"sig":"MEYCIQCjsVk1VqrPI8jUuu5RhFwON/BbH7iGOiJ+qb9su64OYwIhAOTqsYYL9Hnk4XrED5T+6eexorPvF7egXOa3ygqK506L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9VCRA9TVsSAnZWagAAb90P/1LrbWnLIziKAv+pnosT\nmfuGUj3Icuh8S6VggqjCkgXz/WRKoJsovkpqF5/ATkvsVb1gzVlKkTet93C5\nzc2jP07rV/vQJ3n6QMeBH6YerTaA7/V06ujrKch+LlUmKIuj9gz5qdItdZ60\nJiWqNbq9Q1XIcJLRTzMF99yQl3Ntz6u5IpirqbMgKv6lynzJgMbbnsf7giIs\nkFpObaZOvLcUlO3YhbazWnbQJPrhGFjIOo4qExFfM9CtizzpvKrjBpoYGyYP\npW5RYd8jnYChMr/C636xsF6HzkwAyhm8oGPu9li4d3zD/UBDiPdeIcC1oyOy\nJzYJmWmNXc7Vi3RFFmWAO1ws1UTElKrF+eK4VXj1guQU/A4+iDh5ZBPKSklJ\nJaPBr+06C1g/fosOLEBaMHwg6w3fsjPD7wLZk+KaTZvu0zfRnr7yaddo5NyL\ncVGTyYbuPD0pOhJzvX5tqS/tjHOKv7nx+MNYFbzE7nYzHQkOjLJTgTWZ82pX\nnx5/Qu6gEdBi88jgGnPt00UVdy6c4yp8FFQ+nO30A1ihhlWxM28GyUbXLnEX\n9Gnd7UZkvNQJPdcUDPV9iqi821w+1Gih7Qy/xD7S3Ba0Rv1s2660jUhgjAyM\nMNv/nFdioEtEzqqO6W1RTwvlUvvFdTGhWaMOgZXhfVyMLtyguQXwKvykKBeh\nGc+J\r\n=Je/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/density":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/tab-scroller":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.719b57e1.0_1572638549412_0.22770235413839557","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/tab-bar","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d409a75906eb5e00073be79ba85d8f27784f4f16","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.97cbbdc2.0.tgz","fileCount":33,"integrity":"sha512-zfkoV+QAhKUSJatxyflW5ogzmqoODHQzLJfQLujE1oPYAgWp+N4AF+x1e4otsE6NZIXTTzizoMvxOpP4L+iqYQ==","signatures":[{"sig":"MEQCIDgsqh1q67mObMAD1VnSSeifq+PgPKAusLNGyMLWuwImAiBvI5IJYSuPIqNaZnmbk4bDUubd7GSi6Jto1fYoUCrqEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJXNCRA9TVsSAnZWagAANXoP/2gVl7/Dr5gcKda/e7c+\nboeMjwSSh5b3vrDvClbfUHb4+XrejyGmybLstCI10Ulm0Jw+6DUReILOXIgP\n8gqjuql+q4j1afYCt7T80eEIBgF+TEBgkiU/yood1vO4W+5LXXm1IwnQJDWv\n8Me4NYZAiOPZRqnXgL1LmES0wx7CeD290XBud1cZc7QB3OG+55O4vpMcGAuB\n0QQxzf04FtqF6gIqqbvGjjwHBUCeaFkFrX83sHxEBXNOenxni8QZ1qWjl1gB\n3EPhai1ctrYRj/gza9ifbf0XwTjYFjAV+rP5lT/l7dPLQFtEJwuQNMVF7RMW\nQ82Oo8RKoJKVqWiRv4bOvEAujKFrmEMKQ+lm5JNHyt3AZB+1EmVCqFkyrok+\njyMK4DDFTxFDd3JRHK2bl/AYx2z70/pMLpIRYmg4x6Oef24dAVYvWiNWcatq\nYXZtiWzLQxL0vBhLoY5jglx9FuZm3dQkx478Xe+yJSyhx/uL/h/PQYAsnvTA\nLaReYP8UOr/mG5nvphLjLCmj1hrfTB9lWw3uUIOUWRkzlBaEsBdpGOUB0mX+\nZH5nzTfIR0iOjmijTGQM2760XJqNQSwmE5hARZ1O1thWd9vVhjmAxVPpSQIH\nuuDc25mhx/69g+j1Kf8PRK3iMHXBg3dgxif0xaXZbhskPmTPtL13WyzWsnWX\nm02r\r\n=bsub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/density":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/tab-scroller":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.97cbbdc2.0_1572640204595_0.8082337225675265","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/tab-bar","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3456e95b80b6b42072544775ecbd1f519ea7a2ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.8e36b3b7.0.tgz","fileCount":33,"integrity":"sha512-sPnu4hd9xhm3TT7RqswmLQ9NYI8Q2be9zAA9gBj2WJA6FHt/CM7cY1jznLQMesBKvqhGHNuOk7b1KHhG1EJiTQ==","signatures":[{"sig":"MEQCIGfynomBGy2O3144Shg0AZa6vf+zb4J9oCDFRIO6DDIaAiABXYDM9Kos4eVeioIgKG3n2G7J9Xnyxp+eraMCYTGEgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1gCRA9TVsSAnZWagAAxTEQAKOm6mUvAQ5+lhYH4KTk\nUVPwfr8ZXdNGBGWX1qordmwLekp3HtVH+Cwu/GRd3Vv3FhmpU1ubK7h8HfTr\nQ3ea58kF+JswQcDy2IkGy/ulM0DWvqB9kHW5Fb6H3G+9IOnyxfQO+Ompa72q\nX6pQP/IC+pYODOOXAc/5dCMrIebXYDsEPNd41fnbJHoS83Sezc8g9WITdlHB\nHbgZKszTuOOYFr6jrzmTje6xNM8bRq+2lI6WZH2bgGV+C1fzCgEKSvkS8zHw\nbx1HKfWTWBM59U9v9NYGxcMc1UC7wYTmJErTIdP4yrTbs3Q3aWHD0FBt6UlR\nXa9Gp4k1GYBdy2a/7zj0OfX6yIYQlYIy1KThvjatJg2YZSYeQuOx+wNksQyo\nB4Kf9/z0eLS9W/3qRQz4HWNGwV0c1In7A2Q/vIzR2V84nlBfOowiCjFNsNTI\n1cs2xCRlnVslFFSD1NtKlgDEcjyIcsK3N4H0WCG353NN5BPrgubYWnuL/QDs\n0TxMif9NTH+iDh00+ANoGRNEjlE7biUbvkyuJdyilYr1mdngtrKvHUzyGmm/\nhuaJ8PB+oDQGCZk5/+rgIb0etY12bu4g+6HCY1oiPnk6eUZFz2KAF/wgD8+O\nLyf7qh5jCM/ld7BzSn0aQzBw3Xo94gVyviZR7Ty+CMKtmzHI53kgySSlvYX1\nvmpF\r\n=NM1a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/density":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/tab-scroller":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.8e36b3b7.0_1572642144495_0.07694919308829484","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/tab-bar","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d94f1e4e3d19da76a5707ab4bbfef9b1359531","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0-canary.62d3a09b.0.tgz","fileCount":33,"integrity":"sha512-u1/DLQeQ6zdKmRKwpcAcoJmgsC+DYXzCUoWtupu42KTHH5Z4J3xiFymHoNNAX/CSBTYf8N5JhUSAbGJAbngAyQ==","signatures":[{"sig":"MEYCIQCmt+p0kgQmuJXaJc31+Qjfo4YxEXOnU1L8NZiMBboRWQIhAKj08YCQbx0dEd//NlqOhLDS7Xn9sD+LPhlbwAWJ3788","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ+QCRA9TVsSAnZWagAAvdMP/1KM0VAm2m/eCARZ4xBU\nUYsw95XIy5Z8koWGMo/9pe0+KhjpgD+M+AkiazrXlSTf+/z6mwj14ZLj6Quq\nF3iZhFI+klz4dVK6vfnjoCO+1Lxn+4UK13ekGil4dHFgkqtG+p7RhWxEUe0V\n9bB8eAb5yCWmR2Rok9VuyTaIwTEFI2hJ3/V+LnhZg1t2IqEHgw6Y8Wg8g4a0\np+sTgTIU0hsM7rJx5OMI9oz520MPjhddu8pew3O09VNZujn13eneQlH/CXTF\na+JdHn8Rfl5ndyoju9hT0QTLfrPYBNcq0RIOHlCI4mB6M+mDCVF4TKFN8V4Q\nmGhbcK1zTr8alElS3Yh4e/3EmLAlHB65vYZsK9HohfKW2zV5xOZqN/aE1nTM\noVFik5szWewSvxXjfXhclz5asZzkenS9fXDokO0UOAPe+8MkzMpF5K/QA9lD\nh4fP2pXBF3g9J7iBHbfPFXiILXxQJFP60sYh4sIGq1kWMi8vUIAwNWHaqgPD\nyhmbxa7dyneqQHIBFLon2265mpAcvlqJuhFQJEXx/j/ZEwPgQ1XrfkCbnO+T\nV+GIyFzEJrMAArQrsOM7IUiYCccjTBW9NdBrU+mUHyiDiqUT6V3/jGP2sTWc\nA+KYLJ1q3RfDgm9+TF5bcJJYffNqnoskdtqGwnwc7/LYUNczzSbN1h/Gwiw3\nEnVz\r\n=8rBK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/density":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/tab-scroller":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0-canary.62d3a09b.0_1572642703837_0.0480796342484775","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/tab-bar","version":"4.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e324f2bfcd556ac68581690020bde3dc883a1fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-4.0.0.tgz","fileCount":33,"integrity":"sha512-lZAMPJjshirP1eXsX+HKFyfqDfvreEY2864gBsVRWIhWcoA6aozhWXjVt5HE7MeyEShpEQgahWKbAeeRAwgyVw==","signatures":[{"sig":"MEUCIQCgcfC6EhHosk6RVfRI1bnpA3KOJAzxYTsZajXghwzDqQIgGQnmPAb6lKRTOsz5Bg4vlhajWDQIjpiDVUjDT2ihVrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcb/CRA9TVsSAnZWagAAE/kP/1tvA2Z3FMO1ysl4Blhb\npRKuJwNK7YPVuCAL04ooZgLIe5q4Vbc69C+tMdjNKEZoQc3J6p64iUwBGa2Q\nkszDq8hP1ciYmU2r1tEhiyk6NoaQ6MVK9a13p5uL0cD3ndSEPd7kQCsYK48V\nkiIIXYpFcFPHBh987yJXBshJ93JMMKUhK28gGgBm4DZuUSh1Og84JYdtOYyP\nL1r6AsGPLCa6RHEsAskQldBhWQfwNH0dWC6/0MXTQrPhLsjx98IGxIYwEuho\nGlQztLjMS3ky8bQyW9konFWPxJodtYiiRQJEX/OWqs0WifDaK9xHEZk7pStW\nQl71uFD/e3GgTwxIyG+b98IscREo5Igg4cuHPjckG5qHWH0ootdrREbcI7UM\n0/vdNisIXomvl6TsFtIB7oRsUZZjpX2GeU/IECFNhxecs4EJwfio/xEmrIYB\ntkf3oLZ0LWSTjTdKXVJDauOts2O0Mb2cRjyIaHtUXa0d1yegO3aef/0cXuVk\nmvSnKQKq329oa5cUISB7R5ogpNk81bsQGApDz0neB/Ln65XomtsFnWxTIlAH\niZSfAdS8nPQXt5G2P5ccgkfxlJ84ARQOBB+/9z0CVPI0rDL3CJ6ZOuZd8Lpa\nkzIu487CaOlRvGdmeRGw8XDlXhi51DgK18FkMuRDkjlqDF+MhZByKIBt3mY7\nVGV8\r\n=8uxm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"^4.0.0","@material/base":"^4.0.0","@material/density":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/tab-scroller":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_4.0.0_1572718334954_0.13463331298456116","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2624867afdd4287e2a454c225f3bd622e15cd977","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b5eb51e94.0.tgz","fileCount":33,"integrity":"sha512-XJtQd1H5+gomH3xNUp9omzrM7iCvzN1aMZsdWg683d0TWzQHwLJRCgo90jK9aXB9fUCBbBBdEI/UITIzewXvDQ==","signatures":[{"sig":"MEUCIQC52t6Y4eHohafGu4LRoAsF6qKRGyk0++boruWp01uoMwIgUWl84+87KtbxYy92TLv15ohL4zwudETJYlRY5VuvgRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGO8CRA9TVsSAnZWagAAlPgP/i861v/Z2WMPu4F/IxYC\n17xJ4oZXW+npDhQ24K4UXQyKzoQGA6FWmlNGAxjqbjUlRksZfu98pwrqa0fF\ncyOqeK/uLldupuIx5XO6NsBH/nqyiWPYDaWugnpqq5hf83YNgRq5bAfatTmW\nGOg/rBjASrxyyd2JooeFWi6Agzeuku9i0j88QHpIx/VlrY0GKKC5lUhzR0ys\nz0lDPhcKGEKOkxeloCtijys9bpWnAhN3ZdIlF9vEr+wWAz3WFET9ceNFWzoc\nO37jWTJQURSZPRY9NWmT6ExWTj5vr8WIPxDWA6KS51+EDq8oQgHtoHcKo66D\ndR1IoQntJ7UnuLZJHvw6AKP+NlOy5upJQgO7LtpPBrnNz354GUmLSAxCFxkr\nm9Ix9NcArJMKJERB04aeLguQU63E5XqWoRm3T1X1Ah+gA6jd5ADLcoJhrROD\nEfAfuIPsIfJ0vVowgWhyYIFsHvkyCpXU8Vf5k37ZRZ4XnrxBN216CFc2nKs9\npFk10auz4qAql6+sYnsz+mpgTOSnvFXSH9wLICTHk2NlWvP7LN9QT6OeP6rY\nGo0YAubze/mAvBPA5nrc3x3KDOz+2lAJ6eCgfpf5LhQeOZYbRLAKCkUDM+bB\ne+jq3iefrC5CfIOjcGfypvG/O3CWoicfvEwqi7bE1gFJkpO3tCcX+V3QbN53\nq/1g\r\n=/Qje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/density":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/tab-scroller":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b5eb51e94.0_1573151675785_0.9000873402303493","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc8d60eddc43835ee7c8d6a106dfcabfed2d4d1d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.58500806e.0.tgz","fileCount":33,"integrity":"sha512-eUd0eonp7xRs2OyAn16Qfsyn5ibokNpeEJy3QuKb3KdAM2oggQUNvnqDVcde2JcbWrUBi8ur4fQ3o1g9oMvkaQ==","signatures":[{"sig":"MEYCIQDr/D0vKwHMfvDcnJTqIDiOPmSHn3z96HkzCemknhYxzAIhAK0O8w6wMLJ9jQU3Rtv8tMaXU+7kQqpdbctNg5wjo9+M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYuGCRA9TVsSAnZWagAAd9IP/0hDkGk19zG1bLA+0Qrk\na8mG7Iy2td1GdyFg/igC5WMgSyEQmnnW6DF9n+/W9RNtCnCceojyKWscodY5\n4ACi5bvnDyJntU2v/9JNYYK2gzxbb/60ZD6iKqGG+eiStHcoGVaR1G8wPc/o\n19mWV/5dcKZgqWehUzjyxZzOZKzB3oj5xz54FBr73B4iEqJXI+68qkxmnTwc\ndZVlpTy9FlE3XSEWz8H0DAgDpPjNcipM3DLkpEvovyxLu8ux+iqmtEhaPo5Q\n4aW0GgWIY8+XlnfnESPY6OzAkm0WHi+rEoKab55AZFKX3fbw4adnA2B8KLf+\nj/NX8+bzlsyvz9A2IEnM+RDIAOkzUaPb9PxzOCthp8kVyCwCHmun5gsWTD6n\nd9azKO8GRqTRXBObj0QzO5w9d0qsZcwRU9CCt+Cl8Faqg7Z99bf+/0vxhTSh\nXZv57YnZRhPBOdLWpoanH5WtZ0oxQe5Ky/aOvMJ/tKcf/5vWtvNASFkAYigQ\nYXXExveF9I7d5LqHjX7tv+k8aM5fAtOdU1qBBGgys47axu66XeSN/VfAElzn\ncv/jK2wcJ5lInZ2N5jEg3GWtOn1axGeUNv818Pr90KSNHzQEM1BJ03xdF9Wo\nOVizyqlMK5VaDPrrWFRODj7+CJTG3pW3cf61o9/sbmvYX3ggukdL5pLyp6JJ\n4CBV\r\n=7WIm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/density":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/tab-scroller":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.58500806e.0_1573227397998_0.852114390741963","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/tab-bar","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"670b4c5b459e77f2b2b79999e26f3f235d1b2f32","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.66299b646.0.tgz","fileCount":33,"integrity":"sha512-41hK6akG+xCEqZLO55O7BChXSqHD8junANRaCa/8COZR5Z0jOz7eIK7HN3+/c+L/3QxC/HCGk2kLGofraw6jcA==","signatures":[{"sig":"MEYCIQCpCKEKTsdNBEJ056P+nmCKy8G5r1eba4Y1KcQyg+yF6wIhAK5IlkdaUx2XRBg+LUILhIQqvFJ3bJ3VT65VSPEXdBqI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFaCRA9TVsSAnZWagAAwyYP/1YX5ZVyx2pcqkh0k7Ns\nUTOtDn1Ky6WHj64++BmmejC5enzuJZzFfiZNXhnOtQoushf3FFzLI7oY34B7\nizt1A0ZL3KN/qYPYcH/XXKJ5ODPNPvUC06D5ku1bnx6QKjubvpdLhvBgqKDl\nsRldkc7ON80M8gVDSe4EswrgszQnCEgijhyldx7oQu2sbfOqEgWYSHBcfQ+z\nAsCXf2VEp4785IuKuWZiCesHBfEbxOdZG+3+WPdbTUjAwmaYUkgGhJOmP2eP\ndJBTKpfqySJf2p3vRV+Q7v0guKOcdEUJuAKKIe4b+K5cf14mwKvz+uv8JXcK\n0+qQa6m+rfL5p//9ucFVWxh03kohaGJRT20s5vidcPeTUsWtbxlIt4vm1mc/\naepFb1xV1QSSOw6LYXL/D24gTobkkQwf2gEOVYz3KfI89ui1F6bgY9CkT6I2\nFMVy9JF52Mj0icWCEDsMfkHSKb/WWlhYx6LVMxPwHx4Q5Hmem6Y3PxWMzNAA\nGvpU3Syeh5q+1iMyWxmQUxTwluc5FnfpzWvmyHC3ZDD/cTVFB35jiNcTtqTx\n13hp30ABpZjSOvD88NPp7cXSyyuEYii6yxCfJjsbgeKbm7wFuJlOKoPXAhyi\ncJObzooopDn475GDc8yHNO9ubgvt1qEQcgNAqjHfNKbkWZKOX8F9jKl87rGl\nsqIa\r\n=WMOc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/density":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/tab-scroller":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.66299b646.0_1573245273580_0.19034179588385114","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/tab-bar","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e45d10c9fa21038666beea5d706d9906be7f5edc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.821871e04.0.tgz","fileCount":33,"integrity":"sha512-wh8ma/QTaDragOX+PBe145RYX61YFCb3uPP8uSHXe8DU9j0Kcvi9bfkC/eyh5Jg3VBcduqgGX8rk2oyJY7YZ0g==","signatures":[{"sig":"MEUCIDIVV6INIpVeb1hw8rJ+FSFvuNMAOZwoEMyPUL8593GhAiEAo25poJZ7b94uVVegC4XlrNHwpIJq2ELEqtBkbJ6KKek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4eCRA9TVsSAnZWagAACYcP/jwQQFtFRS4f3iJmgrns\ni2D8fHRNqCWyXmkfWq02ZY0rI6k9lLSfeqhm9vYSjzUa4rptddhJwVHG9X6X\nBFe862J5PPRtidu0/QWFJJIX61ahsQ8URQGmybhNlhhg9r+qdIp99D/IfwYs\nKrSaP+8LF+mGMjeFXm7LQvTNXdGTDEnoC0JW53u+i0IdG/utZnk8Y+FYwuEW\nqMpTnXiIkLD3nqQGIXVyOqqXT3cdrJWBnaKIHScErL1NqyakPqJaGGMHGUq4\nEkM+XW/8Um5HSSwp9eO42bOIk/3gLsVFR9IqHvyTe/+GPaT2xkOGRT/Ji3g+\nV6r8pFnU9DLld79XQ02fvrVeQv7JGtb0qoh+N9gyOEuUPmWjQuhAgED1nbT8\nZo6M7uUpSDWdcAMcn4ocpLOqqH/kwQRR9s8Np2rcrujLPHd1vkVQB6QdrSUD\nCHuiFm70aYQXSrcPUWoLhL5t2mXy+wdYqdlKjW/EBH/t9M8gThXveO27aWJn\nxDKVLslPty1fn1LkH2g77lfJkvFVPfOUHihr7Zzj1oyiRIo9CVLOwt5n6X3I\nxmOl8MfWZBrm9rNtwXEQa+HJuzpEyEUQcPA0jeTkdy7/Cc+dIfkdPn4oZ7a0\n16Kv6ctz0MWoPzegGUBl5OUZvdDRwyFArDqVao/XTgnksUC7lpWmzgEFFCPi\nxSZ5\r\n=veqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/density":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/tab-scroller":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.821871e04.0_1573248541639_0.7440894868311712","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/tab-bar","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98dea13a7ba6d792050fe526dea861d8d5d7ac8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.491fddc31.0.tgz","fileCount":33,"integrity":"sha512-wp2bYb9OJFbCvYHqeldkbX6OZzJ0OjPurRfsp0YkgcD8YyoCvxhbeHTKdzypmhhXDomEXhCapCVQ27eqqpwOqw==","signatures":[{"sig":"MEQCIHH7ljb+1JQfmuZProslqmuQKss7jRsEOshVWGN537RoAiAs+6eHXo9ifket0wPEctrdoiFx6hKGHBXwiNgbv3GeHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxedHCRA9TVsSAnZWagAAaNIP/jUmD6GY8qFnpWy51BYO\nM/HxKPbwnuFaSLYChwPeZf5o5KkrVVdAzG+dpL8zh2U9/jrg/wgfvnGQZwY8\nd+ZlEsQL8xQGl44GlfuqnRzLPndNvjfW88VlfmKL7kTuA7oAEgDaSHNmuD0S\niRgh9P5e2W7l8DO4CPgLFWwIRYgYLQUuYyh0nHJp8wYPmxKbzfsEfNsHnBY/\nYaJ4r8ir4RY4k5lwXKqEjuNxz3a5azY8TXw/WVn2H6mvL3me5+iDlYC/F+1e\nEug2oP0GG9LqZyQaWoKu++jRvpuOEo9ft1k8q36XyntIboLUelM0m8+E4tIi\n5jJH3iocvKGFLZMgZPxzhka6KkoMw2LmDW3iFjNM44EeQeP1o3lkrgDQjQ5I\nLe3zh60N5u/CvCCD3bntbZVKeu3VE/GFSiDEdLIQLkQxEcPuxjA6wE7TtWtm\nii/xA1ZQBME+cUlHJE/arJujBHnL9DG9IvtcznOCEBmp0oQT+hs+YYnnavYb\nk/9Kv0Az6dbx2O+9I4UU5bXkB7ZDD/gEXhqnnu5pKn1F/WvJQZqXCBNsEY92\nKjCoSjtYZkk59HZe9kDrpFbqihyBnlG/3dwzwyr5bvVABvhGE+5/+3KdB4ln\nVD89/fvj2imWiSJVN78J05GleHoZL8q5oQqV7SOY7QpKNm4wOePvH7neGwjC\nVyA3\r\n=z6GZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/density":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/tab-scroller":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.491fddc31.0_1573250886634_0.5993204038661204","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6769b0097dee48ffebb9e490e194e486ad45206","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b0cecf145.0.tgz","fileCount":33,"integrity":"sha512-Q1lseJ/cIpUkpVcS7uhqDgXZPcgZ153BVduqOmXV/keY9o9Zg5+sMbbHCkVQSEqV4t0PLqqXawdAJwmURaeBvQ==","signatures":[{"sig":"MEQCIHathohm0F/kK7IqWsgMGnIJPKvVF7YCwsrT7cQXSWwUAiAR1sEKlWsLz4kJFzOFnU76YI9YWGM1QuPpbdHdqz3K9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwi+CRA9TVsSAnZWagAA2qoP/2WFpPUeq3WlL9M6mZ2y\nM4dBgRD2DqbY9IKvLK2bEzz4CSLK58woIEThV0glzGvoI0qPPI9MAyDYpSU0\nKUd/fpF4y/zW1eQWHnpQtsJcbbTL/s5gIB7NB0r4EhMeO+7i2QMokBnI+IYN\nS37r7HL5fBaXJj/KVJT63wpnxULw2w5LO67yhtiTdRvnLw9EKa/mDLkCIJrD\nUrhjKFudlwyDsZgTQfk6+1bjD83IZ3gp4vqdkDMMAYCwZWdR+FFG01m8nXvJ\nL3CkNvTi+s9pf6VZ3DGBbSuqoQ++SmhMy/SULNJJWvbd0qibN1VcHRucfyfw\nryWSx1n0+UIjt32jt58UQBI87k3Y1HZEy0HTXoEumlHGrOq1ywGdRIXMWrBW\nomyQTlkcQICt6HAKrPgoTbFF/nskmmP6lNBQCpGXXLLGVuHVuLMeq2WSO6vN\nqZMgTgzql81OKjnTUYn/aYzao1HgvHlCgkRXzEXAzZY29QoO9RCQmUR0+/lj\nmiRZf+j9DMvLXCagTGb4s+5GtF4fBUUPVb6Wxkan+/Po8gAjp1lDQL+UGdgF\nEEnd5Yey71nPPKVy3mGFGGAYwNhL9y3vd8AinQ3d9tCrq8rMoEboZ/d+DXF8\nOKKXpLQ++1X4Ko/Z6QDhGTWdv0QjBSaA9AYaZJTxdVVAIibbclzY1LfSRkYQ\nRBoU\r\n=mhGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/density":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/tab-scroller":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b0cecf145.0_1573324990197_0.04571868387608635","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/tab-bar","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b8e4e1e458eb4e6a78ba9e733900005c96ff3d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":33,"integrity":"sha512-vuIIreouXrGh2XjU/Zq4rtSvCLbRtZSvnYf8sOs21j8WHeQMgjITsiicrGMl6JIXDI8w41wtPFH37q92b96eWA==","signatures":[{"sig":"MEUCIAUjH2Kg1vkK/qBCjcv+fhAOkxr5XDAbJ8WMIRDls7q1AiEAhzrdx+MMLCnF8glXJNKl9yZDtSgFVcoEzYiqdll2u9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYB9CRA9TVsSAnZWagAABHMP/2taAi1TnOB7VW+Vnkqh\nosGjDFXnRNd5yqOTBJ1YbWN9PH73e3bRYv3eSysnKQi2WM0LRBccQ6s/isvb\nZCRhQkov8OsDwAaXYbN/HSFWwvK1p29Y9X2vcijzY0XodFSsi+7HFhTN1IE3\niBlliNwxFYiG4Nvg2LyMBjvCUDTt5/en8cHXN7MWXJbMibXcaH5Y0Z53RuJv\nHFXOdlP0l04NUq/BPhaHvL6yAjY3bk5D5ahguAoDcTqoRSFM/WJlvVyLSfKG\nVdNOgoMwLIGmeMRWZGQU7G2SFn0FWUy0pn7OgSrA8gzZDvO1/rIEjpFgniIT\nL7veRLtxOyxpxm+oq1kS9AxkRUJham2plW5rgXwb8yRi67ah9TPwtoEX1s/i\nKZwCY8qulCN6UQ+C+YOh4IM44ybMuuQF+X52fbNxIHncGAPbDj7mlAwNse8P\n3vnkfOs6DlqANWO3r7fNlZTNILxq1tjYWm8HJpXM+zuJcEJFi+U7JmjEKIJp\ntIcHhkMIX8JHOrrxfm4sMubmOOFDtbM1YpXCb7ccoDD/uXnubjVrdh/nSVxI\ndddD2WC5IAwHVR5YUCC3gJpvSEZESe2sBg2SbcgFhl02VjMSP8EY4bajqGjH\nVcdO0HUL3TZ+dvlcspM9v0z3ZFyRxLfTgjNGsAbf7Sp9iI1oFxAbnHr3F/eS\nPQpu\r\n=lPlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/density":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/tab-scroller":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.afe0dd1bc.0_1573486717000_0.7599457139617689","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"380125aeca880dd6d11e7fd0a570345f294ff28b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":33,"integrity":"sha512-tRRKvm2zmmcgHvoXAEW5p2fQzH74cp7sxwuZHdw5Gr3OKKmTJW2z2ai1W0KXvSbJJLoSUGDQBSdICDZJI8yR5w==","signatures":[{"sig":"MEUCICwivcAVpHumiEuZTcotrv9VFO6LD+03mMDDMtlE/mpmAiEA6WK7tvZ6D+7JbLsBRhszLKUXI6TYQD8YN5IPj7Qxv9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnuCRA9TVsSAnZWagAAl/oP/2itPwy32DdAIIRfeck9\nN8zSyZIA9Duj3/dDVXTLCPqiDqhvvxELmPpH9A/hDQS+hNaI95qkBDVi7yqe\n6k9u1aYIA/3eBe6KnyALOfCQKZw1OGyRGW3HgHc3EYb5E6rxUo3HikJgRp1U\nCWJsnD/L5crb5sNa3If+N2LQu4O3FPDbALFUNmqz1Y7EBL5siByd50tLbziw\nJlkXuG/R1PcR37h3GxmtOT3SLUgdLoSrKhR0OE432RFimJFYU2IySrTb7sfl\n7NeK6UYatsw2WifZQeedugtaflOgSIWxq+CMcyWWt7IDhL5l6m1Uy0J+EwvF\n252SzLiU2xBBCrfA+fD4S29mpm+1MSO/D4Jxf3skc5Avq2Grfhrn3jNvlmsb\nXecdJKSjlomUbIldZ5xFc/DEFJO4PGay/X61ER7Y9DkjStfbRPPF+Mh/Jm6d\nnQkjxg5WSOXTCxr6FiEFDentpWGtCxVB0qrqCB2sailbs6OSqhygwz2ZvR4M\nfdreChHoDDmQeeNUyz5HGA3Xw+CCw2jQjP8/UD4HD8TtvjOIO1QK9LDxYKjZ\nnWGceqpzIm/y0eDLQP4uN5xH8cdnlQejB5w++qPK01Jw7U4gy0if59HCaU3T\nh10/djBqqw8supqrqw2C6Z/HtgcjauOT4TpwZ8fAmaoLgWrNgrl5fFTNBtPt\nvgI9\r\n=D7+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/density":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/tab-scroller":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b4cfdc40b.0_1573747182383_0.3372290804393836","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/tab-bar","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f93726aa2414fcdac44d73e969776bf0c2a794","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.525989b5d.0.tgz","fileCount":33,"integrity":"sha512-Y3QOtCKgmk9WF9Kxi53Q3GNNI46PYokOd+2xuxSqYuAa5G9wZQxqLSb3y7/BN6gvuFirc2DE4X14Jt1Wj6c+xQ==","signatures":[{"sig":"MEYCIQCuUBpusRO/znNGnAPX+LSWRH2Xsa1xHdkmt5MHCEpulAIhANOCz5dC7SG6Pz2lsjxWZ34V5zKE+5kpQq0kdSU8612s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePcCRA9TVsSAnZWagAAWWsP/3vTGf8KTVTBH6k/9Zkz\nB2WEO/RqjSYtVIqfs3QLcydND/qftcem+wcPUojJXloeV4KGegQz9YFqxbmy\n/EqlVEGyV/ZDfVzM0qcYYAWrjCU5jxdDTnY2k2EWpWhyfrh9WeocktVjjnJy\nhh1tGQNIjjZYSwCbraMEJNZ7bz1ET4xmXsR8V5m6GkBrDTtYKnOcFFRuSn1Q\nYbR0Rvl7C+y4s4r0Ifkerg9sE2rYy/ckHKB07JNkRvkjRm1/sMGM+kdfuhz9\nwEVyxJi7YyBSoxG6hNXGHBUVLCNYiqHI3lkDzZv4RQEFGVWfqwN0jGfQjc4K\nph2I6U41RJAScURLWiF6E+PyiSqQGCA5B+KlNIHCRuPixlrXcYYlF79SBzp/\n1/yCmEOMHe2n7NRotNhrq8jExSL/h4/VJgoi8UCazBYu0Vz62VXHyuDW4P+d\nlQkuKiLx+6KA3lK38edCuYN3ANFPp1G+tJVZxnznGnG2IGZ/csIY6LuN06qt\ngck3F9vUvUv9IYe2ZIPFisWr6gIB8lHi1QtGbPM6POhMxnXAmcZMZNap/vew\nwt8ATajE5s67VkmshICnbdSo96QwOIf+M0SR2gbbA9rw553PpND8KPHUN+ED\ntG8ifXFtU67ltCdPftfywdEr7q86Un0vsItfCiGx2KAKLmn79GdLF56s0nZa\naWtl\r\n=gCfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/density":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/tab-scroller":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.525989b5d.0_1573774299973_0.2332441784067507","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9524cfbce52bbb66f61ed0d8b5c34b6126248229","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7084b403a.0.tgz","fileCount":33,"integrity":"sha512-PjfR4FQ6gj5ft0csui4N/qbaX1UDNDfsqwFI/KJi7BAXxk95HTLnAPA0V+RNmDmqA00XwUJevjlEjPvLlkgFTA==","signatures":[{"sig":"MEUCIEmpaCwQhsdL/Oss1FICL4v4s+cg/zNQnd9ArCacWg9qAiEAwjk5/Su31DxieADza7ReIekt3aRH3HMPLnJN2nnO3Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfo3CRA9TVsSAnZWagAAwyoP/0OyqH7XPnAVYa8TSXZR\naZ4yamhgifJInLNkR1OP9593eZN9cCB7y+4NYyh2wLMheXG8Qoe79DdhanI8\nyU/Cu0A59Dr9I3HbJxy+nX57qkxjDUwRVlF5ZO7oyxlwZVK/KihnYo6CjCwx\nHjLCdQ302l3PhqqHFSTiI2QVvaEpXpdfGS98VgsKgl6jJBUAmklfiB1thY+c\nRe1CpGwjeGhw73+68Ltcm0uwBWPXgizffPkYXEurVcil45wlTlmJ8s4UFprA\nGe/kRpWVcJKBwqjei2M4FSx8kznpN4sQN+HFSf9m4634zz6ECABt1g4jkH/R\nD20mSKVqDh2Bkcr3bIp+ZiVx/haxhd2OXJzexnH1e5jykLe4XazrU1i+L+HB\n6aIROsz/lgtA1220WZAYxhIwWk2ts5M1fSOV1r+5DpfMrd+u80LQYKHqlrvK\nTDp6BVJOj2H2QBzjeiErfgEVoFvzBcLIsTX9BEbNgsfawl6OAgnyAnxUx1++\nvyXFDHeYLDKJGxDCe8qqUVAbK0Q8J6hFd2/TnUP1aaMnN3ZRVvPdWvxJz5tK\n/ZjM/xQU9sbNCAZGu4VZ0gnzk9gtcKxSojUtYMwEWPV18+7sUmY9s757s1sB\nLtNty19gQreOa9wlVuysEeUtA5aZfv6OWC2K4v9GbN9fOtPY0E6aJptgAeq6\nVvzH\r\n=CluL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/density":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/tab-scroller":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7084b403a.0_1573780023055_0.4251611642512203","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc5082ac58bf110d61fc3eaf4de73b9cbba05abe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3cbee6dac.0.tgz","fileCount":33,"integrity":"sha512-bTALThb987tuQ7NGf94pqmRB4dSDyGqjhyt1zK05vuujesLx938YXs4lemhCdC2KWSgKpW3U2CZCDVAKW4MX0g==","signatures":[{"sig":"MEUCIQDPSYaxPXfu9ve2+PBK3pPoqckdF7HETmH9IKK26ZsMdAIgTzJ4YBD/Ha83AmWCM3ZQPa9+M2XfKS1jXqSbPhKv4wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyfJCRA9TVsSAnZWagAAaL4P/Ah/Gt+gyi7I2FLSJykv\n7YVPwBjeTwhvAtp9acCDoxAoLKqSM5FdmDHYNeKxtphf9zRtPVAXohYG4CLw\n2wjwyIHRQIl8yYqRadoVVHLvK17AlIfwc25GN3LsZCk/uuESHKF7eQZvuC55\nFF4zfb86AZhuGfWjiWzwJipmcrd9UjlpRo3OV4Opeg2GK4CFLmg47nC6eCJj\nQ/yaZ2yWvoSDEDV36x8unshshkZ0AUUhs+4Z0RMSyj40L9dzGitU4mQRek3U\naRPaqLZiAT1vcZdfiLfsu+wsvuz+k8Y+D/hXZLxtKdYTVuA/FN5XvHS+q6D9\nZysKmuZpaEiwAZBSFTF4ob3lKHS/rz96EdeyeR+xxzrXnh2TgstUIlWNRZ2O\nrc327QCFFb0Rmr1aoDKPdZFDz7JYHSo/fYF+8nsvTZalfzUpwnnJODz5UykU\n+4HjfD/Oqy0R91kjT22gdkHlCz1LXOuHELG2khciqotdvED+bGpZ2lFWSO0g\nQMCLY/mqJV5Hz2qtHnEns4PElkCUfcCLyWJS+FfOpVmoiphYizPIWWIJsl1K\nSq+uABhXLBVvuie507bPAyDGI+zJTBrssMjQrAbbUBKALPbS8uiFdrvSULhH\nBUZm5V3Pc9A3SBM5ZDfdC2L34I2U4kkUj3X5QFgWImwnsMOwtVBuN88+tYZm\nzuOB\r\n=W8EJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/density":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/tab-scroller":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3cbee6dac.0_1573857224712_0.9551044365203141","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/tab-bar","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed6e86c3f722d58f1fecb36aceb5beced9980f0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.591a6ad44.0.tgz","fileCount":33,"integrity":"sha512-hGcHvNF/MODWyKeTRlKCjG9jULNfvRzbtkYxACcLF1OktHbhuyxS0fc9iuWAEjC2cJJXR+S6c6+AH50TinDRUA==","signatures":[{"sig":"MEUCIDmQKC4faZaXNldoEtvpYtlm672oTyCIn8DYBfqpXz9nAiEAj0R2PvElGK0CXuzKdkQUdU63RdVVkf8CG9IkqN7vp1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y4ECRA9TVsSAnZWagAAowkP/jBKBbIcYxE/YygMgwrf\nD+wZ/7HrfZLekdOKrBwhB7T0LvLfXqWqTiKsraKDt+Ah2blcRzn807VsBjCc\nH9EFZDFVrLqpYPhxacOZF/16C/19VgZrlUx7h8Hv2hDwRtIATKtVmoP4umPq\nW1XBuPW2zY88mfscUEby4yZB9wFx4tsckRbanlghO8H6nyQlGuW5+6kKU41o\nH5wEUPVuJHLxKLfx/fa3idX2lmBzoqOAnXWJ8YeOK6kPwLnGqXLt/dKofrY3\nTb0L7AKcZVuWnSTiDgyXHOcrCcLxt5TvGZdLMbomoOKP3ToNX0eh1Ko2o3B+\nn9kDjvZaqUek4d7nxTmvH/w+e0zoyIa5MQy+NcqkjFMSiZXEM0z1zWs4AOmS\ncEHNAb0nkcSK26jTe3mM6CbTOmSCL+pStamhnCBTULyT5W0bzoQCx+xTm+fj\np05DXVhTKrk7buvh68TeZPDRSjFPNExxenXNvUUchcRsHeR/ILDMFpTHRC9H\nFGBZHW/FsTiB/vqbfiXkaYxGxmCCgWdTsaH9VEeGtJ+1UZ5V4tp4BAsc8eY/\n4C8dhn3oBu+Y0UPUd2N6TUBHTRPU1sLpOhEuNmmGwdANm6BV8DZ1iH4vxKO6\nFN9g5QaQX5KLgJ0NnLT3SjcaaK5OK+5zTVUfqhIHWsoxgevIoz+eX/NTO8m/\nzHTb\r\n=SYqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/density":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/tab-scroller":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.591a6ad44.0_1574120964119_0.34495176446279907","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"402cce9ab7e6e70ee88f016113b2fa04c307767a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5729943ba.0.tgz","fileCount":33,"integrity":"sha512-pJ0GRdiuXxgPKTjUtimNuctG5g5xkEZGMNLRE7ACabtA4TJjJmweknWFrNDM2EVd/etWwtFp2G6AQDPYnZG6KA==","signatures":[{"sig":"MEUCIBTH0DVUOjTDF0B6iYk20tU1+kgBoL0vHEDWK04AXsz+AiEAgKX8J5zKrwq6cG4kzI4X4YXzcaXLmm4P4fcrwDnog6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1M0SCRA9TVsSAnZWagAAPkcP/2w1zugqjGVfoEHvM4yb\npnpdS0agHW2Z3LWjZ68pISOXIgtgTwE87PWQaDkS5hJS+ZaY1gJRQbAgV+nW\nG5wRNBCIGn80ulOQZN9rIqy7Er8hfkJkEkbHV+BpHb56LXh7RdS6neLDpow8\nnX/kTjdECEkojIweBVbA13XK0zPsIjQERyfCW9akxRloHCVuIvm1zjmlvsmr\nOKIBp++Wjxwh/hO8DiOirzWsqNCkNefL2ZBKbqqsQgPdVPrpLpIWj7wIVQSE\nfSwNPCl5DHoJ4pEO9p4txAtF2K3yLC1vYJPc+GtvG882mTQXfi+K5VPfoaCG\nD93GPWbn0u4f4mMGAXlqi8FcVB513b4oPPXDsJWKQsTWLZsHQccPMY4Narlz\naJzLqIj3/0uLcBrONNrcLL02LVsS40ia5uRbcngWy+kbJBZh7x7SUBfJ4uev\n5tCFnthkKNxI8PqLeaA4mREGvZP0qzvluILr4Q0+iLp1HoENQcC91znVyKZm\nxHnnYr6TRRAN5icI/JWQa4lMtVjuFjVgrB/k/QtFYN6j5GZBBH+YGQXRoBlh\nwsEMzRffz2V7mGUri2cWJYJTbRqd0nRsnfSq4zC/LvvNauK1odInlhsQ8/2f\n3vAQLvlQ70Fdwq3RmCT5jvcZLBRwqDb5in7JdsGdQJoK86gDShNE/4jPsOOX\n01c7\r\n=G3mU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/density":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/tab-scroller":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5729943ba.0_1574227217805_0.1483432857062581","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/tab-bar","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b4a46ccc9b70e7eb0100edc0ef6d2303065760","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.e89750dc7.0.tgz","fileCount":33,"integrity":"sha512-2hRpcOsQhnBP6s3rlU3DzpqZV/IJya2thX6bFcznmrt8oT1nIbZI1z9wChT73p4kc9fE3w05I9Xi9BkhEAKfMg==","signatures":[{"sig":"MEUCIEJLNwr+XvlmRk2ILuFqafMFI+rOMGtZi5JZmwox7KnLAiEAx3X13VRMVKylXcNdcJD0Zg0q68dhZ22M1He0TYFyh4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dstCRA9TVsSAnZWagAAZQ4P/0U202JLVXkBirfuAQ1E\nLbDh780ALMzDWFYvqIy5Siedx0HTSrCoWESVX7uW0/xQdk+VIHkb8mRg5CET\n82VcEapRhhxvuCmre3L1x2w2px6sDYBYxTZ38/arKGscdQIZhJEl+wlE1GlH\n8GufxbFLRxdA+iiYMKNMWNm+zpK7s+Uz61RcgXFFZW614s6goln3MnM/vI9c\nm5hZSwzvztYYY6nIKKd22jHSdfTCag5znRGVLKDpAhr2CyVzUBtMLJ1mNwxU\nUaoWf9mn5ZK7kyf4pIhxdtSHUCe2g/eK/diwbYpW+EJeLReD/J8EnlrB/pAJ\nTJ8Uz6xbd5Q98C02Xw1ncHBgp0zpE0lCwPto1sPc8+rsK9xHKd9vmN3ubQ+k\nSZ4QupijBQY2fXHEjTXZGeF475czcgMtaD/AkUJyJAAr2sJL1xESxnKrIKhq\nB8vHMBjT4Su1YEKfQ8jeMrGeSuK2fpDOhjO8M3MEI49u/kqcYduVmsgGcSGR\nGY9GBTkiN1siB52mLrOesw16NPdw6xi2oKZeNzUSmmeHS9uddsCB6iOa/hEK\n/L/y2ep+9lpDxPFthLl09LCujlmZmDxyqUmM78g+HJcx4ETiTXEZOGpCUgKV\nJtP/Xrkh2fwEr2yKTNxRFv9g/jCHemYWmGlAFpqsYre6FDMdHbBcl09NuKkQ\nfW4E\r\n=9x5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/density":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/tab-scroller":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.e89750dc7.0_1574820652889_0.6390360042294656","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11e57630a092af8967583b6623cb110836c9dac3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3e560b33a.0.tgz","fileCount":33,"integrity":"sha512-d3fVouJsqv6InVd+iZm+R87FxI/cgfb5e2BC8EyRLHJjWWmPNKnHX5Y2c/OFcrqLibjwc8EZv9s8XDgSqoVvkA==","signatures":[{"sig":"MEUCIQDnpc2vYd6Gu0i5cfii5Kt77p4wachSyNY8jS28ktJZhgIgFG1hJnOvk9fVtFDb+bjpxGdh3gH5ceWxfWqrV8eCe7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtSCRA9TVsSAnZWagAAWq4P/RAQcVtFZbB0AYhWa86a\n250o/BzV91pD9HKqfFKBcUpPHyuuDm3c9CDloFzOnlPrDD5+MIClj9voDQ0G\nrTxEc+YlUQIJcnoiLJverGa1YmC2Kp7a8xo7KS1t6LpzWQwsDF8QHbfG6rbY\nfKJdPtKGF4ca8mgIz/jws7kuKnQ432rWL8VK0Nd5FvBiOstCxCAQwwH0+GUA\nO0mOoUVdDG6aaOnmqpQUVaABJOCi0MMpX9/Gcv1pCjJdKYKMozwfozjI40+r\nFNHbZZ64ElaH0+MwMowHbM+lS6Tmx6/DAmz6wiqpfqreQEh4t5IIDuDxbyOg\nBk0FkNWmG+ZROHUMTPWTXAtplUmlBef5gvUpD0EMkykqzrm0Ls4k8A1U9/fD\nNI4b9mVlqdVAQkY1qGKYyf8Az6J5yDlXYrTmRujTFg5OdcNzSo6F8Qnxdg2w\nqxQj5ZHyh8QYaGHg+tWdc5+SO8LjZ7UgpBY0m2n5+rVgDh3x5nLVGYmA9VPR\nU0WXKgQbtgfNxW56SQEcwaagBQB5ou0qrP6RH5lljqrPK/t+4mhCJSp/F/xK\nvWvxbaV0oY1KHgTqz5lG6dzwOCzaW5vByZMIWNrdVoZQQsG7t49JWK1A4spT\no09d6ebiSs0zzkJk2YcDfZRQdv4FHcPWyyBgeKQHQLJ+eTHyUEo0mLMM3ni5\nAbXV\r\n=8Ncg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/density":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/tab-scroller":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3e560b33a.0_1574820690044_0.8531325354525645","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e3905f08f073e7e6b28a0a37d816bad986fedb6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":33,"integrity":"sha512-rawzTAlM427UCCiP/L93MGl+1Ddr8Sdf8RvNoVrWex9JpLagI5FDQKBRx9aeNc7OWJVrbnyPz3NoOc4djZmsPg==","signatures":[{"sig":"MEYCIQC+leYSN6psPD+r5GnHZps1sTEXn8HrCJS9P1MN1j9uoQIhAPiRZQ3wEYq/Ijj1qJ8h7A3fKaK5iqQ4QdNByL5gFpzy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtnCRA9TVsSAnZWagAAVSsP+gLEKLMPtaICSfw6dYbl\nOve410oe0rMtiZB4/YzXJPK3ouls29pt8M8pYUviRL3lYK1l+KIbzxum1/30\nSD2LnNP+m5wxNjEjpgXtsm3USj12R0xDIFlio2ip5DTdKtao/b+Mwe7BNO02\nFsG4GkrHJyXgFnK1PC8LeRiOOKCjTuFHlmHltpEBzogax354uEreSbRFrU2f\nwVjmql3+YXIOXEVMBlJ5rccOatgkR2J6Df5c8wLTnOaH/5rO1bcPR1M6xmOJ\nDHZ3FGKJY/QpyDRA4ueSB9ueJzQzapwg8OmIzkmqHmNI+nke2rCnwmn/UBXt\nq9QMMy4XDpyRGyTKqYub6iCQrOhUQcPcTZ/zNF8yFNqwSnuNWbpK4xtDteDw\n+e1C79bVmtXHeHU3HD42SjZJbdbF1bunRWfdyWaSrHrQ6XAHG2ljpwXwzdxA\ntq+coEJn99/Bay+cuRY+Xe7oqjje5zb578STlHJi2Ftf5j5pc/864J+kxZSV\nVQzz2v5WU9lX3hDyZnBfmuxT7goYBAtxy3kB9lK3RdXK0YM82TeMnfjb9OFN\nAKkHqoMevFCNvVaR6XZ4wFS5Ili4SOAMw+v6y7BI3bP6JN0lOBrP+Bdwk/Gh\n9Gcepqt5FKa3F2GAkJj1hKIBoGiXlSBT58AVVAB3yAnKpVfWPucC055jSbWx\n9nvO\r\n=KjfL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/density":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/tab-scroller":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7fd17ce5e.0_1574820711077_0.04222149200999836","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa10936345f60eb5ab11e4158cd72574fb664d52","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ec729683b.0.tgz","fileCount":33,"integrity":"sha512-QR57j/SNtXc8iYZ0P+NYX0zlaI04f8dwsAi9M8BD2rK9uDJQnI3mubai/PU4lMIccwrTmdC9mEEnM13kkhP8rA==","signatures":[{"sig":"MEUCIEjpUMXOGry5j03gqq9wXUTVv5iFaRaHdzn+nehGnlL+AiEAxHakr/dxouvwhDT0bveRK3vBkst0F0qI5OPE0RZoWJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyZCRA9TVsSAnZWagAAB4gP/ipLQLFmTPe/Hg0qoPQ8\nZ+NuTJQRSzjrPoue4/HQhSH3Xj/n25Dh/6Q4HBW7AwrxtCAoiO3Gk8S/BpXD\nZhSHq/fRmWb5Xcx6A5OW0Gzvl9/HeyMVpGN4Wma0LC/MrorCncmolS7ruZfV\nHHEA1C4XJAtF8WrccS/x7hOF0/1fmGjexZ+ZjNPGBcohipktNpQqRcoYNOSN\nfR/twne8uonA9W1r+R2ugH2SgyODj7fwBLVLX2G5S8b9E1B1XttXI88khFGN\nrD5TXEw2RItb5SvAZdHzt9HcofCU1qkiBkhMMJh9dYa5G+Duq385RNt21poW\ngKxCHyhyS5s7wXlMsEK+BV6Z87RQxgopsPQXR/DWTdn2hzc+if7mudmFMfYH\n+ZmNI+0G0l5v/Y4r+2zKiReAqh61XzlE1S9PRYzDPx2Tt0d8jThf81SQQhjh\nop12efHAZ3YJPzVL5U3fVdorQSYJ1AML1eOJDU6YYGZCvuEmfLdjEnaysJIG\nrYDaaQmQIw/HCXCXgB8Jshs5aT3dZ7rNa6uNFO8WNJ20ViUsyHwoE/vDl/I0\nX0sZ9xIqXjd0tp5FOb2o2M7R6a4nvKMry/Dig+P/QteIniCeDWJz2PyNt/73\nlogQ/mTH8LPyGnqx1CW4jAEwm41gfQz2Paj5Ylpq2NlvI5E/kyC/D/SqQ39u\n5Z53\r\n=FUJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/density":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/tab-scroller":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ec729683b.0_1574870169452_0.6235619410077455","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f1d3f6ba8ba77aff5aec1ec87d240f27e1eb028","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":33,"integrity":"sha512-Jae5VXw2zVa0H7g52BhqgC8g/moNGEjHr7kecTCUSnj1Ubs2kdKz3aEYhKA//wnqagzfKZFUfouGzeocnnCUcg==","signatures":[{"sig":"MEQCIEygjxhGZTJDZCDlZymwoVQeK32e0Wvp8uCtdnvm3Og+AiB8/NR+FUoceA4sBP/yYz/o0q/9ZMHNPddhLfM97lVU1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svSCRA9TVsSAnZWagAAL/wP/2pvb7T+/NVHi67Lv0RZ\nVKLR26/Ibs7sBRb1Y0x/xya2XzRb00aBCvCNVPpju44UvZQ8gbC9j379ua1R\nywdpZvpH3MptIGU3t38OUMTUAaXoIpCQNgnrpRSvhkmDIcGbnj+nm4jve09c\nfPlyK9jYlCrDqV81x7K/eV8/ZevXn7LyRp1KetS+u5tWgbgTrcniCjSQgE2v\njkZw918yzWGmKmTzGtLRXAfwXKkkljnDgme7YaBUpxJ2sivCZxvY/EnmcMzo\nvf44frw91Ew9sCBq4WK4PbYn8MgvTB5TYKEQ1Y1WL1770S14Zj9goDKIU/92\n48SVcHwja17TlBeEK7SKBD8oFkB6QDPAZVGfGt9HBCdXimaYfk5BlyfynjOm\n2kaoZ6UiB0X45CG2dPrel61lnmET5WtVr72QGDfByNMABg+cbeiioqbpMUR4\nXJmRVH4YZWdqnykO6wD8P2G453Se7qp+1T0LsLk4lPuBW/gtOR/D9ynkXd5M\nvrNiEA5WG/9ky1UKKP6cM0q73huUWO4AnLmxEqgPLMEvssxiccD7OE69WERN\n2R+Ugn+XAu71h1kvERNULgJBegogm3tXG426VDk0E98BYH53Q0m2C41SGx3w\nTxsyW8V2yZOu9B6VgPSVpVdiUcGGNS+IlgleN/bW2A0VPwPzVFAP7ZR8dXZl\nQsty\r\n=V7Dx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/density":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/tab-scroller":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b8bc4a26e.0_1574882258142_0.8259447481459654","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e231821955a0256a7a133503b22bff532ac54af","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f978109c3.0.tgz","fileCount":33,"integrity":"sha512-8JpWo2BcJ0yiJq2VPDjQhXO+7DpbmOz4iDmGzGyEGEsJseRoy3uDB+mwjl1snnSn22/JJak1eNA0wz8NMj0tbw==","signatures":[{"sig":"MEYCIQCjr6oajuCljjcC+FfHpESWTW3cn06Cjce147p6SpCjmQIhAPt/Ygo8UNmqmjbl+bz6dbCY5bOG42EeC2JUoTmM3g8h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UUHCRA9TVsSAnZWagAAAFsP/1p0NdpmVWfMRo5MSVTN\nBKO+TNiI3iKZtPNGLg0yx3WOb+vfuG03CfdnGQ/a1NgC7hMwli9ZbLz23n9J\nK1ysM57FK5hYPHPY7+3zlnNo3Py2tk2OzZkwHXxQpzUUIhHChHx7kj5KUOEM\nVKiG+8DYEDyB65+ZEkhpsyDbkAdz2RV/ojWUu9h37uzarglJibR91L9m8Cyb\nw6ipmwpRUTikMCgTLefdC8YlIBNSdIoshwek3ZDQnclbQCT8nq/jHLs5ZzO3\nz2fiwQxVpAWmO2l9No3SHolwUa/7UYmR2QBRs3Pig7kZlmZasA/e0HbXyfSW\n6vPWDvGG6vfJGjuS/d/g+zKdS7cvoThfjtc1nXZssR2f8WvAFjCOlzzPYbjH\nz+5IDu2IE3p9gH+DolAHNpLpa8InzXfHUj54XD0qIjZgB5bVy3Ap0iyXGYKg\najnJ3oUEA27LJHca8gNnNu5x4GoTFt1x9asNry5rCQwfUDPN/rmtSL5JPeqF\npwkRgv/9QfM+c28sF4wJwgmU441sAXrGbcUkWzfLvGv1Tc2y6wLYBt1TQryA\njOYaqociJ8nxxTsKIqH3MaqzNf4+TqoUJu0r++Fm1BvBtOlZEYZhclVjbVCG\nvy5cQVCqvb/j0Y67rKt2D0RQJVryTv6OMiHBVySHtXJ68DPmDSVZeXcoRnrz\n/ezt\r\n=gviI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/density":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/tab-scroller":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f978109c3.0_1575306503456_0.7483166300363275","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3adc079bb6c297c05e5ac1dfa6412a469dce9b9c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ad9dfe706.0.tgz","fileCount":33,"integrity":"sha512-FwhERcFKirDpLh0P8assq8hFQAFMafcjAjuz3pdDJmnr9yKNQk00NdENBSKQOyHdAie32cAIdlZwzDrhrnc+Zw==","signatures":[{"sig":"MEYCIQD6PtWu1URYiq0cQ51jgU1CrM6EHpUwO+6I5lU/Luj+BQIhAIwXR9cXvUg3UnzCC1pOdZ4AAzNnU7Qrx5JgQXx9jTSR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1pCRA9TVsSAnZWagAAekoP/Rr+JXqlNh8NmU8Ajrfj\ndswPNu6P5ZFzlkp9P5swbkr5WTMFJcdGgin6C2MTq7fokEgWcFpXNQUtwSTR\nS1f4Feb1lTl2bRx6RVNLmWsZkhpVnWVEi5PL92hXWZQOBBtEGvNyJ34DqBGg\nC9jPfXwSxZTVzev12V5x5SMsl7UxjhSs4V39Ws0/Pn7WXpt5F1tJ+AjjI8oI\nYo/1UPAX6fwfp1fDge84lrZsx0K+5JgP65+Sdtqjfx82/R5mRLq4bMx5YQoW\nzBh3yDJLSf5MU2nWlO+V+rdzuaC3JcKfC9PY1dAh4jtg7MFoI4R/ab7oi0JC\n7b5ZQSV5J7v5u/erlpgNBuLtUpf0Uo6OLolCN7K3a1KNhquoh1MhEtTEfBDh\n/pXQiSMBDJmxd3MKBOzfU7+SvoPRQRH4tFChczvz2eCpV6f6BLeAODeE4Zwm\n3mQuiNwXqM/NjOizB+jpuMm48TVnFE7fqYNjnVy+HvvYUMyjGPJjjwln/5R3\nFX7g9khq8/54ML+e8T2uizLTJCGDcC9lqfx1twvEQt2yYYhWjKanSj1i+z3A\ns+SMUOCM6huT/AKpwp03WDYO+GlFrBmjyuzXAHg2exTcHmBHj9V7Z0OEr08Z\n/el2WGBWgDhFv9GcErXZAC51Ja+LxCGZZqauVdtIb4LpgfAL/Wx+J7BWRMBX\nAK/c\r\n=dX1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/density":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/tab-scroller":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ad9dfe706.0_1575415144942_0.6245892513987965","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7acdfc2dabcfd4cdd056f1f98cc83dc705087081","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5e45d77f3.0.tgz","fileCount":33,"integrity":"sha512-As7dEz+YD2jH+IJh7xcuRAA9GdJINQ2SCCZvCQRr91Jj71oodPKhypGFeJR0yWKqS700BdInXmanpj8Dxv0XMg==","signatures":[{"sig":"MEUCIQCcbUQrqWJ7ZKnj5QPpzR5TYQtoVz+psETVq/+hMjrcXgIgEZQJWVWNupX0NbK+A3Y9VqjPQt0ki4oobd1Bzd7YTdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3cCRA9TVsSAnZWagAAmocP/jsSw3WgNEmUlk44bb4f\n8P83yruVUCLyHHlmGmd5rbTuKnmAKOza6HPKOKco99nHx/GFhgHqIe18JwlM\nw9kjaoYYXbZdKv/7DojR7W6XTriF3Hggu/1z876eHGOmKbK0WudXc9fo1b2m\nvbz97zlkm25xugyDDnjlCRu6ICDeHf2i3IABsIU/o3XMNTAJAv/3RADYZYhY\n5Rzb8aYrkb1RkyobJqMM9CbFVeyfiU/Q14zD+gF/REJr23vCxvgGlyRCJA8H\npUTNrM2W31DzMIyUFoU+cGJaklDyYw8zg4gBYrX3amDj2KeWd7XA2PEMCcly\nWx664J/sh/qpb3M96L7msZi+vQW/d45xTKY/OjjxqcxfXuH+DftY7Lowd3xX\nltlAESBpCugao5U/c9dxkDpwoozCVFqPoiD6K1Eso2HZiBGSRCCaoH1GSCvn\n268pzw8sPL8ueIzUd5dNYncjaP5xhX5f/0uC6dMJFFlx7Ad4AwVFJpvTn6eH\nnCzgInicO7Bv6YgrGBrlpkIzHRlMXO9f4PK3zCEFO15gvX0gP8TbYPS0ecZy\nh7MamqYzmydyRLJyo4BuRYx1PRyeNF29uF7otzquN1osTrIXLASLYU4hQ+sV\nSxImuh7hd96zd+MwfoXYun/ys+yvwJHC+sAniU9Go4Xxf/+A7zaUsRZHKYW1\nXIJ+\r\n=yxSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/density":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/tab-scroller":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5e45d77f3.0_1575415260407_0.7883925424399825","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a6ab0875ea6640032086e00c67ac091a211e0b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":33,"integrity":"sha512-fjPlSb1YBbIiHtxRwnQM7GIuEc8Jhe3CEn5jMgWWhqzS/RaajMGTLtGmtq099wkJN76+h2VcczxdPejSKLTknw==","signatures":[{"sig":"MEUCIDjk/BSWzjNn1Dz0Nn8phpoPDtC2v02ViY/Wk1QfyrHNAiEA9FZ80rw++c6xakKkNKn6ZkKzIBkNIRIgw4xr9kusZLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3yCRA9TVsSAnZWagAAqX0P/2ZmXe6S1g5KPZJnTEPm\ncNjKEeg0K9jtUOmCs0jSqZ1DZx1wXEnKsGhn7Rxzk6q5VlhsmXHeA4sdsLrB\neyQdrMd4a3nGSzbwteY+grDvqYZDrRDLP1sFuIAaj8pR1Os/obMp4nUtvUCk\ncZIMKWYHHXdE9deMeHMGwD/pLE4A+j3pZZ0zuhMocVoQCrixsjwu0kQGiAuz\nWYo7mvtjz9ikTcuEWGW6JAou3DVEKLa5Ka0omcYI2h16PwYNVKb1XnvfYS/C\npM5XgYK6aZshiREekHi0Hm519ZY0hXo/qDWrNZTzcOu9hu+MKBj5yiamrmSq\nbFYpElPMWO0uFrHDPIKF21WDt9kmxX+Yj6ByYLMpDEtziOOAhPhDXQDS8K4u\nvXWaUffr0Ch8afUM4cPYdq/6FRMHo9ykICM49miKtUK26hekd0EEq62NLbOH\nnBGHHx0wwfqslmPQDEl2c515A1L3m/xTnWJhlpltIwcWLetcTBhwsbTaKP3E\nucu/dnm7LvyQQ/CVsSqbOC15WQ6we6N0ydiV+HvWF3RMyZHGVRVzAO/PptVZ\nA9OEUXyzZxdtPI+J0HZbhQVEkM1fccPSJigOxs0jx9GBUXjcOUwEfeqY/JOO\n8lm+iuuWD7MDETqaVfUWtO2uwFnI0XJEbFmgJd1JWKS1XJt11hYz1NcFIMEB\nCwfD\r\n=2rcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/density":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/tab-scroller":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d10e8cdf3.0_1575415282547_0.45135249953473444","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb11dc91aef18466ded08329989959dbbaa50852","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":33,"integrity":"sha512-dBEiU0BGx+4NFY5d8pGBowap7QM5h+YJGNWb2XtynOWTYjxLA2fY9+YDigT+oDT2YLRRBG7xHl3Uzx74z4bSPQ==","signatures":[{"sig":"MEUCIEf9+YAf8NFW7em/TCtq4ICMDK0hG2lQyQemFUoy24lXAiEA9nv4LtO+w3GFmLmseqcmwn9mtL4GWSrr9hsfLO5bDbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vYMCRA9TVsSAnZWagAACEEP/jxqMiOO7haZXAL7vtd1\nJzTuEZDb0xLklJtutDfXetjRuKI4d7x49kxs5RL6uFihsqYnjfe9McV0nQ/c\nWjGaVeryzVoibxifek0DKvWxmOfRSz9vl9voCxIKEm9pbv7BDq57ckKcRakw\nw6xoXZrs2cl2H93CblRtREnIeKTi9M2e02O5e5f/d/ndMPY2ngKiZBSh/OTm\ntLSdycbYhnf+gmK8rgVyGxdYpZEt92kjsB/U5Q5/BUMxM+n4b/vrLqZQUCR2\n1NOpQyXhlL9D8zzbGj3Tm92dAvUINQzQy2pxbHk+CYvtopnysciyrzQGlDlN\nS2KZYhtoHwYzWwYKdFcO4SWcELt+QCdhkiO20dMW24VzlO03kF8jRu6Bq6g6\nMDaA64j69WMfp5czrrHUzayqeFEeWa/oM4DtHabsEq47Eh4xYIJt5YugRtDc\nDwksE/OW9PtsTqESPLWXvKmBGYC1eIK2h5TkZMWerXlJbu8hlRivqbaS61gc\nWIPgcYk28ui+InpAA5yv+bzvogteIHyEmic4ssK4Ly0iwvF+IYJcuBhMVF5R\nYYJxQtm5hYZPUiDeF0jVoRXzdcKU7SBVHpaiaEEAXOiakOxMJfslAL9BtP0h\n12haD2UAg/mc4XyGnZKZA9TQbh5YaP5xYBX8qmsH7O4UXyvJQQZLjS1GkGYS\nIwYs\r\n=FY/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/density":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/tab-scroller":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a5dbd8a2a.0_1575417355983_0.24880683675655857","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"057a0db3182ba6f6242158d21e841b7e91603c46","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ba879b68b.0.tgz","fileCount":33,"integrity":"sha512-TzvG4lH9IYEcV0KXT62KRsVncWjuaep+QN1W6T31UcX4sDH0PCNd6vfgEUM4v8k20VYS8mLsTniXXrCDRsQCPA==","signatures":[{"sig":"MEUCIQCUmmtxr5IvZQtnXuEgSy3IqK4driz2IKIWah64HmkWmAIgYLwAY0jhuS8zGOtEVSGInQKlv1CyywFIbiBKBJlzHSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BXNCRA9TVsSAnZWagAA8rIQAJt7TA3OHdrlgywZqZ7S\nimZAvwowenhjm3NDc6VOQAvO5bHKseZnp8cLrGfPgqjMNeZH8WDX3myHJnqP\nJfDRdUECx6d1O3Vw4DlNzbtloLNNGf26oWiMUvNIK3Z5fjbIGvq1Zt8Wx9LM\nWvtRFdYmyfaCccZIxHVzrdSeETljj/HV8+t+2AWVN1yvYATHLlDreZjdyhD3\nT6p9/hdzqMsCMUpRZ0OJf12R567zhBFPxxjGjHAD9xqWjCd3JS3Ow+QjUe8d\n9+8U1XJW+mkqu60R4OYYRAYQ/O7RJIabaP/TsZbqUK7LU+ZFCEIbNd7j4Q4Y\nHavtUgvik3ng4suPjQidBZVik1NtVAh8gmLnMCcigx2irW7Sv2AdWlx1qZhf\nkz3NSV6Uy8Y7kghmdEMWQOwcfbCO29iaEQhajI6hzOoUbJoMxCOzFkh5DOne\nAMP4+bNImdpB7y1zfELj0r8glALsBdoQ+VDt4X3ATrBSk8JriLBn3wTvZp1V\nkgmmTbVK/JVH5k8SkiQRxzifIYu32dhBwOiz0M36kW31bzKagsyWxI4Zc6Je\nlhA2QIiaIT9+JAQDSEip8/UqkzsiFXl89IbdnEc1SnV//qh4xHc+9YRLhYk3\nUDl/mccJAXEgYlEUaydsifpQRhGGjGAPPYH9qt3DewVUYFZr6nXlZ3TPl4pG\nszm8\r\n=tsoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/density":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/tab-scroller":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ba879b68b.0_1575491021494_0.5415406770073052","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/tab-bar","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b12b740f05a1f297a165ab2d60fdbb37d3a43ee4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.aa0eba489.0.tgz","fileCount":33,"integrity":"sha512-vnWlk+PE2ul1u7GlEfTpWAbni5lDGRKdsrpfTy8rMno+URtjFnhl5srV4/mqdzhDxa/e/gMemtd9Y/kO34wRpA==","signatures":[{"sig":"MEQCIEvwJevBO5t8sfO2OUkfpZWbRD8PzXcnOZ6dlcLQWV4OAiB+7j8f1eC1HWIQrAdLnkk7rpvIja/lS/ZuMuLyIEjcmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYiCRA9TVsSAnZWagAACDwP/0bMMCzcp0QS5rc7DNQI\neHBuU3iVL6dR0BatpXxLq2IBXpuPcACPvk+CzMGmd8ogrz2+kSa4hvdr1vpd\nMUU47uRoKvSsHHQSBZibIJsCOZXDneULLguxEveCg1FhOKuogwRYYSrg9a7n\nQ4sUdxGJ7Yj/TJv4cUx8T+arrFdUTsmFYOlQ9zvdVeHJPzDD76qwFMmemzQt\nNgIj+Px9NeOl8IrJ0W5PwNRexIfKm0cnaigwKV9uTTi3VNNl8gDsgwvdX1ZV\nBJfZnel6gPdtydubN0+VYuPpzWOS4Ymow2SHXCpQgT6XfF6kVIQEjW5o4poZ\nDb36mXQE5P7l12rxEWE4wgSDwMafmW2psrS2MwNzyiaY1N1jZdKlsjZO7V3T\nStArJNPsfIl/i1hAfurSpIuxeLOnN+oHG7FebX8JS0u42MKl1wqbgFxTPEVX\nLTVNjLv0tUvqJoboJ//fDEjH/kcINtW/7ZCBgAAw8inZMY8fLJPoSCE3yI6p\nF0CkQtRSQYWwILg1rakvzegT2mMMnxHxtoZV96QYoQVvXmyQRSHWxj7Z5Ir+\ne2/c4J5R23g0EhkLaGZWvmE0RhcAyaJEd7f53NfY50MwwLyn0BEPQrxp7JN5\nLV7eYl0o4qbc9XLwSGHFqieZxYLWH9wNMjS2o8pFEnDqdoemUgA4MbjqLeZT\n6X7D\r\n=8eO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/density":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/tab-scroller":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.aa0eba489.0_1575597601825_0.07794916436264532","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/tab-bar","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc75d4e8c0359eda9370299a94483862e1e75e08","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.cb7b71a86.0.tgz","fileCount":33,"integrity":"sha512-UQzQspNyyDVAvbDHTCjQsx5FBw8A+cLvsjUBo0iZAXplS91PlIdRj+05m0A6xp53z4TdZ7sxQlhucrggSydtbQ==","signatures":[{"sig":"MEUCIQCrJWiaXGLIA4yEBZHoNhDRE73aykXjRdl9pesXZHfwEgIgb7NIDPfUmivQI+gRQW5VbYzyWo3iqnOZdKEdVdzm3Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6urBCRA9TVsSAnZWagAA5tEQAInDsTJAl7xZNwofFUVb\nV03ND19WQqPBWSnNO95j4+ax8MB7aieF+9p1wJP+JD4+DG+IYszl8res7DwK\n80KZHg5/9QdALwtaq3zpaBPbme8zJ8RZE5CXnI03vnQAWRrfDKSmeXFVettp\n0jcIW8HPBOrhDYMswU5XO1g1ZiSCvdkGGOGdPNS0Wzf9trgxq9NWbZepmH9/\nly2AuckKUZqvD4+bCCmuherly18WgTIvP65e5rBrQ+rf2YMF/A21U902PXzM\n3b8vhHH1q02bmEES50FjSGQRob71mu1E3ShEXE5keU364NCp0IO2rtqYnMMB\nE79j6/2Qr1W5rq0sL7h5edn1ylxj7o8JhGqVnSqxqpuc0AyICcOqnwXLBKga\nCThzORXtUE7fevXzGqVuS5bxMrdMsfF5k4Mq8JWtqZEdkeqvvfbI7ayROVjU\nYywyBhw9zv/LCkU7fsi8wlTy6+Vr6Dg+laLyvxvWv2ul1AE3hqIlaUom/eb7\n4Xpqn0/UDbvSaW+9uT9/PP6YSon2f4OpQED10bCziXOVVDvKTaeTP/3QiPhd\nBQkN6U0k8Po6kf41SyvHG2rG/FA2g8GaQ9prBowb2k9IEx7t7YgABuz4RyzY\nPieHUYPxsO0qAlkEdLU2pvUC7fa3YDGP/z9j2+zhr1pcm42uQQVNOsaqrYSQ\nUWtJ\r\n=gEYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/density":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/tab-scroller":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.cb7b71a86.0_1575676609501_0.8438286171278409","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6683b3589f1591d47a740198895af74a1d86049c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.50f110a6c.0.tgz","fileCount":33,"integrity":"sha512-0d51xjceKRuPkg+q8gPMM8RXqr0HJNChNypcdhYlz4We5X4P054aTPYfFuGEZLZLh6OkYXuO1CGQvtFRzT165Q==","signatures":[{"sig":"MEQCIEQdK7d19JUX9JWjAtgedSsuh1aGfJqAPFDyHgxStWxqAiA7xRJV/AInVXG/s+1b3NW9IKis6dDQ5VCHqnIwpR5oVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7887CRA9TVsSAnZWagAAmpIP/A///WZRSJbXqOiEMa3a\nOcSvHSUuc2LcVLc4Sp3bwBYdqcx10gAp6w+RlNezvVVKJXvfLbLLJ0/TMrRf\nGoctBcx/doLRiu3Ix+td8BiZ/u6xnhjyWOQynMSLnzJ8eoycv+YdmseD5mEv\nrhAAIfv4HYsVYiZkaXqXfNl2kU0CYY5NNsHU3vQpyUuUCdQdOpUiHGfhjWV1\nfaEMpGOjoXW52qTX6LqYg0ZEjdXlPFziMvsSsHiwU/XU4C6I7PArmCw0tkPP\njzb5sURbKf8h5L5yAAuC7gz+cNg5A0zTvOoVPB3d8QUIFaotKCSGkV4qJsPZ\nGvr1FtxmnrRGECct/J2FWdVu9K+xIeBcM+PySgATTMAwmOhOvftJxoAW4j39\nvOYuE7JhqK/4fI2l7lzGEd5T6ZxZ1noG0A02jeTD2bDuaHT64wHYTpUvnSGX\nAXdTl7Qr51ffG9sMjb3hbVDpDnDLawSJP2ZD6TApB99YHWKBgOgzavbiLmuZ\no6u8cS1EhdLwuRnyqL+rQoA2/ywae52wML4oM8u6MlpGwcJxMsw1ILErryQG\nDNkzQC2ygkbGujwXMP2r4jKm4U5oSDtOkDmbDCvX/Cj6SYQs9RyEisG9UbTg\na/Zt5QZ787q8gm8QVdYgvsKOSsx0g6MSrvXGyxRMtFUtKy8p1rMdJKU0mCEW\n9UUf\r\n=j1Ru\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/density":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/tab-scroller":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.50f110a6c.0_1575997242958_0.07711966001289539","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d063084a7bea0bd67ae539a17dda93d1378ccd9e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.878a08b7c.0.tgz","fileCount":33,"integrity":"sha512-9Hvw71bhjVLIvcH/0twADRSCM4VGbI3nS1PbFSgLGBwZ4PuUW/6YLCpNF9VTT+5HGUmQgIvi+NTa8Lj1MJeMOA==","signatures":[{"sig":"MEUCIQDqOEudlumQbY94vKEjXKVxSUBmUP1SS3n1yTIrBs0iBQIgHPQLbp9o2OluIw/ZF2lVgB6i3Z9islQuQt5EGHirKYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U7SCRA9TVsSAnZWagAA4xQP/jQ6ejdldw5W0NHQreMZ\nv+CEjRNodKugNZL9EazdlwCn0aTWTZy126TQJSx3yriHbVAE7IBVX0WVSPcl\nmBrb7KrFBLuUK2MLmiGW9/g9Tx+DHIZjx/SNvhBn/jtx6JN/y29NXUczkPEM\nJo+s+38zR5WAtPEHK9hoT1j0rN4tFQxZeYJBlpHQqPjlGq4J57/Ov48YpaTk\nGQRlWQFPl2fLpQ8SePbSrcpGFSCRTHjGoDU15MeOeT1RrfcR0k7o/9R7urJk\n9ykKr1/u58I+BHYQwDdUAT/UmonrkxC/RwhIfuUj+IC9O+CYP2ycnoc/64g5\n8KTyZvTEDN/beD7fFoMUsn28KEBCn1jJjg3QdVqei1DVn6cqwVu/1P7HOnEx\nYjMrXkyFgejibmkzdELOTM7SbF5S58iyi3ZyufZkYue0eqla7AVMl9TgMm5f\nOjEzzd+yNKg6BAZt320koqKQY1JokPBV/rfhzz9UC6iGRWiiVdIh0F3Xr4FR\nSJ5nM4Cn1D5OYcabufu//x2huuJEyLZCv9FPC9qmk/v052kYzJDmB1xa7woq\nbVE8wFsZKvpQnyynAT9n3ZZkaSW2BH6Vhn9L3/yhYeeDRH7PIC3LJT9hrBrj\nlA+A40aAxQ3k8JnyQkC7LASrTivsbEO7hcX6zD1N3X2V/8xSRXWwCP/i2gR6\nmgPM\r\n=yP+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/density":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/tab-scroller":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.878a08b7c.0_1576095441606_0.8616319437349784","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46942e01e401b7b90565186789f043b68353e304","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.397905b4e.0.tgz","fileCount":33,"integrity":"sha512-NumAybtzszbXgY7VrE8oef5v2Ru2UvxNjzlk0QjOjmIfCzn1bke52WsJRAqkvo4N13ee5POiZJ+dk9E49pjfgg==","signatures":[{"sig":"MEUCICo5QLvFucgtWAPOhZIKgVdK1qpEpybw8Y2UHP5R0d4yAiEAxt6FcrJPuvPd5YOjSlQrKZkdNS+tntliUEdMqEzMo+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apuCRA9TVsSAnZWagAATxQP/iaSqBvbvP6oKDyV7n54\nPdDx9UOEQKgl3unmx5bwKEEquuic2FCDTriP5ztZ9GuZgHfFfio0d5aXqSu8\nivROZRf4wUr6SxAD/cMsL2Qfr8c1CY0KD3lL8SQ9cUOU3jUNFq2gkRfDhKeQ\n4B9DDe46W5CGMtALOa2tgBUGUMuzxiOnqyiTtL862qGfExmJII0Oxam2wu+W\nXxMv+gpQbw3WmrIWS9bAWDiRKbKGiwhg6DqLhSuKgegT/4g9jqlW3xvSb4ZL\n6ltwyBePKStRmGD/cp9Uo/XuFV9+TDaNgg05TN4swGNkxJSJAKblDmmzVITD\n6Ic3xLyJ/OzidRL5LRCvPw2DKsxiInwfK++TKnP3KHE5RSJE2M8UwtL/VQ6R\n/BEAUX2YTQjNWlq213qOrI5GFGo9msD6wfN8pi1Rs4wdr2uD5j+/mWoUeM9t\n9fC0olH/Q5PYlPouor/uvge2TxrvIG8CSjyUPxwliuWmUX2WN6gkvuw4GLO7\nJ4vy2sisMNZdR6Y+zVkyF1QhuZVWFNAyJmOtnzqgNv7+Jb5q0A6rrkD+u/6X\n+VUa6O8n5Ns4TAU3W5Eno2n4zOp7Zj0z91ogOj3uSVGuKC9YJjsRdceb970e\nPZlhtfUVZ3YH1MnZP7Uh0CHuW6uuTzfopRmNnBfzibCdmXkvS6Ikcv5F0HJ4\nmxmg\r\n=81P7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/density":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/tab-scroller":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.397905b4e.0_1576118894137_0.47836557998141727","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab350c0510333e99660889521e3e96de41dc4faa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":33,"integrity":"sha512-qowQ9uqPZBRwJaDeWypj1DMwoa1vZToQ3sspxBP12IHd8VZaSi+UCRBMi0muZ8bfQNDGY4GfooQwzFzHtnLcmA==","signatures":[{"sig":"MEQCIAIyevA0aiqoRp2W+WK0cG4vqjeHNEzLy3jKKUEOEDzEAiBpQEVsbBQ6g8H8BtawFQq/T6/nziyKNenf7jK7HbGIrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o5JCRA9TVsSAnZWagAAv08P/0je8yjXnq55Wd4rZeZp\nArNJlD5ouuP30VxLeJVFZxyy+AMuGTVpRGk7aCsiP3+6hzb8OQrK2WmqeSz5\nRQ6gRifX2iUtYNqf1VYB5ElqvGFigicjCIMQp4So7+KSLC2Q1y362Kqu7QrQ\nJqv42uDRCuwfD5wDFU8fEaH3HUG9zS4iRPostywH2CVk6BKkxavC/zClnpNh\nZ8gD6eP9h5KMjfYGEoPeug3OuntajV+1f/plApUQpkpSVcppPRCwmlcCTfgR\nGFxza2QeN4JSgn/WBN7sE3jp+KRAFEycSQEMw0wI4XsVHf0Or8VyLCquUkkE\nRVQFQU+CINdr0wQL8IY8rZ4hQZ5LLoKWJ8t1BQrmO4mETvbx0wX2QRILgMon\nbJ6lX7QMyNPGLIhisoGVpWHJy/n5JRjkbYX9gecewP11WHJko5Qx3Df1WUSU\nBgx6Qs+fcy1o/mCwvXqgMeVeTNp9ujuaTgWI+IKcGcWkcV1X9A0KLth9QI5j\nLjhGazFjA5zVfS0CCDiAfKqx1b+vSw3IKKJKg3QXP0piCDwWoNxQJiN8mZmW\nuqzw0mCQVMy9Tf5AlBeKg5vpOUEnOZJvAjqMqx5b9YWUJAJklQ953RBNLgz0\nF5GEfNPi85m+zoo5MeSScAuNEd2RdYflYqZ8yEUK5xwDz3Z2XtshkssNH/yY\n/O+l\r\n=jPq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/density":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/tab-scroller":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1fbf5bd1d.0_1576177224599_0.37080592204197793","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ef0edbfdea3a8cc8b0fe03bdeb4c6686c81899","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b723dfa78.0.tgz","fileCount":33,"integrity":"sha512-D/2Y5+KXbwNTje2AEXlhkEXZXjmE7FXk06x3YLIzpAHgPsQed66IYFYJej4FGwp6msBvwgnpY3+Phz5pIe8erA==","signatures":[{"sig":"MEQCIDEQAZgKoZDo9+Fogoeyvd6c9j3Jv0yYm5TL1tXK+RAZAiATkY738sLgFvZxnEIN1a0skgPiBRN8z6eLm4Oikmd49Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7YCRA9TVsSAnZWagAAeO8P/Aj0wCfDxsqtRoJZM/GO\nsIFAIrcu94Fhu1YrFbMaE8w3L9GqGclf9nwO2ESME3qbFGVVBNSAlSYSMu5H\nI5o98KQBV1cnw9DLb1iwttlJYAmk2iQToh0L9xdn+SPBr+P3q11w7nT/MuzY\nK98FQlSHI2dLeT98rpwtSciFIJHQbBAnmEhdltuN8R7nVBJGo0ffwRNqWF22\njiMEYHOaErL07n7bek96K+9IfisOflxVLsRR0rtg5d7D1Dd3Xp+RAQ+6uLXw\n3b8KSRFnafBDlEllXihPgpAACqEkGvvS67l2vyHzC1/F6pjtjw/ye98RFIq9\n8y3cJemOSqzcP9ay5YlLj23kPam0XM1drHLvZL/2OPVK7fMF1kVSi99U662+\n9ktMLRaDRlxwBTysM+TWx78i5RRvfewmcHhvFczbIveRBCXBAxtqHBVHrh+B\nveEfjm7kaWPeBcBM6wSffa0YUt24uEw+NJUgoyFoZ2mf90xntyazcQr3e6jY\nyzbJ/S9PHAH3HTnUV+nS2M13adYMUAgpP+4NrrhpcJf7+QuOEz1NF0pYA2xr\nMgmgDDeVyzaHjLqjc7cnpH6mkqyYD/6p/1Pw7OcKnajphyNoWLm1wb2P+IHC\nsnXLaosKBPy3CUnl/7GQ970ihwIN69LxCGE+BrOPRaxvo0YKYg86QNEPfQJ1\nNW/b\r\n=Z//L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/density":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/tab-scroller":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b723dfa78.0_1576181464213_0.9923994732063637","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"179415b3c4e32e52c3a34ec982dc86e32a9fdf54","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1c494e567.0.tgz","fileCount":33,"integrity":"sha512-MVKFQ2Qh1sXThFN/Zn+/MQmSqgOP4GbRmARhtj5XCNshFtq+zD0iKiTemu2FSaGbXlu3UuKEs65YlxZ4UUDdJA==","signatures":[{"sig":"MEYCIQChRgaemYFCfaDuN5MTEzl59S6aF7RC/WGkD6BTmXL//wIhAI5aYaYYANNzzIBarO2+GR3cC59dshJDoVWs6EVitDWI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9gCRA9TVsSAnZWagAAX74P/1tSq7xzsEVOcuazFVin\nD2E0gXtX/OJfCLdcwY4ThfbgmSPBcgvFv4oMcPb96WHw/jm405QIJS6km74t\nKFjM+DmheMDPc47XVJii07UF3QW5NQkDDYiM6Cwy9JeHgR4g2Xfb4O1Wh088\n6Q8vDdah9awxv8xp+lHi62LCzU4Nvr5qHNbb3HloZAKuNvNYmhOXu+7+esYb\n8TkQ37WXFSes0PaVlNX0EiI+oqZGE5thjZhMpo9EnfzgaP85lrgzLYhHzlkD\npaS1ajxJxH5oTlika9VbCCFLz6awcKbXN/H3opYTEgmeb1xjhwQoa9VwioYZ\nH7fxVFD/GtPOaW/oRhu2wPnonU2861hXvNgQ8oqbEDxU8hpe9vMT/n0r3pzt\nbRLfwZJA+1e4fkaAWevOn5lEfHGgMZNV0Z7rt1wJoINU0lMNfPgMgUweDl9F\nKLrU3rq//AMXLqPgghAodCF/nQSfGivOmQFy/lPng/LDLyWT3dlbfTb2AXjb\nscqdFHp/5MPsXoBFQn4usqERYhh8BJpxROBij6bNAH0IbmNtbblz+ENXaHER\nUSmpWVCsrxU79m/+oy/PoqoL7P2yQ/qlwvL6MVBoLbAVzHQl4cFFivysrvQL\n1FCcjREF3tiJHLneMjYZtQWov3wXAu/N781So4gMCSVB5Dd95qO4ILCdiR95\nE0kz\r\n=ausK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/density":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/tab-scroller":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1c494e567.0_1576193888336_0.6445036398191148","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e92dd4554f9d5e0139c16bbae3a309b6237d27","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c9e98a125.0.tgz","fileCount":33,"integrity":"sha512-XK0O1tYkWB2c/KCk+LDOpX+DjqeuYm7yUah8OoouTp2yA7AT51q644BDP0OrK5sAon8hPvL4WGZXYG99+JzhHw==","signatures":[{"sig":"MEQCIBfVvPP1hSrt55KUOq7y2SKMy71JCfZJccHVBvylMWAzAiBrGs+uwwmJmhltoCeIKsV3DyoMz4GlOIggk/sk6CMAag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RpLCRA9TVsSAnZWagAA2bUQAKOBRGKtAwOCeFQTLDjv\n9oUfBcMPNBOj25LGANwM+0qkxWHhPOSQhW6lgEeG2xEYdFWMuX+HhPTfuWVT\naXnO7oO2jADLfsUzbMW8gc4DKUGnnkPtqvtxct4f3zy3F/7e44Nnp5StwY5T\nCdnIhUD4OmlmQeR9BZG6GrZUJmuFIkIw1Cff5Y7edUV3LCMTY0CXyxoH5voT\nha61BUNIPTQ9OdNaGKU4vC/noh0c1Q9B9lIs2jI3avey067Dekv7TL46qrXG\nRjnKmr1+jNJy7qrjpafAb7cbfNtUbaZspcha0xb3GXaI4IOYcbPfy7Y9lioO\n+UO1ufgfUzqjnCLNsLBnomXX02aivxAaSYV4H4a6YIuMg3GEzxgNCN20HzfH\nTqRW4O16JtCND0GAD8xnzQkK/vTIQmmyDDq7PoE5w9ekfrPY5X76sRg4Zd40\n9ItIxsg+q0sC+qOxcZB+MvIHVx9hpyyOsIns4x1neOLfWQeSa8uhDdJXqlPS\nvYXRT+d+BHv95aIz7o+n2RQUERljp2oTYp+DijdNflCOrRnvEOVF5gG/xTCL\nvnK80l9AozBsl61jMaNRQMJo7BgZ0eNLxIuDfiIg6/k3yTJe3BU2lN15c2ij\n+y0/OOG5qS1iaAdjthXvf1lxm4v6B6tRnDGRu3401QXfXZhegcGtjBol1ihR\nPsxu\r\n=8/tM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/density":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/tab-scroller":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c9e98a125.0_1576606282749_0.9322192475405116","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7adb0c96d5addb7dbc861c3273e682c6cd9bc19","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":33,"integrity":"sha512-geq8OBYp3kn2Mfsq3VgxqmVfjY79mE2HrDpoLhwEIvYCyomkhlCl87uCxfVk7W2ch+POnCxjUVjptPY3Vg5+lA==","signatures":[{"sig":"MEYCIQDNLitUf3OuCSoBH0dp+mfSNJhX7OwBeJT0bfB3+UpN0QIhAM/+Zh41HA6Iz0Fku1rsiZjVanMaZtzU1dn4iS6vg8Pl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfxCRA9TVsSAnZWagAAGAoQAJnQtoVqTTbzaV65Y2/N\nnLWx2WaUUKNQd6dg3tdyK+TJjZ1pbzawg3LzhYDSrnKTuObinetozQARL3Sj\nTmKkShfBLLPhoey7yT/bjmBIPi8xOnJb7fyj2kWR/wqTHEE8RsQ7ZhmWfvHj\nousOBq28QDUov1XgHTZJzyPWh+1mo2+ANbolYvwdkq/BhDJgTnsQCPkb0Rlf\nBh3APCrcFflSgIBMLCv+r+rP5q6qksMdj7N4ruPGwDHPWRcUPFyJu9HoPI7f\nd5AtyrXXny8wrVYl7zYveCNoKFy+K/210i20cMahNW3FgC3+1F/E/AqHrFSX\nwPNVlBexKX7f3fFucHH9eBrAhYSVZwRTssUPXVU6ni5riUBXc1L1vJByl16s\nRPNCnoITmsN5Y/endWWMcOcj/4CuL8efgJtNCKeKZ+mFOQqxXIthXK0XBMDq\n2pxAJ6YgEM/XH1WgCIcFe0HrDrUlwHRKDANyTl3d1o4RjAEMaRCNhPKvJ1dK\nLSqwjLsb8l/Ge3BtTHNF6Dn7F1pfjb4LgNumJkz7ohFitIH30feu4lt4gaKK\n2+OZZ0PAC1rcFVcEWFxfwWL5GB00ZbC1xlYGYyb2ddez/fMZqobsQGLRldVA\nj2I9Md8Alkwokt00rql7cupJl7yOKTv1C7z5NOSTtng18AY1p7ds3DzieWYm\nNVrf\r\n=GyCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/density":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/tab-scroller":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5ffe8f7e3.0_1576622065364_0.5721972824756225","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb07283500674f9378223a87d17af6f03c9abdf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.47949b08e.0.tgz","fileCount":33,"integrity":"sha512-BxRoIP3gWdi/sSRcEOwd5lAZICRWiC57+wGYfSW0nQiLyOhXZnbsC0WXRDrLABHHhWtj9aqd61Ra27Zp6wB1WQ==","signatures":[{"sig":"MEQCIBYvotsVoGEC7OJr1LeQ+AwY5WkF6fGgd4xksrXCYqhkAiBEtQADj5qnF7RuqzfXYsTDZzHH8sLSUUjpxNVxgXetdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mTLCRA9TVsSAnZWagAAgDAP/2S8NS7VFOIslgnqfUYo\n1DKFXfOZRyYRoXoyuYNdbLCYiW0VWiP1PEQHCEWtvAe22Qve1Tnk+2j76KGy\nBu4BQVJ5rZ42z3S7DGykqmJSik/7Inhp73pS69fYYAgDpR94P44tfEXyI8MS\nZ2xOIDh//B71iMnHMO457ieKw/jo2v++/DU6axiW2qh54Pov1zQLXXExoSNH\nx3mGxmIguiZDZS7Ybv8jKJjq6iP+P1Ym53WL9d+nBd9uTtwfT/ezF7FcBhxz\nX4S/hvaS9sgvPJ9bTBWBzKJaTXpcbqUjREJKZmsQxxCQjYaKkGJUkO34L4Wg\n/A7S6h9dqSrDJK/bKFwmONNvo6ZNUKGmaHnN4A6r4s01W1DjjTyVAqrpnGIp\np6ZQ0aO6ZrqCcTUetbh4fH8BdTtXpBswf1dem4laRPD1rICX8wGIUiTIrAK3\npgjq6rfYgNY1aOYVxcWh7DRDUo0shTnmqGxhR3NH0nS/J80QRQ0KSR840QUF\nsWUXM3tnbWNMP+583C+HSeFd1n+UeGB6QTh1O+KUAZp0QNs5YL455UsLDBGa\n3Da6S62vXYVWHTjsmq/4OFUpBA66a9xglx0CfBrRZXHe5paV5fuqKZfpKdYH\nP8g8JblDU44gQNvn+yaq+JZXByyk6oWZrFkD6jVbUtQ4J4MBE0iEawfX3cf6\nqBKk\r\n=/+s0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/density":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/tab-scroller":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.47949b08e.0_1576690890852_0.9179052198277049","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695b1d1f6d54c73db608012cee32fb2a31de6095","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b240bcc1b.0.tgz","fileCount":33,"integrity":"sha512-lnvNJu/8UQHnV+qzuMxA4BOwROH6S7rpRmavYq3qQwr0jtpYnGEqnGGyYlhvN6t5TvrUMO4JJeYeVdMnUFoWow==","signatures":[{"sig":"MEYCIQDdxYnph3jiVNrKHqa5+2v62Qfs3jvCSV0Fi9ySPid08gIhAM61mutCAl/tPf/s/aAvhsGXj4QRUmoDugWrJ1YL5tBl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nttCRA9TVsSAnZWagAAgR8P/14x551gIRHOC7JWTy1y\noEh5wDSG5gVajmrEYjj3Kbj4tsxs/0K6oN+ii2ccmJUSaXDY6ej89JMa+0jX\nWDNOiXBNGsYo00keKiPO7uTnjHWabxT81SZId4Sc315F+isN4v1+OlX1GVPO\nl2mt4CbbXhqK/6dWJJ3eDPptUH3lATk6js301+3zy8FJNAzxAmYFJD0Yje44\nA2sGgAOu3tqECU51pcGKzvtX21jcBnz0TUUs13rOAdMttjRk+CJeo0SkFdxj\nkcMmeUD/PZ+asDmLhoydOTLNc3M329Luf1J79zzEQCksrAK3DOdKtZXzicbk\n1PXcmzN9S7wiXE2MMpYEoMDuVO7hZHsTUhGu6eWc3x5tVyQgStBMkMs4Vu6u\nTk4sScGfKKnlQ77TvdiHb+hN+bo5f/iAuOUTYQw00JTaIMxvm6lpspDue8ay\ng/TERri+dRwsMzG0XcGN+22+PoeCsE/QDCuPJyaQkqOB/YEa8Xh+r/iq6y9h\nA8kUaPXPa6MY57pdGnboLjZCJTu2bq9HZIzgBAAp2a6wdj3YTSRlPlIxa2Kk\nBMNDzRxmxJTNfdSd+H66YKJQ+sFgTOzwNH8DMPp94gqPhkGRdhaZFKcre7M/\nAP3miPpiozv3B7JNgFQ8vK5XpqmpBE8d+WwUneHMXWNHvdakqC+29RtcJl35\n4nWG\r\n=uqEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/density":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/tab-scroller":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b240bcc1b.0_1576696684779_0.8065867238217101","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/tab-bar","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01c8446fe01d0fe832b67dcd57cd1be124c8ab6c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.391674a26.0.tgz","fileCount":33,"integrity":"sha512-ni7vRDknbJjlpdiiM/CSf5581XKS3BcQVweBssYKVzQbnypdouFgtMnOPQVvLv2E2vQVGutN2cLTUvm8Pr0+ug==","signatures":[{"sig":"MEUCICk7ldxtdntwkX5bBaCh3rVuN4sk03HU+aOMRIyPyNnQAiEAjZp52KW+2pKDGQy0a5fItHyS7mL9TPPbo4tk9d6egbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nt6CRA9TVsSAnZWagAANUsP+wexkoAuxzep8d2+pdbU\nmA2JUWZtU6Z6Eg9POARBDDStTT2B8rOoRrmU0GGImHY06FV++J3sYIBy7sc/\n09I29MYgIDoh9uMO8fD2/M3lv+3GF2w4WLnaSgjf5HdfCmOedYUpohmBjUYO\n+Sdbxf24Eh3cCaCqpdMOHUxJ5RSxaUnpEuQq8TpH6RzyRTYhRC4/W+Zc6XVL\n1qCsSwnWDbkj1a2rSZr33ZaqAu4nN6ONJXneo3/OzNAXuMepSS63bxXVpiuC\nRxdHPIlmn8nS5hb6jYTB8Yxt4QR84Wa64jZ33xFec8b53W0duz5/vHp7MW/K\nOP+tOsxl97ltgAUgLvSZYV3inF2FaBoUI84c77Ac3JOe7XhPPwf4+ixi5RCt\nPw4ivW+KNJmxp+ZP5H1yUC3dh89LNU2cHD0ByElJVSAPnGAenDTKGadOPfYy\nyPS8e9h4ZWvt/UT5F0711hIIwCK2gKc8zJN5cFEDs9KJ5kOMERGb++wXEiOs\nX9jhqiUDot9jWC+Yj3q7VTejMCvRUEzU2vJRxkxzwIvM9SWdkxUp/dxR69Xa\nr6qZTtE1s7BVtesuU3yDcJYDSaczgecGyCOf+ARF5SDq+tZ1Y/qVVqzJSQ2G\nXGcsjf7iNUVcTjJLG0DTQVX26+tI0n2qupj5xW9NOyPxsP5mf34Zl80VeJ/w\nWz8R\r\n=Ai4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/density":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/tab-scroller":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.391674a26.0_1576696698325_0.29835157849275484","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4169135475335d12ba29d9a101d2b9fb3e13405","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c4837746c.0.tgz","fileCount":33,"integrity":"sha512-CmjOSoYD6fvEXyFCYLFrgWZfoP2huFjvVs1EjxIACKqycAAxa7aCpBV8lUKRiBY91GFLTyzQ6VboAmEJGlTiAQ==","signatures":[{"sig":"MEUCIHt+TRZPfSLajey7m0oNfMpq1OYVCsm/esR0NLez0mQBAiEA6KgToEzG5NONx4HlJzDr0vYWSU7Wgq8nUrBftxt91Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+iCRA9TVsSAnZWagAAflwP/1YzHmq09ABV+hxdKo91\n9mS+XRrhVrNix0FLGG3uZ5ZtcFEGcWAo1hlTIDcNti9ZUknpMWsc8DldBijs\nadUHohFThPG1jnm/xx/Whxy0PblEpzTUUJQtDwVPdd/I98HI6ty9YVtOCzVp\nDwXIJ/+mka/ULb8mBelg+z2GAlf8VVBc0SooXbK7KJ7WXVAfDry59UK+epAh\nIQVhUJeB6imSujbDBvD6QkrdU/CcCya7ye+p1JSCZK6dC5ggzdrjOUZrgh8O\nAO8hoayG5UuLMcAY23T3W8z/Wkr+irMUmXGKzHCnfIogBOYBHYJUZtVqJBVQ\nXyHcxM1vonUKLPq2H2sAraV5Yjp6T9QdnuMnB4LCZJ/9yF/ILh5kMzZA3RFN\nZcO1LqRT/9I1SMpA/kpiUYWyaZsmdhmSN4vz1/eaI3MhQ5l3/fpQnJIzPIIH\n9VFPcUee5R8XKdSeD6cVLw4Jgd0CB7DOdvzjShlq8YerNvpigw+hTLnLIYJV\nEIrzi4HhCDIed25diGvGkOH5eNxOE8JKN99rvCapNtvkNbFMCwZMI012Uir8\neSskrZvYs4R8H/5BSmdn6sNmRGLhHil3I4fcd18KOFGcvGueTSaiqpnun1JM\n8SSwFgTDzrvFo8BxZoZh1e52TCFWy5/c2TfeesnyKRyFJMZRo63K+X1Kxz6G\nmNZL\r\n=FtiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/density":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/tab-scroller":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c4837746c.0_1576697761491_0.9641691697717087","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/tab-bar","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1429170e4b99e891a430d4dc5be80037bf5d84bf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.e41a70425.0.tgz","fileCount":33,"integrity":"sha512-oS7NhIParcv3kmPIN0oYbj2NbBuV+Tw5ktWfaJ3zBq9XP8O2qdNLipRWd/rr0p9OnvRuliYLMnI1X+ix0lzNAg==","signatures":[{"sig":"MEYCIQDoyGcnex52VxqthAzpw7+tpp0BmG0gqEkjwVCVD/hNkgIhAI7pKXwCb4XeUzwPKumCIf2HGLYQt6XfLVNjIccAWErm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rR6CRA9TVsSAnZWagAARcEP/0UNsh1G8ms+BV3cMNJP\nDHXzMU7AzNtvojTQg4atEViMT+IkB6ZTFsINzdMsumft0e1sGyqYBerwZhf1\n3Oepu2HS+GmV9PqroGnjMinPexRq73aK+bPCxtxWD3NLcmqombMRcSif5R54\n6f9b10tLNS4STue2HvrX8fPJfSXY2b3GCqmibq/Rxy0VcQV1nLNMpbKTMSvg\ngfwAD7WnRRJxo7JJ4Z+T3AW75ypMavafrQPvASJeWwlxt38Hd3TUpCzn+wkM\nbV21r5oKdnuqLy9XTgDpcKwc4W+6oYsK5H3XXTok5qlaTUW+Nc6dMy+CeRJr\nZrfXT0wKcX4r28I3kl/999pjReYTS9Qw02pSNjuIhJdMXUwbZmHS9rhXptYk\nOijPaaWwX07fKleQ3o8fYjSdgn2Y+9Vb3nSdhzxmSU0oP89PBTryicL/GRFd\nOSffpfvU4PS7Qtsi8lWkBlJTjc656wRidCry55ZDBFAnnoirKO177MjbyQUB\nxQWkZs++2k/ioeutqre+TxhFHD0eh8NdxFFGD0dz77GeZ/a/KMDVzDS4Zaj9\nPj3TlxjNsw/4ZHqMQzvGqCcf0cnJW0ZSdj/J3cSgcRARl5R0OxXRONVQaNd4\n277ZvTSk+fqQMSs8JrkUR1NC3PRiMUEIVQI4eOnaOq4D8+ltDStUL9rY+ksk\nRvcY\r\n=EoXc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/density":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/tab-scroller":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.e41a70425.0_1576711289892_0.1319775220399071","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/tab-bar","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e50d816560bf3e3bac97bbdf8d70fd82ae9482","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.bac43eb43.0.tgz","fileCount":33,"integrity":"sha512-x8LYIXMC47tEBuSzkLxG3HYdFGhDKWgAu1F7gLCucfIMEQMeKvz0746lSuZx9srcYZrSupSn5gkKCCMVOOvwSg==","signatures":[{"sig":"MEQCIHKFVistbaT/Dr3U4FsgdE8fUnM5bFV5afj0W4LZTN8hAiAxHig70hO1pjurKfQ5WFwL7FZ5xjAvyHTm8H+KLmds+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVZCRA9TVsSAnZWagAA3BoP/jBEj8lJVx9/DMp1TM6W\nqcVY+DoNkW8hLNIaR7oMO7vYMY43eQogzVjPcGybijZwpMGViHgbpxtZBHTb\nXbKm+VObw/hNRnLpFUCMIWgiYGPMxG4tZjhGzDuL3Mueaott5GgSlroDa+zc\nE4VCdWZt5el8IHOULvLPmU89S/ejR9nfqMnKQzfYpwBQxFFze9mv4h78ACJ7\nA1Kx/VzZf8XiJ45nNH5tvbqSmHzqA5Te0mWuUZD2sdq6AcJkWSekrlxCS/Yp\nVsTI7J8nzfL7LC0WsQXEJyRNVYy/O3PBy9tbK8Jw0MP24mBGmk2k2+nENhds\n+61dBDqf7tuljJNo5xSvStP1uB3HFzwLhq8r/CMk7hICU2oSOzamsvA1bSGv\nXoXhpzr+Rb6Z+KXTKgGYj8eAWeoxBFlHsVUH9ljuI08TDv4AOdrQJVo1Z+Fq\nyGTOtoJTZjlZtj4g3GPgJvC5cqVU+bk3BitX058DtGkVlGov43+T250KGZxA\ntwPwwDPo6xnrBQT+DByYRG0j9/bmeD1rUMp5hQltnsF+l8cXjyXQl9P5Y+Nd\nXw/1NDoHZVF4UPxg0bmdGnM1QDpjC+J2FUjxPQS3jR8s3Za6KbyU+zu9ArZT\ngcxTKEvgpDnM2Raj9B+7zN+zUy5hz/MIA97/mljzWCe5BTG3tnG7GdG7gqeV\n4Cq+\r\n=i9sO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/density":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/tab-scroller":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.bac43eb43.0_1576711513313_0.6070563961553797","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/tab-bar","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc7ad3e7a5904176d060a91da23c2300f998d8fb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.2e491de55.0.tgz","fileCount":33,"integrity":"sha512-i5HsEXzMUwwuhd0ulfthCZgzrPR7jIyjYo1/1QAhncQufXrVrohYvvTKN2TkUx74XMnpmRO3QLhBkT4fTcLXFw==","signatures":[{"sig":"MEQCIAw8S9QhQID6qKTgdimXWaphzEbVrnZ4WfffLhjRGk2TAiBWr1E3TIjqHwoG1j/aPFtYc+DJXtY4KwnUu88J8tl7zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YiCRA9TVsSAnZWagAAjuUP/1Hhh3UwgniO+8vE5qYE\nDD5kv1wHKvIzpsb2pG+cA6lejDA4obCTx8m2FTywY+7rn9/z7CFKmNDQ2PPo\nbGsMsmwZPrR/MG4QQ1wwUmWWzv6WacYRyt9N8W6dXxg9/fTBtrRG9ifr5/j5\noz29PUiwLjyREOsQh807WMw09jllyadV5kuYIQlOepUPOYlm8KDpBloQnpWo\nLsXE5bP4CCOkX16RVs5IXm77Eo1iPNXfO6/fGTqndrZYRlGutIzolhVQ53CC\njo96vLjU40UNO3pHWg6+m4Od+b8UtiU13PWTFnmSwrR19VewydQPEdgEL/3U\n1JPYcH/NAAnd+HTDP0z88sQpK0PvLXusEXMLbI8ukmp+cD5XtkMd82XflJS0\njegHkDwt2kMcU9MFKFji7suxIyk3qlnz61rlq9iimpR320Q0t3eAlVyJWb7g\niKdTz/jyOVPWzFDROx1xwCSplaAyXevhfhOtG6dZ73r40nWpilVfq8BJqnJU\naDIrdCH6UXj6Y5XzOI4SgM9ncmlT73tZXw2BZGQromIKdKQJ6fhoZYWs29d1\n4kEVmdCwbfrXk0ZDt95ix2xQUU+38rQ39fK1HglPGg0WL8zWKDfsHVn/mPSI\nSMY8ifNBTlLG82fyIGOdL4SJCSorcP4ES+9S/S+jq9Z5VRzt5me7xlKHJYN+\nR30I\r\n=UxEk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/density":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/tab-scroller":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.2e491de55.0_1576752673999_0.9918347272934103","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d25cd9d4d1c0360c765bfa794e95ad96ee4a6cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ae101c144.0.tgz","fileCount":33,"integrity":"sha512-vOPb307naxZn7gdMHSWU8iQP26whNTFYe4k95onG9FTtgIhfLyaHhWv/zWVyrY1abSOAEib58Pmg8HLPCnRPqw==","signatures":[{"sig":"MEUCIAqk40DsdM6FIfjeUnmQPRMWPhKIpq1q+RfoQYPjMFYmAiEAlp+hhst/eVd/ANEuG6v7EIJWZs0vUB5fui5pGkcuSEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SmCRA9TVsSAnZWagAA9ZsP/AguYxNxSCOwags7yh3k\nx5dKbDZJbnbRC6pYXA0QMYeQ99sATIRznJMcj0qZvAACfHWZRUTC0x6VQpK4\nnpP8XyNbVgChcVzsIj8/7LMOr4MZHK4WChGGEF+oX6IgvsJKLu7Y9Kzd3gxV\n8yNaOwAOrZr1x9eyrPEPhSCIspAcJ5m2LjurgOaM61CjQagQRzdRr+peHAoz\nGSsdMsANTaizgiUTfZYnr5PmGs2niRY5BVk/Ou1q+HQzIgsPtwsan8zB/oOP\nPDtFxrwgekUZ8sP7Axf0iWUaSflbDr9lMkEPX3Wb3nIBvsXbMn+EF/IYAusg\nteGY5Da2850cp2MxpdMkQgXJO9pj2uZYYe1VakNutE4UX883Pq+/DyvRG96P\nr8wFJcL0thGdePQcFYcNF49oZpD7FAtPyYZJBY4WkAE9/WrfeKnXJMr59FAU\nNncIcOme/V+8rq3F4CQFo7E3WJxJkNVvecicCiecznBXW/2J7ytT1LIBts7Y\nIWHR2DOFyEqhRKhaSZ4nVO3E6wpFFkUbyDDrO/OZDBh5MdNBlxBPb2meDERy\nIJt0pGmNbO+H8R2cKy360FlgSyhGGx7S5jSf8NHGIA3xrh/5y13LWRGAlrvv\nnRnRMIPFLMR1NebtFD5YgAYGHPnCMExJbYvDz+7O2sXZl1+Fc4UrVt1pEGGs\nAD0z\r\n=7of/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/density":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/tab-scroller":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ae101c144.0_1576772773920_0.6686846674425801","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"112eb439787179b442f171dfb97e22125aebae23","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a51c31f26.0.tgz","fileCount":33,"integrity":"sha512-ZqIveQhWs3eY+2wdfMRPBI0f4lS4OFn9bu07/8suzZV2M82pKxfTq2QaeR8ktw1RmNgF8/xIETwPSdiCc50xzQ==","signatures":[{"sig":"MEUCIQDHW49N0S62Nw1Y4COjwI1ZCpVjlzyiC5faGskdO8FAeAIgJoQ9y2bzr/aWUS3gcLB+XhJaYEupLZJnkNE4vfd4FYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7BFCRA9TVsSAnZWagAAsPgP/1BJHMeOgdhAdowFkE4v\nX/StQrArtD6/FNEAknlOxKZXiRlDcJ7tXJ/DXTJpPypnT9baD4tCKdD1qbty\nOMICPzvU265cdXeZPp3rlB9/PA/7mdsL77fg2G7pNrgXfHMI6S7b2MWWEYUU\nbx9hVyYzQL6mwqDjGVMlhgAqTk4iULhWZ+EwXCEk94hEbJpnO+zoM/brw6g5\n9NNrviLZgR1KfdHsKsxThnfWBQZATdqvLHwc/K9ZkOm/b9QmyQ5forvwcVnf\nUqkESu6i1lp86REcidqjCqCNxSUP7y7utj2/jiZ4/JGWvRRNtn1iIm7UveLB\n97zqwX4mr/DyWSmFFfzvv96Smkt/qxYTHc9fKKQWjw7r83FXPvMEtZZWMU7s\nAEx1c0qfn0ms54Nr5vlm2ABble9ZTyMJis9w2mGbP0OB2iEZDoSmQm7R7+vM\nhQs3eU0+DXQYIviSzSoorXGUGCYrtFL8sTGTUqySoWlZ+aW/VncjhBaboMx1\nJSQrr1EgPrc17JIhJt9plwh5QcI6GOEgM1ErVovxxfUPOwcWbfmyonJ6i44I\nb4niYSai1TcH0NuEHbgkCvt2ejt6VCriYoAW8L0iCpq1kUiiMcO540W4cKgg\nhQo1bycCgId96awAS7eHC5sPzwQJY6juIFLV+oxsaOL0jHbg1Rw8g6RemhAg\npNo3\r\n=6ReP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/density":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/tab-scroller":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a51c31f26.0_1576775749283_0.6120266993503842","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8ccc1186222fc33691de30326b1bac54dfb724a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.21fc4e13b.0.tgz","fileCount":33,"integrity":"sha512-/5XjokfmqCDKBLkb22VjJaVWYZ256iBME2HI0AEHezZK8Uub5ZZ9OHrznhQe/fr51NnpIKjec3A9Dt8cJjdOaQ==","signatures":[{"sig":"MEQCIDtvnf3vGGq8IIUQklMxrVOT0D5cH6YSkTHzYvSDrWcEAiBCtRfsXbPHpgIGh37MeXFwpKEf9alPhVTUnSF1KiIxbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tpCRA9TVsSAnZWagAAEIYP/RltxVinzy2UQqr8FMwt\nC4Rvg4JFoRk5bZgUXQFOP0htsBcEO+sRpx7RyzyE2G+40AK/FfuVH2NK/RIg\nfEUbMdxdr+bXxCw/+fCBCccfPWAIfGcTSYgmeYIYIcbaMQjH83+TIH/Msplw\nnXvWR+IHpwF4C3hqOaWsVQzpGf+o4vVuzx1v2duxCVKT7uZ9Z5UpBnOmLMCJ\nb8cliVFY4pVd57FoPdS0nZ+Z/duQct4v4onQdOmUpXCmxTHHR3qqdrk/bPpX\nOdSKbYxItm18NSEwFBG1dzQYBPvtBHxjRmlIVUMDKkOTEq8ZTEOSAE0v669X\nBmHXR2l1pzSeqFKbotXwEWuwSiGoWFIoT/p4RnP4KpKr5DIcQaw9DlB65we/\netukNpl3/2soEqNuZm7spmHnQwYW5Tc+0VLqsLtkLH9HtLZFgvOD0QkerwRN\nS0rVwgT0LAozTOz8nEvAuWVkfVeiQyWm9leV+tRDve4CL6Fpi5EdI+P7SkAj\ntr/0lIhmG+pgSRd+W4SnEOEQsdiEPO19ZC+0twjv14lDVa1dLeGXIZoVhutD\nmT4rTeorj+i5lxquUXVLruzIxV3gtTcFEQLaDkOXrKTKSa5sapHjfTV+LQC9\nn2X3YZBjVpYgiePeOqaBDW+AfOeZlkb/ioWzLvGXSnQ59w6njR+Fs1+lQnJg\nk/GG\r\n=4PeZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/density":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/tab-scroller":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.21fc4e13b.0_1576790889324_0.047186856547204004","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2342b3645c0b542aec02ca0f49be6dfe4f78816","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":33,"integrity":"sha512-9KD7U96U4mQzr8tUlNWh2rsMA4yqjGu4UNVZz9jqpY5rOpE+UM/SY5AOMpgPVoI+S0b79Lm375yOIR/AtqGg4g==","signatures":[{"sig":"MEYCIQDpv5j2ui1+WFrHflvl/0hsaYwm9YMT9a0Fr+6FeaLRlQIhAJTC9PUGF9CPWVzDo2aPL7UUhPO/Mcd/1BExj3Xmdcuu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/jFCRA9TVsSAnZWagAAg74QAIlgyhpJ13I4EdntcYr6\ncK/WL4cyfxXgQEa8dPzj2LSzhv/cBFN0HitguUGdZDXmFG6V9EWFnEeihdQ0\nzmasUicECSes3N2enA9Vjv5w8Etpj5UFJ+xj/4EB0G5DT9+4I05rmiVl9uNq\n22VtmMkAnfe0z+jiAy1B8QdvqPnI7qWcIjY2ldG4ULIj8tc9dsM9XAwjqleD\n6wwI6ySi6rfVlUa3bd0Zbcvc+lEVrFKzIMD5sOc7k7sbIfvEi8xK7fQroU4Z\nL+qA4bgW8y0N2EQ/RLYgm9nxFtUIbiFHn8RgAKClFXXv+Gkrdh42QpKZAIv+\nNXXewm9NeFREOPWH2m9Jbx9dlF/mSrosmRgFJYzNeus7YLRKIa9uZ18Juopp\nKQasuaMqHv1nSM9JLS/rR2zFGP1rGd8mT0Qm3PhJKy+VXpymGsAOo8mnI8R6\nLnwh0o6VGPsqrfFb6cqdZSzeLOhmje3kn6XCMg0sd8OdGOh0lJcJ22n7cT8n\nvtoUPOm7MryjmstoZGve6wqpAResQ1FJjvEh4/qk41Fn0YESO1MLf3B6cQBg\nG3Lf8kGJ+JOTxAyMkn6OVDUB2j2Dr21YNjUWjjGbEMlP4XI6szK4wNRG+aYI\nHviNzjfGL+Db8zidvymf9jueDWM2KZqrxeSVOdjtuveDY6RU2nBHv6ssIdKH\n9Yy0\r\n=cQpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/density":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/tab-scroller":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d2ae6e17d.0_1576794308888_0.29287341648414067","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7faff546e04d3b03be56596fcf59b571de31017","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ba30399ad.0.tgz","fileCount":33,"integrity":"sha512-qJueGca9nSXeBOBTtE8D3IL02EN7Oiu61rCvn7mgSGfzPJ/y5aMXUzNSmDw0A+PGtkyBgOZkKUuPORFWbiJ97g==","signatures":[{"sig":"MEQCIFnDPLJ+/nF6qQkLnOeu1hSlCvhHDP4rWeZfu8aC76U/AiAR1eY1dI/SMzxlYizUpTpRlgVWK0RQNgLYrheIZg2+WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+fCRA9TVsSAnZWagAAWGAP/AnkxSpL5kgYCvYOGJ0B\nS9Rjzhq+t01k82tlzkQEVaGKCzMy/LUar+eUURsWdcK+Yoa1vFf3fkGBSYo2\ngSM5yaZZGnxpz3iTHnU0IG1mo3DZdG5MmqpbD6ZrVLaC4qWDYos0xue8HG93\npq8o9k034nR/WTrzXc4nkwn7A2FLSkx6+3dWdMDGmi0ewu40RNRy7tvsSyUo\n5QEyn0klWbuKKZbcHOh9c8KiGVbLIpQB1EIFDoda4nLkAVgS115B1HZqUcfc\nYTA4aQdOpfD57tBawGx91HRKHnbUS4HCi5n/uL1OhkKadhOw5xZv3e4HVxva\nOmTvfBiFAYLIPD8i0GMa4uCmKiOlciUKy1z276bYbBf71kaEzMSRbKUCkXGp\n0lpMjvmfnRkuQNfzdn7/ZawtH4ni05q6kyk+qjiWhngHf4qqzRUoMG9AFyhV\nhneLsh8xOb8vDGLecJoHd7QQ/GcN5/8j+TIcCfTL2n9Kl8q3ws50IODAh5Ry\npdk8nDQMBvHlK2Tb6O1BVGNhedcUKbmlu631VFuqFVTmZYtQA4O1B8HU+XEN\nrFB4V6GlN8VQPJMEs0ctpovBqWqvOTJdB/LXgwhq3J9o/oUhRF8kDu1DIZ36\nVqPnlp60yoqkrmtm3q5sJUHoXg4ir0KQW6NNQ7ZquXFSD1oBHYPVRCXAs6Lk\nXkwM\r\n=2nay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/density":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/tab-scroller":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ba30399ad.0_1576804254706_0.4090693803591605","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfe1239b32d2ae42f952762a565780078b744e87","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a08ccec35.0.tgz","fileCount":33,"integrity":"sha512-P3wAjiISgkUZCOfrL/ZYN902oLSe29Ho+KT48Uxc4areCKtwxu1Q98EAV2j6uqmvtSKdabJDzIUCBXzNyA180Q==","signatures":[{"sig":"MEUCIQDyG1JrAiH6Ggen97+ri6sNnesrirsjjiktkDHgNMPyUAIgT3Wx1PHdbWMleV7ehTLbPCoE3DMM8FsyUCayuk6foGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VkGCRA9TVsSAnZWagAAt2kP/iKb0+EuC5Oe4c8NZT1R\nRNyz3P4qSETwETtk8/caaZbjLS48TxOT06ToV4oICZRafkg7tL+xqvwk/OU8\nVFdqFPpXApCpRDe1OizHjHqh/dB9OdsnWvQv3UcgK3fNjjodDOWJyhrMwfCQ\nEPaPAahkueidN4B75cOonJ24F27534TQbEkw+qxGcK4kcgb4QGw+9VnB+PMB\neVEYk6v0kaCc0W5g0j+UZsHbq3fZLrnaT1Z1IY2xT0BfbvMg/n6X57wksMIa\nO8SfgTvqM0RTBkX3NyqMCnG3ALQ3QoecTSMgjXqYY6bJySBnkkcumGH1kyco\nK1lQFDsGCQQQIPoxWD05kIOcguC40WQHRtGxl9ermCmjE0XFwOXR2jfIxsxs\nxAeUnvp+Alu+72QMncvZB46/6qEmCG7UMDrzJJmRSWwDvGgN/du6MOUBuH7/\nH5mZ2qeF5gTzwg+qkYoj+qb4GsI9fHi96ucaMH4zKz9Yirq23wnKjEBQqw8K\nP50pJwXOAknqwW2MFj8Z6cGIGtU6KIKlzISesoP83PMSrYwnmvGEIxWch1hI\n9CyOsq68qj5Ub93Tixf3YB2NvnQqR+2lDy+Q8an1Td0t+jo5xKiyFyfEBdKK\nYx9WcvvFC3+wUIx4wfGm/IOGcm+Yj0AMc5N6S5AXK6wIPHvriaqvWM/aIFpf\nUdBp\r\n=njkE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/density":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/tab-scroller":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a08ccec35.0_1576884486200_0.7133633482875397","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632cb2bc003b7cd8afb0c69b73f617e92f6a543b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a2f75105e.0.tgz","fileCount":33,"integrity":"sha512-D0fbRl072sT8atQ/00skBwWJv+dG83YkkgTDtIPZVSN1Nvu/tha07zPEkhHg0WEZ8dRWFYaFq8J07Y+YlLyCMg==","signatures":[{"sig":"MEUCICzZ65y8UumPGlQbHduYLYAICW2Rh5UBb0uSWc6Ckl39AiEAnzRADQcwn0oTVDfE23Zsdg6RCOFVvbrkTTbufpBNgak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARogCRA9TVsSAnZWagAAOdoP/0LoFA4KpfwbTLe3cHbU\nrtoRdgq0BehDET4DbB2OUOCNJTj8SKJ7uRc/nepcHFEHYTID4WaumSBDSOqD\nZ5NnuPMPUesGW5HQTWHtjpBF8wwh2oFYKPJqWLeh+RAWlpw6TS6OhCWa7t/h\nWAVeT2fgO/d9hxBFo7geyPmY2a6+4TbjzLKzKL4iOFKqDZgiHlChv7tnjXCS\n84EAcSIFyfSVxbHxu++adP/xsfkH+0e2/PEk8XcrU+bU/Ce1yO6Jr3/4Gb6C\nP1FXdLHhT0NuKo1t/ypY2ADWy3biwASeE47XC1KKywcQT27h4ui+gg5wi6yW\ncHfhCjTY4Ao2G8UZx3CVHuGdwVFwms3kzBoSl6ux5ETeFIEwH085DXE1/OyU\nzBNlSqUqsiswm43PyvbSHACWHX79cwptLgF4gahyOKaliaLt1g3mjBLCG4e5\nBfEo5xi0zQO5qvMls2GTTcFgQ9hK5Sd7jToJafto9QMSCLBQ/2FS+9qFJyJ4\nq+mMjGDzDTt2m22efbjRTn8hmWM0efUodcm8T6IZelQOtnwKtAv63Sfavl2W\nfzH2UBRBMZDEueTkUyuW6/qWhZ4TEXB0280J+Cd7v0ZynJDDni3F05TFwhmX\njkn5WoQuAb29PrEcfT9ZRA8wSKWHMysOSynvjmbDhlBCqWdjPnR63DKn0Ipz\naqzi\r\n=4HKm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/density":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/tab-scroller":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a2f75105e.0_1577130528529_0.910581446979841","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e010f2352ea5162a5732303ad9a1301a4597e2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c054a24c7.0.tgz","fileCount":33,"integrity":"sha512-ne5vtqow4MAQbiiBIEsAhGxQTNMbm++GXrGIqaWJXqhFA1+SxB+xKZixYOCJ/LhYxRmmXlcDWPWGmQrWu4EFwg==","signatures":[{"sig":"MEQCIFeBKgmQxeVy+fRxar4tCcMKLr3OrKsi+cXga4UqIHvaAiB6DcIRx+YFxc7PLL1K0YOEyCJyXw3PMbSVIyVTQisHcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATbMCRA9TVsSAnZWagAAr9AP/2KIfdq2glTdFocb33e/\nuhnK4TnpTFFoJV7tj9/z+qNBPKwsYHC5xXXs8ZG0qo55mxq3MFVGigMfCwov\ntXhJArPu55kcAVHod9q/HYyJhVK1cqtlTX25VRdBDjg1vXAmgyqBm7cfKtVe\nDcPbbGM8C5/UwWtqvYNvknwceavjmaOVWINRcB5CptrnoI7O+GTYmwJy1tcg\nR2/DviQKoDqLXYwZjnAEOlpGdF/P99Cny1Q6MTbXYfxQEcpAGtQ67rkeLrOX\njt9y5njMsGiOwTxJkg3P5aFJpDKHTb9kxR0eF0vZe9OgCMC+n/FHxJ1GduHw\neAesHSM3Q84kt0NHi1qcG+PCnonk03nwMSDS2YyJ1/PxwQiTXLlsuN4+8yB+\nnpfYmUjq53UwD1iQlYkz1vuDVLu3biIosK4XCU6hgUeO6Shz7BxH6q25sY1O\nhToYizQ5PBYv308wlffqsKHChaCUSGJopjKJE7KWPqzUSHjNvz0w4jyF5brX\nm84KrDusHHYQYBXrTdLcEobSZDmw06YYpOTVEfSQEZ7ahRvcRBhyYi2XcrL9\nVlJtPpEP5fwrQgrAGH5zEoSDDzcy7JBmsqUP06XMS5OiouYS2HUT/A4P/n7Y\n0Lwgy7iKMduwahQ2/rYB2+GOGChhGVYNRbjo8Uki+13HtTLtrsxGqZdVRvfc\nY99e\r\n=S1EU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/density":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/tab-scroller":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c054a24c7.0_1577137868418_0.6131548747833959","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"934369c27aa98949472e594258e5f8297c1ced20","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c6808c51c.0.tgz","fileCount":33,"integrity":"sha512-B+Wnbd8o6eAALOtSaK8ioF+nwbHlC9A8MNI1skzwvmbuJn7kGvRQtIOHW2n7rT4/CsatcRxKJ94lFDLs8v1icQ==","signatures":[{"sig":"MEYCIQDBj206iw4dKWCmqKXfMp2yaH6cegp3wWViEcGb9OUUzgIhAJbTLPo1ieq0AXPCoKolsTtmYV7sW9MRmt2cvRjGr3Wn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfVCRA9TVsSAnZWagAAoKUP/2tjBuSRUSPGAX9GSvpJ\nu1GGw471rgDxllo4rj3K+irrLByUJgKB0yRuJOnvmv7mLOyxIaayAPenCoAU\n72EPQrSdow7uH+zludNR8hjBPbcsmYKqt5gks5TKmrsRGVJK3DOYFuMv0ZAY\nfEhZcqBgwAvTyUpRp87RtCYJugdsLo5QH1ekbz+jnsAl4IYAT7ZmO32Gzaw3\naKB62kIUQ3lWldHNdFBcV5EJdgJpeXI4Nn65Ax0TL5GGcWhMi+FAb89LBtno\ngbcxa4YY3ojVg3ZqCCTRHPaZU3IyPLIznhhiQK+6gxHmKpCiK/OSmq1ZE3Tb\nqjjls654ZKdnEknX1lgC4xwftkr5AzIC9JI+3NTbVS6T0xyFk5/uo09c95N+\nlL05iWkX/tsp/fhuybzQNc7TVNCz4u9ktbWVjn3g0Fkd7d/T4CsHj56ns5w5\nzI6cqm0M9V+bdF5/J6aZOk+/Fsr/3JKMhrQNNaOSXJr4fip4MNc7tJc/+Lng\n+3hiC7m4FQvBlryrdBk22L+IzUH/wyiVeS7+V+eti7x8zrDIDIMSsshsiFvh\nVeIr4oAIigvuLORQy2Faug9+Ra6BL9yqeoZ7HudCIcwGvu+yUa1sifU8bNXy\nV+6i6oRz9bHsexYHavoXOtozfxE384K41YRtQvEN1TCn3qwmFIRBgite7UXF\nN9D1\r\n=LM40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/density":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/tab-scroller":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c6808c51c.0_1577138133362_0.09175315611088952","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f3ecc6f7e1b269d02bfd4e3032bfe30002919b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7bce9cf77.0.tgz","fileCount":33,"integrity":"sha512-b2fajpABaICioULt9xjqze/EAuQ3I2Xcqeg2XHqEMF9/lO7k81Yt1mQCNdE+Wf1e/z6vqoe3HX36knueIEL+iw==","signatures":[{"sig":"MEUCICFzIs1F6PFhkh5pKfnr5u865Nx8E6e8OcGrwkzmZztbAiEAsNVBEP8y4J+hOqHY9xv+nolzGztnHVIzJMcjrqis+is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBQAICRA9TVsSAnZWagAADHQP/1GtpFT2LHPxDbzREW5g\ni6hSOFK/nKRiMlNJLT5ra5gCpl+YB896kUuVxja2RDPRKyZ+1DXoRANnwMKw\na7Jb413tn41EzSVM9ME1YIP1MPgVZ7C+v0a3zQH+vV5zwjv30mNgcvMOkUPF\n517GYpaq+ivw3zW4yf2dQuRrkP1DTGo7F3o4HXscjpOukldxGftlGqXjSKj8\nv/ktKweUXJE6k13JtUH0KH98ZQWml6Wtesjt1GS6V4U64zwnfD6K4Ld31TDG\nwoaSzbvypJZ/AaY78VGu44BHEM9drIju/DLnD/jrmgvzX5z4sL1MXaZeoOBJ\nVEgbenSkrpkrpqfN0Ym7MS1lKdemhLlNItdTmmUXA6xgxdRxQasLMJ/4Om8r\njbwcktqJr8wPEmVQ3a+pi0svZtigiHlj7MdF0e99Rfue6GhjjlL+9ziC8Uem\nNQ1mtnD9ulXoVKJpYhcff8HeL8eIs1fawCFXLfpHvtKQFNVTdU005Jal3mhm\nQ/65vIpPlCA2el7TOCGK9UTVywaQRk6p/KTVrQE5H0i7yvYThqeGA/gD3Hne\nhtWKpi7MTbiOMqjjuZF1VWRfixfJP/ymsadaxCURsiZPYNshNhJernl67ITd\n6jo+m92C9jvmMm7C3kpVgPf1ZrBxX7J5U2wKr8wDhgl0MXaeBTsmNdx2jCOZ\nJvDO\r\n=f+u8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/density":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/tab-scroller":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7bce9cf77.0_1577385991777_0.260314753065098","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88f849641e4dd8e82ac7cc8aabd7656d433d440e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c92f038c3.0.tgz","fileCount":33,"integrity":"sha512-xbYrCHryGPpyRjmCKr8GP1HfbEv3paMl3c6urRqXS0OIHvGpe3wp+p2uNke4QNKITzhhfZg4mDfRZIfqc/R3ng==","signatures":[{"sig":"MEQCICdfAaZr7koI+Z2VBeUQl0KHe3u+KA/ugaUtRfYWkpKDAiAJttxdAq81z667h0AAqfnhXyyUwhjnn60VJcs5I1yBVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRZCRA9TVsSAnZWagAAqw8QAJQbFLAC/qfkbI97A7vp\ndsRMOX9fQgSrhyhQNYhciW0TTKtHVgRRDPfoEXCXHNRgZ+rRQoUlJ0Bisasj\n0ngjpygMX8Dh3a7OEadH8K+//8oOVotB8dQ0G8+RaiDxGaOAUWakiiO1kBNc\nf6X1fOc0C2DCLROfSYNIJHEhKUD8IyL0zVoncN4Lv/9No4WRKpwvhsKB7bxe\nPdb0dv6zvRFleg8641gs6YU+G2kwyJspCY8+4Zd365s6cFRStnNhNR6/Dltm\nW71LGF/jBQnLwpVxlrnaT68DaHdGlsum5IGgqlMFbxt2pt39cl1BvZTWXvCo\n0qNpwS1b53xCF7uLgLiQs6rdzKdnIsh5oY+hbEBnEaQxu4yVKmxNI+z8+nAs\nnAV+UEZ/1a4TeENyoR34JbnlvJ0ID9/pOxleCGMaQz9HnX2QqXFz/htrt0wp\nK/LQsRjJo6wODI9h8+/e4XCAOrPxhEHACBGFkpU0L7mEflacBctmUpcWXyQ+\n9TY3UeLVna7Q5B6S4qREXbI+y9uycKPWzhVF5ynvO81SLYNIjIrtIcLQel72\n9vNbNuxdtEtZK0dRNmX4ASCEA13EhMBS8saNKHJ61sunq6LKzlOP+RXJiRJQ\nHNnlxgwrz941FQCKfOscQqvdZmUWzu4nmrwLxSxD8TPLbnrKWkyHfZ+e94mz\nJwIJ\r\n=eTJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/density":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/tab-scroller":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c92f038c3.0_1577743449286_0.3416788371666666","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6deef44779f1751e12228da1e5cfd325f38f2995","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1f1ac7558.0.tgz","fileCount":33,"integrity":"sha512-kmEIychKgvgHbyqXcDvvwVccBGsgu3KgwVObmkDAXbgwcSl8LJf+jwcAjMbZ1SlOkiWJD0Dm9JQcVvMEoHSW3A==","signatures":[{"sig":"MEUCIQDY/SWckB3GFJUMJA81epKZWYrrfMphzOyjtVGdXxrZgQIgaBoGKrHHtNV+4GUXwq4mTZahpqArO/8rtQGydQfPn00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlilCRA9TVsSAnZWagAAYREP/R5fQkbjmOppPn0XUF4/\nl2OMidwzuHDgrdeAqhj6WoZAL65QnhzJATOBh9MMxMP25T976/bgSqy9Yi3p\nHyH5dsRgrfv4dTBZFWRjEcRVxR9nBfS40kWGcwpk4L4nyUfXmje0554N/V9m\nsS9VytWAnDItz9Ywd8F8bApoi3457nYMFEeA9Q7iUgD5B+vPB9dn1SS9Fz2X\nD64o8vd9p1Opsw41zV0ebernb7SEaRmiaYkBXZq88UU2dD/x2vxeqnV8v556\nMav8U2N5/PFTy7yEDC1/SDB45R+tRd3Zm2/KD1WlbUB6NTlAaLZpWvbQu9SX\nvVWpQ3goTbj5p0MHQXAa30QG335IT/KaIBm+0nSGSaNA5yrMx1WoxAW2gneW\n2XNIrfPF/G9gIoVcGxbpnQQDSzpbJZ8RiirE7BuZOTsjr6ztTNvzUI29KV2b\nW1FoL3LnDW5kobhDjEZZmlJHbkVlZUw+HNViqemEvNcRlnXdPJYBBvMyuCz7\nXMT1D6EHeA2yMqX/qRudazIcIbVImenjmckm4C4TLM4pfVtaWs2Lp6zyWDYZ\n7e1ivUjR7SJ9qBpXEenQbIq7khBuJSrilDUHv3uXHLJlwgIRiY210qa+BWRk\n/YAUgOim0BzaBAdgui+alaJQcqqVundryK6VhWaWC1v7Yrpc1gwK1Z4YdUmt\nUyCb\r\n=CL9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/density":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/tab-scroller":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1f1ac7558.0_1577998501631_0.1433624184285931","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b75f94bc0f7557d6badb447f4818fb595c966407","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ec26e799c.0.tgz","fileCount":33,"integrity":"sha512-3HkYqbcD94Too+LC5iXRE/Mhjv5Zo2mdxX7bf6eX2NIwlPQymoJO92JbaI4yGlJ0Xh6p/BsttjBsmp/SHskAIw==","signatures":[{"sig":"MEYCIQCLTkxZc35mx7KgLUu748aP8mt6rqdVNlzztwz2ZJ5gpgIhAOlCh8bIXsWHAKS7150fvEaLnN4U/mAwp9uJThDVoLYM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPvCRA9TVsSAnZWagAAjWYQAIjr1ASTdeMwJS/WbvnM\ndCrgN291z3gCNCrvqHx8nL+/lM68jRrkbGfID4KgMmE4q9zjMu6d0r2ojnXF\nWQT2XllaDgF0r9QqMRBKXCmzOI2MXwH5nxmbSYB9NSyMEsPFDz4/inB23erc\n5L416E7MfnghHkWDEEOX66eExtXUxji0lG/2kxKKfcwBRy5GnAvg+6JbzJJW\n9ezkHYTsnV6CD9cDZ6kMiCDfjq/U/60gQgEMWUgxSiwtiFVhsVKQNOLi6kjm\nvCWsIDR+SP2req1pEsjPkYlw5lQiGS6ducjZgcfe9+WmiUsbQ7NrFo0OyPpm\nJcQX68j+zLJdpdtwjrsqHe03xEqZ/KQjAmskzYS6ixYNd0insFac7NRmaUM1\nS0KZmNASMdd4fpjsSNdVHQRQWLtvfZA93Doaj0lORqCQNUpCtVE41zhd/S6b\nbjmjl5TlkrrDUQJ/H8zpZ5TK4hKNmg2LIKJ1c8ggEz2Nwglu29kDCj3895ju\nz4UVF4hp1RSMck/Fb33iPhFZjGTkt4ZjAUa0HlIj0shqjWgWC/Gs6RzpdHRr\nSNVLMGtYHYkPBzFo3PLIwqdqCTC7cnfrwmhDaCPtkwRxT0clFBJQz0Jcm4kA\n9m0LWhUruxeivm4ktbxVkGC9pMi8Gr76yxWvPG3QtP1KmodjALSb2sjHde8Q\nnRVv\r\n=4GP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/density":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/tab-scroller":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ec26e799c.0_1578001391101_0.38161638830457045","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/tab-bar","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1411aea635a6136bcff35fa95530191ad2c6e50","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.0a40ced40.0.tgz","fileCount":33,"integrity":"sha512-loDOeVX4xhepVdfKwUpUGBz2f4om9YBIt/OKfuBLDefqfI/LBlvSakeQfZ5pUtt5zFktPK9RsrprqzqRLRqstQ==","signatures":[{"sig":"MEQCIAr4vYYXrQykUAuVOjCNnFmbmGV0BtFAGFtzn5Ief1ZfAiAHIzAoa6RcOOjGdiAxLYxMGP7VrFvvAeBqV/HnNIGqAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3XCCRA9TVsSAnZWagAAccoP/RdVZ1wSj0ZQNnELgSZz\nIPGOBQv+2EYr4RdZRmqjg4djkpBErbT8hWI2YhEewxlZKxTZ5sWVkCVYxPky\naQ9qT9Clv/Ak5+yZkGgJNZyu+gydbQuDikIPKUePd0/Vy7D6n5TExXxRJjH+\nvr7VzJIbGToMaXco1/Vw7VVNwWcuwIXcmkbxK+Er/rrIN0HMWN8m/LrsjZl2\n/QI/YA62QDvQgUgG/gvDffvZPp/NxA/4WGZDRKK3W+Eg13Bho8zkqQNsn1Ja\nhl7/13ufxvwofVD90CD/qinv6qeJ1Fx2PHVnkWK5KseegZ+5nA+gO3TDAFkb\nmlhjmu+FxNWacQhJnKY+KmSUJEC2wmo7LXqCPBrZVBJJAL4o6KLTiJ4nNQ1K\n3EuxVoMNtkhzGNjuRMm2Cbo806INJ8RKGVxEw5nO38R3F3UB/FkUK5NFZpJN\n8GORhfWIYzRJFgLofP5JNXQlSBDCm7hM9BU54B2ORHwEIYY83sGGll0vkS+l\ni85pI9qAK3oLnhH/1ISQypNUm215X/TkDfniSVyalAJMyMMGbNngZXFOpM0j\nSKKDTbl6b0+Tf3t1h/U9Acy6y7lVvOnWNalJWZR2X4IXJPJGpn3fUQntbat1\nDVZrJEF9xjkA01n1CF9rVokScBADU8bNZbHWYE64Ng+vxegSlCaWCo9hbLD3\n8uK2\r\n=Qzbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/density":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/tab-scroller":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.0a40ced40.0_1578071489647_0.22531003745059164","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b78d4c77704b10f60494b76c86ab24e63671f482","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3adf84899.0.tgz","fileCount":33,"integrity":"sha512-n/OBfaHcyX2jUAwaoeUE93ZlTeHhnWfjagb1a+8KO2qrhMfKaxVOxkeIlWBg90ZdaC6/YnOY68lZXpzYVdchtA==","signatures":[{"sig":"MEUCIEOiLcontTEUryN+oh4jXU+ajFQnFOXu1TykmitX+Av3AiEAq5/z7kK/9oYljVSJXkv7h/H8/jNE2C3Vqa07eVF/Z8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aiCRA9TVsSAnZWagAANikP/RF2sM/w2abIJ+NdJg3o\nPrnvKO2/1b4nn6iqoMlY63d6ZwuAPugnLETpcTLk1+GH0RZHUUro8XtdfP0I\nyp/hlp5IKx7AsVkj75va7hcudpEEfXcxct/AwdCm3Sbzpxhw2XI/nl1d9qvG\nKgYLIuh4dDAhcyLTIbh5PUACJhVUw9rAxEwtb/fN6+/LgepH9bLrCLBEY5HA\nfWb+0L5ExDhdFE9mGCKGjSyS8Y7+I8d/Zoyo5yDWUvMaugLVIzRzrBPml+Pt\nMSIW/kiNZ431boZeg31IyQ7kN/UMCTmjzxUfGsRGcFnMBQ343V2n3dVMMCup\nDLBQncw5uwUH5I+AZzWOBzPdGDH/5ZIvyKxetBIetByxMD0yANUk/K4FKGNf\nDs36VfLo03e52wG5Ml4SLqpdcEaVd25si8d1CND1oVUr/4po8pINTUvOw1vp\nUBiEtfArQ6S/9z3oEMa93hVoXJ45Lz1jGtchcAAEVxP6wLTJK3QnRVpVS+P7\nQU8tYh/+awMSzSFkBf2JReo8Iy6OQH9TCRlks2hqjSn6uBund/VlYiEVRmSw\no9WWXosWHZ+BHDKH9pLhrCPldR7wvKuYQQUEPgsq1TolBIDy/pKkXD897TR4\nRykLS5MgJRmguZDBSsjuXZdAtZkr9APKRzkLQpSRNiG2ZaYUpcG1ZMoL4Rys\nPi+L\r\n=5Nfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/density":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/tab-scroller":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3adf84899.0_1578075809831_0.40939540797497","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/tab-bar","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16bf548bcf10ab02f1b0c0c9b8e55f339ad4b13e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.0d42ee650.0.tgz","fileCount":33,"integrity":"sha512-X2pBvKy+L5CL88VrGcyxH4AyhGjMKnYjcg5WJC+z1b4m18glIVgzkVeRhFA6l0jwhoP1X5HDkRcB5TP6CZ5Thg==","signatures":[{"sig":"MEUCIBXYUR5ts7o5R0ZgYGwao7D6Msts4igTavJklZYvLpdwAiEAk3ge2OClH0gK8hNJisPnXlwk+UZzhLuFDv+ZBobFnyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7Q9CRA9TVsSAnZWagAA/VYP/320QqOwHlVI7ZtjBpO6\nqvidiPdcOqa22lMNjkN1WdEY6sEvalMNw3CyKBuNVodhq5ZulpCvHmtNO7lC\nWqIjz+uACQXERei3sqo6CefFVHgPjNO7wtkuUrHgiAVOVw2aI7UUBuapJP6K\n9Y6jvN/4MIxgA9966vr3+3eMEc0MJQrzXF/M5UN57GmLmb2h9XSYtYV0ay0k\n4F+XsI+nTdTyvqG+wrIGzsgAVdkHGsFRWqCF6aL2nPBoBcLlLWM0U9lpP3q5\nZcMeTrECD6Yu/7Jmy2o5JKcuSId8VvEOq17MTkxmmaa6mm3gaNDrJXM1qR8p\nuytx4Vmv95+Q+8eKFzkpolSUZnqzAdZ3NgzLvCdN0JR2Z+vXWmjxWrpcXUar\nBP5UFJniEWB/YhF0Sj9T3n+lYNyYXhoLQIBsEn0YcXO2Hoixg2WkqSFmnXoH\nLpB6SK5R37FahwvypfwSl5ZKQcqcOza6rMIQJ/H8UW1uhlm8T9KH2C+P5t9P\n8Q1CNsMLVA4WgDmqer+qDV3ZtXI5Qcw9RBDWGse95JFUs9/bWHdlRt7mfj2s\nW97RUpeZ4N0xG+SqUya2a3nujWc32z0DEN+/eyEGRvrbEl/NFTAl6MeCrnyq\n37dtWRoWAeP7PZat6vwPEvmC5w2E+KSulKvvf57djWj3sPlXyclzeDottkMn\nQZZB\r\n=IIIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/density":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/tab-scroller":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.0d42ee650.0_1578087484593_0.04777583770173144","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/tab-bar","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc6ae6d0ef5f471233ed35b3a885f19542766915","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.847dd1ada.0.tgz","fileCount":33,"integrity":"sha512-D1n3EiCow06iNpnwpPEOzebvqB73zSQ/vkmpqDBKcHsPdyO4j9Ho1J3sMyCspuO3kQevOMwPiV0xf3LprLTNcQ==","signatures":[{"sig":"MEUCIHbjwg91ljwRWdn4pTAN8d3GOqfmDFIYFNgDceT9nLqjAiEAwSwdoBgbkUVqseDdX+6pwFP55dGPMhyQ5kh7YjFuxas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4ofCRA9TVsSAnZWagAA5rYP+gIRYxffEhKm+ovlq9JQ\n0C1WkTwReULOV32kyMw8yNMsVSAk1wiRtmz4lrhdRSVf4GreLr2Pjv2IJcza\niHWtCoqHQ50/NxCFApIlWPMK1Agx6xMKm5DNNbY7H7vAjoUsMwpbma/+j+9Y\n/qM40bQAxw42yddO4uW4Bt5KlFU6JUvdveCkwLV5gx/KBW4Ff9/xageEKCY9\nha2ARNAnxj8cW+6ojsadYAsPUkaDfoJto3YsHjinwWSG8XCBbqN5YM6AVhqb\np8STFAhGUpx7y+TDGaTUlHK7EgkNJmwtBoGEpEDlJ2/BEXdk9y38WDiU4loK\nGddAk/3APNtYF1LV80CjT4l/zap0Z3NmnzqXjm1l8RkZkatPP5X+FfyGPF1L\nkcgF6sHT/KPiRRsu+/+tYfG7BqtVCjdcKkasuSjH574EzM0xWs0RSjZ1B643\nbKJUu/YpwWerZoYnxxdcB+dZaWA0rXigXn37yp1GyitHwOSgvSB4COwJrirc\nEkVo/2i2dBFsB48IzWb1APqNtHAANH8nSexp0j0TGLtpmVHfEKPjjiTGRhgL\nnrtUK4qB6qmAzlLJ/81nGJ+qqyZM60UZawRig6TTDREtXboGIRHVu06geS2s\nOKs9n54VVUfhZQd9y+CAH2h5ekWKOs/PZAR4C0u4hMowTdT1x85l2EEWNIS9\n9u3z\r\n=Rgg0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/density":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/tab-scroller":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.847dd1ada.0_1578338847331_0.02703796468348152","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/tab-bar","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65266c6240e6231a6f4fdc72cd6476dd2c2587c5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.39df7e5df.0.tgz","fileCount":33,"integrity":"sha512-8IUp5Ee6QvfeWj82YzrQeeyMBP30EurR1/cmIPlOAPaaRWpdbgYAQnQV8qvI19YgZDBxpHGY6ZjpZ2vX58jzEA==","signatures":[{"sig":"MEQCICTlQnkOTknz6xc/gjIrLi44KmjlTkVWWOD2Pih8mdyhAiA55V/Iw1k6VqRLfsqdmxCaM4enZRLTYcXaLmXtg2ZnNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9c+CRA9TVsSAnZWagAAg2sP/imujkhXvWYOKydnUiHV\nBK0mz5qzI97TbQ5wadTRdx9XQA3GJEaplIDhR19UG2k6SEXXBwQ9MXoHre5k\noNTP4XuyjvMDVogR9AgxX061zEx3zOqHl2Y4gn4PZ9xIFKfuzOgYSxCo055h\n03DOky38+f9m9vpuYLRCLDVmP9y3KvYtxXo50kvwWg9ikrVehvWrN8746kDN\nLw7ePlev//jtoqDMnVw9TFfP72blMJQxIwoVdiEcyf8ZkETti8RqE3gqwx2t\n7jqXt9KGDvlA3m49L9MugSODPiD6Y/z4bxy/joIXNUfZ++Xb3EYLFLq26AYo\nCO5IC9mvObc0CMfVjkBAinEkDgHrDDOY5edi3ys2Ndcf9G7vkCdIXR7U6PyS\nCzLUHJG+LbRt9BUE3Atq1M6ayd7d4xSgz4KriHqa7OxvOSikuDUSkJkxPeQX\n7aUjyxTKFnij9//gB2vcffBFGzY+dTQe4xDjHMUZ8WXZRg731qSRLptJTKbO\nVG7QhCVVKlox+v8eSJpAMJquh6fZDOUpPIPvyKFaV2walfykwAskjEJf/qJm\ncvugj8XAovrTvFJu9+kD6bFjysBTtthnsURUVH+KahJ4xzHYCpVV4OHkDhA6\njI93av+Ma3GYbo6YoXyF0ttR4KVqk8+j3EItclbx19W+WCR7iXZHrfwOVlFI\nO/yM\r\n=8E3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/density":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/tab-scroller":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.39df7e5df.0_1578358589897_0.4966255059239484","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec000fd5932b3c2b23051908539255df8762dcac","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f1a2581ab.0.tgz","fileCount":33,"integrity":"sha512-ErwIytzzGSgVofQChH5vu08eIZ0UxA8UYIaRiI6MqxR2A4U/0hZXWlnSM/LY1sqCRvqL3gMAb3FqfooyEgu9jw==","signatures":[{"sig":"MEUCIQCgyHqh4EmD9omCW1LFWcb5kf5XgfVcwSsMxFc+BBMJQAIgWvjZATechsqGW2AGCO2/nhG4w/kfvYXZCjs+/Hut+pM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0nCRA9TVsSAnZWagAAkwEP/1oNBFePd/Yprpardfg2\nIgwn71LKnKtUZEb2797JPwnL+0cCKq+R/Os/cyrVy4TOChJMHoK/zA9VqMk6\noxo2QljSS9tLrhdYe58g9LqZlwZK69qsVrWG2W02m6JiLR3qy8c89PeCD+7r\nafZQolzHM1T/2h9RrM3Ji7+qQRNiUVjzYMmpyFAUuMYgPHY+V0tHtgJ5BB1D\ntPgryIDKQ+fSqJNOgK++TexttbSoPm5Fm2ABgsP2SS9+/OJ3oiI5JA5XXiXd\nPnH5cqGA5R9DcMW8Sbrg0RBfbw/2HhWuQGf7YZTcheSczHRAYf4GrbPZZxzB\noRd7GDDOBQ9HdzWixNhkCu+Bv/Ivzcav5IBe8/bIRaHPyX4oGhuKUpSzT2le\n+YSi4Z72e3i3sTDqlG89Z7LjGsEdePzpgKTYYV39RRdyRecv7QqYddq0d8wI\nEbGLmKO6koMUM/SSnt53hGY/xvP7VN9rbck71JjEgx5zoc8KRsisMWDn4tzZ\nFdbwhYShihiammegvkYQ8cY3CkhwzMW0uLA8jHrqcRABja3jzR0mecuqkEt2\nDEXQfiVvCorsjtaf5i2LueBBmSrNp68HTAqYzUX5XdsqL8Uu9LcpYmM+KNdA\nyrNydtshRwBi9io0YHva9cBRuoggR++nEsKtzkWYaYt/oNQz3JK95shYqfEd\ndxcE\r\n=RRtx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/density":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/tab-scroller":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f1a2581ab.0_1578409254892_0.47153903136973874","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25abe3f568599693b5c0aa88e27d74b91eedffa3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7c7ddf347.0.tgz","fileCount":33,"integrity":"sha512-bntJXhaFhnffToIZTAF6nFZmhagPUYcHEcYcGUutFw+g6icl+zQWADChFjWqD6JBw/ZQZt4vI1yR6/Ih2aJQtw==","signatures":[{"sig":"MEUCIDDL80SC/b4e8u+CtyoIQ8J/xSj+yZEfKrter9t3RcVzAiEAxtn0aeDGO0h8+X3O195j7DN97sN0EwcOwpxBznLBQz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKEnCRA9TVsSAnZWagAAOZMP/jATg7fN5Q7NXykvKu/d\ngQnXc88T5zUQLtlqrYRY6WIdJgW1O0zPt7GOpBQ7NqdHUHQdXMQFCrAphD5R\n/82bwPaGuXY4H+GwXRJ4SX4NeYa5M/BobBUmuEjNnlRvqdoT0qy3Qc8N2mUf\npRBxqT0NqUm8iTfbrXHuQ9oWTCs71Q06NejHrP+UW++E8utEGH22B3sawtD5\nactb2NeJg/6j5GZjjnrRB1kjOqCKv5viw9zERbRMGZxr44TlmbPOevuycC6W\nfvRS5H0oA6lzvaSb8SQjNNV/QGwJmROqpM3i5KmCSRi9V0zoosiDSPmJgHEA\nKIOcDI3G8/tGbtpnTxk09An3ROpKDjaND2eG5AXEXb8ibETJaOr+fYXbe0bw\naQjGadIBHZmdGmiudYlpgSaLCUgZhOFdb7c7n2ViHCPXG6QuNtS7rajh8E+f\nEFGPka4hvV5NpJubCQcq7Ji0eoD5Up4P1p96ZGcwzj03OWBxn/gCLen8KD/5\ngT2UJzpy2aSUGQPCJQpLH19SSawDbQm28O5YW54j5GfFH/qJlaTQgPMTSpRr\n9PLo+vfEaOCqyJ2tyUXm9J3I929VKeU5QGB1NIxMBWwvOVoFPyQSg3DK86Sp\nca7ZlGwOnUNTAf3pcFO7861GxExUUdyaPhF1XUWxfv8gRRFaKNdKgPt5SEOp\n3you\r\n=6Adl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/density":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/tab-scroller":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7c7ddf347.0_1578410278748_0.020851876293649152","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6ce5eae827e583b673d19721e699a9662b01eb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":33,"integrity":"sha512-ZSGnlJWOrvFrCXGqCVL6SsslISm+LOO/hnpAXOvcpgA7bvaKmytw9Itd9gb6RIppyCCMqONtD76jRTmJf6Wkog==","signatures":[{"sig":"MEUCIQDxMZ+T1lO1vD+Q6YiCX6ulnI2y7wZiDGlj7wFptp9/2gIgILr9Ni6P7MX0C7UewoZ/O1+/ieLcxDhHcM6s7JdNs3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMnVCRA9TVsSAnZWagAA3X4P/2DnJCGLGDAPvlsHxGXN\nrNlsi99huYP172bHpYl9UsSMMpyK9mF7sAXxpNAThdcg04VE5p5lqhPEHmnH\ns5YyGlYkb3+EMI5julDLeTPEYLoB4zvRIIw4pumwB7COJNCfxJ9d+XuYrtPM\n/mOlbygWlpI5kO7YdCoq7rWjY4tKw9RsxfI4Tn1WuGwCiFDAZPiDQ4WOY4yf\ngEosPcTZIBm4xLtlB3XxNvIQ8JXGcM/LAW5aWyKAxohWF12e8fu+7IE+B8Mi\nzddiREwQLZ4/2Ef1pVDUod44s3wOrNU1I7V9/RFc0QTBgGGq+3CRZxk2ETH8\n+CN5lVQ+3PXJFHKkzM4VtX8iEV5el34BXKBiHq/OJpOFZu9NyJCLE35hlQhu\n/RG+VS0iL8Lg55ssDM4wb9BcDtIGS/dOQdBvk3z00r82Jds0Za92ks5Ro96O\nRRHWSUFXk+1Oa6SIPXpPIemWtrdPRAk8IqEM5WSg6F7Nzc89cBUKBJbzbJKn\nYo0STLtt3de3rBI7wX+tjbTvIFLq+Ycxl4GMF5C+nh3Kx+gVmPFjSM3Tf2eL\n9W9tVLpAoCAH0tLoxM/tf7vUv84IGM8BA7+UV+0MGpwegaL4Hy6nEV+L/KBg\nr6GzfvIprIDQ/nmkyhkSSXp1hQVBFz6WhE9YmidiqQJRo1vqq4mgBgWI7Hqc\nWdYd\r\n=H6Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/density":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/tab-scroller":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a1c84d4b5.0_1578420692969_0.039694603348555235","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff5d98f0f051c04eccbedf67b8d612290fd27989","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ec9f16578.0.tgz","fileCount":33,"integrity":"sha512-/WHSG2AaMGIOlQHWZfqD8NZdsML5xjwDATzArc6AcOCVe7kxFQ+xl+AEELfWPIvvV6477TUWKnhsTZsi8+6zFw==","signatures":[{"sig":"MEUCIBIDFNnY0pJqYTAMnmAIYrPiEZ2YDT00GaWsxNkQLEr1AiEAp2rGDO5z08JmRDMpY5wMvMWhMoqKP4MG6fafX1VePQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6yCRA9TVsSAnZWagAAuYsP/irFiDx0so1+GyKynhew\n1lMTn4R7fUcsobNGTzKY+wCcpyaUPXnDJai9Mg0COzmXVFD8eCcNV+FkWNTy\nfT9KOooGrRiBlYUjd40gz1xu+WQ73FpjNHskeImdJgwGajAjuIdtKz8M1SXQ\n/qDgb2X7hO9bR3WCJdttkUR/mov56rWSFMXIDLBSXEXqrZ1ZznXy2InyVDGB\nfwZU0l+uk3NFG3fcb/Fj1Nj5frJLgvcpd8W/mdZsnOgAC3ILCDQe4UJXj2BL\nBQcSi4AsmZgoTUm55GpKdFpUTKTGdTphjksPLjpGh2O87RVitnvO/gnsxcoG\n7syJHw9hMhv71ssO1YAFBprN1wl0TPfCHwyjYqlq5jJOYh3zhIqRrtqCM23D\nt5ZGfgBtzvdODGL3ZESUJj+TlA1xSka/BGhHJhEM23Q+VdnOIBPYm0CneKbT\noUQPH8sBXeK2Z45YYpvF7jQqgYqviTL7whJMLZsw9OMgMuLyVjZ7gICIjrub\nhrSazgihGUDHgU92slPCeWpYIFzVnU0pZ77PPuuiw9KHo52XSEtd9Pp7fqza\nJdIKnaijVoUT10bhrQ2e0ed2223RvYF7IlTIpG4JojN0NM8MR25880Ad/5yK\npNRrGGtjmi59QBnuWju09xsqEG3f1+y5KESX0DkfPmCd4jasBgw53rk5Li8x\nARMJ\r\n=xWJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/density":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/tab-scroller":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ec9f16578.0_1578426033953_0.7152680631758153","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cc29283bbfabff87f749d0f0dfdabd236da8dd7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b602226ce.0.tgz","fileCount":33,"integrity":"sha512-atDj+Cv3y69HAOAAT7ZjnbK0vMWL1wu/7/CvLybWUCNObN019tpL4SAvxTNm1CBMN0RjgQdP2r9dluJ3+wfY2Q==","signatures":[{"sig":"MEQCIDImBmfAOB/hw3fv/U+UrcKVWFF+OKMAH8PR8tkLTAE5AiAMt21Bkf7/53VcOAePPOtOYJfR0d/KBnrjw8mnRbSc/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOcLCRA9TVsSAnZWagAA6/AP/020o6MwdPlnGv4oy+8N\nuU7OjZPrnVixdb4IXSoIXKMfRpSqhtlAWC2VhXtSyrd02rQjyUMDl9LmDMIw\nqzjCAVTfXNFEUYAqPedmY8fBa1SAJ41VBeGODpDKxwnX3EggcswEMFUpLKQN\n6VuAUmmi7fkYNgiNqCOBfj8Q4WJ5OStyEaiqEQxHB02qBuCMB5GYbVtTaLKO\nJ5P5PqmrvulN/IlcrGCoT5Tb26pO26htUWRK2x2K8ut1smisJol4bY1X24eE\nVdDWod/+qwgSTZ83QU2rThlGU+VHnALeHX6V9IhOvuNCRIPosOEiTafK6Gca\nq98MOOVl7NlrFnbKUjlDY3YC/Se+OXbFmnX5Nara7chMvvT0Tbwf4YrGsym+\nDf/iQGhQg0DijPfaVsfJeUype/9UEo7TgXNu8eWC2vhCzBphzt4RG5jt6cOs\nBgF9aQ1LzXkyMiJw8YtrTH/yQ01mMbtsjscQLQp3XXAUIomXD8Fn3q10NXFV\nlKfCxIlgOdcbVqxIgHB8I6GRlDy+/vcb9kDhtW8gwCEywjVCI9/gfxxvCy7O\nIJMrNvInreXlFGF/HeSPWRdrfr6/0s47CmGZ9RJIbW/u7XYtft5XauS/S+QF\nitqNGX2GC1dC7q2PQZAG7fZoQLtqn7xCO8gpCM026iWZeaz1TcdsC52GchAa\nqAno\r\n=1k/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/density":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/tab-scroller":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b602226ce.0_1578428171070_0.8006815585595808","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bbd5675a812f1a286fe525edc31aaf5c7eddbb0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":33,"integrity":"sha512-UcyhjluMr0G9IbQNQnfVUjMCukdCcJvBQbVhURP0Ooeo/V5SgYkQJKKEEg2vNbNEyoq9Y/hXncFEd7G2n+aF8g==","signatures":[{"sig":"MEYCIQCVkG2N1n53JUm0pLTHD022XaWpjw7+oz+mWn77MTilBQIhAKZfGBvGcGIFzhjtNBAeI08RxRKF3kI3B/GmXx/57PzU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeqCRA9TVsSAnZWagAA7ZwQAJHDurAkbsT1rJcjcKSZ\nRt3aSyQNQ5CioVc0izMcsgqzM1tw/CAVVMWYPGZwVlNYcfiiflWkypfPprck\n6Wf7W5p8ac96ZzGfMigqXvRZDbfqBUni4asUo11ZptjxqyvnCO8CwJoISgYH\nZsR2K2dq/4+SnXxTmhDN1xEzdyobYhxODrpamEuoygkkl8JIgduZnopNwYZ2\nQGd5KSz19SuQZe22fpUHPHR2Tw5kqe4YJtmKhC9AqzPvfjwBj/y91xROdN9U\n77wDfgMx8lZYVztWczRY/sIyITJ7rRnGsZ2A7GBZ4eCpl+1Hu18qK6UX+aK8\nmrF9Oke4wJ/oD7pP9vD3fIsPAI2XqLwKzcz18NDnnAc+9yElDpx83sbVOVaX\nu+4HoUqhmIHH4wlrA46BnrO24OM1V1mjQnQKmGF58KLWw0KKyAfIvKurqogT\nQnK2ep+M5+nu6S1pXguOiSHM0/qv2umkpbCAjZGl3FMhXlcUP6q5kUH4K5Rd\ne8zYl+friIYmu/CsFJizMuHQNb8nyeeZi1eg3USyQNuX/ib00lGG71dZPUX8\nNPU9RjJuSVf9o4vqA90Vy3gbm2FxjNL0Xymg0A7FsxI5RAZVCEL6Yixvso1T\np+Y6efpCfxLdNRdjgF+XWm7GswvOPRfMv6r4VKcfWcEz2XpqTIffbinncZGE\n/7fw\r\n=gyR5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/density":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/tab-scroller":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b2d2dc08c.0_1578432425938_0.7620366919574357","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/tab-bar","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c64512295968595b3197b4784fbf8deafb89c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.61f2d7580.0.tgz","fileCount":33,"integrity":"sha512-/6fklW9PiKV7xHdcGoGJZrO0NfgfzhScpLIWS5FIPfS6pCxTt8Tj4bzpGMnx/PCRhIi/hJdNuaLVzNMMK6ilrg==","signatures":[{"sig":"MEQCIAT2co+XEe1TnTm0JyvMntG3VXEKqhb1P6pIQnE37AN6AiAkiGz93zdIJX/4+okajZ+DAWDMFSiiDnVgQTKiEhQuGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPrdCRA9TVsSAnZWagAAYNcP/if8B87+ugW47iK9w1Oq\n8WP0MUidQcp+07N7w20Lr7XliFM9MoockmBap6I2gVOg7j035Dul0AZWp6H2\nN44pWUXMDgw2S9pKk/yb/CAV+RdjAlKiNuCP/K2RjZKs8wUEY7ZLm9UhqZ+X\nqAxHtPt1npEvfRFSuTQbtdrj8BnDtJllaymQm9M153ZIrkOyDf5fG7I5AXAs\nBqtYKMRXttgseB+UKCslJC5Mrwl/kYRe/WtaieiRid/h9uiRJX/NZWfRvBnf\nM+gkl/flbdD87do4j/gncROOjjf1Nkx6dwQMQbq5DRCq4IFZuPLU9AzMKvjg\n8WaHGQwo75mi6j4vpzy/yave2U+aSEtDv2k/imvHCBlvVzvFEk6uUoCUZjHA\nf7PMCTjAFmqEjCmPNLAw52gAtgR+Xqzpq3ypLWyR0puoIm2Ko9nHd9kX90kk\n0gsdd38DrKyyGLJia4sZCbX10V0LB4DmnUu+KKSDP1Viaq+wZBccu2SLVmDG\n+C0qAce6X9wzOFWEgbbhD+lERkaJ7wYj3WNErUANfBv8It8Wrq5mZbhIto8e\nViDfuwmO7uoU9Kz45DcM2yP3QhGxqcVLxPi068Li2DXm2HSpqM6BoVE31dN7\nI5hsptCoePprNUh0iHba9EMmLG5H8KPgv4Y4RaFKAm8k5nqY48GcKpIM5Wih\njXVa\r\n=FtKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/density":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/tab-scroller":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.61f2d7580.0_1578433245026_0.5928800156078304","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9db0c1303f08f7e9feccb0d916e3acf3df06621","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d1be53a2e.0.tgz","fileCount":33,"integrity":"sha512-aMbyuw0WrVypFodYG0I1G9MYRhMuY6WFBfg5JOKhwdJL55QAoq31GWxMpGds0sgDieAv32S/BTj8vHPKrNTvbQ==","signatures":[{"sig":"MEYCIQDoA00Y9KBQlr6sIqByWO5tKtyP8EpSmTRh19l1kR9z7gIhANE2Oe3dc29znySj6Zj45IQuW8ZCDTEAdr3ze4qaGHpQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOkCRA9TVsSAnZWagAAFkEQAIN/ZQS/cloZUiD7UwiL\nmYbgCp0V8gIxezF4OSQ88vgmC7hPHUR0IegaQImORqODYpqLkV30sUi2q3T+\neTwjQ9asSMIuSfdTTeEEIucLhbh0C7lIgLvGLxgIvXpR9kpruNaQQXK9GhsA\nYygk8EbXgPDmjV0fepWB+H1WGFJ5HmD4fgdbf8yoNFMrsJUpP/VnXLecg1uQ\nnCDtKtRioDuCYUDOv70FoV54TP7CDkM01Ez0h2Y4y+092bjpzM13Hwovb1+r\nsmUhBxS4yyuSNYOKTWySctWAd0zZCDUG8+LP7JaNXTOSLiwOg7Aq5Som6xP2\nDMh9F12xYJfuxO+AEwta0cq7cKisO8U8z04iKIO/8SQDLmm+bo8GdmJB7XZ/\ntfYuXLlnbLZ3kRhS0iYBhNkGfqyFeggY+XdvDV6M52yVlW5YYq44qbgISSpU\nvQthvSdDL3Pg02dvE1/EWzAJaA3WT/Tj8e6HzQm3zrPRovUyTusUkJJKh/9k\niLGhsgg9eNeXgSwammZjoftR2qOXCjpXkWR7P5PJsaz05r3gj/MUIIrmnhzs\nzXuwmNeYDWudTaMon1C8mXpJCxN3nA6UkpeA35DGUVSiK038vofz91n8oStH\nkUPTNPcjQGCtmvHWBHW4+Ne8/8hc7Lfr4wPB/MPm7xAnZhWiPDfVcJr4PmZd\nAUMz\r\n=V3qY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/density":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/tab-scroller":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d1be53a2e.0_1578435492491_0.21939396015250257","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/tab-bar","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92e2743314e15dbf8d8e80abd4ad14ca86e53a39","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.9b0d06e32.0.tgz","fileCount":33,"integrity":"sha512-/got9Z4oPkA+aHNcMvQ3JfGwFn6lCUtO/OyRlu8sqAI3Nl2zlqOdur71SGKKhMuaJKrVTKuGVEEVQcIIT0CQCQ==","signatures":[{"sig":"MEQCIB6juUXao/DwcL/5e68DKyiDRQsAJZhp4iN6nFCiRBC/AiB7D24vbKXBU5/M4uNCzwH66k4WTmQvn1Cxzc/PEpRfJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQfCRA9TVsSAnZWagAAXy0P/1J94XSq9ZdZT1FaCaNR\nMde6puhGTH+n55RsIKh0KOdKIZj98FVEdY4VEizLSoS9rrrKxlzM9z3QJN/I\nszFoGLLoBhFxYhW6JwrnzBKy7LQeg4Ps2L+iu28JC9t1l3Uda+lwZ6vywybu\nTtX4VgW93qPyWKR1CDxmCLSwo/S7YRkoAKO8l3l1skj+dwyMl/tt46a5ZWLz\nt+20uwYtZJUotpsFl2JPlXL2nuzMYtK/RPwz0BakjF308VGDNC2WKhBXvmMQ\nLNZoyy3Dtd3NJsQxeTDHHqC9bymMaIqtXx6E3c1oehv1GobqKUKVKXTfPHt9\n0H5vH/Ca8yHm8udFMy3kUuK6Bl4TddBz8pvG/IdQvDhonYmJRIkmnK7m+ipG\n+G0jULHBfjL+4Yc8LgmPt1U0V6JqKRAS1zWYeK+zl7WXmdA1eVjmP/xzJGh+\nlHVGkzZM7wVa8ZKbGLDj3/lsOXmJwDLA5HzekA7mlscNdKjFoxPwYJcN1GPs\nXn7zRkDPhavsyIqDCcbEsiWpDOjZrX03A8ulMysq9MVhHJRwqLiJCFM4P01Q\nhSd2rl7FA+akz7NOVicMHqfbRZ/87G3y+3MCIZOGsfAE/Z0bBcMr+/VFlIcl\nO9QdQ6o2BR72OxKID2w9xgeUTsMx+IqU7JcN4vhZHvFdUazC4qH9b27QUsNY\nrhm0\r\n=xGu2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/density":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/tab-scroller":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.9b0d06e32.0_1578435615139_0.6774995411839893","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/tab-bar","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1502ae446c40a05dc4b49ff7731e4707f5947e0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.730c807a0.0.tgz","fileCount":33,"integrity":"sha512-FZPUT0mRL+TpjwLXryNJaQNpjRhvbXkkqJ//CuXV4m65o//2fyaSfyrbpiRDNkDXM/6xnT1jvg5ULYSUGQ5zdA==","signatures":[{"sig":"MEYCIQCBBzjRff9iZf8CHpp3jpf62C3rUAe69DYGwJWwy91RRgIhAMHx06rO/u3uxAXiIsUHp5MDzMFxAKq+nAeQRbqDV6eX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQR7CRA9TVsSAnZWagAAwHYP/jJQ0g4Ip29qioC8UvVS\n8uf+XD1t1dFxUuzyIVzW0GWz1vQ3psySgZjWJLnYhK1qSLOWPeNSa+3EjTwV\nDvfNiHds+Lzlu97uvqpMHjeqNV+OvMC7ylAtAjoJaB00uL9QXYHb4YKtWRJV\niuC1KXs6U+9F1smozLGDCfmzYvZzOEXlO7aB2+8mQQjYi36RXniQXXFxqSvw\n34g9ObtL8spQ/gfpTM3DxArHfsZaFqOJ017pH4Id3mWVqZHbDXdRr7lDW9Zt\nAu/hbzKk7tJRJHykXzSYxoJ3jJza+VMjgxpwduWGYspcriWKxX8d0Wo6LCn3\nqpQZnXk/bllTpbo9zsjaPxSyOa7St3X43aQzlGh2txmYg8dugYc9ITsii4TN\nFyMW3o4K4Po0gMPYLdv3siOBapJM+r+6yC5+Hb8OsQxuRj/KM4dizNBqxWu8\nbU+eKo8+Op/ePM8QbAVGJ7loS+RUvBGd0AXQVL76PbOVxrD0TZ2fpyZdmsJy\nxkC7YcukM3NWkvTEzRnRoVJCTclFBppGujsexOVQGFQ7KPxqcWt+JPG/oRG7\nV/Yuux9DFtkDfWcfmnK7dQkusSHSJFBLTA4mBkodzX4RIhnVdfA9QDNvEOCl\nvYooADcsAU12quLXH5DENa6kbgJXwpM1yzA+KBknKs1hh3o/Q+UuQjtTXf1p\nZ4Zj\r\n=j0C4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/density":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/tab-scroller":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.730c807a0.0_1578435706622_0.9806918734220711","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/tab-bar","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df926a4430336160b43e8f5d8139bee9cb1d13d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.2213152cd.0.tgz","fileCount":33,"integrity":"sha512-04ipc2lDL1ccrMh73q5MLhZs75rC9unmrelEINDMBcpZ0SqZiAG3/RZDJJ216tgmQlq+mb6FiguRx93W5dh6RQ==","signatures":[{"sig":"MEYCIQCyDoItoNVvw0FliwZqzh6LFwttX5kWbbacqaX5+dYn9gIhAJvea6TTrq75K3jig+0H9Oqin1ZquZ+fFjk+LLa15+/C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg//CRA9TVsSAnZWagAAQoUP/jPq3sFL7/WudSfoQsBU\n+dE4yynpM1M+TEdiIUvbQqQRBd/YPEnLTnRaZ0ZU1LcHwugOCgWh9JHHXDO1\nbtYG0LaQooutMF9yjiZzqtW4J9EVMFTcL5hDn46g8d+PlfxBTOnFYs5EZ7sb\n3eqIVbVtS+ezAtMpcz6Dr5ugl2f2gB6jckDF9mIm1BhI8LOouxMUpBIZxXAe\nNFb6SPKhWV8Uz00w/lKUzR3bMa3ehzdL8LOuT3fZlROJ2lWkkhmSUgnWbavz\n9o0aFn2UvvEl7TgEMXISSdjWYE/UUJYBCLAg9Guc0cC2ycwXuFcnY9y+dDyN\n9rbWuoF7ZH7PJ7Fa976WIJ/uGf4a3+6JeGu1xf1qEIhgu58mSP5zF1SC8gOZ\nn9opLfhsXPMNBUOP3+koft9bCyMfK9ItoPTtrnPOI1CCtRIFObMxHEvK+/K6\nTA3wfhgWqCeKAGgY2sy0fyDiQ5Q+v3BQUchJJ2rFDOkgGnu78xKquA7nc3CM\nbN0Ii9Sp767fDvEXyavnL7YIF2thKYFKw4hKgGsPUa2tNogoVFL6YxQhC/Ht\nw2eErM2w6nHEvOkRH7EIFDZCHYecd4EusurmszZCQKE91ky7aPRis1e2uGkq\nCt4joIV80NdK+7XgRv9hW29GcJt1M1hQKwfcErACgunDRtQhK6FLBtj5FwER\n/wHB\r\n=qZCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/density":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/tab-scroller":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.2213152cd.0_1578504190570_0.8659101756734933","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd66c46fde9575400675b1bd32d828e8cadc3431","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5750f7169.0.tgz","fileCount":33,"integrity":"sha512-B0kaI2/61QanWVa1QIpaHBN7GUckIMBy3uyBLGztsizsLWdcP3GLz9PIH85PSiRqCdOX0hi+Vl+KqNwwYhYXBA==","signatures":[{"sig":"MEUCIHduzML2JCH5EDqCvuspD3wSP0uQB2uCx1VBfi/7gBNUAiEA0Vqh+8S9mxr+fgMwmlpepHtBdXGjBS4saZj1rRi63J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgtCRA9TVsSAnZWagAAdUIP/isyJbxNq7yLWy+BLZD+\nikG6Y0hLx4qA4Z7OZKMf0uAB62Q6mcBDzwDKLI8WixBN8ntElzdGTCtp/X8c\ntYXxvtwr4x0NG9mZPhrchf1+ru3rnqftDUGivbgZxXEKGWwo8iFxvWr4N4Z6\nuZbkgBN6TPA6uS7wl1NpHMv8ojevgyGq5f+Ey3cuSutwstySK5OTpz+au1qg\nUvzWbBaWZ2H2GyKCmVJDBJfxzj0dgMhN/hboEnUW6SJz0pm1J6ReRfJIJgAU\nfmXrgRAPKcpjxOoNCq3s4spuHa4Pk4kXwRIh2tYYb6bEXcK6y/69orEDFQzz\nVcj8lUzd2qYaB3yk/6Nr/WxTPJgQ6AujQJCZahqXb2HvpDFfMle5h+3FtG41\nzTCr/goOb4N5Hic653uMYSar2Ad+kBKWRfRSSkH3zLaaWjmgqLX1KhdQSCd0\nXTmWLnH4MCiBsJ01fjKX/6cH5TqdZuV+cl5EGCH3+YbLvtPBbjiE0UZ57mPT\n59ZeXaCe3n4FTnCwvD1tyntTffCjR17Zfgl75usmWzUcjjl/oNlw9toVmYfL\nKVItbspGMGAse239VnGSlt3bLyw3Pow3auRq8dHBOge0gKa4sjINgu5Yp0n4\nCKHqMav73q0N9h+oNXrqbhrb5VR4GUCVbjMbyi6190Po/9ZW9EtgQELixY2U\n9hJI\r\n=VhfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/density":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/tab-scroller":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5750f7169.0_1578506284614_0.2997159900222395","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c60546f8058ff1a708a46896abfbdd91605e46","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f7abc7a43.0.tgz","fileCount":33,"integrity":"sha512-1XGCkYOqL0YWO0XtkagleS8m17FCe9RULSVGhr7ruH/mON+x1Lbc1fqYT9os2aSuIj+cjnYMivj0cz9qnBImiw==","signatures":[{"sig":"MEYCIQDRhFyOHnTmmbc+NKOH7WWt23BmU26mdAnJcZgbJw/nGwIhALaKglIuoSGN5VwWTeungH/tUEl9WaJpPnLqaLehanKV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9rCRA9TVsSAnZWagAAXKwP/jc2yG4/EfnTb6rMPkE1\noDK/K7jremZmf0eEWY3dL38wgKxbKV2yR2xWzQbB9P23JB+bPnJonBF3hdXa\nE11IpBrKSmHxnXd6K2fds/wmXD8cHDzorHPCCJ4LI77Nd3xwoLGRJ3wtggsE\nNTfVumzw715fxCpAVMynTTw4nXbWwTalmHFdJeearvoYuOCf9U8OcaPLqYoP\nGEPM6ys5vwQZDnXlmOfXxK1GBwGcNUNwy0ai1t2FV6UcwgvcailWQ3pTTfP9\nPRnppQ+RCQpZ7+gTuexaQHxg3QSjQuDJRblOe+VQFVrY62tt3pn1QqwNZ0Di\n536H8kRdyUKRES3pKB4dj8y4Yhe7NClLNeGm8tUyW3PUYuu1/uV3TzevQ82A\nGtgxXD0Xl2VbPXvSGJ2/zIDbz/9vzWXmZXHjJw37xbS/k0Z+xoj+sVPMp5f2\nVWxPs4zimrBVNmh6mJdY96CKtY/3+aTX0lDixZsdmr2YxH4SOQpPqOn6uxjV\nR6DZJRd4/AA2A1vm8wUzVioNPRBWMD8lYpga7HcyQ09lZ462LbF+SHrs/9G5\nWfJa0UNb6wARLQZW4uuDQIgoYitju7wZAjEU3vARCb/tV/AVjqQfodLyJQzV\nMbyStRniJYK7oTIx7oM6LpTXUK8LXe+81vVoFY6RpeqahvyPT5Pgzy0lr0/B\nihK+\r\n=ujDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/density":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/tab-scroller":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f7abc7a43.0_1578508138752_0.36348789564167916","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/tab-bar","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01075a00214f500861fb25aa40caec1f711aff61","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.bf7b4a061.0.tgz","fileCount":33,"integrity":"sha512-D408Yly7f7SFNVIoBNfcIao1HUCSXlIgakNEkGq0VQFd+WHNDomEnTPhsb/4V/pZJVUN/qwy4eCuq8P6u/tu3g==","signatures":[{"sig":"MEUCIDeXo82aereHqZCS3sGsga0aLK9E//u4kkY2nJ8EFFIxAiEAtnOLQCn+xOE63v2AF4vRwOK4zui1t+iIFolHiiebhN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKYCRA9TVsSAnZWagAAUF4P/1USCnOSuRtCELIkhxsd\nZpdvAvn71YEJ6b0z6XA24bmE6A/wPFXcZUOdGdpLijDYzilYe8acYZVBFc1N\nTOWXEanH3OJrCwDP21mvMQj/WkNXOXOZzaEBg9zJAX5bC6OBFCo+czaopofI\nVGi0dKAw1minmoRy8xgXjMMfJikoDVpoghRTN5/tls2RhvywwSWnIWbmHp+f\n8R5wO6Ya0xCCSG9zwSZcrjeUhRknFAzUlB33JQWMtRegYHLTJC0ZAKjAD0yi\n3wk4ii0HYXgafi6W+NnX2Xc1Lg/qMdOBw3GeW8efNKa8wFYHmZqIBzDkrvTT\nzckkMg3uS2JqqfiEWKyqMihZcdhCPmdjBxmZHnioHvue3fDmhf8Dm96SgWha\nckPiqv8pvqTgzvUtpPb829dCFWC7p6sOv7ucnAgoTtbzZmAXQ3HTgaonxi47\nvQk4tWvSUvfK/d7divvaSgRBM/ibPlk2rXbu5uiLs4oQ0QL1lJy+X2ndLcWl\n5mWK6LFEfxbLR0ncqJ56nXqHW81iBk07tRTBoojPIxIMVwv2GEGMKg9qSvLh\nEeNgvvXOjxgmiwghjnzntJ3//QEhpqVgubgpCJiS91s78vfm0VglvVaFPD47\n5KvRi8N+ZBvQ2lQpYjWkCi9HSrDVTLmVKM5mPveExv8RbWlYgyWK81uAyj5s\nBTYE\r\n=iHnE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/density":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/tab-scroller":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.bf7b4a061.0_1578508952161_0.7604406451955192","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/tab-bar","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d89e51434aaad1812b42532929aea8f7fdd2f9a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.784fa7903.0.tgz","fileCount":33,"integrity":"sha512-cHG2Ni/yJqWtR0uCaqqRUU1j17Hh3fPf1aDbu9BqPk6n97SoNKdQI3DRoxHzS+bEicv6ajSbqa4xk4LyA8twzQ==","signatures":[{"sig":"MEQCIGPB0zwxxMOF+cskWhbqBK0b6VFYSfD6PtuP51OYOEB8AiAq34L0O8NQh8J2c63sbuuFYnWl0qKjYjIID7JM7/W6Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiljCRA9TVsSAnZWagAAbe4P/1j3C2qvCg4IHhZsaZcL\nCOF0c2Gtlh9mlpTW7sD6pJp6mj07mp1Q0wjaY8muBWsOCKzuF+bYtEtyof30\nEoxO7slHt43CJTdZhjxEsZuCxJQ8rAG7BTrnJd7kFmovyR3hJ1r3FEOi5i95\ncOP32e46MTnxlUShjCNoHkiPC7Toz1J38JP00tispiHSr9Ff4GhE5rP50AgI\nrTzDdieRlTL+dab2l/qgLOhNXHxC44K5g8n/AIsynKZbwqF0Eae78PGDm+SM\nwn8DDj5k8xMu0+UfuBuLvuVR8qifcA4CZKi5DKBE1W3g7os68Z1XL1Qq7JJr\nGnQ9tRpFwtQg8IWvIccBx5Vt4QvrPnLkcesCXLblzhsteVaPmqcM2E5tPYdg\nB07wGMJ055J9IA/wVDh1SVLwcHEkAD3LkrfxxIQ/jUwmfp2BDMNpoJM77eOx\nKR/EpVojHq98Gj1zRftFhd/h4OrhhIcB8TmrzFOeCD+TfUC9Q0ky7UAGz52e\nuxfXG+ZozMzEgkkcHRENJRafFNH+EeOjz4koNKHIuvieyZ3HH1AIBBWeOQKu\nSwbFT12uJxStZreDVKEB+jL2+SVzxWlRGTE5obMMb3NAfdrQo2DOLLUlqQxl\n6QEo3Qfp/MtBVB5hpPqVtm0H52brtwXr5PodPC31CrXXWMjZOIRXaMbFg9eb\ny8U7\r\n=Zqgh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/density":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/tab-scroller":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.784fa7903.0_1578510691244_0.1656130995195011","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/tab-bar","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05ad08cdf4f166f2d087de8922df77adf3b60d9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.823c050ba.0.tgz","fileCount":33,"integrity":"sha512-eQrAdL1E0eNZddfdPJqXgLO6Z10le9xzoVfSMn40cdzibQGuRbTd3b2/iEtqxBB1D72Aaf2NAxAPOBWM0f3VSw==","signatures":[{"sig":"MEYCIQDc7o04cQDbkH3MfkVaT05wrE4rgd6MjeR+3h+AeO9zBAIhANwXXoTHU5CQnH53O2rmuyfENL097MyX/FVH7/7OXN9O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjeHCRA9TVsSAnZWagAAnPEP/33lDkUDOMYUvAw95uP7\n4BALrJZ9LBujo7t7+6N6xR00ftWvdfGBtjGwM16lX7gNpYfKwJ+HVXRN5Spq\nHIvohDdwQ1P8SVEt9xWuuSPiUxRfwANMfRp6h67lCTeY4TpLysqQq40S4W2c\nwBw9Qj8g8lnXIeSbKx2cc4S/qOqEndcBDlTFR6eChXXqQ2fdXBJebkGdRGl7\n/TAyWsC6m/WA3vOZzdf8oa5RvGQm2YhZbFWCWzl19IEczpHzgMjZLYJo6aj0\nLyEFwuTEziBWdD2QNaiqjufIHmAstO6KIb3mQsIYaLdVuKEgmPCY//d6hrDQ\nwZotwORbYVUncUet0iQqnRFC1lhotTK2ufdHCcSuwRAUBrylPdoj8do90eBe\nsyZkJOeYPRlRmC7BptS/Jdi6yvw96pHrXqHYeePNiDgnPf1mAex++n6d55Ar\nKTeBBuSWV4OUXlIVj3Rnk0xxBMDsrkaKOfgg4M0J2jzLwNpUfo+Lil2yaRkb\niwgxd7k2yBfYNsAxVHnrNqcKE7SQ2lpbZLszeogNRIJ1/LgxcQ66PxP+oROc\nyeZSPH35+dxgIzU89nqV+bPtqqhlHo2iaxHwx8GX+o3mZw9q0dpVW5InJeN0\nMvX6moouzGxU4Yb6Hfgmfvz1fuFIU5oe7/TrHpzT++H4jQoZnDY65T1gjvMv\ne9QI\r\n=RY8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/density":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/tab-scroller":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.823c050ba.0_1578514310733_0.1519338447111407","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/tab-bar","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9176dd21548d8f06b7c4d966e2a519d87b73f4c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.70c708dee.0.tgz","fileCount":33,"integrity":"sha512-fvrjU4bLQCD4Y3vkirKWL9VMSBG96/K7J8XQcOfLDAy7ejfddz8rjgm80iq5ekX171HV7FBdNDKsH39Nkzq/UQ==","signatures":[{"sig":"MEUCIDpm/bYzQs9H7uybWP5W8qsTiOLmbKcboCcLtL8NX272AiEAvGUMoD14MbXFBK+zUAYoRwpszYBT/ZrVSeX4HUjGuHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjozCRA9TVsSAnZWagAAH44P/iEDnHGlBrfUqq76b9t3\nAAt0xM2fIRyTtBQ3cDY0tlqjgZYAFqk5kcnTpn4mu+K2wrjnyH/08hYuDWYf\noIdiUq6XGnpBwK/mko6xEMfe0edqaR5WEMPxqNs5jJhMTh9fDfbo4sT5SZx9\nfcss59BuUp6wwVxyZHR7QYGZTtPO3ACXO5eI5LHuDHek1k5csvbrcEzfJJfw\neX8jKpUko8sthb0V7MYNBAPkgt9RYki64sq0sQ78/3AuzU24poU/rJ6nIosc\n+ciFhFOf81ieGAHE5AfWzF8G5YIXdCwebvI77bE1OTE5wS620C/AHxVYeQgb\nlLNHWqpuX/iNc/2Iz3INNe+OIh0BHKE/ULR972feCnBzBfz2Hz4ZuJcjnF1U\ntc8xudA1sS1LzmtUlz9K2F1aYNB7QwiF/2YgB6mW4Rg/ISk1dCArYQ0+lUgS\ny46bpUJBthjrFUrOLyuNma7vy4XNAx/FslTwMu9vTfAPJwMYVqQbEINGm/cD\nqgVcbaQzCy8NzUyOiZV/Pk/+EuxFMIrlG8nWYsBHN6VFwEtgg9KLMLuiPp0l\naRyMiKrXydfTycseL7Aor5afaTV287QsIIkdRsUMkNFMh58c2imSX1euCNh4\nrMWfXWKX7JMPfJTJG6n8b9QmltI/8o7cbr/ty8s5nr8wDwHy+1hDbM4NwWaN\n081b\r\n=4G0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/density":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/tab-scroller":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.70c708dee.0_1578514994838_0.012472385233568417","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5bd35b0a9bf7a8c4b1e0e4663aa70816474ced","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":33,"integrity":"sha512-CS9MDitI6ffyyJN1TMsIjf2Gs5VJzb1Hi3i7nAYLLIAyZQ8xRRyQDCgjZGWA/KBWb/l1/rkWlObcUdEdkP0zbw==","signatures":[{"sig":"MEUCIQDWIxb/SaU6WNykYaNbcbxwtd4wbn2WcRONRQN9vF/G5QIgU2OE4LN+YHwD+2kNOEQXKPxx3qTJVp8TPh/KwO1r8P8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFk0FCRA9TVsSAnZWagAAhWYQAIGmNbBQkPf43/VHAxQa\nPuy/BsMKiR21pEQd/atxGPj2HDrwwhxSbJPmgzB5aFDajZYhRYf13jdLALB2\nvZhcqIdtcmN58U0gadhfCJui5S/yW1XXl0W52xtHlp/Ue+vLcA326SscU4eD\nTgZpotxxdrpLMS56r6Qvhy5j35z3ALz+LWb+v86k7QNsvU51Ei04X2xV6Bcm\nS6SzQ6qboX0sB9D1QZJz0Mb/E3d2u77tv8ijEKKiiTJGiEUUzrfEaiWsoyFH\n2fbt1DTb4MubCKIe+GQ1Zug9SvPzCo/H7ENkMn3+2By/TUvWCZHlphKrSKg1\nIpCzra+WAi1fKCwAgAEbsi07XcqommIM7EO0iGKLSJA9Nwgql0R1Fs1GxdXk\ndqXSy15UE3FVZDJWFffCCAV42c3hrwnBuZVpQx2o55spOcm63IJFVpxDgh6a\nmMhSNW3PcLcmUOmxs85dAeSqrjdgwddAC8wQ9LumErdQH0PbseXb5JLIbLgM\nm7EwxmBIxyjQqaDYGNLIEgjQCjoRKpW6AjTdu+561Sse89usJ61QajYQR9VO\nUXLkw8qmyOKpWmMNbmgCJZzdAtuCidZUbyaWKUPLnSeC7lBDwXYm1RuxaGMz\nRsQxsKVMYRPuWEbLeSzAZ21fz0uoZNacXFw1CMZ3sPWkD5jg518I6yzgI8a3\n9+sZ\r\n=qBv2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/density":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/tab-scroller":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5ed9d13d0.0_1578519813217_0.0911283159199121","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/tab-bar","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e2a2a155db15fab284759a0ec37d255a6adbed3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.4819cc7e5.0.tgz","fileCount":33,"integrity":"sha512-NM03C8ZhigweuKi1Hs93fqa1f56jKo0qq6QvPY6tGCDRwooDd8BgQrFexwj9HKEsa0WYIpBZnwUP/f3ZbkZKow==","signatures":[{"sig":"MEYCIQCU8bV4cyL50cC5iQueIb8pOYUaAvh3VgKmg1dq44Rn5gIhALepIINpxMbRlEa6Rgf7kekiwvjmuP6XAucUR8yqxZM0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlC3CRA9TVsSAnZWagAA2/wP/jv9yzXvsByoXpdZOoyp\nPdyN81lnRvM58EekHQaeeKQIEzo7HyLjT78fyXlayYqYAqfGA4tkRXgR0a6g\nHoPI0OuC6EiSaBlV7dwOB0T30BJ0TiBenTf5ryavNhNkMz5AvBVNeSdsJQkw\nDmdZFUqSRhTn4eh0kZRqO9ycOYOfc27jOlxc5Tz9myyiuNDRibYs6RfFfeMY\n+Z2LxD6fyhKnXS67xNDUsJOkrkiV52bp43zAS/KRab4baadl+r2uHDtp5JBF\ndt99EmO5fZuzteWd5IOQYjs7Tt1up+33zA2g1iDn2yxpo6k1Q0xDyrBHk09w\nc5N2161c3w8MnQh4BhDyTq+oodSvgO6K8uvGHaQn2JvoQBVu4fs4zWflmk+5\nfGrZuSQtwPi85/D4aVrOlEEGLjKaB1PVn1ajIfNmpFJlU5RH2GMxChU2X44x\nPNEzhbERKsS4se2tiCMPtSLoDkYe8xCRPgGTNT7rNYg93Dw2quzIfvxqhNHV\nsfHsQjjmmB/0Y/HQJVgwcnbKR9Li3AMPICAkYWaS023LCV19SKBcL4n9x20D\npYBq6a/3vNdEKZ/ZxR81FqX8meOT9RdLdb6a3MF3RrRAOa7iAVFGlFN7gqUS\nm+U53zQV/gspN5Ve73Z1VSwRym7MEL+NlKlapeDn2uQJL8XOSAZDmlvSvW7Q\nWNrQ\r\n=yHLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/density":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/tab-scroller":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.4819cc7e5.0_1578520759301_0.10306104373445768","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a5e79d2368ce144332a6140e1726a08b03678a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":33,"integrity":"sha512-hiFPCqVZFr5o560l/jWVd2jDY4etIysMsEXUM14pWSykW6vAV89xzoi1HTq4GHh4+T0xTaKRXIr7Z2KtIT9obA==","signatures":[{"sig":"MEUCIFeNgXtB5eBvNTQQLYNWh/0wXmVhZp9sahFqnIzvISlgAiEAtTqDB2X0w2/+pDc3IzGNl3VqSxYf7sW77FK01/wAfMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlT2CRA9TVsSAnZWagAA4UkP/3rZo8G547vKeoj31fBi\n8OphiSXikwlBky90nQ27CmLTobbXCytF38d/2Nspsj0DJSAfxnK2RKgq7PLs\nf1ogmIFN6mSL9PjT1zgBZ0rjy1I9ido7ToK6vM/h3WtcG/jMsHtEqFfghsg+\nykcogG92hAQWMp2wfxmm8N3bCwrk25jImS3aM20r71/sBk3qcsPL1MSAZPSe\nFGvxcbS88RwAVppyJfk48bX5jiQkk1yzRzkaKcBbLyIO7j6sOtbR7sX0Ij2p\nzKAEpoHEF9DOXWHKYeqWomWoRRo7Hz5NNKq3/xZxAS8cs+U/U9ncq8I9u0k9\nm/e4QWB3IwPjSOKTyAratUXv05K+7CADs6Y7bz0GdblgMIeUg7tne0cMbuUx\nFCeUw3+XPZJML2Wb2Fw05THMqhCKdqAkiVPPvkbH4STqmw4ph1Vgyitwwd6v\nCOa4khkDcMqNF915qqF+OLEvT/WUdNgKjUmhF0Aq2YurGxgHTmhCfwj1tI6Z\nnmKGfikYBZINzmk75w/2hMGAqI/xbDXNQ6cxOhea8Dd/DrRtX6P3EIYkc+6U\nJylCfRoSoVZJFHiKXL+5llsoNrzVN2jSSkB3oHzGQ16P5SDvMq+LVaX0zgln\n31adD4TONJk3Dh6srzOZ+NygiVOqFplOYJWpYOp3QtaBK0r11voTYJm+vvvP\n/3L1\r\n=2XaD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/density":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/tab-scroller":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.fe3ffd2c3.0_1578521846169_0.3903782552844912","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"323aff82078de0264c47b1bad285e51c91bc54fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c0e850090.0.tgz","fileCount":33,"integrity":"sha512-paE5PZJ/JZG2LWgRb0qrPpuKoCGO8MHB3ncQg3LU7451qrhaSQyHDmoggUbV0Rd7khQQAstrNKXS63F7JRnFEg==","signatures":[{"sig":"MEQCIHOvUT+s8r5nDXBWFiOf2LN/nUZQdZOfG1na8vsvjBIZAiAqzScNWclS09eE+Yg+tXqY6Q5BVGiFWo8kfAxca2lJ3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlaDCRA9TVsSAnZWagAANikQAKKae2T7Z/kWG1m7gBdG\nTwTGhAE+UmpGjGWpkqmvdqNWGoGgyF81Zx6WregOTfYZoyTfolNjjwgobnm2\nv5FVq/7qJpOuEWG12F6bB3KUNiOoyydNSi4cUZe/+dLCJ6N2IeM1ioZxypIi\ntdpdKmcT3LgX1zKUYK9z/16YH/AOrizZz/H0IHO5dQqQ0a1u+HR7BhjdYaQV\nwmxhGDdJeBUYUmkMCSXFzrpFlNTTwyD2b1+pgTOmQaLd3SpVsdYEwTE6T7sE\nzS4HWLb0P0gB1pVLN5BN/cB7ngwxzHjwQKt/xuAdq5KaPsJ1LZ5CH4umBCW0\niwT+1HZoqARWFBFy+d2+pSoKom35oEPL6GJOfafoIfanD/k7UEjydsSHkRPx\ne3gQ7kkE4JC10sujpR/8nGGhovIIR+sQNQI039k064bifTu43OT1yOwWCz9L\nWI93XK9vtUTi+Vqr+Ym0gjRZH69lqlZ9SyObvN5+Do1BI9qaUBewm0amFGa7\nyWz/IeKUl9Byx7qn/FWd/dPPbphprDGz7q9qq6l5AtG8aKHmppQynyXmvBzY\nZFiem43SqnSAuTKLMRR+6mPgl/L/0qQnP5JpyuniRi3DXzWhCv2vE6LobZET\nIbxfNqSTPfWyOzdUlwPTzgkyS43wyHnXMjg9t+80GL3sfd45Xc+qyNPEy6bx\nPUww\r\n=a7tf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/density":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/tab-scroller":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c0e850090.0_1578522243076_0.08855007071526177","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/tab-bar","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e08cc2b2d6ebc71d15300247413b39357db86a92","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.615f86f38.0.tgz","fileCount":33,"integrity":"sha512-RVZIXrQg8LYAtBfHCjQUwGDakEvwdgPEoCvpkai++jBx6TR0KcrtiXZL51oh9nZXIMgDpF8PcBkt6ISgfbgdcw==","signatures":[{"sig":"MEQCICHQPf8VTlxxGuJm1iP5jFDiLiQw+I1pIW0O8cPbjpIrAiAOVEMDHZyqUkWomtCfUncdJhpMPUAcwxUfyotkYPFRLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlqKCRA9TVsSAnZWagAAuZ0P/3bRtR15Oy3XhaP8SPWf\npurYZFwRMgu4hdyYeTz0ttYFgEv+ug49Sgb5D3jrFsNEZ2+TO+/bliz2WxYE\nUTwa5lznMaUGJGJw6VAsWl5b03klUD1LT028aIc1KZszvxEzqEvIn+RFnA94\n/vgXHGNw+sIbtysc2sXtJomEg6KY+AE0sJ9a/GJHm+6dMg6s1FgxkL5TN9M3\n8JkBSTkxaO5G3X+7p68M/YburQ5vhlMMV4X/H2qk66Ph+z7p3PCAESaoiVcO\n6tRc7f/VLL14dHZarrFgO0TmPHnyS5xlOgA91YE0DBjTMS5yyFN/0iepETTw\nA49zpPUKfPfGXqjsZ7JL63r89icq2nxh63Dz9t15RNW1PWc35V/RtBrHQnlP\nq6+gUSs9rtJcLPkPP9L/VsJCmDvp3FTdlODAXcGkNk1FOyjM0SwBCpytCYxf\nh+Lu6sQsCBFcsvqTzOAHcoKamt36cddMHxZ5CkRa6mwALavrV+W1jMECWoRn\nDbFJnMGPGMUXCzTMsUCPICj7aN0ur+pSgFjVANqJ2hyif5Sk1xZJ9NZ0Z0TT\n2Eg4CHV2nQ6RuxwT2nP8ABAFPA07ZL+jIKTYkvExcjS1TYuz0HncTQkW2dcb\nVzMTkqCo0jYz4vJVFldqEd5Vjj5ZfDiJabkkZmNcqLIoTvjN7zsfG6aw1jdd\nTaV7\r\n=frDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/density":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/tab-scroller":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.615f86f38.0_1578523274330_0.47561853802945","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b15d00eda8ba5b1e4648cc1797dcbed075ad834","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1eb032637.0.tgz","fileCount":33,"integrity":"sha512-i3K/mx3j7KT6TOFpsaQ/vZwipZLbtzNWwAdeqb1N6h0sXMfJWQC1CpqAOAu1iQLaPCdoG2Av7ZJE+JFYtJ0Mqg==","signatures":[{"sig":"MEYCIQDQztQE9RmBDdnJ4Gv/gdILqaraDsFu8nOV17I6zqYxFwIhAIbg1iSLdwB+hhcnMAJzRX5uVOdhiZ7q/5U3Ulb4f/C5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl80CRA9TVsSAnZWagAA9WoP/2LGJRRBjUQT4vgdUKNn\nKhV6RqgC8ugMYOvgPByKV81xT0bwuZAlBEZB2DweUcbV8NaaGuLlrEkYXfxh\nvWyhUMIVDDrpRuxG2kSagMAXtdVyJTYdEbYT2Zg/K7nrpf5gOdWHhlSbylPM\nORn4kTpmJHstK3+X94OgXfkBuuVRSPOiTW9Ku9lz6Urdf0wQ5zqse5aEj+bm\nXZK4n5FXQwgO4G8d6a4BXq0mLGHbDW5PbvGFgHvLJpf8q4hWuK5E3EUrU1eY\n+jgl/8sOFMlnaqvL5L4to33G8PQUn6GMQ5+gNDnbuunpcfmWMNIeZQ2F9oaA\nvFT3XwC9Zl5ZbY7I6iadk2/bzk+sEJMXlpzwrHpS41v1VEbqwCEznLhiO9eb\naKzutnv9L12FYm5Hcstrmgk6C6EMjR6UyOEQd4o/9Kw0kHN3jUvXcK/AC0AR\npAusoDTXTkKKKkf16DKB9mTUTvW3cy9OBsSQWnNCOpY6/pr5KGIplW1fW+3Z\nN/5bh/NZSC2wyJAK330IoPIpcjW/hPfmycLzahk+6OYlIh8wKYOtF+myHhCG\nOTLC7vDdU201N8jKLwYwJAZAd4gkyZmfsSe8w8hl0uyhXVSwSXcz8O4o7zsx\nX+m7FzyhuG1WdtVmFav1Ol6qZhRVm0K4m8j+eJ0zcU2knH/5fZz5esnch79N\nwb1J\r\n=L3EU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/density":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/tab-scroller":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1eb032637.0_1578524467922_0.9605028937948352","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6634647547a3856fe0ca324f3ce19a7ec673407","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":33,"integrity":"sha512-Et2lwLX6eVSVZmZUsPoilq5zzEIT9S7OG6+03VulBiMFrjHpNjtNDc8wroxMmKL6+mbzkp8irBkyOjwHSZn14Q==","signatures":[{"sig":"MEUCIQCb9GSYkOO6xPdExuT8CJVgcYXbhTnO5CMgKlLQYzmuWwIgA9EhW7rHnu1hXURT4batPu4z/hD4DGx9vxKXHCDK7QU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9jCRA9TVsSAnZWagAAIDwP/0ZKDpWxchDMEJGCNx/D\nXI/q0avhovWhfGOGsS++Aqa6eCnYzHDtigIXo4RDd1ZYoAaxWDvWRM4JbOtl\nNO01YWfM/d3Tid+8YrT7uNjSIJzN5X50slSrRW+ing+5Uu6nQ8XePef93BNY\nU9vFg0sJPMcHuKmYwHXHuQlHEKNCYdR97fqpA8ksrTBInYKazocUoDABOT0N\nyGf+lUa5RWFrjBEo+kZuc/ppwtHCX5HWeahIvnf5k6iAYvgiC+qf9WstVf+A\ndYWfyrzIQxLETuUJwGzeIdJg4ujS0f0bOkhTKAPeJAERtPtHzI90kpalF5i/\nqgqSyvWLRTuOB+Py9a58ExDgJxW8Tjy54JVXSLqAC6D64zyl5hThJUnCM1uV\nwEFq8LQdXWEYBEjPjHD3bnvF59vUHNCrCmKmmvmsgtqTpY5PxqY4XQkpEzE8\n5OW5He0MMJUvVDPBtqQwlEMvXXN4ZJjl8zcoXCcMbRIHVkaI55gzP/Fk2XXJ\niAv2OzpJQvEekwukJ2iyxma+d//r98bYEAUn991KhmQs16+Jn9hKoLXNJgZ9\ndzikoWA9epoQR2vEVHq9wxA1bi3dyqpvV0ZdGJmQqYQHbc2y9/MX2yjsMA/0\nsNOmXUEeWVyldp7tR5KerfgEV3K4wZHmxSXESPzRCq6ZvDa5dTVY1fuiju3X\nBok/\r\n=isfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/density":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/tab-scroller":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5bc5ebfea.0_1578524515487_0.9955271291962084","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be3bc12e40803b4585ebaa9f5cb6b84a627b9fe4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1112b8def.0.tgz","fileCount":33,"integrity":"sha512-SpTaaN2U+LCat0lqiD1ufVPDXvApdWDj72YBVhysONamWMAp5KiK73u5ovfwf1XwdutZpWWDse4qoaLrvBwmgw==","signatures":[{"sig":"MEUCIQCiWmIdE44cHmnYfGuQJ6S47LxU5vn+SlhR7WCs+R5rbAIgHhCWrPJmZIcPxgOmYe3GN8xpWEIRfI5D0mNwCKSvQNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6UBCRA9TVsSAnZWagAAFjgQAKS9jcM8WGe6+L8v6Rf7\n9grrDRUG31sqpk9Y2AlnOmrShrSw3a1hr8eBBVFoT0Z6CSqpIHLTWCDi6dgN\nN7Nmv+SayFsD3rQ1jQopvmewFp35Zua0SyThU9FLxOoukvhgdj7PLIyHo4g0\nANJvQinHYDMhXO44ydfdze+FgFPT3P3Gv+27ihomZozpOHisere6/DTJkwCE\nPBfBZRR4UAgdWbO8oiv3LGhOTAOVBJvwtnqQaEJ+vmca1vmNLGtdqGSUlNJp\nfcuO/XI5Buv/dp5mW4x2uzzWEAzc+1zauhNZyCtdSl70hQ0qIrW5RJ3Kv5sH\n8UBK+o1Z7mdTkRm7rLdMtu+gXmWy4EpE9vW21/pcGcB4Z4IdXFfoh2li5xyI\nBotdjo8x6QWveKQhTo8ehcKKZRxCRfP9muB7ViyyK1/rw8QI6oLaxNxgi1SD\nGdPkfc2kvSngENDLF8iBQ01ynxk16wu4bRaChOQFf+Orz0BEI6KCmrTfWP70\nIaKY7H4WjgP8N8Zgu3SyihFM8hPTd7LpOjSH01s0+DZTnabIWZz3LoUXf+lo\nNN9xvRibVLXNVd483GW5dXKC0vfcpTULMdEHOo3907AdteFmvA6Hxpg1cJWc\nkaKo3BozPFZsAs+c3vgOvkEIaMDQyVrANzQTXx7kYWeW++E6xYKSZcQusTXV\nYJYa\r\n=0zFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/density":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/tab-scroller":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1112b8def.0_1578607873508_0.2824811549959725","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/tab-bar","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e7702567a26b428a4e3008a8bd73895bbd5c83a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.aab102017.0.tgz","fileCount":33,"integrity":"sha512-DWywvawVJQKJ8WeXKNcsgo6gAXk3/OnmBjkE7P8JGcbJID8QtoTrLHz6Ig8d71iOixvoGqup63ZhX4izZHc0ZA==","signatures":[{"sig":"MEUCIGDrzK46ARaw1dwHrv2jFPjWX1aAjCNXTsL4jK+ahhoaAiEArZqB9dC1Cth1vuDoDkYCimUB2uG+w1d/CwhN8wf2DB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GdCRA9TVsSAnZWagAAKlgP/Atip6Am2B/2io30dM3u\nM3T15cS0WKO/n1Q6AbaNDdyZwYsU3ZI3wuaiDFdRZwNyo9Uott11X53z8AGE\nz9+0vHvN/nSNnM1/MW3yxBLDGesVg3PLgUIFpfhCKerCIRdkVO2JRzgPGEK+\n93oeNFCtBEpfo4vxN9zjSodMSoor9aoI2jzcVHwwdsCIn3DyKg32qsZjreyU\nQBv4QvkuXBsxX/aNRjnaH0RNplh2fwYzp24YQAcmT6hR4S0Le13PSXiIxDQi\n/iQsLbd1sypLUzg2Wd8vR3zIZM+4W4aEo59LcSsKsjY3gQohnIlLRdC0UUkA\noJIfRfYXVwK0bM+7kwProeKv9O+d7HQoV9lqtknWGWE/4b7NX1Vga1Br3WM7\nv65ruDjkqxanNaH5kepTJ+BBGo5Zbw355mLb1HzkjtvrhwPA5ixjAS80XvNJ\nNW8bsCkFcNjQeaFLXCpzO0ILDHE2keV5M7fc+A72YRyAyyHb/SC3q+uPWVoz\n+2WgllgYDBu/ct1ogE4xDAgPoC1m1EAaHQMsxfeQLnq+xbeupLXlddQT0yye\nI0MK2mCuBOa3ftUcRGZ2RVWtMeWqGcvQ8u1YIxaUd3zSqDH/1P10ULsclwpQ\n42WKcyyn6+H02+HxDie8RLNEhUGE1xj0k+52qnRMb9BWTnfxHyoTBelx8oxw\njCzO\r\n=5ZEK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/density":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/tab-scroller":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.aab102017.0_1578615196851_0.7151822372623771","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/tab-bar","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb00dd11f06ad3069e16f8fed98f20a147af977d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.426913342.0.tgz","fileCount":33,"integrity":"sha512-62zErAMoro+DyD8617jBD5QnlRbaBYkUd4wC9T3khEic3Vx1aGpZ9M3YVeEEja4Dqdz8XXwBcuXWiulZkJvKqw==","signatures":[{"sig":"MEYCIQCQvyGWzJFzzr64juLGU7HbkcSKDjntmTb8R9IEbDMy/gIhANhXkAUBhSnoVLAW1A/9Q5pHePaheuF+GNmvFT3rmGYw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9crCRA9TVsSAnZWagAAOZgP/Az9F8dNcpXwUdR6dcdr\npwyq88PF8gj4O7oBBZKcOx/Rd4zOCtayXesR4dWcy9UN2uvGC5uTMXphHaMh\nlhIAwpGbFUsqkDOLs/D7UnwkwnDgoFrBBfshuFU5pUGKANAnWMxsXdJw4+Ez\nb4NuauZSJiTZP6xlSjvlrF9topCby0dy8CEzQ0hXrI8GXnbxdPaZe5SgpI2h\njwvioWbk+x1BpykP8sJHTzp46Xoh1Ldmrp8xOhF7tWFKm1R2my/pS0vR7Qyg\nuYnZRy5JTXH6tNbFArW4EfUubNW319URwVacr/6S9RjnaSq9ttqJWrgFShlf\nS63fEjBiu5xNtFzWxwVbeugQDdkoeWbGFshb4ri6AYwIT1kYEtR54Ifqkai+\nroEEDtjqUBplmBpurL2hYBu5AuzSfF6WZRcuFlLM9F8NOduLAwsDdxrj2YU/\nDz34u0wK7kO3cjbQ3jOFXfMxdLr+EFnvkreCGM8iDulRZncQzU2ETMuuHn3n\nvHKkRIdEjXCFtrh+OFk8I+4+ypipzkCfzHDFV3SYapeItxAaRU26qfBRB9yS\nEf8mc4l72OBY19IbRecF5H2ARv2bYRl3EnP0VC3MlR1rXTkXvGi00f54+d0z\nL8/aTH+qZ+UPy+KRl+nm3uepqXGaraiuIk4ZRQhe5ARXr4/ePWf67eNjisHD\nSEk+\r\n=iItS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/density":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/tab-scroller":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.426913342.0_1578620714614_0.5706346362182702","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875fbf610991e9cc3d0822fe54470e8575f3510e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d4ea9a706.0.tgz","fileCount":33,"integrity":"sha512-HHpKXsm/19ZfSuxNTMJM5SuPO3xJctq69wlM1wZ0ibf2XLQdCOykrX5bWNu6auGcwkUa3pKgZ/aWkssF7j3t5A==","signatures":[{"sig":"MEUCIQDo2C6SXJFg7admuX+uAYiruO6rn3YRHf+lcCXBfFuqhQIgRW/PHmx/5E3UQbw512K33WPmC6w9eouRacPBGk/6dwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLPDCRA9TVsSAnZWagAAFCwP/3rsA5oxiYR36BEQh+2u\nXwZov4dGQ9uIVsa945NjG4cMkuQwV9kgOZfDKeuhYjK022YLl1MCGQCw8vEo\nas/ss1fx+Vjm6lQD2XpfN72dz4SzfZuZUsV7QxmWftqRvuirjxpynXiB4bUj\nSko0xQdKHoVUJS+VkIOYi7Ywe+oOjUyQmQclo4vHN0NpFIwq6txGdEMZxOVn\nU+3X69evJUZoTl/ObM9oCB/aSiJ/hUuKSVF5FLLGjnZdJqx8+TlTtXCGTRqd\nhn1drsgv/fzxyaD5Nyydlpx0a61E7ZPfyMfCb+udZ1G/BVqP6sTbahdmcw0w\nTgBo3B2ijlOEaon/HjR0MHXOr4I1Y6c8qy0l6wMrL2xVdWQFB53Rsmw5eB4w\nLwEEtT/V4mte1nUr9NKdjuS7xWbxFXS7haVVyNV7Y0AONg+tS9tidvbx6EcM\nF7QkYy6BgUA3bH0P+7WwPgzA/9Bh5sixUX8b42XOE/1PEQB/1L5IXvNxatbX\n3Ho7UA/Bfzz2V5ziPeG9sJ26LnOq6dyEt8kApb3TjCVEFZG0chSP0HtPpLww\neV1r6tAMNny6QkzUs6cclxdPf6b1d3IGzlilw8B2QiHXWRtKCCUfedhHBWIV\n1Wa+4VVb2AlsFwL19DaMv8YEbvs5a7DS87jtNEnGc2o5pqDnV6sY0eJCPJ8R\nDCF/\r\n=qWLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/density":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/tab-scroller":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d4ea9a706.0_1578677186962_0.0884716189784398","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2253b20578f58b7d2da948351731a366aafb48db","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7d4ee2996.0.tgz","fileCount":33,"integrity":"sha512-rJqFA8ciCkjyL2Fkb7hNUJg3dnZWmMSowpYDfqvvAWKgNR/gddYV6PEzUhFZh1OpEmay+6UsGWtoK9lMz0hlzg==","signatures":[{"sig":"MEUCIQCYIfWOnENP3aMCcWoid5oD5mtqj92EqrWN3VWD+kPc8QIgEuO92xcuiZO6rfgshRq0iP/tCee+wGMTLPhKlNi/qh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsbCRA9TVsSAnZWagAASXIQAJrbiDpVXlUHnNPMPRaC\n/TUdoGmlnNZZ01X4uNsnuxt7wfhGv+/cgJWUo6QIwnnkC9mWS9JbXoCEoMk6\njG7zq+DUacEOqO0ko+2yU2kW/9L8UeFLzFbKZbRwRsnTPxPVDg4K3sUt+CmM\ngWKibuke4RYy4e/X2PCUL+PRTvXtybTRrNqv8Xl8YUJRjFJk+IXKJK/wIFj/\nxZXNHzUd5JtVpd1LaM/Lft6o53Zu0jol/8Mn3KyrOKsO0aXeO2D5tKnWntXM\nl+vFMqLnFfCT4XUR38UbyPwtfyjME9XL41Pr4jqqbEupV/YGCqsMSZ6Dl91R\nur6s58hlz3Y+LsZS47DQkSojdzAD10cQ5fMqMjfq7+Y6+9svpb/VDSqZkUk3\n7l4j1kBp7GpZYpupd96erXBcBF3eNeAGgU2TAq3lpD9UcUf25sNfyIe4sbIr\niRoPQuUUBK/rz8IyfiRrrti4/MmVapwtHZmktsDmEb4WSY3tNw4qJK1aY1U3\nht02aHrxFfLUC2PPLsz9ClNnt1bE5max/raXNGE4chOK5aUb/pzuCqwp0j39\ny/Eo0YrLiHlfMN+d1ZHD8xDEEaHsA564eyMKmsJFnaWMFiV9cEs1/p8mVyHH\nACGyV7qSbW36kWVHs7NCpuXWG23hxkyUppNiqNimonI5a49z2ne2V690xuZf\nSHs1\r\n=kFQT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/density":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/tab-scroller":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7d4ee2996.0_1578679067527_0.8304250397324999","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d4de0a83e08c4e204c968cfde18099edb09e23","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.981ec9b6f.0.tgz","fileCount":33,"integrity":"sha512-bgasmAWqlWyki25kziY0t60j4/1Ium0cC25QyLTXWH17+Fk5e+n25Dd1bBic+U0PYasKPl1aGjxdfKDCY5yqiw==","signatures":[{"sig":"MEYCIQC7IoImApWWRSUnzAWYRsTZXP5S1mREMUBOf6DOfYlzngIhAKuYON6cSnmko30hWjBwovtbA+527mxWw7ULPvnCj75P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNBVCRA9TVsSAnZWagAAty4QAJlqyAUsR/D+uJVHvU9L\nBpihpyAipjnctFU8qJTBym8NvxXWrwfmhUzv/wq9/pxVKWCg584aKV/4xtSN\nl5NVUP9wCp7uQBtriEgVO71qcHGJoOTPAvjYD8zMI8OgwTQxJD1HAkStD1aD\nipoD3LMipR+H6bDeqN0cJ1TQ6sCbTqaw6ajAatW9WyEeUnEnCsxyqg7T1bCX\nbPjQriYhPYyG8lV52CbOt1dSP2rB2AY+ZLrs/TpOLwRa2wHXcX4N4FJMjNij\n6nCMV3QvU2ImYr1aj/ZlTocGOmdnlAShV1Z0XBXIO/0dOKCPU/Qoq8Qf5J2u\n/H7QWHxV+pVToSZ05zQMbcfdY0nnT5l/SCE7Rrsk4oG+KE/Za/oqM9oHLu92\n+YavR7h+dsgIAJVdhhLeMXcftBxABnIQqlLBMGriJpeTheLITZafSOevMSWq\noS5sFZmCi8ng77r/S/CXc5QqfrgZiX6FZpq/YzwNzp3zU12ia7iEGxDyVbva\n/P4gbvBYFa86eLDpCobMdeA1gOvsFCnB33AshokrF5kKR43Mikig/l0r8SBj\nktHXxcuZPeqhZt5jpeM/jpLoM0Ow1TmUEy6q4endyYa5Yt9DV7dYNefUxCYk\nuiw0GB86/aDiepSL0RSxiX6HZd8aWvMABM9gKfR9oH/wPWrRSikgDEJTn6rZ\nKe6y\r\n=AEGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/density":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/tab-scroller":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.981ec9b6f.0_1578684497933_0.08331258342932402","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/tab-bar","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5990eb66bf57da2714b8fbc299850f7d7ca74d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.737da83fc.0.tgz","fileCount":33,"integrity":"sha512-+DOvzU/3DuX0lyeUz2SvmgqEKUfYBe/1LrJXDaiAn/6xFXBohLGo86sfhGIqBOMHVv2vs/l7vZ2fYnZpEmuo6Q==","signatures":[{"sig":"MEUCIBLQRYLBre0+MuAn1BAmkv2h9sF6n4F/IL5zI/L2zvTaAiEA10YavtcDG3cGm6xSCGXXQcQvspAa3/QWBCi7nL/8k2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOp0CRA9TVsSAnZWagAABNcQAJk99jU4jGUdIiBZVAwU\nxT6Dhe/XED9I6K0nBrmduOqBthDXePMibpstyNcdTBKkBaNdDazfInFlgNqx\nRb4YZI4hn/NyldRa6J9je52JBIxeWiGw4ElZiqLyC2FtMrT+/o6+T3ZG2tYg\nyBK6uYAOwNQAOdz51BIHndB8F1EPgWoW/grtaMtLJ4+rfXXfFN/D2O/kHGjQ\n2GM9c+vYh5l6k0fgtEdwMDOo+NkxXCtpWbnMRZp9RC0gCbbkFc10ipl77ulD\n7dYyTTJsLvZ5wJIUKKvJEWNhZVKe0hwo+1ZQUbNzbEJppPX2uegCstzgcCQJ\nHHWOt23Ivoc68a0yQudrIn05902CKJz4M4OY3/W7yBsaJnbiYpnWrr49SmrQ\nt2F4xq9qGx1PLnAOvEQfygooA9cljDTm/d2ApnfYpTEaE5hHBQIkAG9VbsEK\nbvlyONP98mAzGJ15aAt28OhAX97KQapa9rYuuYt2rMrrKhfnPA+oIxu943DC\n45+8i/CJH0ClAoBTfCTJ5eRnBNvRTWa/Sx4592Aa7c2Q6Zy8x7gA8gu3iX8d\nsAn7NmS6e6p/5bqc/lZqMWZIKnUFd8RLWihRjAifZGlyZ7xER5Z6SchVuW9F\n7PtHodkch0sH5+bJiMbEWX8Jpe+3qNTCJFbgajTVi/hIqZwAEVMd9sB3BuIj\nxJY0\r\n=F6rR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/density":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/tab-scroller":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.737da83fc.0_1578691187806_0.19553190415319088","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/tab-bar","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9fcad49dd405e2412439f8e9ddbe3118d3050af","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.aca8e6c18.0.tgz","fileCount":33,"integrity":"sha512-O6wzCJgBMm0mI+36ztU58W5PrUYWSdD87jhYFyHtOx7sLOsawv/nw9uVIPqcYRqqyplPhRHwjixBfXRpaygqFg==","signatures":[{"sig":"MEUCIQCEX/pzUrP1JdLAHE08GzKoOZJdS0me/yZm+xYlYCeHUQIgbEQyOl64EgQq4AzBlvt2d6gfTkgZbQRJpAUTmd9IeYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMYPCRA9TVsSAnZWagAA0zIP/jFAs935jPNlO19N3MR1\nLtK2Ureti29H2i0aXQmYjeKWrJ4dgq+uUgJEuevM6wvhiXW/QN2SSsP/IsLO\nAHA0Y/BtYChgz29ZjmTAOPO830cYVCY72u6DOC/eBtIVa3SQLnrcwIIouR7O\nBSV8WKGfvgFoHG9RhbZO+WRtnmQJgq8n7rNr38el13SaUwSLichX8hMEsujW\nDaW9lAK4+6WbrUj5dm/bbm9CAffnO59hN9bFqDeUIwNF51/NDYKGBXConLmp\nGuKy5UQR92KyvQSlLKcJMuDk1VsYAmEaiw3lixHycD/UjRQvUUMpFXFirppX\n6r9tzMKu+OuqDYFUZY/gDzWC2Vb4dTKqInN0CpzENMEcHcrwqXKMjNfbzYi5\ntLbnU0d+WevSAITlcPyua7jnr5KbNsCceQc07degl/onFqdolwUe+dt6auxj\nfLNQB2MAC4bJgo/H7VGrOjO4Y2jFXFNjbyQ6PGzqlxue1lgLDYn5hjXh+hvl\nAi3wg9ziEaDhyG9Ol+4ibRAHuqr0pkZmZomXjFlRDVsbT99b4ASGXT6Syf6S\nLtruGRdKoQsXk64nSb+tY1WXWTFIsfJgs9buQ7Xwrmm6wu97sb6kLQID1qDv\n0p2kc4IklQgURz00k4SnKW5+BGTT05abXP9k5KW1Gl2X9qNYSF1qJDkpNzds\nvBbI\r\n=fhkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/density":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/tab-scroller":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.aca8e6c18.0_1578944015497_0.17967530746977212","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ad38fdf563bed31d2e692a208bed137d2b710a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c38d84e21.0.tgz","fileCount":33,"integrity":"sha512-xRE+yq1u/hxqMhuy3t+ltkC4yO1R1zsE9aeZL2lC3SsMfqdl6C2ld10EuI6nFc/lwZZ0AuO4dDuJ4fpS6VQLUA==","signatures":[{"sig":"MEQCIGtLnnVU6B2YQWGa7n+xi7pSI4+a4ssLUVTJ0YfKQHtOAiBami/ok+YFPSAnm79QCBI8cLGE0KlWBcv3Yc8Aq8MUqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOvRCRA9TVsSAnZWagAA0r4P/23pFzMDeZm4GcQHWDu7\nB/j82OGOhU1BANvTD1APSWQ2KTNlo6J3m7Aqk5zrYHOaARuMe0eeR8Ok/bi/\nf0k2lz80poDvWBaKQHDQXFgm22zpW1SvFC3myTsrlCzqQrCjHcq4S1MnL+VD\nNDMxn07f5hCbR66e5RK7+YTTEGlYOAuEJRyLLo2p6hUi9ZdpwSctTwOBifhZ\nLtLR0s9x3jYEORTDZ5Qc34omC7swkwaVJa8ViyXBgqWefiNX8WKQgM6EsCCF\nlzrjVZd+pfbzSzrAS9jyoAVEuauYL5uBwsYRFWypp6O6VenkOK8zs6qMa4zw\nYRvkOS0F58EeW6g8ZicxGkgno3Ov6TS5e/5VuUK9U7iFCMWcLjPEXKJAq9vA\nOOcWdT4HV6l8v4tgYUS/8KgEgWmCO1JMLM9zdGYlQZNikjWWaQnquXpOosL8\n22JyYstsPndswWL1Fmpj2pYhBhBWnaLvR3HlEpmfXM1Stdq+urUuGrcBjqgw\ntI/rodkyaK2+6FgEwC9LvlFtDxXj2osPoefl8e5d3EvIk8pvdj6h8YQRSIZs\nsGQn8tBYhCVBQo5wwHiZ7AUcRqTDT1SdwrG9yhHhoZwsGFqsRdJCzvvu3kTV\nZOGlgEsIGmCVrMGjPRjwP+GpUy23Nm5BLExuTsPizMsECw8LDhhue6mJd0Zg\n/JqL\r\n=n3IM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/density":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/tab-scroller":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c38d84e21.0_1578953680716_0.6559936224538354","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5e19a5342463feae733fc3bb8422eb28de98f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a4db5fbad.0.tgz","fileCount":33,"integrity":"sha512-YSMZ60686GSjppenU8SfDZzBcfVu9i145MMB6Ia8mUDIDYOh93Kv2k6fCDBq6ImGfm4wFTZtFWjuNKo56MEtXA==","signatures":[{"sig":"MEUCICjfhqcgt4CDJ6J9VpC5gCbfqpdwIH8vWOcNDfoW3oLpAiEAjyCyp8a/8f2YgPUCdDcGOzPKEnLTpA4ikVgxAUicwCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRtCRA9TVsSAnZWagAALEYP/RRmNgPhAZYEUA5dT2vc\nvr28DKkkoaIV6Rr+GaO353E4D0+bKfOxXonpxm0VfrOaCXDwTq/NWRa2oVY4\noOtUfeT6yWJiau1oE+LKsw94gqnBWOh7LSiPq2M01D88k/+IDbH1Jlg2ac8t\nS8Zt8cCzJmcMcuRu3H3lb12ezeT48y0koM2v4/WIba/xSLOLO9CvM6ogInF5\n2c1CD0aAr4CnlAaouI7L3WER6+/11ZG5OR2+FPuIIS+X5irOoQ+aC9Yyd/g4\nCz6AqMe0wVyErtvqaBRKjdJc9UV0LHbqROIv0X6ncfRSlBNzxM6o6itXpfrX\n78OqhJ7ABqj+LpSGvNypfC7oeOpAb4UA1K13AC92Y4rx/NEONcNjEUE+d4Wn\no4y7yLHTvsTDQCVnbiy/UMob/VOiiPqiYMTvlIJTdZaj4y6LxB+7/zZ0eddE\nghd3JzeM8NYc/QtJtoKZ/EobVojPqAVaSlvEk7BF4BB3VPm7XmMyICVDlnet\n0/0O+7Sa9H+KsPOZx8iCsWdQphgzme/wMwZ54wh+jcEqU5uhrAsoul0+MYOH\nD9chQ6qyIHT8Mz+UKw5lVfWifBnqY5y2mNlnkelJPvOTLvloa4MjEWwbqhJD\n4Qh75ArYbUvaihq1jpqXneBkir/VaUHCOrDPiGRcRmDGnSm0vx8l9C4BNlOx\nNviv\r\n=Nmxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/density":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/tab-scroller":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a4db5fbad.0_1578968172930_0.7691907649397136","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/tab-bar","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b03630b53a32eac1c2b3e0ce780e1503523af8d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.faa9af310.0.tgz","fileCount":36,"integrity":"sha512-fkYjV09bh3rRgC0nDoWqpAburKpoa8bAdNh+J3sdTpdPlUHi7pDovC3QkKeCd55YyQ2VcUBwSholrjsKTY5ouQ==","signatures":[{"sig":"MEUCIQCosZrTWeMaqT3VlfOVfX3iOKLvQlHk8OfRkebxZuUTMQIgfmu3/X0VL+Qu5JtqrpjAuiIF9J02iopbyDVtHiufnnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfI/CRA9TVsSAnZWagAAO3IP/3gWBXRAwhXZObaOWE/Z\nR8O/BNBm37x3xulu7vq55WBZ36tp2RaIbBZTXOafXGTXtObv1Y537x/VTg4x\nxwo7R2EAaDd02F0StydgxY+cM2de8W2BwzFSioMgLONEIMQyGf5vl6WMB6Hj\nprKX1vTm8R6pEKpAdM6OIKKdwUXtIN2GYjw0ReqtmTesLMUCKgjEvKQjp6U5\n9EgbyaS6NrhJ+ujp/Sl4boPfk6oC9N2bBwiXteaUPIB9Uo3BB+rTEuZYFbfV\nS2KyTKBQDNogg3S7xRroXbRfBrwB+yZ3usiZXnTcWVG0ZWbaKyHc+2u4ENUO\nkYw7vGc17MjouYX58D5NG4Ij0LoO/DAzmLM73wMWF/8/cLCcBULHPe6gXmE2\nfY+gmzO2FZ+HUiiojLWCe4q2JgBCl7o1gjfOi5mxvEX8haVM828X/jSRXVCz\n688U0Yu+xqj2zc5Kh0Gipsi1ef189Iyfe9/2nuaU2Hl28SMWsGWIEM69wrRJ\n5FXK7InT6nqKg6FptP9pDzgBEU0e/oVgy1N4Um1yoZx8SltRMf5ghD9BqkrF\njf6+F7sgRuEa6JGY2S5sL7uCh+g72i/HhPEzx3f2qxphD40RNS0MKqAT1/Ks\nFCHituS3AEjb/m1VjXr6kQqJ2p8cUUNljlMgsfbcATh06obfMRn/UlNzZ7iu\n/eUx\r\n=WYF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/density":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/tab-scroller":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.faa9af310.0_1579020863471_0.9195935655703038","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/tab-bar","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39087a87ae6a4a217e77ac0df1c2b8acf923b3d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.60354c577.0.tgz","fileCount":36,"integrity":"sha512-aXCJtg7SwrviGK+/KDH1RPllatvpuzBkDA1H1ezSpHQ+hXhm9vaptKf92jkZKbGkyvl8APnkU1jZ6NxiZWJa3A==","signatures":[{"sig":"MEYCIQCgIgEB050kt68R1gbYhqBS+5KlaH/zVUs2/z2VfEs3IAIhAJ6M7udht7YTVNth1ggTs22SeOWGq7BKi4phcWDQu0xT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTyCRA9TVsSAnZWagAAznoP/jdFUhj0C3UriLuXppTF\nu9ziZnfUUiVjoHQRe9hTaRT+9AVDAtmEWmtM7kjYn+Bj+jIq0XiV/KYRA/Ks\nm1N+LgSRusRHcsI316ZHqRsW3gv1oUUTxzVXLTEB1bCtzoQh3gBOHGOlAVHQ\nVGcC+5Uh1mGe2WIag3oyIt6ZeAwgepOjGZgihTi5WzEDGtomWq5FYWGw4glh\n/s7N9W6u8oaQrzmrjQMGvWxpI7OoujI6pVqW655a3eZ8czxDC3P6um67DIpz\npaSKOrf4zJWd2P/OOMWXT+IWT7TnpX7u5dXIcuW7b9NrFMawosCEqBPfLViQ\nmpTUBpS/6xbJP7On9mhl9N5mDf2vZNSABQpcja0SmGaV4ihF9EhuTWrw76nP\n0lk5OYrZ7ufCNWwhGuQllgXPoqPxtgVjOmTAh5pYYldc1y2JrRkSnt51B6FC\ngnvv/tcIlk9ct1SEuIq79RO8W9rHoLdY11N4XEon5Oey4uDdj85lEN4orzo7\n6tdQlT0rTg1B5pmhsz28ZZUOkkuwymT/H3mFLb2d5cVboHG9i+/Zy9fCqAYi\nPbcxeSu8zURJwCS4QW5vhtJXC9HS4txCwj8og0b8U8f3qBODJ20LAgxqiPZs\nY2xTHlsg3Rq6C7e6iy7RlYV4RET+GT0gWivG8FtZOWT1jbgPrHZRb+zuxCzX\nOM6w\r\n=Iy6r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/density":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/tab-scroller":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.60354c577.0_1579042034503_0.0011421406272920098","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8170cc0aca36899b0130eb8d802f594835f4ff18","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d07c78daa.0.tgz","fileCount":36,"integrity":"sha512-b3C5ocv1p9Y85yawFG8bzaw5TKiyOkPPXzMZRGA7rAxHfSgdqTV7elt0Ez5zdrX6GN868pq3BjS9jgXTX3gRQw==","signatures":[{"sig":"MEQCIAhL2uuKq43SKxvemXHIwonbt/mkp5oWlReWp8vDHcz2AiBEJ4tDVhhIRPFX/YEStonDTHFIp5sSDd3TyBwdiRv2Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlFICRA9TVsSAnZWagAAv38P/3v2qlh8op2UrQ2Oc0RF\nnwhUUIbeMx3MJ39KDBcpa7zT8+aeQ/z9Ofxu7qlrHo15i//TvkVzUauCeU8K\nsLNXVZDesPXcXAZ/f/qOEhALHBl1CN3/dDLMAJQcVcaQYvvTo+rxXdgPvAPL\nDw+VmXH3vIPZqKkJPpGi3ZRjqDk2yiGSTzpEwMAaXP+YZzSLrOOU1uFj/DCc\nS7wlNVxpuWbUxdT/OLDHaoLUk4SFJzaAAp3e2dgEFuIfv08u3oddjJx/ReqK\nHN7GgFhnYpK9oVFQSJdolQhzWIqIAbegDKTYfdKa+3BIIvP3ZA3TJFHlapxY\nIDmrUXJLmL0bPrRgADKf/5C8C8add1gm5GTP5qkTzr6NGLK2caSY+d9lH4Ar\nvY2gPclQEPiNbuFnh/XrEl3EOxDkaWmeAGI8DEfccjFjA3mUopfuwnTuNfkP\nvaOAjHk11VjOOmwi9aa3rK85Mwfl2jlIuhnpgwWuiOQ9kWPCUOadbptEmkq7\nhky4ZHWXOsy79Kvyt7yHteAIw6uDFDrJKaIbLdOZart3NQkbIy/sAGi73045\nm+iGtqB1dOLW0X9FAlOKF2aN6FZNzhrp7a6UqesofWSm0aveFqWADNmCfhNh\nwrWFKkllv1GY7e6zHbmv93vqU4ikC/uVvzyvmccpyM14NLTkus7z02pXuOuA\nA+Mi\r\n=+teq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/density":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/tab-scroller":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d07c78daa.0_1579045191685_0.21563561149075827","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/tab-bar","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ba189a6cae8b64524021cda8e851e3ef69a391","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":36,"integrity":"sha512-F0NG0gDG1QPzeH8kzMu0XfRTxjTyTM6Xifwm6BufYdT8INdpcQJ1s9Khz/yftvY0nC6SZnBIjvvjVBcIr8FEag==","signatures":[{"sig":"MEUCIBx/P/7kCl9IZxVODejAAkcXCly2mTLiriW5t1kP+MENAiEA3eKHYqLQbzDtSwYsA67JY2ZmooXccrzlHW8tq/Zri+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5lCRA9TVsSAnZWagAAvEAP+QCtRYTm79U0kDF1HTPC\n0t7rRgt21lO1/NUWms+fz4OmkP5KuPf7hAinY/+93MFUiCaeLkUMDM6MiPZT\nPqENW24m1DYII5qNa/y6zJLsmFn2pO8TcShcR88ItiYmkzuX9JMO3QZmPWut\n1xaXvkXU743yi8xVHT+ygFzNl8J6G8iwWmIL4hIWW074D8IwmqKJQISzdlUf\nXFWfTf/Gt30PBOHTa0fvmwylAHRkiBGVMs9grB4VUods5miwHqkr5X96uYSH\nWtmpsOyEUIGSVW4w+NTdhPzQ/ar8KNz6bKU2WdIhjfwpWCKHRiJtadYAMEWx\nqbJg3neFn1ZY7l/I1epTuCt6JKmpAgkqUArxJ1ouoboGavV99FgTm4lJrXEZ\ndMrt3QGIHUBQg1Vkr9mgIXph64Tpj/jSU92/x9ddhJwlJCcyQJT0YV6xKb9s\n7B6crsAR/XclRrJ01B9FruEr2pep2o1zrs1jBa0wuWCITvlOF549ljCtvcTS\nkt/hqbknS7oD4KASCZU//tmRB/QhIFUhfXjG55wUWZt+z4AKE7mQhVhGiyyI\nSDXK5Ebq2PZ2KcQ9JuX+lxm0JBoKZW9z8vGS6lRu3FacsbXtJnsfjmEq78iR\neWYSWL4SXo9pqmGpYWE8OcXuobZk479edaSTHGuJDreo589YOOY71/sbPyBZ\nEazt\r\n=U+ZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/density":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/tab-scroller":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.8ddd5c6dc.0_1579052645407_0.4249395063756387","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8a94b4f984887a7375737ea6502fbd86c940e6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a9511d870.0.tgz","fileCount":36,"integrity":"sha512-BAylarPp7nXvWz9RdhcOmrpLulo3zDBIyOf1EeTOwiR5SBCYNHqNDU04vqM3GoadyCUn457+ant00y7V/0rB9w==","signatures":[{"sig":"MEUCIGRJSqwT4dMUuGGyJfZrnO392kC3J+IXQVDvz0LRz6x8AiEAmY9w5WAp91CQCpSXIj4dMwikYTd8cZrJkH8jCIdHre4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PXCRA9TVsSAnZWagAAOsAP/i16hkfidn7ccOfOag58\n65K2gwJEuR5+rWY9iDLoV/XFjOmu7OHvFOX2V31vXf7z/v4ydPjkwOuYFAGp\nY7AohocaUdSZBmhaY+5LixGD4DFrLYSYBX+PXQrcoxzFAY+87GbVcAUZxi1V\nn+D0SiII5G4WLc4pvDyMcDJTpvCIHTk2am+s4xAGV4nlsyB12SSRHauKK315\nIsG2slT1tnWL/BC6ygE8KsS+vy6knyvJ4pKfMmM5pJpKehD36XFJAbg82jb0\n7mpNWYgM027ktL2ekcYrFM7BKIQSXfumX91W1WECm7BWm3hGbAey7qbqGNyF\nsOJhnuht88Pvaopeudz6V44r9xWfUxETx6swJvSq+FYMLA+0qG0NO/NWlHTA\nsC3AXoN/Bh0ybLLC1e+RQlEb4XWGewfeNfscfR5BWUjltQ2GT3dM/eYjLkMp\n4q7ONvsqZ2HfcL7SIxg8VdXWk1TvNOj/34LZEcZt0r3Zx/1mBi1rO1R9NM0X\nQYP12umV1FcaG3FwS2JCq7MUhHuAs+2rvXbALxlvEgJYRpnLj4MNXwWeOB8w\nT5zeuOFWQ0ct0kufK8ZJMoWArVsIeCZF2nLjG6MKnPFNqC06ycTCkouk0Fx5\n19wP48IbrQX2bAf18oKmgSAx2B8xVserSxRriuHQcVi5LJ0gLtY4i+R/aK1b\nWzmf\r\n=qpKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/density":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/tab-scroller":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a9511d870.0_1579115479391_0.9271782439521126","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07f29aff74c9124c2fa8282b633ffc91f62029e4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7c8583c4c.0.tgz","fileCount":36,"integrity":"sha512-CqxmQwc8N/JB9ytV3peuoqCa3jlZAVJl8AP6wXT/o0xii94NpJW3rYdSkeeBWy07N898d5q3NLbxLNg67yLl/A==","signatures":[{"sig":"MEYCIQCvY7FiignE0YBJ4h2gKGiEyGZsbQGh3dPD9Psv6fuaRwIhAIOS5QSM8gIw/kaiBWeWBflWuBirVcfFY/oV3EBteCOm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5biCRA9TVsSAnZWagAAI7AP/0/88zDTJf65XXc/C2BS\nIhQzatZEyKNNdlnhJRkr+qhX1MIv/lKQZk8szpvWcYCg7oHoSkmD85OVGkow\nByach1nkZrSUIAEBvkyGid2NHJgF3S3DtUsC9z7//LrFvjSKx41XSz7LZL1q\n62kd4H25vaoVCyzC08nUAf3BXBg0SBrdJaIEIQxeWm4J3pfEWRORjQC49YWT\n0UKvzwemvU/KVmio+nbplBrzTer/rsQwHBmenZH8L7LcZiij7Q07wRejS7aM\nyNK0/EC1dCIGlzm5jeha/JQF+HS5vhEad9uHlmOZgQeouHVROYSsZhiurxD7\n26/f1ZaJnbYKlZl5tKr7sFEIQM5CSp3l4Sr8F7F+Fe8NpPNt1e350FOVGHn7\nNSKhY3d9t321EgT25DQoIMcFQfHsnTfk24u19NGCG7ETEr59Qx2wBBi3wFAe\nqtLNXGwxrzdO/W2HTt0OL39p0EMSAhuDO4vKQNHvk/v0Xguta2A5RVBWJbVh\nJcFKccKBcV95/1ermTxm1hAU7H/zRSZ3wpbrFowPa6tX75a8dmitwrVNBolG\nhqvOpZtW1xO5kU5g2EeR7k1wf96gPzx0RInYbgPVEGQItlTVAinO4VKux7u3\nuyn5E+p1yUO5gHvU02farCaTijbHcBgeDSjxQH8WiGSt312U/5klgp1itTxH\n6AEZ\r\n=2P4p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/density":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/tab-scroller":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7c8583c4c.0_1579128545771_0.6617420218339145","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6353ea929d4c883a7b9cb9dd42581049e29afe94","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5d4b82bac.0.tgz","fileCount":36,"integrity":"sha512-fFXqHDYZrF2U8gFv/ASmvyeeitB5PgHN6FgUj6E/OMUXmMHe3yRVJkXiHAM3H2VZitD6OjcA+9EmzimzdQR+TA==","signatures":[{"sig":"MEYCIQD+6/jzjR/lCRyQnYtZj2CWDsZUUNSI0ElfhKkiwgFyQAIhAPAnrd7f3xjpPp3gh9qNnT1vf+wkaqXq0JxfoQ/Itf3+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5b2CRA9TVsSAnZWagAAl6gP/AgaytU2wp3KBD+SOjSj\nt7C/MGYRxATPMY+HJZ0oubUrRvw1DDykficy9K0glmam59sjK+O8ves3cIzp\nWbB2lYN2BrXActoqtNon18wtA2PNJ7ZP7H8ZaQLyoUVBzClAagAPHv8ojUKW\nL1lr2Tx8X2cr8gn+IZctYQ7almC+8WZq9YHDIOY67a5X/OLoCqbMMznSOdSk\nbJH69pAJvJ0VXEFsFYvLOMtH4JfL1BsvmX63VN13lw56CT0GIFUX0n7rpDvA\n85NqZlHnK/+xrgU2R4KB42cS2afcmfTMKWtIMb5Mf3zuuBSAYRBewlZauKU+\n3fSaKsv8mS7Ue2NPGxTzWFfjwyy5bde1kU6CTXe/TbmIl55hr/OqOrzjrnV5\n5DjK+YS1i14Evge9w7D4bbLm5bijWfmwnZImTCTEUFeQbc5JkMsky12+itmq\nor202EGMfedI6aABQ2vVwdrOPPisH4tlTzM1h+Az4sHgiUlqovmoOaIt4C8l\nHWhXenWy+5VRpPnOzZw9Yzw8SQDRl8Y7GfiWPUIzDa6F8bOLZiJr77giLhxB\nVWYfU3XDz5s9kRx8PVMHoxSnvvpmjcU4vzph669l1VXm2L7duLKt5pO9RB0G\nMVHJxXEIm8gUaXglEWR4PWBI3vOcgljofA+KLWNORiOTQ8ehN/PurEnpNiDw\ngqKg\r\n=Ruj9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/density":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/tab-scroller":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5d4b82bac.0_1579128566441_0.8183236587443157","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/tab-bar","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e62730e03dd06e969bb233f090de5f23a0f40b66","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.57d0186e4.0.tgz","fileCount":36,"integrity":"sha512-IIu2Qc5Ao3M0Mok4CJLXTbyai9pK5j4rIH8ZvMAzg8lQzujLXPfsJaP8NlKMGvaFHp4zZqJI8tddIOtYUBNnPg==","signatures":[{"sig":"MEUCIFx3iznoR4cqqs3F8FjL047O+adNl7Y9Qi57T6Y9xiyuAiEAkuen54d8fiXRv4C9gxs4gYQg/iE8KX0swTQSV6Ou19M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjzCRA9TVsSAnZWagAASk4P/1toOnwQ3Eqfc5dFRlLV\ncNJY4gUN655uWDRc6/a/qYDjnmCnpG+0YO7rdyM7fLm1G9CaFp5HdK12/l00\n05oMHAZXlZaTGJrrEhd3hapzV3i/hSPrYSXBxbMkJpfQeEYuVr3T/sWBSerC\nLHTzjEnCp5lFQ3KV0eBJAWWL1FFV1H8bBwAtlF6mYbAtGZOZ/LYlVsp9lc+9\nUnN2LvErAq5ybvNWP1dsHmyU42ALq4JaZI9HLZDKHDeVJSMzBLTC84+1F9Ba\nc4YKrq/tGyz11MX7YtrVlzu4R/hYHM40nxPafvETRFpObPZdSevJAYJ81mt/\nyI81rtxWzkzsBoe5cJwNUOlHzhhkvF0K81+jH4jSxU6RF5O+mrPQzo7mZLti\n/fE0rbS6bB0KMNU96D+ycM8R2DxEhQqi4ZkWwvq+G96JsQuogC1xo24LWPyw\nAl2ATNw5iAlzTTosZBquy8oqu/fHmVplQln1fLzKV/mUsWGHG+dsWWNqf8Kn\nOY/zVoIj6QFdh8c0FZlSJ40nJl07MGyRE5racVRCwcCmqrZtW/ov+Fgu2xMY\nruyaCjQPeRKOKeebJXyIbmoaupf8w9OQlylisQCQGUC83NSgpOHybrYyFgfk\nsLKEOrQVrkrHo6ulj68XCNbBdY3b4jQs+a1pByBg53jrj2XLlgA2/8bl8oy7\nwxVz\r\n=dejb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/density":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/tab-scroller":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.57d0186e4.0_1579198706880_0.3526295385757292","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/tab-bar","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2e0f7a8c086a6e02c987b505d1a64f2466167bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.071a6ab70.0.tgz","fileCount":36,"integrity":"sha512-VBJ1/hj7y6L4hIm7sLWaswxQrdr7/YCpN/tKYiJ3GHvx5aLH//o4LbtJVo+Y1bV5Vsm7eJwKUoKX7ROwn2qxnA==","signatures":[{"sig":"MEUCIQD91B5pW7Bmw9G/STuhedelvIwC8QJoZVktkcZAwWB+JgIgeFKt7uWlAYVDH/M3Cwe6GL2bry0/QBjPoSTRnqGRk8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKp+CRA9TVsSAnZWagAA7O4QAI9BL3czHmzaS5sZMhZ0\nOh3OmBs4nJja1xoAVUQ2img7kSzAHJ3TRC3k6i3dP+ThzBTilaZ7P69P2HLZ\nql1OGX7a0kIslvY1mKn12eGz09owLzKS2ucHzXt4O4JzRzdhM3s3tgSQgqok\npKU7eGhG4bMvxS9F7qYzilB6n0le+4OoTQLUYloarvvUywslkuf+GQagsPl2\nZPeIGgbkQRTEoraSOG9g0vZW+TXdRte75WZPNjr6+jWQmsGFx0kL3vTXCPsh\nUQNYLKof+oUK0LRku82JSRgpbuuxSLLs0Ze8fq9KkQzxdh7OeFsjPxaaBCNA\nFtpo/vf0iPhzaLG+7LHthM/CMLh+GFcv1d98PDNv74xR/lLw/1Qsf6Gc+Wk/\ngZ0G5rvtIqhoevA69qT05FfemK1dNprE9VVYWmEVjkElrYqoARAY/qxZz37N\niRN8PLL7OTWqZ5N3zfj1Le+QcGvBTOgs+qW7NWurgF74LMxov+6gno/7dqV5\n0/wNCIc1bMeG86ooE/4ipSj6qeqQCUry1L19pjn1EB49HFtIIA0prxtMrbGI\nEuL76Phh2HF3cq3mD1zKs/dMOEk0YviJnH/8R1HQ+bhU/9wT3XicFyJTMmI3\nSZPtDg7w5s77bh5JxYHX/uRZTavulTnRSR/Tof4EwOHp3k4sI/NWFeH3y4+W\nRFCz\r\n=VaiJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/density":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/tab-scroller":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.071a6ab70.0_1579199101542_0.5804694990871473","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/tab-bar","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7adf36bde4b4537f271491c77e567e95ccf252","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.22e0cb618.0.tgz","fileCount":36,"integrity":"sha512-M6H9nVzZLvfmSbPkAt4/zkOswPdl1hJkzWXDswW2zPrF4lC5xJ/ui7yNC8qpA2OwhC2o3BCNI0bSfcA5xEHQag==","signatures":[{"sig":"MEUCIQDp1KsBukAbgE8Ubu0iODW9iZvYLzejSd4mdmv1WC+V5gIgFMTEJopguB/YkQyXFDsvNLr10Xvai0pMpEcF1dpYp/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/gCRA9TVsSAnZWagAAFLIP/jeTqUEazbJwq6Qf9ZWR\najnFjIEwP7PYAaFBu7zBLzAruHHM0L/SU1FsK618iWYtsUDt2txroTVQRxNG\n7jRH5oyZTA50kGh1/wxVmCfwWaY4t894IO0axQoUbQjs3LzHUBHs+ut+KKPc\n7DZGCxpLcXFh/4UtH4wj73Hf2l7WTyV549fkD/+R8sMjOZd8yn7IKacW5uS3\ny2jtPZ3uQyuFO6oNh5ntzgYfO72QY3zBa/Sbv3geIVK3N4lL0VrIOlfqyTFb\nyyQEQlW9KicqEhHE0/GNYvQ9jhfPDhlkRvQXxOA34S1MaOtueSBVgBk8/9eR\npKQjctOiGyO4Dr6AzZjPLXg/YfcZthktaJIg4L9TvWjhAn8ycHFoF+uoiSY4\nKxS/8icGBc+Oge4hMnHa27CSdkNqvCYFjE1L0OfjzNAe8FEO5yPfYoXBt1uA\nh+nDyox/hZmKuX7RE9HaueeqtnBy3hwDqddLPTcHQ6v4F1WHMVGNoj5sPDkX\nvwrI15IyswOKnVNrfY2M258HptjuZxP3WG/oYdOjbT6mBxz3vrvVaPff4Kid\nFAGt61kv1yMsynvcfXs6a3ORfNizOu4BJBNKJ/gV4xyvNcQmfrJIxw2h2Kem\nBncSOiGP0IYnMr7XAW2gC/2TY0OGNb5EoxxOhYt2CxBnyVCf+RHNjuvXaMYS\npoz/\r\n=a0ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/density":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/tab-scroller":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.22e0cb618.0_1579200479920_0.7001262533389601","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e31a9c0ff0bdea2ad72eafa90be27b52a9e4175","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f16f15b8f.0.tgz","fileCount":36,"integrity":"sha512-A72FkZwbRFzA+q0KeUAfr7MJvCPgYA8tD0WgDs54QGWmT22C64U4YVqQluYp9byeiHUWca82qrOvYkIZ6ZQZqQ==","signatures":[{"sig":"MEUCIFYZVnBYmkjpdDmvy660Ri90wTB/+jdrESU4Zp6dkcZjAiEAtnxLyI8VDtN5D9Fv2sRH1zYEhgFtCiK2f0RDkh7F32U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPruCRA9TVsSAnZWagAAix0QAJrZL7NkpMztqA7LKPMa\nR68PPdyepL/ZD1ywhs0svqS1cruuUij+FiCs1WoNjJBcgZjyDhl2lZEhKLlz\ng0BPDSr8KQFqWdzBuOv9omjVEQpLYsEI0NMLdwCtq9yE2m0ebnzrE5szB6bX\nZDOxB4wrSHeDCzlfZN1pwHEZvusyFsjIKMEx5Hg/HEWJRHfx2VEFi2RcKt8N\nd5JiY8A5T8cpiblEyXv+jjsWWP6rMqzs71P2IuTnm7GxxmWs+J7T7i6wybpH\nS6Yj3GfmsdgWLU5DOgIcvLZy621BGFzQTm+ONTaboPyTjXz+2csLDhQlJTV7\nLTEjvECnPOUaHvHikkF5OmYlU2H7/biQQFpZMPoS/+RXNJO0ETPp297oLtLt\nkzKNiuEypcu7uPivMmnWCr7l2+rgpoFj4+kzZp24pzj2JjZYDvW9qNZiDjBC\nIbMsIdC0WpNqVqohCcT1xYhi4J+YcgLCuwZz+OuYKvrbZNwwKivleZ76euc3\nUbuzbDpJG4vcETfcBOFoAx90pW9kv+w9NhhLmJgosDNWw+yXZvLORs7fjRPf\n0oeC3U5ODOYa8qIQuaUsQYKEflmoTAuNJ46zYMIcsK4KRXRfQLYleE98Ll1y\nPk9Aw3iDqv7lwv1HV2DpAE5PziI91XZc0oN9e3gEl7u/VJyXFi3QwyJjj3NA\nVnPR\r\n=OLgu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/density":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/tab-scroller":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f16f15b8f.0_1579219694195_0.6894096587865548","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb7b2903cf21918d963ab91cf61bbe0c979e128e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":36,"integrity":"sha512-DbFxuD1woTZuQoQHHpg7cv/SlKF9Q7YKtYORpu+sym8UDrup3fmBahNY9SaqqHk/UDMYtyo0sqih8X3KDoiWRA==","signatures":[{"sig":"MEUCIQDiP6sLGmfQ6ZB09PhEbLSHfsvsEm32t6WO7s20B7I6rwIgDKDGbMgvnSIcOO1U0XPvPWWrhupQCQglc6TbkfefLsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHZCRA9TVsSAnZWagAANAEQAJPrxYkjivMMQ+zisbUl\nukcNAI0Q+IZeGmr80Q+4um+L/564fVxZXvdjakonUjHfL6oIm2+V7cX3Ba3t\nhsW5LxdC0tX12CgekLLoMS6pGHoLH+mMjLxd3xXj8BTJs1MBDlrH+NKhB7Fr\nMFDTKjHIMPAOzpTNkKaFk4cRcA7VFIXKhZPSmEryBuGbhLuqsb0mfKt4JF6j\nXQPwRrHwIhciZBBn8S7rc6Xt7poqNxBapXcvqk5U7YVrGKGu70d9ZM2NFRQL\no9oHdwmWJIXGWVvlo/aR8s+8N43FhRUGPLQKQAcnptx5cjK5rBNrmaHA58TA\nm6qvSafQ0wiVUiQUH04AtiDRh22MnunwHpuo2v7nMJZpX9rba66WcZQCt9W5\nW11n+bKhzekQoV7eK747MDDBqo620cPm1197XYu7qxn4xT5h2VS42C5GhgPz\nbxuEFws4ihGVLVn0xZ5qraELGPT79CYm3bm2xbKZTub4QA10Ud83daJGGEKa\nq+qZViU/hL7VPI+d6VQU5kQpJ15OuWAAy9DEwxEzZlIRwhkIyxRbdUOJvhkx\n25W2D1J4R9gMe+EFnqARHHMd63sGrbOTpTs3AUFevZnKrEL2fnMaUcQUFbP2\nDMJdYU0iTth7g2S0dm4QXBi60oiq3ybUJA3jiXfx8hvGQjDRGBZSYwzN+E5e\n/BIX\r\n=+MT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/density":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/tab-scroller":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.aa8e43e9a.0_1579221465368_0.2816860266351007","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/tab-bar","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"682eced3abcd2b2d109aadba1f181e8947fe6ee5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":36,"integrity":"sha512-AePZvgHDIrWwiM5zy5AFZ+XNuik/HlwkV14Fi1P5jXWBZg50ggZFD0Frd0naEWNAmF4YeMrQfJRs3mqFtYj6ew==","signatures":[{"sig":"MEUCIFvLZH7BEN/dB3Et+Gm8PPOba0/DYzegnjtsmG9F1wpKAiEAsBNY55mBKqPOiGqU7rd/8YfncEjn5L+lcjR0U9PClHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdgCRA9TVsSAnZWagAAG6AP/3+y2SyyGstjiVbTsD1r\ntkX/G0q5hcxBIqyTcJivPMvcGtnbPNM5+ninEgUTAR6aPlC8vsaqZ7CmAPrW\nhNOfrGMHJv6MpSCc59hMMXqevmw0hCi98h9isIs2I6zXbY3oTE8KNmnRAoUu\n6MsJbQALRDCqZWD/CbSEca/yeJHTTLSjrN0/6zRcaDnoJSU7nltKZL6mWL1I\nDzAT701jkJ6xd7uvcPKdnW/1m9QnyUnQtyerj9OqRvEo8RC6d9HOJfZoOLnt\nZjy8RQ8XBNtefP0McryUxwGY2c4d/wAzQoAkx/OIMzMtZMByPU/WKYrwEOs9\nmJmB+mLXWqOYOhxHdEYxwyuXzcdUOU6G5FovuZdHkqeo68Uj7YvNvTSISpfh\n5RzQrN6YPgzb1nWcW6OvtL4YpxWb7ZtQS9BHl5Et8KmOh74z7ylRA6ymprz2\nPp2P6NlMvoiLqbQeZcvWnGASflq0fdnvdoiIbSi1FnpG9Es//3KREqg1AYaO\nxzALgYLrSjfdT9fao4FgpSM8TSaXBDgrkMeSTs5zadsP6XaQk+9UuFZ2eHxu\nfuzpkjWD7pdev/9ILf6tWuQmSd/hTRLV+gb6e/++GFwFTuHHcsgM1WLxCkgx\nmjdreCz12NQdPcCtzdvnK3tC4yzO/9jZGMZBD64h0t5HJDYd7pQmbOzfGNMV\nddRx\r\n=rR3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/density":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/tab-scroller":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.fe1f3ca07.0_1579222880443_0.7510557530656548","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38647103e9799c19c3cdabcb10907d6a81788932","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d405af26b.0.tgz","fileCount":36,"integrity":"sha512-ankbSZ0AMx8LzcyWAFY2SCBi+j1jOa8bMKrVj2R5qGh3WJRQeHluBoGQqnV4Z6DiOY9M1TkkeCA7BxREHo9lnA==","signatures":[{"sig":"MEYCIQD68JW5vfK++0Qj+ef/tLpcwayUFR2ScHCRZz0otYUM0QIhAP3jGVEjvwyabbL5ha8NsP6V7iQzZLuUtp/ZQzg7eOZ4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpxCRA9TVsSAnZWagAAXdkQAKTAuBgyh3Q+DZebx3sN\nCkqhW4ocm2aYpLrp0nRcNtfvFYKwFxn4pZEosJe1OazujFyKdECvr7FONLzg\n6Iv25r//naU1LiViZW0u1c1sW4L4eRCn8sQGhft5/15To6W8ON7q4FH5TqpF\nWvIBRiisg0Mh2LkHGlmJMtpcNpBjiENcpnHzrQFmS2pLYoHWrTT3jG5I3obR\nWMYUBR4AlxjIpmuKO8MypPjKxAqiJ1uHe/aov/Qpcw4ts2oMqCXWfFEzvbQD\nWdqtdQQfGKPMfcpHeBLGZsARkE7vaMFjOeAF76Y6Irgyc8k1wjfuxyyTl8wG\nS2+3LpD1ZDz3fRGS+V7QeO4qUPwYYOG3EczhkHViCj96rI0iFYA8ts2c1w9U\nzO2z9V+TIXgrhO0tFgC7QZfRMdutyXawd0SdrLIIqRM/9ZOqheapKXTkLR0B\nUNS+O6zLhefgkMzlQKDYqIvSXcRiwVJWhVCucfs1RysI0/+OA5zEpWjX0bk8\n9ODIr7K5JU9SJXn+X3V0QkdWP9Pnh+B391mROEOx4D5ZfHBbcOYVmJHLeR5A\nXV0oAEpIwZlsOewUAu13qlVcTcxPQLv8PIsV+61pry9mFuo0mX/iJzS04Wgn\nYcWIwE35olp/OTY/7TzGJs4SV/macHCyG2MJmLOocfs7INipBK+Nu94LdkhR\nXfhX\r\n=Jzyz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/density":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/tab-scroller":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d405af26b.0_1579285105393_0.10866189680948968","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/tab-bar","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68208bb1a708c2e34b6e835fc939634e51e69f3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.6e857aae2.0.tgz","fileCount":36,"integrity":"sha512-YeFPEmL7UYxlVghuWv95Mo0/ouaCZ0owH+zlsXsLRhyi9hJRfu74LDdepyimrYpD2PCx4Fc9rQtR9G4+sB3U3g==","signatures":[{"sig":"MEUCICA0V+Z1vSqDIfQN/uVZazJW2d8xcLkk3F3K99jqGsRQAiEAjdQa9Jt0O3Vl9jarpC9n/10GAwcCwpjH6tbC0oS3kO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfs8CRA9TVsSAnZWagAAgR0P/2P4nBkJbB3yZnuzIRcv\nX9/3IKzdFHtcwbSY5vVe55qgSLJRZpwPHsZVAoetnZ6QIrmRSqEKYCrlfL7R\nwarhWAW6LiEjY2Y6D0djOWat2F1KMg/vxd5QH9+GlkX16nQ10nztkbpnhTdH\nIHYGxF2MwtPW3G8QDoL9O/zuwVlktC8fnI8Szhw649yM2YEjkenx+/kxrfhM\nOAwXXZKiaLx9YJnt47lNYTA7nqqHue3/wuTDVUaNJKW0PPlyzX+PCgxBKnZ3\nunx/9WXIjx2ZhFAIV6CMV9UFH2o3BPScRRYrAAF8crG51JRo0AKPOO68M3M/\ntr4O7rgwHpAmORRkK1Nh/zgnfbzGf578TEPKsA45qrWPRHCTEM6GaCHJie3f\n7VhyiMxE3RspKwl2lrwDbJ1JXtRPKsQZvTDRO7btdNQtexvoKN++fNQZWYXo\nYCF/4pW4fcxg084i8vRpeNf6bqD7FtNPfvBtIV4Uqc9jHyq1v1pIdmX5YR5z\nrbyaWEVG/ldQ7Wr4p+/B4qlZWx25cXVSZcwwl03P5AyFjh8sDAu3YqnCs+xG\nHiKjai0cHl9JGNIDKC6zk8JqV9Vj+9yFtHNdjtrEr50CuoF5c6/EevUhWQuJ\nLRA+8TWo2XeK5kVS4qM6MqLTVynMz/ZjCIty9bJt+aYRkJ/Bmt0m8RMcuMaT\nBkkP\r\n=xQfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/density":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/tab-scroller":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.6e857aae2.0_1579285308140_0.1607863579733022","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45346cce2f1c350390aaa846bc0044c1848fca5c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.e2e764f7c.0.tgz","fileCount":36,"integrity":"sha512-DZMfntvH8/ZXs2BbFkUeZ8GmFOZi5Lf57uh6yv82mbw6zPf7C89nYlzQxpddj1Xe00WhXTeroq3aF1Y8JybIXA==","signatures":[{"sig":"MEQCIAMwMJToopVXdJSZOzmqteb2Cph7ovgE0J8xdLxxER12AiBf6AyUV/L0N6Z07RxZwwOeQJ/Bl829cRmG8xK5aQECdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7QCRA9TVsSAnZWagAAtzAP/jhGiUUs+7ivKDeSKJoN\ndti+qhlgogfHS/0FzGYxbmkjwh9VpdwiCgD1mOCWcz8i/kIn2UnFaTu9V1MT\nMhrruWMzrjftXWPhOSxvn5rytsemtJJrkFlmQC/nIkLo6qp8L1G9NYRk2Isr\ndrA9L07CLALqeWJoWUQhE1FlI7sCra4wN7FbZwqN5X3vnEW9Drz6C8wNSB+R\nqcvD0C5SWz+ePs40YakwLas+PRmQFh/2B/VFnNCMZP0kP5FJg5MCanMNQTMK\nqOFkEn2SJrRstySIvLN2QoqztB2w5pNEcgW8WSmLv8uyYlAxd0Lt9MKmX1oA\ni9nemuD3088Pa3X4yGJ/RJk/hxGGtgEXbjbqXbwlmFUd8Gt+vXpRp8bMpTep\nHWNUdlcG7qwUA2b+6YEwt+0rR3Alo0OVBXDjyChU5oLGcNDoHq1Uh/o+Dey8\nk9wub79QUhhBtWz1ZOETvH89yrtsPFkLV9am0Rb2oMaEzu+Lcy1DpNQ8kC1W\nM3f+golkkKqyRAmNROMW2Xne3JRvWr5R1OoCTi/BqV9kcG0DaLGE+w/N9Jhi\nBKOXiiLFdoqa7s3FY2PTEZciEZM4QCDNLPFUMsgTwdQI66pIyn96UkvHt9T1\nkdR+SlMVZmYNe1A0nIfOrkX0nOtWwYbQFSuMpvaYGMnbnc7je8L+I9bRxkgO\nCZfG\r\n=rtQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/density":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/tab-scroller":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.e2e764f7c.0_1579286224277_0.6628417801741566","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eedcfc0603aa301e7bb9cc0de85a67b4370bc7b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7ef986a87.0.tgz","fileCount":36,"integrity":"sha512-0KALp1oyPMgbbfwijUlNSRhJkVB+QjPgJYf1arM/cjl03cF5hdOVuJCQJcVH/MBHoUngk0+J801Nn8qEA6pzxw==","signatures":[{"sig":"MEYCIQCiN5Y+FO+9zZaTPrf1X0LZU/zRzHeH7W9CwHhqGTwEhwIhALSJAt+ARZlTPXsGcUKGipZr2T9UrQY1uMDlu+mZVXgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguoCRA9TVsSAnZWagAAHl4P/36tqRFA3HYYS9tBVR6n\n90704qq0NUwUWV/xfz1RoTyev2ZlGFMh12SsJyfw1us9jETkzs0YhC/xTOYT\nVs7a9jqi0gwNQyXsqmwiDAeMmREhyoG9bRIr9A3VwLgxNRHaZm495XXKBKlG\n4A2ZlV9pUw08m9e6nMsPC9QSajkJle8nwuLyzesSnrYlQ5TdwlQmjM9sZN2G\nfSGWDTSYbbs+1hAbum9o/kryJVRBoSehOEjxO+oIVlKzEbTNn0EXWJ0F47g0\niu/7YT22ypbIMEsg0VUioLzfSaEpkUvkWlvDo0sKf9pUyllxKE1Vx1GDRKtn\nSTd8TxOQ6rg2P4/J3VoVp3OH0donMHGtLPM8Djk4ZuNrEh2h3iVuLzuBugef\nV/90XtpXBT1LtGPzOcy5AJ8PtiI/Lfb+ebmBGEobgncrVAtd4sIgsSNEJASj\n3ql5u75j8aR4fvcdaEfD99A6kep7JmZj8QUxXM9KO2hZ5NB8s1FdA4EKu5Zt\nlaOL43eIfF2CMioKvcsGHVd2LD7MpeadWMDqcWYVIvJo+5tLd5kdmnLMn+JZ\nFlFM3Ggzca2dgOAPHDV6wa2LE9NwCiqiaD5PO9D2sBkq6psAdJldTN8Am0f8\nfSsbdppUDGICk/jhA3X/wwTY3uPgfZqTM8vSpQRdJIDREwB8P2EUjK3B2mRP\nT8EX\r\n=qxwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/density":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/tab-scroller":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7ef986a87.0_1579289511509_0.9808794403271399","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/tab-bar","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85c0e4313fcc710511843ab2fd28b47f476817c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.29402e2d4.0.tgz","fileCount":36,"integrity":"sha512-0aMuf0g9a7GsauKbdAtpo9ZVLTE++TIgerEJY5p+6umaTfek0HCNU8EPLU5FGJjs+9D2a+Caca4at5I4rZiBVw==","signatures":[{"sig":"MEMCHxgII1yYlecMEaYQXPUeQXqLKloyMYJtkZyEHVRuDIwCIAtlSSbukwEsf1qKgmn8p2rRO0mk6Uq7X03OUz2lOxns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvnCRA9TVsSAnZWagAACJcP/isBQ6MXsu6jNp8AWrdi\nBafmcUemdKNMetGnGu2DzLRRs8z3nKJcesPfUD8X9EcNcMYx8/lR5/hd6kDj\n2y27RWpxEtlpd+DmkQ44cxd5P52FKR7xKXx8KUyJuTfSuRGRcIv1uBiIktSa\nrP+GMTZxR57qUxsniSpgynxvol5f7Jh5qg0OgD3TM/XlV7In0nZL3yPekRR6\nFvA4JxQ42MNvGaii4EhF4lQceLPkfKrX77qXqqPS/Xy8ZkcKKDv/C4R/NJQ2\noSB32OmGwOr1WViRKVszZRZIVPxAb1W9wxu4m8XH4maBjsyh+8zXpw7ujUH8\nqc3QMkUhqemf4ah3v6IV51IGVs5gM2HFZUbaYGwTBzB3Fwv/BRRl5EcEtrE7\nOA4IYKFRyGt/HLQ4jS0dTKR/yDkV6Nk7oAoiZ5cC5V86JnxACmlT3SCbJypq\nztDOrWgvJjsrV+d63D02jo0GP1llbqVeHQfgTDhJKMc08aqxljS1Gg4egjiD\nMMT832ppd5cMdO2ZgKybtuxhxBJC3SjetHlbVw4pE5J2Pbkpr84yVNDNdM6+\nzB3CRFvU+Dk+sjNgfYC51dbn61ffTG4zD1x8pIWcZfmEwOA0WRHzOReSmsrx\nFMhBPAmY5FD0pI+73XQmFbGiv8jEcmYR9J1bbfAp1CMH73T1xjau2/uTNxjQ\ndZAd\r\n=T+uO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/density":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/tab-scroller":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.29402e2d4.0_1579293671166_0.5225394435129522","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1aded90c15fa453ccaee99cba3bf91572aa52f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.2b3ec563c.0.tgz","fileCount":36,"integrity":"sha512-XsvPnsfzVfzzps3dlNDOqfrDnfRoNSFS660oRsE02Am2Xl3HglGOZWebQGM6mBuHVc/B056KwBz7TArdNHl3Sg==","signatures":[{"sig":"MEUCIFmyF+1cRHji8j5Wyul48fYoZa4B/WdohfGblvkCcR4VAiEAlb9g59j84DPsqueoOaKaG7hPCaNN7MsYBpXRuR0ln3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9qCRA9TVsSAnZWagAA8P0P/3DbwY8BhVuYslv2r595\nPE6m45fuBA1yO+zkvgobrjaolm3HW/skQeSXjJtjdEeDZUhFtIC3GWWT+ztg\nuMOldhAPoqE21wHyIh0uKITfCrlOy9okALPk/GsSSZpQ6gCMDeb/Ut5Ibywf\nwxeIy6yO8rGqQe1wq6jzFY2zMjTEYWug37KvU69o8Gc0SIJCsEJ/MM+/4aT7\nE1JlAcvUm87sURijlzLKHCQwfGhWsJajJ6mZ92IDLlT4NfA2MvQcNvjUY3Yy\naaq8M5Dls/xxC5pamJgba7Tm2DtW+COmvPie4nEAAj7jFXcnoU/hNqCnzCST\npKdR9WdhzOnK15uv34tdJu5pn5Tvmz3vBq1FWVhZOPIorl7/51CaJRrWQXlU\nJLQlMkQvLQTHMBpR3GRcIT0zpdu9gcktI2tgoGPa2Yk2cd0M+NjvZTSCpzgR\nQFFRgf1IZJsJitb29yMXHvjESi32BYRCDcSZ+335UiJJ3tVxLk4PWeiR0VN/\n7DKWYx2c3TBtBVbN+15q4YZ9j1dDvODhNhMNRUDVbAqTec0E4fEFtqYN/UNb\nu5/ASUVtI+nK9zPlnaUPBGZxGXZtcUZwGphwROsAzXzVb5MsrEo9/gPeu7Yo\nePFvlVRReaAfQq0kS1Zxmt/cncOZqk+PCDSbOajYmWHW/lO5NV0j+vbtVTSw\nuuhY\r\n=8iX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/density":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/tab-scroller":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.2b3ec563c.0_1579302762489_0.9313023015776694","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/tab-bar","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc8800a61f5b422b97c6b9a1b03c1f559550a355","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.e8a993677.0.tgz","fileCount":36,"integrity":"sha512-//xzUmXcj1SbUPzjQOx+cMhCB//NHDdC0UIi4bJbM1EW3EMVqGoOJqqKVwBI7t1Et2JB0KNDtbPm3T06H/TIFg==","signatures":[{"sig":"MEYCIQCGSrjT6JVf0oOrN1PKxfvu9rRn6JFLp2K3yD8jjfvpPwIhAKBuwLnvteAXFFrUwnMnfcd7TXA+ySfBAukeEXb1o6sb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJywACRA9TVsSAnZWagAASb4P/jau6fwbf/4lw3Go7+68\n6ktFzK6McNKEShB5hgSo9BkRYzTW2uPX61t74BKF5TvWH146neBr0Z5SuzJW\nDQxIg7eh0K01M0FS3ekfplPABFtYGjomJDjiV/an0jMhGy3W6Few74V+A9rK\nal63V+ihF9riM3G1X3s1xsHLBZxEBufjZz2n/8GFgFF4VQPUj/zDEzOuKrX7\nGTb4ru9B8Qk5RqlGBJgvqZXk1NGrn7lR5YkqzcLNbsN0VwGj8zKzsvvshojT\ngg7CUXbtvKoASFoDtBWGdx9cLhmV24XgNhJnj8RUQdP78UGhiO1tlD4yrAZL\n2yCQSBcpPlbcPPq2Rv9vOkgx162awmiT8C1CGcY13ag03jaWtq5RjXGZNOJ7\nErR3cV0wdnv4mTtCFtpDd0GVoVQvDhq8j4ckJxUnSJFW8bsycwnVX3o/PbrC\nFrT0s9ezKETbXqBSAn8pSsIXCyb9Ou1Pd337aidNFTmnEgpxignUfS5KN6UH\nNbtSgTWXYnZZFq9gfZvGLQZpMrP5nsB9hIgtLmfjTJtyAAgmWpbQwwujV42q\n5sMbbo3Wz+G3KWXa7Hyj36A/xUKJo3q/99ujhv3a9PoIqU7WWPmAMLr2ziPo\nazzHt52WX9f6uMiqUqCKDt/MR0Z/14w0jtAYgR4aomTtUgzo6XffsvDpCugn\nKREm\r\n=MVHu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/density":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/tab-scroller":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.e8a993677.0_1579625472252_0.039162607497804425","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/tab-bar","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a87a01bf7bc5fcd326383d0981c4fe713748d628","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.cd4903304.0.tgz","fileCount":36,"integrity":"sha512-i3vjMqaQ7fSQWBf0E/ymOOvZDB0cqwRfh1o3jh+teSUxtqIa6mfHL9pQL9hwSbu1yu4sOwBmHugRKineijU5/w==","signatures":[{"sig":"MEUCIQCOfEIAixK7L9KUZXLT1E8QMbcFA6COziHyno8hNKrP1QIgRO4oa6hzYBS1oVP0hD2tXd4M31m03v/xLhAIZvzXDH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ29JCRA9TVsSAnZWagAA6YQP/1FoFs8PmGmVvPRlcyMg\nIg7q9tIV2yyuPJ4vCw3+mRotbde29JdMln02y+c7b292gpM2JHYMrRlmeMvc\nUF3Yi1xWeYO1KcPOxfCchVZI5/79xCfhcVIe3bnjRtZPc2rAh+Rd/hlpYo/S\nDCGrq0sthh/eBnhFjS67jcb9DAS5iv6FcJWA+YA+6J8n6FGlnT4zZaiChR44\nNZzetyaiWrFtEy/mDEdYef+PoRmG87UewPVa9DuM3i40tQchMvzt5An6Rd5y\nHAirUmaIM2cbp6M+kmzVsDumFUelmxosqPlUokIFv36EZqoszw/S7b6+nGus\n2gcqqHNUDXG4Lel9onSuO/YWMOdMQAbFB+P7S1M3aavCD0PQHMODn0Mv8RKR\ne57kMwWYbrL04a4m2zKOHo+dxU9sewO8Bo7no8yYJWTMLINMwcxhA4Ydwh5Q\n6HwonXmJy7WVJnskBa0pBAfeiT5qvMcZpA0/O/d7eZzuE4ISASNSh/w/rNXA\nOmQ9mFk9fWkh4Hf/p/OYuIVMwiitt/8weE8WB1pjHrSK02ilY3+zsIkIviXB\nRM/5MygbLWkrcK2SPtvFKbo4h69551S6Lmw0yhQOD08Mj/q6/NZuoPh/9c5S\nsfknsNHCbGX2MEx1rHLhZsx+6+uiQHPVcSkzcyAG+x09q0IbM1zFERciOGwK\nnbfC\r\n=idEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/density":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/tab-scroller":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.cd4903304.0_1579642697081_0.8520264034252776","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fb1b392238bf0e5d9efa046b47131776d8f179d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7e4b04b25.0.tgz","fileCount":36,"integrity":"sha512-MYsdo4/+wroHt3yICPsDFv/a2Qkdall/xn8aCZL4q/Fr5p08m04QQQduf5CSGun5VFQgO9gASENYz8hsFR8mRA==","signatures":[{"sig":"MEUCIEv9qDudR9iL7OZlbiJqUmyDTOQFaFjBuop7reFhuTldAiEA9Xh2BECmXGhv7ZCNLRW/N+s8qpCE31RvmejnwyDxQa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ395CRA9TVsSAnZWagAAaCUP/320ZDNQIdEG7Q84dwmJ\ndrUhICrAcp8F2aah1JO8NZ6w63Fpc61G9Hqo4CWAIhfldaJ5XszjqEWNtDVZ\n/6Z+0SLeLsOVkN9WdkH4wzG0+tuee0cdKL/ktop2/XkNR95uW0MqQJ8Y0c64\neHJcw/KJUANWbYpUCJSbnDPEyNpCoMBsdocD0OB3Lq8a84qiPRcY//mqmvk6\nN4M9JKjz87ubsc7mrIuvdTsBJ8jIr/Yzci1q9EXKZ9t3LPUH86UizjSrkZ0f\nD0iHcwZCgrYI9gAdDyke6Qby8aYyTX0F7+6vzIh8O1+5waXOsPEukUyyHlMR\n+S1heRznTXNmP7qxTlVM2Ca4NPNEClCf6qsx/6qR4+D6dbFgQyoA7Y7e1o/Q\nfw0w3eRvEYO01jj/IxOpieth3jR0OsGKZ3K9byYpyzXNf49mFKSInCnZnVTh\njJQSHsayRYPH+NlNcN3pE1/o6kld9HQQFWhgmYYolvpCA4j37ZHWeew95AYb\nZ7bNWD/vrIGzduvtblIYxjgRPcgUebMcoqJNTNffqj06KRASA919qq6XN24j\nUrCpM9MBVHa0s5u7cINNsMLTeWfPnatrPjQZdkAKIZdRx4j3BancpZPpUkrq\nyHQ/vPEyl/ltDryF1hus5ectm+KWIAWw/13gsVeYYk1Hpj6v9chPvxv4L9U2\n347w\r\n=w+JV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/density":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/tab-scroller":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7e4b04b25.0_1579646841077_0.22906379350964468","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c465a6f263a205be62eb29d59dae6fe540ea473","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ebc296937.0.tgz","fileCount":36,"integrity":"sha512-937Ey5CflsCmPt2EwCSAE+fd/mvF5ZZgpnHcE8L8nF4aSeogL3QwDigK6IFoA48gaUiXtdp678Cp2aVumMPZ1w==","signatures":[{"sig":"MEQCIDG5NX7m1xCXKgChR0zrP4YPgzhLgr9fpkWNo2G+71zOAiAwKnyxIT0ZXBJdJCWkt2eiQsMw7rqCDwtxpibhvEtDgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ403CRA9TVsSAnZWagAAM+4P/3qYPGlJh8OINN1rTTIl\nzTku2MV54qrHB02W7A20cM+SMZ4/Ydp9t4Ogq0ZazKt/AyLoSA2n/IISjFAh\nqoBhI+5J18eBDavpE29h/qu1//Tzpz8tMMkmSTHBnQoZuy1NOWDWs/vyh/jI\nE6FrwZU8psV83WI0Z494Wib5ilZhpT78HShWgyU8aDrbaL6muqYqkfHPTE22\nyclMEco6rtscrRY0JYfCmxkg4hnxATZw5nz1x3kY+rrXZeXz4jd/co89J7xy\nPAH9pTpivyqQrUZO0LktSD4eA+5wGh7AKHe0Ja30QA8JQoXbSqWENMZcHZ9m\nik9y9CzSH785pKGIjr9LGUliIC5QIwgwzaAV3S1/lzH9BPKLFsdhaKWF/u/Z\nSzBZhrkXkMu7eJwQAUJKsC5vLpHXnUNmK1re7KrzJ2Wzxf3+u3IwBNE1fLqS\nyaFfu5HjUXdX/+j7nRUdxbAkFohFle9Nxw4SFKNtK1W3Qy1mWeteJjXhbhl/\nuuocfVv5lpN3F98esmlUnJrck2Z0i8xTTYq0urSm/MTSs4MBN/b7hvu+O+99\nhUBWAl286YfFRFmLDgHzr0pmocS7MW6bYwl4S1MXRP/JQLEoiGnEs59XHPsR\nfDYnuOkTejLf12/KOX1LiOl+B1P284M96S31P6byAFSQM3urLZHCVIFNAaZ1\nhvDl\r\n=QcZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/density":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/tab-scroller":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ebc296937.0_1579650358947_0.7284004452467043","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/tab-bar","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495d22b3835fc765732aaea870b96ca4ee1f5ce8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.cf33f113d.0.tgz","fileCount":36,"integrity":"sha512-6kAW6tqhLV0vn8a2k05K2+89bYEmutWoujUaXw4fRo2dGgiatVnuhn06xtrl4iVCraLTJG3d2nRDYujgL1ZpLQ==","signatures":[{"sig":"MEYCIQC22XehvwKZiUInYgIqqD9KCgwMDCKseeIWcygDBrOwYAIhAK4G7AFVbhKEJusKvy595jmQfvrDp/mtTKEnAbf8avTZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QdCRA9TVsSAnZWagAAlAUP/iAV9iP2d9c+H/ncaIxE\npnTRlOPMT3O2PM/3WfjALZ2YkxbOA8l+jihYQ2bACGW3qZ0s1Jq1XnjIbWk1\n+yiF4KPYgl8rmmaxXSnd0F0uBlj/hO3YVNmeSfu5INz6jTUWvdotG5XYczzv\nHACP9GVQ6GgO/m6wRXE3yqIFgf7CxkDaVqGSEPqDbE4qGUjay9U3LTm7VjSW\nSasaW6r67SfxppYkGLfdfwNpB5WdNBp5F+4iGeKfoQi148A75TfJeD5tow3F\nNVQTXkLnBoQCYuETS+h+G64vVMdk3L9ZhqiZwMvs9BCUjX0NbeAgkUOsVz+B\n31/T+1DVNOG9q3GcJ4suiCokYoFTeHzd4WxKd+5pBAM83hMrw3hlCiGZJ/H1\n4ECY39JPuH2qYj5Sx2hDNx5fWZCJWQEgO6RQa+auINiluggTLXnBkarrqMAk\nuHxhFuuA/8tRH7nF43GXayWd+L23p3M+D7kzyLGCYCakMSKwqJRwkybF8h/M\n0BVsNZDSOvnRXjackupMklJdCBRz6draOWxtFRGPilFsCyCRU0SDr5TxncFO\nGU4RTYW+hT6/ruBE8huMTLbsre55jGZCU2sN+jCj294kPHlHAzUkiH7TqHdB\nlu93vuRyoFvjEbuiLNk5uSCrixjFY5nSf54GSkqreIwVeW+qbQeur3K9JXWl\nVFln\r\n=huft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/density":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/tab-scroller":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.cf33f113d.0_1579656220702_0.955960692598264","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/tab-bar","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e51f9e154715dfefa3c935e5e10cb4077c13af2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":38,"integrity":"sha512-d0V0QysSGSsLkpPDrFZirzlXTR9DU2yZards5Z/Py0Li2BCL03rsbNyqeY5KJbXPQFWDgFJxpZzNiYNN3Kbucw==","signatures":[{"sig":"MEQCIDWGiNA8LMDVglR5q0JSfxnCNFywg3Rnpz/iEaM3B0IjAiBkQLqN6aJyqyRYNSOb42jQez8CzKe3fxBtwUxMgDTcJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH7PCRA9TVsSAnZWagAA4J0P/iZfze74QtZnPRysQ6oo\nVQxL5uUz1RLeNPCg3Cz2wec6uv8i0ZhBbtTphbN7uVqFGMW98dgjI9o18qTJ\nGf3Jk1LK/nBPB2tYpJQ5bw7Q5k9ADEHjs6u6XPSX2cSXHKDW/mPSTP41oDCV\nadniGhYszbfSIkDl6P9zQGRt/0jrcG6OlPp4b2D/30tbEnJBFY5C2y6deqFW\nPDBwDW9Vr8feqeljn6twaNEzb5Nn06GkeWRugk4mqc7vFXPuunsmYv2Jq6dr\n8iIvs8PYv8urDg8c7yBWgw9fOf8qXtypOfCmKUcFX+9pXe8EMxl7L5mo32an\nUc/TCAegNkJ6xdpyhww6DfPZcaQjfdwrSo3DjZexTq++beJoP+JnnU4CCL9N\nmsIlPXhQiZ/bvefZlF7fL7VLkXiiMEipUWEmEhyEzjpFTgv/JU+099ZKGOOW\nysMkfm0+FnM/bV1r71WtrJGg8exIj+OzLXUD2/GWirigtPBsqwaF4ANQv2Xj\nEXz8CFwfcf11H/BTsVpFj5WfV77Ayu4UVZR6ps3YglBhCBR62kGTq56CIQb2\nEurWFMxL6AognM857m9sS9l8Zo4POuhEREp/1wUybpi8uCjj00OOFS7rG3qZ\n6kGeX9MgVY2DX330KhKfqLM0NG2BD3AmFGbcbCgSsU9o6IsghNBNqzXdmJBy\na1dw\r\n=oOma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/density":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/tab-scroller":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.e1d5f1be5.0_1579712207397_0.10362348307334868","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/tab-bar","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"081ecf7b57dbff561ed4a08214b90a25b41695c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":38,"integrity":"sha512-YmLRf2S+V0IZnD7TjeBnYL1DdRcF5HjZBnZLx+DkAJrhNTLDkZ1N4UYz5hcHW6FmIG48Cjw8PPIa3w+zKUDp3A==","signatures":[{"sig":"MEUCIQCJr5AABU1mAJ/iGEK7tAYW1X8MXtuXzk/TP3kWXRqc7AIgO/Rxv4qdyIxaJ090t9sS4MMBPJPHreTdmSe5qLD45Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1eCRA9TVsSAnZWagAAgacP/32103tlbZi77pgIcfs5\nS0q9j54ZhLWjVpFbSQcD9LjMmjwB4tOSiSb7573z0cl5SExH0j4sQzqLV9t8\naG2bxuqvj4cSd3QFVpkIZl/Trw5MJ8+KX64BJglM1XtI2qWpF/aT6oUrVEBS\nnbhauohaUUv/0BpsERZ+8MMlCqF6OGexoT2b2BwjBGZhMJBAvIq67qnQE4Yg\not7KM2ww2Kqwnt6j5emiupMAZ/rkUERECSoCzKp1GogJZ/FliANFhy596Y+J\niIcpuv0o35luVfnTYm+w8kYqjUX+Go0lp9IvykDKJoIHmdtCLlaFhmUDQA0P\naZ6jRwan6oUReA6tffsPQ5vlCMCWqrJIsocKeyrVJR+qF+SrzPPTRdM374nk\nBrw1VOQAucRc6qAF6M1GiyZWq+aD7sXAfaylhuvbmv2PLgnzDeHrWmL6HgDW\nrlJHGyhoB+H3K3l7qEevj9s4nBv/5znj5Gz07P81ic3euoRRemHQy/499qQP\n7veBUoMhHLwKVHZQnbyI2iwcb3qanuBqhHO1/7Fi2oE1ajlgbSREZCXAuC9e\nlW0hydMAMftMN0W8E5HFttxHVKidrI7DMUtAWlzbFPszNdg4YfCCfumjX4je\noSrMt1N7aBdAYR5ZsiLnHVh2ttMQmOoV3BsswHDMXu2LF5U6325nQIQFxxc9\n/9CA\r\n=m4+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/density":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/tab-scroller":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.6b6a4ff92.0_1579715933992_0.01233723957892452","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/tab-bar","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e24a71366ea4333201b496b3ad62ed643f0cc85","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.6092f71ee.0.tgz","fileCount":37,"integrity":"sha512-1NhyW8cnjXHdGLlQ7oIYLoJ1w7xZUqJMmsQTvntJDTXoOllL3xUFLW1AF3vIf8tQb26tIGLeT5O8+edlbi0Q3A==","signatures":[{"sig":"MEYCIQD/g9wOABzdGzxjazCvjrv4cvKVSVHgUKXU50GgfJP3oQIhAPQvyAr2jB0yM/5+IxxjUv6Mhql3rylgeWKzlMuYKdNl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLwTCRA9TVsSAnZWagAAVLIP/1czttcuUBMvRg4ARnMm\ngyhAl1FNB+ZFE/xYUg6vl4kUhw/QF/ZX5xHmZ2zLicNjbypeFy/YK48ZITeE\npoCYhf72Fyhzb38v4m5vE0SjP75Nn2+M2blDPuG2xFItnvrucgu1ZUgRq+cG\nkBPEziyvRifkCAWgaRVTAzi4dmaIHeizis3sjfaAfBWI2d06gQ3BtiNQ9Uzn\npqTk7fNwbeS3+K3ErDfHPc9rd/TQCVFsrtebKU81BFwy9qOa9CJKMf0qIv0v\nR9Z3LCIL/HEvOE31GCAYjGevS9jXi2KGU4NzYNZRg5d4XtLrxTkHinfJ1N+r\n3v6bCd4SDXClQHE2JFOl9InaVfWHJPEyxtkbNlRV+Ha2uJkUp4szoIqjcrIz\nqOYlBB//vYxGYwStxkEC1/gsqsqPWzmzYjbTDQmSiFrAJP6zr3xc3cXTRMNu\neULsAWv6HSiEqC+YZ1Fs5/149brfrmfwAdZrWolZzvIHWih3WlXvZ96oH25X\n5hvMF1qdKtZxHTCEQOPhQMJ4gT/kJLTvdjDK2vNh3/7ug8KcsV28EWsq9rc2\n+f5yP23hpf6XCmbkIwxaIS9LIvCuQVISbZc0RY3ztWoJ4hS+PDuwSOzBrcjh\n2jkUMbdsXYZN7Jx8iEslLHoBj6GFZO0/D2/f6WiymQLS+kcB2L5rv+R8e/1F\nyGWk\r\n=8xJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/density":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/tab-scroller":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.6092f71ee.0_1579727891288_0.2495173284216936","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"031700e2052e7819f4dfee2a2063b5d4acb98e2b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d8d95020f.0.tgz","fileCount":37,"integrity":"sha512-lhZ1RVqHoy5ISYU1Q1ZTb/Cf1QsJ+j8na5/fgITMkZ0iwu+lv3D+AwTo2F9cPUQIa0WSGn8s5Ja6SToh1S3CuQ==","signatures":[{"sig":"MEYCIQD8ntttoQToSugmE3cjvO09LMaqrjv8SRPYsXUVLQiTWgIhAIRIlUDJek1WXNyGOw63zYGSU34kwehp4JXmYY89fAdJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZlCRA9TVsSAnZWagAAAiEP/1B5f5hqC8QBoCRv0I3Y\noILsA1oOLJmmHvt5sAMyzRBQScZ2fCvl2N62TPcoG7qZGZgsQ2TkRXCzShej\nfZQO0+/06qsY1kRYcAcS/x6v+P9kjPZQzzTYtfYcMBlbaNT9ZGr7BZ6P7CqU\n8ajUM0oURVKlVu3WgNrVjR1v3imXntmkYO3ATMULU2MrAVTRso58w7rfjY89\nwdzlE6lZfebreFZUqvHrS0X6rI8djUbZ47n94b/Mo3tKHlpY0DNBFwosGpy1\ngCjEiiAGwjOrQelaGFcA8/W55PNd/nWRq91OnCdYfujK9fldrWz+BA5eehQG\niGoZ4yeO1fSyAxZ6P3NuBQL25ZgAv6qbr1ZDgwiFi3Oc/wLZd6hknkBXBd8J\njcMuj9OkJALgq9sFCwF65kfyBI6I1jydMxBKUsNwqaJFuS2aajGIr0ztibwr\nAMcHABHgLai2M0K3RbPh4M9bvfREoRv95newzv7Q2O1FLUA3K6QAmSUzmnST\nhl14z0Rb+5pUNbtJxpF6U14PNmqT9MWiUARHsFQdyeUdAVkZqMgd8rgjlZ7C\nUDPGhJRROSOBswbKGj+NjfictvtcYvo2LJwrXZslUPcPlZeHrBrIFYH9qUnn\nb80pzsvSwQksZ2Ck0qkUvdDMQxvGucRIAj5Bswoyvk8aSCpKvevIw32EGnT1\nTXAA\r\n=JDPt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/density":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/tab-scroller":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d8d95020f.0_1579734628548_0.5705554486481881","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bff8a6d5aa49c1ce69d62b9e2399c6e32c670b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b7facc628.0.tgz","fileCount":37,"integrity":"sha512-BM54+K8fQaFR77H4PzK7fCokGbUSyDaOFy+n0FiGiKSbXbCNQsoju6P+K/2keJF/0Sud8Nvt6ku740lYXhF50Q==","signatures":[{"sig":"MEUCIFOrKHxy7M6ZoaGsxEvCR7rPIZR9BsehltMzDBmZrUOWAiEAzppKdI7/SCxSQN4CfmddUldwbDy08KN9DZ4qdir9v6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeJUCRA9TVsSAnZWagAASX8QAJF9y+sL73WZCZdErHOe\n0gkPx3aDCoNhie0X/bI83bZfH/bwjiyeVcLKGl9/DaikJR7b56urbi38+wUl\nVYEY8oiwwL/RFxFTa8D6nphuJj3SbG0gwh0aCgQgoAhY8gE2w44mLd/Na4oN\nwQqM00Iow7tACqJfnzoTCMrjueQAYasmnZlScCtAek5IjF+ouFjHMjuDjbYK\nnNEoPNpj0nx+9TioSZ1N1aCpJutnn7KIiwuqmHgko2jyxM9EnghYKFjoaFOC\npTELzXuzyfs0EXm6WjBunQLHwagQ64UUvdZbu80pSfBknpshIsbs/OplLNJu\nVObjRDqpb2zJ/TldT1cg4xkM2jntmnzqTScNlJ1fMAuqsU7QvwLAdypupQaI\nUQRAn4heRLG/5vW3t3H6EY76sZz8nubX2zO8CXGzWZO+X7u51mqmOxWglzde\nN4i204Yz3887YkDtzi9mDtqE2Dh8JIFvnrHFuZM1Zb4tWBNj3VNl+o9wmWAs\nXOR9oKK9nDCIGqYIsyeSINFmidcRUS4wxqS7/d/udzItQPjejFNFKFJHuTvH\nunhg5zdPcuJZPmk9ql+MhMcC3NSELvOKf6QludRADPFWiihI7GuJzYRMnxPh\nSA9ykSLhCJKId37WktS1NRYIXmEORJTVkWq8RbN3n4jyv9OF2BzxeAzbTtNe\ntkJZ\r\n=5gUN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/density":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/tab-scroller":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b7facc628.0_1579803220381_0.05155590081246442","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/tab-bar","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0ef0acc9aaa6e3b6b984101614027f178941bf1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.63f357dbf.0.tgz","fileCount":37,"integrity":"sha512-8xI2v1kRkCcerGi0yotlJI00HajMndLuPwoCu2+vvXruRCbIwSL+TdunGf0cHdRhmqf8UxJkCIkfguLnrMSQJg==","signatures":[{"sig":"MEUCIQD1noI9UaNNCCdcItyFZ3GkZ9SrQFiAlyqx4bhRDBa1BwIgVczuIwJlMPPSmfw04aJ0yKXYh2cvlE3XcCR3i2ycGYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhaRCRA9TVsSAnZWagAANQMQAKUCI5z1OKnmAKyaCSE2\nZxGurLLQmNF2JoNlFIssXcVnvLU23DRgTkujQF35/hA7v1XdcOfPwyHqvTuB\nqMkz5q0rDsKqO8Qh+KIAdt3TQLyz7fyvpLAXNQcrlOdEeQXh5PsI2+VnUsDz\n1LlLS6ficUUPz31344LZeDh+brl2VLQZhzpJ2z1a62cuYYlIYXgALKXp6ghJ\n8IVNHNPJT9Ve+BOatT+Fha9ExQt6PzS27UBkd8phEz5zf3/HIIyv9USFSsTY\np/Rnf/lt2aDAV6zpPdGngcJhyC5Hpn6Ube/ZaeTzYChUCamfDGtDV9DRXd2n\n/ZTTrSvr+2fgu6p2+ilaj24NRsMRMP3oJiC8xV2ezBGPw5I/It4oRHnj6mEq\n4B8DnxldNvdr9aGE35zhEdPLuRPjmLbsg3S2OgctCl2yswz8dxx5rxJDLtL1\nKdV7AvW0f3qwxcDlP72Sw3iWoHG/pdaB5o0UhGhZnm1ls16CKkf8/wo4crNa\ndiwtS4bDAcoPF69hAtf/M8A8jAkrF16aTNcFryZW0zq28QvzC9ks4gh9x346\n3geEHk12ANBEfXxasFtUFBEMz0AVGCYOCpmmu/+W3UbSpNGmyZHnMjICuHgE\nSAEYHHI4MLQWsbwsKRtj7CH78WqN5lx/Q5hlcXHRTxuw6/ra0CjltfYCKgAN\nvXoJ\r\n=Nabe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/density":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/tab-scroller":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.63f357dbf.0_1579816593288_0.026449796065606712","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f60d77aa9bdabdfff8254d708e828ec56e9f105","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f2426d26e.0.tgz","fileCount":37,"integrity":"sha512-JjUHy4+EP9X/kgbRvvf0ctfuEahXd/btJA3le+RpxuaQnV+b/dg1M6+lZmWadcZdkiAM2UypQAARPuoQRXvHLw==","signatures":[{"sig":"MEQCIHYrSCSLXws5o5v6cYG8Uby7szZAWyfrhezm03a1WVS2AiBTVFtWVTrauz5Z4G0XTaH2k4YTYg2kw5EdoWOVKx+rLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKWCRA9TVsSAnZWagAAHB8P/0U3J15WQN9r0NTAM2bF\nVnr/g3uA0OJA8FzcA96+aJo3YKc78MJmdPCjiE4/WV5WPdQRThgplUX38sai\nR7eCvLaetT1HymCvl3YxRxiGPF8cY6jiHOPB4VKyiZy8FfVy2lWP9tD7TgR7\nBFB3UhjzF5bLUj5IoWDGrAmUQ5z9v8mu0t/iPqpmpRAyEtp1GwjoWorFx6+r\nfwKJYR2gO9l0ZIQd2QaubF84weC6Ag7pYh19Fp6yo1Rp2UcQH9q85kPnUywd\nKoVfU64cGzzx3+2EeKny5f46xTrwaUzlgTD6F8vjw0eUHGcdZPhjpuyommdw\nBtk+KM7sZ21a3X0tE+ikhZzvXCJcqWkZJDl326X8kwrBX3BOdGEHIMajL1nj\nPnFW8xdhNppvW4IVpQrqI/TpHnXeB25GOB+0r7WB+tmepHRMWqP4Sc53WrnR\n3qTxmyuCKucrw5Z9i03rHL/PRa/PUVRUgkIzfLSYWdIDYD8UYublQ01FBFH1\n33YlVIbmc/w+i1iVhlG+FRySXrnWFmJwnY5CZByZldiXJVM5ZBSw0DpQl14H\nD56aWkvShOO8zhPQ7Mrg78jR1KB5oCdrL3tSfDdGWHA4caMm11z18PY8HvF4\n7sOzQSLVos3SxdCqgJ5RjAzvK85liWq7Jhyf5yHM1oaADZrwjqttHvQQngPH\nZAPA\r\n=AumP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/density":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/tab-scroller":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f2426d26e.0_1579823766323_0.24791186089543849","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dcbebf25e219ebec9bb6eb4a6a6a49b18643d3c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":37,"integrity":"sha512-hruUXNqc6igBgwpvh6DdK19VL0RF+uPN84ZvHfDlLqew6da76i9NAIkxUUsuXnoWQAdACdNTD4t4gfzOA/sCWg==","signatures":[{"sig":"MEUCIQD6MECxvUmE9nyqS048FbxMA+a4nm3tHlhBVDMBjh5S1AIgKiaT1mSUUFgRca+HCakkhtFoWd8Ywh8AVL8gm2mIRMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/lCRA9TVsSAnZWagAAoZwP/2uKt/L+MU67yVsBy6fi\nqaUh4S8NGrOx0JKFESXHK7XlAwIxm6DMJXKePKe7gzz0Y4XqXdvFu4R1ZFBU\nC6Rfav04A6goB4uXXpS4F9gnsDuSfriC4etVVErwp4EmRGFV1nSRYFnjivQ+\nrPj97BFMaD/0yJ4ikhYp6oyNZ/Yy6gu6H9RbHNBT9ziml2tT/TExzhtaWOCN\nmuUvYsWh9VA4RKDgRVnWywbs6LkRXb1qiodmEWH9q+3HwPrN2WvAAMTR3JR6\nPGIomm4fjNilGENOEGXkUU0cBXYXTsUok4LEg73GTOVc0yxTiOPnUuE0i3BT\nCKfl+sGME8xd7L1J0FX5K3HilSI6bq6O1se6KjVCup2dnTrZ0Dd/PV/MheLM\n378bFLwhh2SQXGpLR/0J+wonWekVqrIIIxR/XpzVVOpCfNY6M5vFtyKHa4yb\nhewb7Ny+6cvosMtUyu6ErcdSv4A2CjUSemRrMuktS9Gb3Xrs8/fHDdVNaIe4\njeMmLkrlzEcb7BUFC3NSBLRgGbljVy1XCKSfb746G0q3NO5yrIL0jeVRrS6w\nhZTp3h7FYNrk/cuUSMqiYzkUXHaxiOM9F8P1yqaxHpuocQoWcxSYQZ/uAQL1\n3TJmJ61jpYrkXmr725G/UEPD3pKhi8IfALOOrLiUvbuTFl37cSvB75xva99A\ngfXR\r\n=jtmr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/density":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/tab-scroller":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.7f5e0c23f.0_1579884517421_0.8159954497193727","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"769ce55846c58e8f227654fddb46f3cac0b011d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3fc3ab520.0.tgz","fileCount":37,"integrity":"sha512-LJQucfX3rlZJ3yTd5kgpMyI/YTpIUGK8PJyCA0FSw4SWgPDKys4mHhyuYfbGrCuddHrr/gBTdKvbnJI7NQvQsg==","signatures":[{"sig":"MEQCIGaOkTTSFW2GGpSAllkQ5ZsO5bKLVWx8LByENGjDWJxhAiAG2YDmcr8kOcYsDlYqj+EBgm8VG1ZsjKvKs5J9pMX8ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyfWCRA9TVsSAnZWagAAH8YQAI7E3Wp2kpg7Tsmc3q7M\nCZO4oov80UvKdk5LuY6SD/mP5/nOktYq84GJC5TFT4wlTukcxCueWsR/djDt\ntH56r07P7yJi1KQdFi0zT8RSFipBuJfoiqgYAg2xFn+kvfWfLKAJi8HahRr7\n8fbN0ZF5X5UYnMEMcSmLDQk3bNLaPxeAYXzyGwM6ow5qLvvrvWleaBpuMHwV\nUb3rbyRCujJvWFlsONj2Up43m64wndO8QPFMBO4Gh+Fim6us3MQRmjGfxorU\nntVxPOLDXKQ7DcyIzNwMORea/gWIvgIERyLOI1wwk4004V2t9NH0hBTTr9vD\nT5yTVevFZfG8ztUT9S/G4Yv3hdalYPLuh58ENCbQdQFjEa2/mGR24R3aNfAF\nZTnEhOT+emC6jSOEbU6ThSRkCw6paLMOz8UC1FgADLHBXbeGP8VVtpv3Eg8w\ntNtoU6Tr+XoDb5GmuEPFkV7YUdkcrTBLBCtj9ixn/iKvJ4T2XY9dyaUEDCCm\n5lCm1qQhDxU2rtO0+IL1/T4ws6j4jykTCYRIglnBwiUN6NMvMGxARXhwMYqU\nWebojqhEEFvcgQfr0HgePtFSpJpaHrPHmbvja7yIMZr/7S4nmPVvS6dfFvG9\neWSTfXFzrpAq1eruBFnNp4DUISPTamX6S6cSvxydJ8DcKVA953n96eYEKIut\nzY2Y\r\n=WSmX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/density":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/tab-scroller":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3fc3ab520.0_1579886549702_0.09406811380047797","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239a9ae9c66ec2d088968e665b6c2b456558c24f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.80a4d326f.0.tgz","fileCount":37,"integrity":"sha512-1CMKdikXei9toKtkSRdcxV/8ZT5TJ7Ml0+xhAQmQOUUEKS3nqOX7j2KTuuQAyYndlH2UNEXoF33jmHtYNOOvUw==","signatures":[{"sig":"MEUCIQCfk2pajCgB7jP44GXW5UGPri2WHSkrCZNufpdMjJo0twIgfcC9HUAXsTcO1L0s3V/Mv3G4kjswUeJAyxKSqdwnC10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1fLCRA9TVsSAnZWagAAJXEP/AnKLT5EMpqwkAFiNBRu\nSWhoXw0QNh96uKMhoBMyubT1YTSFadmF5iN7245Yd9FQPb/gPF4ZwyZRCy+k\nflkv4Z647eoExvW+4zjxD8FmBiIVOhOHPwlJ/yFEleReVtLJN1hDCFv4YIfN\nr8wOqtB25Ur8rDj7SXOIgc8byNH1jB+8GnHmU0v+lRmchwFQ1x2ZrW/XVRhv\n1q5TLlHfzz0RgWf3GTKth/lYvR3L8kUSAgVwbIdWOqqXDun6c3jh4dSOJ+Xl\nopz3/7mKwtQwEOpfRYQRWfOTLZyTUA82rARTCWBGrRrZAtlpafJAcygHvKEF\nXdEWB09qMF0Jh47s2C+mktg6myFIyyG5nIX9c7Uj9GJBRKGvaBqWMCff5v4A\noIzfQG6HQTCxcpsla6MuSw6MEYGypXmwLxw+OPslVBap2kzf9JMP57+85gPO\nyleYu3QYWXYb/WHb6NV5gpgW715/v8ctzArpR0sNzte/bV+t0ZZH2HHsdpTQ\n9oLEiF+EsO907SUrUBM1GcXIidbp1LeWt1QJzekFwLBwUu7lGXVeFJCoX6fT\nxd11Pun1iwmxQxVW3Tp3KIIKgifkNQfUUlT857nTDGNEOhkivVB0GXIAEaFV\nZnqLtoq8rKBb8C/ld/0/WlDpO8x7kkmkmSQu213i6zXmS5jT8UEjiFXmgi43\nRr+f\r\n=W218\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/density":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/tab-scroller":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.80a4d326f.0_1579898827275_0.4787886319882195","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d88a3096faeb4882cb3aaffc68fee6b9a7af2b84","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ef7de4def.0.tgz","fileCount":37,"integrity":"sha512-aXXNj8QzHAlRgQpRGei8KvfpjQUAlYwc4vYViePN1esd9RmVtRI5mwq9RtLjPbrC1cuK3HR/mY+HBmJBfzZrWw==","signatures":[{"sig":"MEQCIAuoJMFm30xW6kT4pM7W73XMocP+ltChQc+nMvm9yrTiAiAuVzQSrcNl8k6nGn4RqGJ3fnbqBEuoXxbN6vAgMcJ0iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KoCRA9TVsSAnZWagAALUoP+wVVryePdQVDYAw8TXXu\nxEJL0Io3yxVVyJzEoGUMvlFsFW/Jdo98efL4hFXXKoxaXvi8hVG+XP6YxiQn\nClJLT88oTAnWFht3FsGPZZ12lMhHKiERMBCGh4r56b2RNUSP1GRUPh0mGSP0\nPT3FI+by8TtqGh0vZS13OF0MP/+6utAZHJziMk7IKu6zpUcKhT+UOWaZK7kO\nLGQz6m5EJk5dg/lznjigPwP3v/bwtKJNGVbm1bNd5RFSE0sBDplV4ULaT4QB\nXm/W2iUbTBZZZgZK+ioAnwq2A4+1kozsKPyRKcz9QaGDfwbMTpPb0CKKQA/P\nU2+KkwqqSPTcqSXXUfxXM95aXh/ZacQ4tDRqZA0Cb81dQOSl/gpwZcx6+jcm\nXnIubE/6dNU/86w0kl/sDRG3Na7NmHxjsl6m5q5VXDsZP79KHxhGSJr5LgH5\nljCS/R2inbzeIUvyiQqQ67E7MFh0azEinuPcpt/FbLEmoHs+29nOMw46Hpbx\nQZj0iW2pywkGKkosCsvHG71I7w9rCkTZuejH/TAygfloP7lumiZu4svMayk1\n2RO8DttAJfb1yozabfpmh8qCUIWtlVeqUSRf/wHIW5sMVT+f9gQ5nK6/T0u8\nQW6FBOYX+AR5OV1fXq9bDuRUVdJ3fVMAFLIllkdoYp7lEoWFiwst/6xxNYK1\nyZpr\r\n=Znad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/density":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/tab-scroller":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ef7de4def.0_1579901607533_0.2110891555966481","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/tab-bar","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d32c63bdbd04b5c830eda284c027c2dd71da7d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.93e2288b6.0.tgz","fileCount":37,"integrity":"sha512-7vVbi1sA1F461KHl7bQNwfaSY1IzF7Mf2yWyHhoXpFvrvzUy5lyiBHftz/ky7eXJqh47NgOJ1W09w/k43YQUVA==","signatures":[{"sig":"MEUCIQDk/hoxdW0ddXjnjm19WEuQuLc2qmMZ6Su8kYTjmUr/YgIgS5ca0AOSdqpvFqAXpNOWmeRjNxkYsayegs5lJG+I+RQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGffCRA9TVsSAnZWagAA/RAP/AopvFK3qbbmrwzbFDKT\nOw2LHn1JHE+E7kY+Rlmf3RRTCtL5r4xzLNAvjtggcU80XRmkN8xXWg++sg/c\nkOfSLtFOGk2fUlLH+B6oygLkLHZK7GD7TIaWTZaLj05HG3BFnE7n0lbOP15T\ntEuVkS2e9LG3fQTK5ik8Ehlsq0o/n7p9JQDopNZ50qsPyEfRHbrhYUED2kWB\nOtiTcn/SbJ4C0LdmslJEtk2CoLiuX92JfU3KjaVm93sUss4fKdb2PrXbk4G4\nWSDZC+KdER2bJjJv6xq1ykK/Ly4RdG+2BVlD0mXnO3CNewjYlO4vEpqatGUr\nOeFoFDp+M3UI8hok+Pz2u9ya7O85F5mdlDCnJwfB0ZiRxYnhtymO4eyHj/oK\nPUepHxOxMBiA6NryaDjGDmmFmQs7Yif0+PkHis0SY1zLelZycwZzOCTHh0V8\nZAlXLgQ6RMIVHOoDeQx11Hx9CIGcam7fekUJMABQEb6aTCfxUgoRW0WRLAbZ\nKOqlud3EQyVAw2wrydw7pLjEKBF/sooAPKXtxvpVzjkJIT+wrZlSHHbnUkLr\nTFmlceNNL7fAFMEiGt1oC1qUUS30r/Gyln+TQT35IeetatNw+ivbAcX1Fskh\n/1pANWA+fSKkIcqPmsOfk4UA8yIh9R0188XgmiQ/0ZQlJrvNZ8kR7rcg1Zfe\nloCF\r\n=PmyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/density":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/tab-scroller":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.93e2288b6.0_1580230623496_0.7360383087540427","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/tab-bar","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3a0563a12a59a565938ab87548f6bac7bf0dd94","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.34ef15f67.0.tgz","fileCount":37,"integrity":"sha512-1uNl1q9A/fGkOrMfeusiyWgeSMgeBe/MQNdqNKAq82YqqXnlC8fMqYUCGrjwhtOrQVmcClQsS42q7xCUKjux0g==","signatures":[{"sig":"MEUCIQDcfMebt4YWQjTN4s8xsslZFucMCCmLXyoLZ6coDZI+7wIgBvdR3c1ldyX3yNDxEdbZzY2yasqEO4zEXGW0LpX3Im0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG53CRA9TVsSAnZWagAA+eQP+wbOb83tbtKmpvhpG0BO\nRyM+hXd93EQ2OZmY+hHg9gC5HwHhI6EpHtOtOfefGl+dwHZSiVkIgeNlmB/O\n0PRlTQRc+NYWId1wCS6LGKHfW5CdxINblbslBFtRlW5T8OUM1O47yaciaqAZ\n78P98XMVwRjOAWF9gy7XRHPGYKv0biRMezvO4oqtSrA9GZQT0zssHSXnRQuO\nSDVYxf44h/WsnI6dczc/BPgAVS+EqooqZSTpmOyW4af9JFuTCD4FdTRAYUTM\nQj7Xae36eKCKMRs0wNtnGtFTqHCFwWZSyq0wNZhhI8MsxLR5av1B4eCznszI\nnZeaYDXdLllcnHYrUkz9zDy5V6RaEtMpa9nRZW8U63fT2I/bL9UNke/0ouBM\nRYYgkJaZEgKmAwR9qC2hUtxv4sB9lAMYCC87xdC1dR4n0QU9dZ3/2HKP8274\nvi7mhYXiDlzb+MPDNE3CZAi39GAj/izWeRv9UL/XeNhUmgHcpS3d8q72x7AX\ne7cdz0LS3dWT7yj9n02KHTcbppKYpSYMtmw51qo11Q6hGnSfS95tS22WNfUe\nclHwj0ntNjQnLn15njhh6rSAbB+BypfaTpVJNN7a7qmGmEl+To6nKK2gjwrv\nK+jbAru0wKp0TZtUtjQljWZcmriC5UjJQi2dO/Lj+MHKQAwIs1784jTFfVrA\nMeFJ\r\n=JzbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/density":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/tab-scroller":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.34ef15f67.0_1580232310760_0.08941561061003878","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"245ce0520c03839df010d7e29b2f4077e9af9d98","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d3d176ba5.0.tgz","fileCount":37,"integrity":"sha512-4bmYHHqUR7jIDKJdMyGcREWUCkL3dV4YKC8WojVzwyzQNzk+lcxPNtJDfS2CzyAsiA607CAjUziA7c7oYaZHTw==","signatures":[{"sig":"MEUCIQDSeWOqjKfebOGaY4NrPS90G9PQSRGCIhLieJTkP99x8QIgMpXSyIucavRG5ucDNKB7JtxNAzBGjTUg5noDyR7W9E0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+wCRA9TVsSAnZWagAA26UP/ic+RiRlFRTqrx0APU6n\nnZTdd/p1ra6MbW5sxZ5F+2chw5Sv2mfdSP/4icZ2a0mpX7QgQmRhdqwcguqE\nua4+xbMy/arJvteH+jx8u4glHLW9Tz4ZHdpQqeFfyPA1viaB2BDjwodQRDLn\nEIqAAOZr/d3b4XcWwz9cVyBFwJEZzmTmWyMth2boybAQwC/FZlzqgjXJRP09\nQ1lNIgz3p/sbQpMfDL+ag/4kvvDelzjeyWC0bgdYWYcmN4rvtotAL/vHMtn0\nd4Q93L3lqzM1N2BvoutCer6EX0x9AFaMwyqi7ZKC++cwGARCPlvFfCEHgRuu\n11DrUL8kje/kCgoi3o+TVo86vZ1bgLIebrstoB/jR1oJ/MoZydRH0op39zWe\ngL1ep1Nr4RykHNdKA5Y6UAgtQP/rBsk5s2WC708UMtPCAnQ6nbi0VGc8Aw6l\n3mZ2BROhcGGz40zhnuRyLUqH//0KR4TJrCUEfnKEr8Nwq1cqFKBJezNnhXfb\n0FYbWxE0R8xCXW54xGiV7J3ohOdn0EoIdHedzAh8TfQvlr1hCwWfcJXlidQi\nn/6TfkpV5LtvACfBvK3sjd0iZAxHQ+6wCOntqh0d2QHNo8ikJiEVwAZE08fB\nbk2PUyeLmNJORisZvK5zopEyCAFLUVoQl32D5ih6TMHQUntS4xT2rbTO1tZQ\n2NGt\r\n=QA2a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/density":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/tab-scroller":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d3d176ba5.0_1580232624097_0.5957180085243425","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/tab-bar","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b5f181a4a025ed140ffee497b04fba12570f6fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.32c1df133.0.tgz","fileCount":37,"integrity":"sha512-14H0gLPootL7PahPAN9hBtcX4Fya9QTj7GEgQJbQj01aZa/0mECJG0Wxk6lwD2d8sjziEJWBCZU8WulLLLuXew==","signatures":[{"sig":"MEQCIHVMDrHYYiO0ghDKAw34E2ubvurpzIQXCviD6ogGus6ZAiBgrNBn/+IeOnqIWGPlU42oqcUVsWImpTrodFUwPyErOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8XCRA9TVsSAnZWagAAkNMQAIE+yPUA5WMuixLcmedY\nNpW+ciB5QPff8JLCIbmpW70ZBakgdtFpK7rSzryUs9Lp5M9lwg9gCtJ3Lq90\nvX3aMKMR+7m+oewUKhqyARjkuz/Bha48xkbIEzZGXEvi72OpqIz/g5djLKUD\nZlijyflN22y8gvrR5MwdbgKXF9d5xclbM/r7KiEjkY9jPvw2fmfwyRsNYHDS\nvjfRs2WDJDKeSKiG2x/8SeVjyG0HThtLzO8wVBV5sBTZ9J6cqxIwLxaFDmfX\n4aJZtmWNtH2tHPQa9M8YLcZH85oxcnkcXaP+ncwn2e+sAfdYAQ6wab0tN6X+\nZoT97daTRyqeQxxMc+OfkJYUh22evCy/34j0KZnRgkPlKCyGydS9z6eL+O4G\nicYmKwoIIqX2+2MLifckL4/ZNdCMPtnqJKyuFIVvL7tWBgKNFRMZZ8X1G5U4\np34p1RZKQKMv1wE+xi3+QgOO+eLT3JOf8r8AVNR0tiQ/CZMmY8f6YNodEyuc\nz56xvHRDDgiCYjVMFTNVNZid/TH+HuJXUOH0sRcaB9WtXNtY9K9wCZJRzxnc\ntAcdHhrbNQOjp18MRpOXMdwYF3kNoGOmzd5zlU0Kz4jYGGEaunq/5B8mZrc4\nzuVuwkEfdPjTpVoaiGThtW2SWdoENXnhcnt1Z8AZf4GioS/yGI6cH7QqNmUN\ndN/O\r\n=E+mc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/density":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/tab-scroller":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.32c1df133.0_1580240662816_0.12440775615175781","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/tab-bar","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82258232de57b0f6bae053f9e687bc8db5bf0187","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.f3adce86f.0.tgz","fileCount":37,"integrity":"sha512-CSdXzRvQZHTlIMRtUB3MxLm/2ssPDNaxH6LtZ7bazh+Ye/i4gthcCEsHHvvDo7J8OrFJiBokdi8XZrLxxU3BVw==","signatures":[{"sig":"MEYCIQC6WAcBdsBllwaLuSQQ3Xh0JfNinOfRS9MmYKmFufk2tAIhALhqvcWNO8cq2Mcw9h1vANOK9UIui37DpvJDgFsVvEga","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKyDCRA9TVsSAnZWagAAxaIP/3KBmQQyvEbqWb41azjp\nEvuAuaWsvNeOewVuYVHcj8Go1uGOqb8BYICJmG1oB1YHeGQmXqR61oxaxyHa\nv3uvB9SHjC4aDKFOD6jZAoq1NpNpqkjP01SKCEpYMoVgmYuh5WsKcavmVpJq\nV5U5DM/v0C3tWd5sCdc76LysyaFdDjfSokiwhZyveaEqwBU2aeT/iuOuls+P\na3KX/B2FoMhLLWpzaP//8t862HrO687tEQ67P4euabvLSMpLJ7z8asEhRWrt\nYlw7JLy7KAG5qM/hEAMsCPczNBuR4WSErG/HzRTszzblNAUMsPdZdNjVMGTb\n8e0fy1Da1g7xZINCur/bAHZgtimBNP+SGEdKrkV+lga7/5CticrW7UPzPjjs\n7pS3QH8SCRlvogn5yTZcn2c/MkU2LM6DPb2p3NxBqwPa/2UWVtkFFKBQdZrZ\nNN+ZlK3OLBi9aCUL3ezZ6lCDeKLp+XHrVNyN2SlXHc4K5NO3MUqRkZne2UXg\nZa4uxljxNMmVJkYzAgxIsvWYBVvZ+m9ZPCpcNip1R15s1XvHJfnEhr5dLzm8\nUu7pQfm4JnCXXf+yWTHUpuZHShueJiYrg/LIyNPCd8dtUalNGv9qT69bEet/\nKHtrlJhmQxRBwGNqadIifSJDPRgCdF7TM7M30Cb9rAU0GoStNUnQBc3H51/b\nSlgr\r\n=VM8E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/density":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/tab-scroller":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.f3adce86f.0_1580248194881_0.1295931463313844","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f013c876815e8b1ac91569a52c106a7b4870c6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a4423f890.0.tgz","fileCount":37,"integrity":"sha512-dtA3WVU5sWxMjjdxoOIKVH7jSWHFlBnHdG9YbAGO5S7kPq2PEjuYBCxM0nkzU0w64L0mssI6cUjuk67a48h5xA==","signatures":[{"sig":"MEYCIQD3gNv3YGCq/zrO4rbmA/dPitQwwGSof9e2Ctb/fyvLGQIhAPngonWSQJARaW7y4EL8o6oFOdZR0k1Tq++ebSTUPDMY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTdCRA9TVsSAnZWagAAS/wP/ielleT7YhMytCwqENWO\nGnfITcDKd2MTTMbwpfijtvAGZARJEMBEWq76GzzOeGUttV/zvqt1FENeYkE9\n6lBKg2TKFuSXlaOVTcImXvYU+e/2sWwjRsy11wD0fabCbt/KG7NBDO/pIU4y\nRsgDhovAryt95NbfbHjGTQ9LMridOIyErjLiL5dG29YLiopim335Jo2RUrlM\nNqtx8dzSI1VL62X3maeULR8zP1iAYX9AX9Doss5ZCB7onSoxNUnC2uQ/P3NI\nnv2+KD/zZsYqZvxDNmLtS/nLMvtlRjTqlYq1tnJxC9CWL+EC+CC9RqOSMYMm\nYN5/jcPYsvQaDQPzkAqWLtfZrno1wlenPbJD0tOwTeQxHoJG7tpniOlAasJ7\namSlD/NAiEF6RskMr0nh1ezDF/77/TCWkbfjtgOiXWftEvJoi5OK07BtTiUc\nduOYY3BGL8Ha+BCEJNDSgtqB7TEAHUSZLdacq5JLab03/tyqe/zJCcxBExho\n1M6O+WkgxVTf+PBpEhg01bsHK9zQUQILLcSi5lx1GmiU6NVODONHKfCgmKK3\ndRzijif7SDNY7SAgAxlMWKQR9hlAKlT1X9Do7e7TnsQMoxdu4SOD2xiIuuGA\n6q/YtlezHL5seLgCh4CVZUYkh9dimWnecwpVs7R9VigzN+IeY6lhqbu3/yGG\ndYCn\r\n=sh5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/density":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/tab-scroller":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a4423f890.0_1580332252966_0.5243343209096778","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/tab-bar","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18276e52a13b91ecdb3760e730b7bd7f0f0ec867","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.9351f167d.0.tgz","fileCount":37,"integrity":"sha512-nvGc/KiLosnvg4lfVZX8Mkj+6kK1lJzRQkpjR0Q2zxOBU8OtLZWH2/+hU/tiZRcD+wNU5UN83wdZd88fqZqdpQ==","signatures":[{"sig":"MEUCIB8WRJviKqzieVOWPobdtCvEnibpnnsdkgeaQ6tdkhqOAiEAsFk0iBlv9wlEcASXHriqUCwkd9y5AEz6lvrH5jxC8P8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+jCRA9TVsSAnZWagAAvSUQAKLHp6RTXtbrwQftDTmb\nOdVabWivMv6T15GALLHwYWSo/aGnAfONh8/5w9Rf5zSyy22Zt3jQunQbMWWa\ncNa3R1BMA2aOE0AfZL5d+uFU3Yfl00fGKoDWmGmztahHUi7gOwvu+ivC1rB4\nlUW2j4KkKh2g4O6AEVGvxsQrbd3eCa474O/bmBYn/GJ9ZA7t4M2iWsC+DXj6\nZPLcs5psp7eTfQAfoDgma0iBZD9Dzu/pC5cr2zCYpUvJlXygklN+rMpNR/ep\n84IR5RnMf35IRVYHR8A1m1Ns8lIkm7sQC7Ssomzb4D2x3s/8zsf5HFGaVj8O\n9iHdaQDDSrIin+bx6aBu3E6iLN7xXyJmzBY0wZj3s9AB9FwqgpWJb4BpxuZk\n4cCwQyzDV0kTtiM3kvS62D2axdhWZEpNI67ROFBH77vAcUbm2IWFTSCZEYD0\nvWO6yt3V6BHZKZwDnE1yi/jV2nw12LqvQzuC8AMAOLBaHDxVdd4OT8WuOeHJ\nseeZ2PEdj6xAp4dknv8RNko3rIAbJ+gh5V9o6jbbnBGAVZ10Ivo5BlAgqZTh\nf5kny6Nl80MQo0r4MiyLjF7QyK5IwUZEcmf5O9UuQaQqz/+IpAJDIaf3lFVZ\nFWSM/ehFRrduG1H1XWaBLZ8MbF96wGSJXUmbGYozpDAFzIR/o2kcYmj9idx+\ncbMN\r\n=CFPM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/density":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/tab-scroller":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.9351f167d.0_1580335011400_0.7363383086501885","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/tab-bar","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4cffdeb1f9247fee7215438055b07ce829b82f4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.29b89dbc1.0.tgz","fileCount":37,"integrity":"sha512-7yYETY2TnR1IY/9fw/1tHYEf2N92wuSZV4v0d2g6G3U260RoY0EHjGChBotE0ZC+clEQgusOgrEnEtoa4buLrA==","signatures":[{"sig":"MEQCICu9+MJRfhyEt6uWG7fXTfTZs/Am5OAibhszzjUNoAP1AiBBryjg5GLZWv1rTT6afaKNbXttiZFCEd45ExHL8YTXCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgSPCRA9TVsSAnZWagAA4gcP/RDKXmf6Nto53pArlDr8\nog9FvLF57g25galxON9wegJWafBpFKPGgwyfECi2dkrqi1Nksqq57/Hb4PA0\nX8CQ3ohmCiLAksvTlzblL0M3brjh0eWT/f41cDYDFnHDw32XO8W+quqyF9uI\n3O5s7W1tH0518eZE812hab/D5kNNogNeTMsACshxhCeOi2iPBjLV5As1yNJc\n92fi59iMbN7oJxtngipslH+4epsNORZ6pbKUAMdOs2A5nCNo1SVkrtWyintv\nP6NOdbkA8MtfA6AaYaJ8seqFNxdBat2NKyn0vzIKlZ9XF+GbJUR2v5c7eU4K\nAVC9uBwSVK7YfWh9uOOSgYHxpFIzgTEBfpdRDN+WtQUDxL6Sit63nAAI5Kdr\nk5mdEUrTtcqIa+ix8nBmkwIm6sEkU1Er1iGoH8d0oNSOcnRJIYkvIPS4PPBn\n7d6JZvncQ4bibDWgECSiMJH4IBcP2EAPF2+Wg8XHuuEiuQ73220mYe3e6yqw\n2awj7gBD+7hJRAMnkPxZf18xQZpUXYbOYaYmGfkUP37VWpIORyl1B/5XCxJW\nBl89U1pMVPoF/EtSI8gxekLCIV2+b0PXFqKEfX8Xd8YSr66zY/cPKrWa1rCu\nYTPAJec1Walif0ti7z9d1RPQXpQtzUyWGjiNBJAgVWiDYASd3GGg4nB+hHFO\nND90\r\n=ikhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/density":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/tab-scroller":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.29b89dbc1.0_1580336270633_0.466532241937184","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1827f0bfdcf341a30bb591463714ee740d1c3df1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.45985457b.0.tgz","fileCount":37,"integrity":"sha512-lNZAAHADZRtzTAw0NFHo0sr4fe6Bu1vKe2M5ffOyAPQjmk52wNpWZX1IfufIzgjD//c1PxFO/e89DZDNvp72kg==","signatures":[{"sig":"MEUCIARZN2ELbE1hgbkZXFdGElPb9VylPuCAaH9p2B9oCnX6AiEAq16fFIQlYsTRVKMBXUMD3MEYN2uzjMbkuJNegseV0EE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhaBCRA9TVsSAnZWagAAZwAQAJnNFzE5UqbI/qcuTsj3\nWrNqLHXI4d3fjYlSs0Vb1+OH800Zh8mR7XJqCWoTwvLT+NKHsPMHhacqlx8U\ngWk+QAqck6QzyBGVNtjcEEIqUhwpu3FS1YJyMEz0VLkBfRFApJ+IYvNWRNsU\nJENwFDNKnHYeU03eU1Zz15LW68jHJmBUTGyMW18HC8h/C4PYzCDYF988/cNy\nhs6nr6ESdwik70N0JYQe1dKusG9wvw63tzWChoc+xyRQUNZnKOSfvhvQQpbF\n2XBAaJ5TeH7CCElZOSg3sZkgLy01Zf8wYW4hE6+jNsnmyiFe/61EoMCSLO7f\nTw4q/zvqdxyA6kYu/VJy3zcmAM2k+92+b4MVmYhTaBHkRQ2dHb3gwm8xsJ9O\npI3xTSNFOtyo9Nn9CrBnZUgPzgRzMuDtQTDhjaLXEt5KXK+DhIITqiJ0mL5k\ndva3ucCWqqcqMVJ1ZtSehMBxes3yPngNdbx+YtU9ch2jmHma+hn1D5ICYk5a\n8TN25ZQhEb5ARmUS89zWa/PMVl0mbRmpqwsmUBuKk4Q2//TMpXPntvbTTkOW\n1BiqmyESosOUIUmiRYJutHtoVSDOXHgTEeph0qqy+TomLJ3FE8mJ9rv8qDHf\nXIYxuvc3UlOqAQjiyExjMggcfbc/4W9vO/Kvwrp3ka3Ari2Abi0uagqipKyo\nrgfE\r\n=CXdi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/density":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/tab-scroller":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.45985457b.0_1580340865562_0.23967183066923536","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833cdf38efba23e487c84b2c323a1fe5e43bebaf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":37,"integrity":"sha512-qbeLAIlGWpTOU9Y+7MOehDgbuG1Nk4fLEC0LZO2B/Wnta5eukyzpvMl6qmkJKCetcLHriipis/1GJ1mgNW5rXw==","signatures":[{"sig":"MEUCIASNEotLPOjgB/N2CV7WxrpAz9Sgl//U4CB7ThozeR3tAiEApih53bhfaf33Pd87rz15P80bqq+w793g3KIDIjZgAv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxSOCRA9TVsSAnZWagAAhnEP/3/cEy3HT6Brru7xXVCE\n2TC1l5gNKKVjaJp6rX4kNBTnYegs2iHO3oRZPsS/JGFoc24QOQuxpsVjyYlt\nKWqm5C2vdKmkOAUaKVGROt0rE+bKsgB1RGaolN3cD2S82fUs8yqsWlMHp5Xj\n8ZJ2eCYekZnimRXpyWG2txE3+mMSJT9jrJ1oZwruwTlxIX0vdIVdtYS5t+Qj\nm6DAnM+USM4JeY1PMeTQG+SDSB2Qv5m9lKLHOir9UnDvUfBCQgbl48K/wW3J\n+CM+RIDqp2nBWRUhscpk7WWON5+rBUsm8wsl/FzSySZr3V4n/8LxUpvtfyC1\nO4RT2vLNqxZjcoor2KqdjqR7caGpa4yrNGUKWXAa1U+MGh7Z8oqJXpU5UF/W\n/UnSakzWW2BnWIksPHZHwx5BEXVa3MFmg4qb7/IqUyvFMjqB5AWTfwK5cMB8\nKgrPUk7YKjlXkQl4AQddREYLPNykRUL4BmWOguApCaehed3vzbfDFzfKxO3s\n4h9VxaKzP0heSpG6F8VG8wG7+PhJo3BvVUY3SE4j23Th+b86v3ZnNOgeYqoa\nkf1KgTevfSmNErLBuEKHqbCQtWvt9Fulwbsop+70qj50l8ztDUCD/iEnVT36\nvVOAx03nr0loIJNgxArh7nmsr7ZQNQna+DEqRUe5B5qFw+aUA9I8p4tptkYi\nWuKo\r\n=Pt1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/density":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/tab-scroller":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.a1a0deb3e.0_1580405901737_0.5937608101423466","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/tab-bar","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ae015cfef94f20b3b49310b56a91a8be885497","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.181486643.0.tgz","fileCount":38,"integrity":"sha512-rK3hiX6zewNZ7sivNaH+NgbWxMuyYe2ICZtNkU9cnw16D57A3Vxd150awQlSzICvcmL459z5lVJTITeTtieeBw==","signatures":[{"sig":"MEQCIHf4wfcDbqhz9/egrT9Hayl8Iue54GCJLKUSTi8155lRAiB3FcS+ZmFsqlDpeRzSOB7XZhNkeEFb/9483SNJ6hMlaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MxCRA9TVsSAnZWagAAkywQAJFTIhmSevyKQiCNUFUN\nBrKZ3Zq3dT/ASKKehtMYAGN9sEPuE++5oOcZeN2JCCmH+h9Ei/K7UB19136g\njbrT/xoIY48WAJc/jvBa6f++a+ZaVvWqymLBBW9wLun4npNfBj8BBQhhv3rj\nGm9wlowo/NmOlCGO75lMbkW5Vt3siaPLA9HlLhjBK/mGzIqgZ69YkhM9C/Cl\ndH0Vsvt6h1x93//Y3tJpHbnYQIkyHsDLuIYRWfA0JiNDyZ48iI0ZEfYxNfav\n6c4IZR9rW1pw9DRQhl4tKlgi0rvFjky0JruLJsWeLl3XMIsjrRZW2Gyy5bD6\n2rg57EGGBDk+qH8AIYeSSPfYjHYs59VsT1dJ5wPHNbN970q5A3VNfTD8MF0/\nm9zPwuyCDDx353DLZFZR7nwtMQVPRHp5KPrqURjfP4vrgnXK+VY4q24F4BQs\nDFp6Bi1ZmakBdPYJE8MwbvYrTjEgMM3evewXzM+8aFkpuRxxaMw7sKGiwSYr\nNlxplKY7Txs9BwNTdAmm8lnlOkl28yurGgpUQGsrKNbCURp173754gyRzxwK\npiwPo5LYoXhVrlW2S5GEzDTkKhqct0+UoIteKPVngL6zOOcS0cIg02XV+cqF\nIk5H27Q5wpstIpnL/tiLWrmQoIxhHZ1BZNmm9rpbXH6Ippk9Zqqfvs4bMSMd\nlEzo\r\n=kt2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/density":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/tab-scroller":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.181486643.0_1580417840717_0.19106352082170996","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f82595a9ad99285b0d8ef9c558317b762e851da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3a85313ac.0.tgz","fileCount":38,"integrity":"sha512-DefnxvdP71zXpBZG1z/L/pOFTpVyg9RjMX4qrnUgyZ7f6RcTKb8pgMjFrNO8Nva3q0JVK/a5QBXuuelTqROOiw==","signatures":[{"sig":"MEQCIBEZ6kEVMH4Q8JqcOAozMg6Xdu8Wj8YLgGk1qVxmrEzeAiBlIEDZHZ1yA8zdnkADfkt/zLCJvPbXhvP3sZhlL0AdZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFStCRA9TVsSAnZWagAAUDEP/1f0P+iLLT8tEXPJThmX\nJpSlmkXWhJh1LLRbgqyNdhmvCDGOqWJYqzHyV2tEdWi3FrkkaMwB3UCkQhWK\n2q0/aOzMyr2bd8vBtLb7Rj5lniwS3gjAk8lF5Bd1TN6mLCB/zdaFw0609uM+\ngCfy+9JSUA/UpTo/LGlt2JtmIDZuvMnoLA4Mf/BffLWtZ754QstGP9JFikqU\nA/EFnZSYjX+ImZMZdereFkANWYHw6vVahK8Om0yBpab2s07CpmRz5Q8j7rSk\nf9EiOqFHM/PH4NWX3m3QuUGu320DjXcUMreVG6QPuv0tHLHY+DNh0q7QU9uy\nob6gA9asaLRPEtH7wf6+/bXxq37F1HYPJim9qTsjf9IALDBsSOqYJBH6+LKr\n4wWFV0KqsJBKrPHizxzgQICjbFu0uS3KXf+BYpx2A0+9rLkCO3jAJKGvnEKC\nLyZGwKrasoY46kUZ54DgCdeZXH4PGjDZ02LQGW8plXIe9LWiBgnijC32dcOM\nQx/6b9uhUVAYRw5nq1oU99ONOGQXyj6nStxkmMhGs7qRVSIi+mqZ9lT9c1qU\nhNRBCtMxsXsN5v/YQqyvn/Jd5iN6HCSkacvsQwyHYV5zVipRF+3MsveXW4pv\noAWxAFvwlQIIj8JNrKm++4jMzesczFWw2D5h8n/r4khCCXMF9Ho5YQ0/KOWs\neOYH\r\n=hG5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/density":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/tab-scroller":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3a85313ac.0_1580487853503_0.30494192851767976","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f963742235fcb0fb074ef24eb7a7eaeabae8fe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b6c7f624b.0.tgz","fileCount":38,"integrity":"sha512-DNpoMXR+CFmoTbgGslSX/SyFcPdA1dW3ddsVqP1979IdyVi5v+n3TkoLEgTlFQWFx/6MPVDfa0h4vzcNP4zHnA==","signatures":[{"sig":"MEYCIQCWBPL8kSuiwWmHL766SiUjMTAj3UBgCNcv8wcbGwjOhwIhAJWv2nTu+yJ++a0P38RDgizNevd580FRJxlghncnkwja","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3+CRA9TVsSAnZWagAA7cYP/RIVF+AhUkUbd6KljbIA\nhLfOT6Cj7gA4ofIRNNwz62Ks6HAVe43h4c/soh8XFERT24qe97FBbYAbHlyh\nOUSa3L30yWX+OmOqE5hnm2QN+hrVvsktJfgpANS5A8it0rdllfk4aNtZxVcI\nuuDE5CTksZMMJuP/lWdYVRr/VBv4ZcSgpP1rcV7+aeFEwqeJchtCR+Gf50t/\n1zUyIntY0BJGdydIUlnTBI89UKBBUVK5kl05ec5hUo3SWiyuEag/tIXmHaF2\nx3XWRoLrg3DB9pwkV2tq+hM+urF1w5Bn13VsMnYUar46MIBtCaV8xr9NU2oK\nT4ZCPqOckD4j1fdPdSZFRVGcOWISG/wHUUVwgXBh3hoK2rZ5nhNQgpfWhSd2\nBbE+B7jushQp93xpK5l8KxN73FdnduMvpPKvLq3fxM29RPC1WJCfuLnqMM8Z\ns5ZexfJ6IngXBOvJvT22WGKsazNKsrl+MtimSensD9hhERUDiYWM2ukCgTw4\nludnCa3QR1izvL1+o6sOpdA0y2nw9I1Zv6e3entn9T6Cb0Ch5SlNZ06xlReH\n31HxrBjmkywCMP+55OMmfAl5DZGbzJvcPYzLL+5pxc6HZtZHshyNnJXKAgMJ\n5lcppSRx3sG/ux5YrVnJnoC6QP0QDI8ZDzjMxLqX3bqI8QBsxPsVp7iouGaA\n6+O2\r\n=rD+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/density":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/tab-scroller":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b6c7f624b.0_1580490237766_0.6869804796056866","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"406ea18b7118d40b6a72a51c57d97fa442a3888c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b3f70ebde.0.tgz","fileCount":38,"integrity":"sha512-CVnL+XM84M5nRhsf36gZP12t5CM//27NobOlpoe0/lzWmStPZapji3LXw8AW9e+QghO6kwGfJhh9rBTxiz/83A==","signatures":[{"sig":"MEYCIQCFC1zjKlMeDR3sbJFccFAMVQvY4MTHxgZtttCoTFb3HgIhANxBRcBbbw03asz6PSHafJFNoIv4EvI50NWDhU1JmNfM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInxCRA9TVsSAnZWagAALNMP/32MMnY1uBku4h+LJl5h\nP11UNeeBocUmQcunjhx4Vi1SYwmC/yvpkG/FHpOP1N6fzTIG3/S0TR5ubMmx\nVUMBoJd+et+LVtUL/4paC8qqAUKHWkz5F4M4OaHj+GLEbz8lR+T5uYaVXxyL\nypKJD0VbR6Q31KcmU0sXJ6whWyPjjvznBBShgHQ+vwNmzQv6+0iNm5KUFjKp\nHA2OR9fUHgH72xO5WBsCipT3UzMw5ObHSSZ9P3DfdK29gj5+yqxJRxpWCWim\nAJRJdx3aAU0Ah/LPPdcBHl9xcXaIo4xQOmogEa0PhGHUc4WeRDnMLaLJ0nLz\n8kvFceoV90R/PkFQXQWq63q6fseGNIGV18SNsk/zQcaXTyWyIfA5LT2OZrdS\nTRjZCOxEIJUqINrWFF8bwnRio4/iQDVSY3DDRm9IJTpm3rk0zSZVgEtfD/Cj\nwQMUYMzGvz28hYNjFCSbMABkeiP30/ORq+OGTha6EOhdHWSF/fOl6dSzfbuI\nU5IeRwExgO6t74TYYH4KnoBcn77S4VxW8inoaHHIIY1wk7YXbTu6P0lko5mQ\nj+vQd7+xpzWbF5EyTCUZ/at/xE11w9/h2Emgl268gOaTHChZwyIN5Z5DrOpI\nSeMPZwu/RW8MuYUk2mxfNEe/3kDX9Q66fms0xOCnRd40qxoP5OvjDJUP0wuV\n0X7g\r\n=PURT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/density":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/tab-scroller":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b3f70ebde.0_1580501489142_0.3253069477329056","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/tab-bar","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d4cdfbc5ca26829cdd204a3d439c116113d941","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.3e782d8f8.0.tgz","fileCount":38,"integrity":"sha512-uqL/h4gXRkT8fMZ9hm6mo1ILNBt7C0fIP4JTt8pEGWvvklOOqwohS6LgtC9gNWuy/5x3H3CZkW5SBJDhRzuLJw==","signatures":[{"sig":"MEQCIERLdxPjR9PDLLPOha74y0TkAEzZmWC5DYH65Cf720JdAiB8iox/8Uyckb/zXQM0JA8b9NRfMbjTy4aDIJDpyJ8R2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiJECRA9TVsSAnZWagAA3T8P/jXx2zExySu25KQ5AY33\nlNJPY5UK3wDAOewEcHtWvNetShXEWmI/DKral3/Xan3yXjvq4rBae7+ao2EC\nOkNKhxO76tzA8L4jCtretKxpvLrYu2pfOOpO/zCop5HPo7FAyGfXIBRqc6oW\nOQ0hJl6qfZ9FtTY8FVlkPCvJ7lss0X2sbJ/fHyTdF26f9qRUJ5DRlU+EcXCB\nJTOFZnyAjiVxNS87XL3ohIcneHJXeWS2JbC0NShfkwN7wqw4ts4hWz62VI3s\nyS3GmT69W0cVxoqdBEZ2jARZqiVgjc2OpjGYZltriH+yIg32GT7xgWIAft4e\n35ZMMBzLCkTyuhuU2AlNM/KJIzhZE/rVp8qLkATYtE6JmYtsd7l1UuCpzv+1\nz5YVVu2KuZDvEo+1CaWIZ1R1+OtLTybBFkHVswhvjYz1DsslG98SyJt+zU4Q\nltz5UHgjM+Hkl8dE3mZ1JCOah48PPpzLabJntFZq1uxIzGkWIrT20JxH0OtR\nramQHjaBVbScSFZj8VEEdoMbcK6nFo7BnGt3KYlT8cK5BoXz+A+FPYqeox65\nGUhjULiiEelWGoFebxnmG7Li2llGk8JZQQauAha4/uFbwkJAyKIk+IIy6PUR\n1sAu+O0EM+qGXtortck2AGUGoHOIfGtFmKB1AXNtHbuZ4AhU69Iar+W400oX\nxP7c\r\n=PZuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/density":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/tab-scroller":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.3e782d8f8.0_1580606019923_0.4363652091516894","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/tab-bar","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08f28759d5f660a44aad369cb4c0d4eeaa90ca38","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.535398572.0.tgz","fileCount":38,"integrity":"sha512-6I8/gAi3BHuBIG2O836LRFSawU1YV0jyVmJTRcSQekspKP142QOFD6OI8lzrCzH7R32Cfw6E2mH6elZgCDvpgg==","signatures":[{"sig":"MEQCIDQWO4nh0PjxeKF/3Cb6R8hTJ9qIlDTUGsd1uqDHA15jAiAIGgofa3nvoRVGTYcVDRdDAbIv6boYh6V1T9svfC3OfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGK7CRA9TVsSAnZWagAA9vQQAIN1my9EidgbDU5Kn3sx\n+eV6G2kMRS6d+NTiFHs7eCG9wKJ9+vJopLjpE49jHOLPr+c1nF2ynpf30LEs\nUW42WHnn6i4ifHInkrnWwXOL4qeNeaLzMuXly1WWt3eV5hXgqhFRzuLHm+Dy\nprrHDGtRmzThPVk4+44WvMV6SeJcbMT66SMumFNJ5U19kHRhOwkxuXkObvTk\nzf6qQh4SiMw5OkYw+0foPhiM8OAwGe2AivBF6LYA08WAp9YJ4Sx0xj57s8VV\nleKjfwu454s+Krj8Ssp0iw6b+yq9kI/d8Sa/297hHZxK/pkh5vjgZBdlsU4S\ngymuMEq99N5cog0w8TZQgoUXaJjlCn6AldBKwRZa7ulHCIOQYzpyM+ZdANXE\nAyhsj2bl+ap+C+CDsnf9/O+a4MyLga0K+Os2GOsE9eH01gzjgld5p7uHNbNU\n+qq6BARr6UvJpISB8Rn2MqkCmVnkLuSFo7nxk/1VYT4q+sTPEvNMqAvz0rWP\ngaiKY2UBdYgv3kRU4GuKrkvFrF1mlUUdCIQfZxKV6IIjTLo1ybtMh7d3OKvO\nfQe6Yq5AN7BdLVXo+cssfQpZzhAQQ6sQhm7bVPOYozQbGHnrtOXEOzu0Y+eP\nv9/5xXxKRUjMv+RJYAUX+2GIjACAmzPXvaqC2iFPM/2EAe09VRmJ6sDtiKyE\nCwhB\r\n=zS7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/density":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/tab-scroller":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.535398572.0_1580753595458_0.14952734626990383","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461bbb9ea118b253716359c9586a161c9b596c0c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.5ff33802c.0.tgz","fileCount":38,"integrity":"sha512-w/vSYIZ2hJ+/nK+s4jr2HcKMbVEx5JKfu4/bhUZb7NB1AHZiAGZU2PEGCRu9P1DVo2paEJjGwNrBrNlyk4IegQ==","signatures":[{"sig":"MEUCIQCcaYFoZsdi7Tf5DkM/U7VL1ZoILqq5Jkv6McEExT3IKgIgQMeBhlnZ7oCPBNn8uUpEdQCGF1ibKB0apeoU5AJUU6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObJICRA9TVsSAnZWagAA7dwQAIZYIyav2n9+HBHuApkD\nmHrn6PPR0+bDSGoAalXeHlh1HWqyFYe0Wh6hNv55Vg+Nn145gdrIqeRfIzu1\nfqKg3TnXEl1+iAHLUr3pmxqI9K1AabA8KemzdNs9tZpAPiITBryuDwotcl3g\n10Q053rZ+IL6hRFMoqK7TJJ1zJkpqrwuTv6FuhrZwtH1M5BcC8zpDB7IdhaV\n7fJxbjrnp/HG2dzpXvpFx1fD29xTejCIgiam8UXFTaPnYGytl01Ym6CMzwPo\nzePOSM/aLW0S1r6Yvf5TxcZXcuajRPSNM5S/8cz1HRAqqLG2nJ9R5hLO7clh\nNVtc/iolVDKvi2ouSGZbEgpNZ++Zismnasc4VFGv1nBmp+H/cnWYigevsWY4\n+PLsb3CYTc58XFTGi+vHNOe6yMc0w31nWwt283zS2sT/vU6xRT3JtSSW5XtF\nDmrlVaZJar5OZ/bBZKFsocOrmd+kPz1+zN39oln1O0di6xRk6m4M5GhFPRxo\n2vx9mXKe3hPQ7kvOUqVyal4XJGW37bec9xzA1DqpZJ1PUqFuT1scVXVhFjdo\nJrdMJ0izhEDNvCCcnyU0VlRZ2c4VjAD/Qrrp28qyRDpa63nS92Z9Z4T1P1kt\naX7Ui6KeGWb9mPipxmETYEFbQZEHnPkUDHRDlAbwmAk+tkiPuaFcaEWkVIq4\nVw7N\r\n=NBZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/density":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/tab-scroller":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.5ff33802c.0_1580839496189_0.916956610779617","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c35910865b188826230d61ea81ef352c985ec1a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.1eb29491c.0.tgz","fileCount":38,"integrity":"sha512-MTL5f8kYEZV3YJJBgvXH+LHm3TW6Ui3SBJj9tAnkrb+zN+6D7wvxHsPjYwJtieZdNb54tEkZLGuOGd2BtMPZaw==","signatures":[{"sig":"MEQCIEyVfjbW4CrlTbA5u5npOY4s+rlPfG2LOJSDZ0QuB2MGAiA/7M9zmjL7NhPh5G+oDRvRTeXlGHwdr0cb6aVzURpfCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdvDCRA9TVsSAnZWagAAGhYQAJbNTQACRMfjWoh2mI9k\nzgGldeeVsTFGfUDY5nDZdKPiY+/f3PiH0nAjBdIkBBE/+HuELVtbE985dioj\n6OmhLPTTTs4g3BVittCEBZ6L5TU32PN3M7V7/uly9FJc2k+Tcob+3nbkIu1K\nEPWgC5AMT/D6fjnDBxpY/qrf4sZH2ZRMPcagtRDRnU0GtG/vYOMNTNtDR8dc\nvdTebUa4VaroONxWOPpHsJcV40QLDphkq+lhlCl0y6XVCxroJoGni9wvG6tQ\n2GXNrojWz9VoiBlzmqWPt281KKOUDoIUi9efXGbQCvy13H4zJe6ExITn/tkq\n3mrOAdt1qjod9hRRdZ3E+o6wmFkdul48z1Tad+XOy1doRVF34TPZANQl1A6A\nIH0qNIBCT1gMEQfztuvpj03tYtiuV3+hg13vU5NAzv81em/qh7IKFHS9LQpz\n8bsjOgk9Tr4/72GcsLUfjQ1dByhKryC7Ct5MF4+W5GR6L/eB8RsQny2iaZ0+\nW7TCOwxpH3UKPy4jQz5TSmZZgHnAexHErzNavP/5B1TzxZteTQFCOJZRyBNd\ntMV5gz9bOYyk+bxjuFAk1zi3Wh4FDY3xXp+d6P/dZ3D1dhr69EVmAJVUf2Zz\ndSB2oIkNDDw9EZglmtoEMCCH226GtNq9IdM+LpEcYTuVDUKyBwwlAQoOj4zI\nvqv1\r\n=zVcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/density":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/tab-scroller":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.1eb29491c.0_1580850114520_0.652195281094538","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/tab-bar","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d69fc42561734fc1bc1ed05746dec5c8a02cf48","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.4c7154b26.0.tgz","fileCount":38,"integrity":"sha512-WQtmpXSoRGzJ9oCeEuArLSG7yYGCQ38DkPXaRWl0QHyYkOHTUb4VGvzLUr5qbDiD47VFJJztKKsNzJehfaSFhw==","signatures":[{"sig":"MEUCICCSyGw3098pES7uJLyf+yugGbdXo++0Q4y8JWKUCgAEAiEAt+pMOSe6eicTGuaQoln+Eax3ccD7vRIFc1wa3W4neSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOufJCRA9TVsSAnZWagAAKBcP/ipmsObNZwcPIqjDMpfF\ntunc3NtZHj9D4bfiepyjOp6NnaNu0H3DRRBm92F86GHCESIwcszBFuskvOhk\nZYJ82KGaw9WdujIDpRFyCDhX2hFE7653cRSS6+j+VJrWjPe37/tWEIiQfXw6\nxsdh9fQEr8fgiGBzzcH312M6segl6jAAFhjREskCi8H4iZBmWvYMJIJ6BfHc\n4fVEoOGF34Izg4WdShxlgw0wPkGGnhhvX7UHZxeqKHgWV6AX6Dlpv/NEaGGA\nzVoMs6hHrJ6/m92GL1+Wthwf8SRLjnulnbHHsSpaZgmBby9Gz2Uc0cjoJeH3\nO515WrvIM0hT25sCFD160w8H36NV7sE9sZRBd3FS82xhOqtnzb0Uoy7TnzAB\nK+Qna7DRoz1rS+j2r+CIM/YxGsBUjq9Od0zYFoZwjcvkPzbfSgPCsH4vYK45\nZJXHC/+jG+/97wGdxjh8SK7QTFv2vciucw4Sh8bjfVQ9wpZEM4DRy+I/RNhn\nfN52VhBZPO6uLimXxPJ+xZGT0gK6MTI+038CoqQZM6F7Ev0fXVBmhjU85Z7f\noq/ph6UXCkOIsDRzYmCtRwO7RIRfVEEH/yN0zYh9V9KGqyhsdWy1J/qpAlky\nk3KKmi/92JPczSzwbY420VIioEdkZE719wISnJrK6AEl6+OeQ2RA8bruRVZQ\nKpx5\r\n=Dm8P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/density":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/tab-scroller":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.4c7154b26.0_1580918728552_0.9503019020734593","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac1ecc0cc4feb4b2aa903d95f760cd8ac794005","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":38,"integrity":"sha512-hOp1qtVg9+PHTSMEWs/cnSfykjTd5MBikgk4Tw571GLNAdcg+nIujkRVN+gTedvqoBVx+Wj/UnkWfbqpZfDXEw==","signatures":[{"sig":"MEUCIDKpB6+9QIgJOlENxMg35D835+vETepRkyocqbLMZ4s3AiEAigrZsIsF6R1zlyS1wtBoioo8cge/83j+U9TDoaM5DVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1EMCRA9TVsSAnZWagAA6gkP/1YZmTCpPXV3+F74sOrZ\n4IEwP2AZ4exdCQw+i/emjftqUPP9chtPWQ6G6Gs2YDXPBOF7OGNEVrvUIQKe\n/NKACRGZUQ1syw8Jn14roA/oTLDNB+ICLWtO4y6RNoScVtFuFUEmvrbyP060\n3Oav7Xo/WQ4IBneNAT0ywTFR7zIwWQhYKrHtoqD1i3+nqOo3C8nXnrjMHt/H\nzL4XiQET5RRx2eSBI6y7KoaEjiHJDjaK2X2mtlBiLB2q5by2DF+W62Qgsf6y\nbRYKg46jEt/arvpvNEXEu1nWEywgIS25csWhKdAqceLaLOBBzQdd7pDoEbDt\nuN+226GluQTAUj8iI7wJQM2ujJDIYSEjf6iIIqiKILsGR63w830S+H9pks6h\nl+u4WHMlcs5gciEmlD14sphNnxPPVK38dxg71KjUUDyO+VEIXYaSTmP4JmyP\noJ4NNUKdwAD0Yvg1+bXcdqeV442rPZ7xU1ZoA8mLZ4Iyj4iI+f0NbAfUDT9M\nid2kvt2mAAcn3x3CFiU0sTJMYWhHSPcH0R1vHtiVhnY7g76G2CMp5akkfX9w\n73FtvpOSTMGvfg0wqs/j+b3nrLALL/4TZSMVkfuFIJIcCUJeyvxiLXZL7fik\nI57jBxsTHknAVfUGUoNgW+xkAKO8sLFDuYEE40/jxu15/R+f2j2NLJqoj5az\naNfk\r\n=iOAi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/density":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/tab-scroller":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ab5f49a2c.0_1580945675717_0.5302910663013869","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/tab-bar","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ea2366eeefba128d9d2a8785b1c2a72ae9ba07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.c541ebe15.0.tgz","fileCount":38,"integrity":"sha512-SJanmyGhSplW0bbodR8/cP8ko9MWemh9sjVrUhOqFcl2/MBfiIGagnyWtTdtqCOnu2r6FZsP3+8MdFhZJwNEWg==","signatures":[{"sig":"MEYCIQDzjer/+SS3tWbau/Zjiwl7xxetqWdbAYTnao35nqAbYAIhALixBUpycyTLpvkCgKwTaysZsLFzVKvuqRQBrG0Anmx/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOeCRA9TVsSAnZWagAAfFIQAJnCOAZryGmFfyYc7wby\nRHcdxDmMx8ezXUwpEV/7uS1HMGn3G1BqDkOZe9oCelVX1X8MpnYzYHIT4YJw\nnmMfSlqTdbSNh6PfotdEYkbZAAZaK9zgmNk0MrnTBdhiRGZKkATzaoMiVkQk\nbXdjGC8D4yoDjHN/tnH50B5TB6XhfvlTF9kehx08PQrblJvY1QZn8BpI+Y0/\nKGUCLrX9vGwrED3opNlVrCwtx7XkuErXiv4QNq8FBIoxs1TWkkMccDs/TegW\nENdzCxhD7CmB4JJaYbFGxWdZ9y50qLaHnuRdRFAFNYSFGDhI3StH++eCDg34\nzOUCrnmLKJpYEZK6RAnfrr2qPy8DjbCGnI0vgAN9i542SwntvnsIeYlpJ3YY\nmJ6UheMjoJ7OSiIn2y+5YkB9+Ilso4Lbnjen6+ptk7GpMmpwiK4W4/ZsH/LA\nWEuLYprpaS6mpEo4wK1Y6JWi4Oa5cq5hgXYWnazO78fg375XU19Z9QcDhdB3\nJI8oon0L2V/C8Ryl7WM7G2uSaJrWlLKpTE6716WfOSBKUwuPGrEEOJXEDzpi\ntspISAfKxq6h0cCtTp2FkOWMylJmESPzK2ZUd6S7zAcaiNUJYQr89ADmgCSz\nbswtfhrw91ATTHaKv5lcDMmefgJMGMG8mm9cSiCenbHoL/ebQI7uhkFqcjx+\n1KJt\r\n=Huiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n`mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/density":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/tab-scroller":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.c541ebe15.0_1581028253567_0.9525550653331971","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/tab-bar","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1eb836a0cd6e99378f9fe4c58bb586cbb9b1ee","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.98f7faa05.0.tgz","fileCount":38,"integrity":"sha512-ppV0x3g77DC3QWRYMuLbRSMtDzNSkbPJUPe7Ep7vn7t+UQW4j2zRNJGqQjX0qAvXufUk4+w1cwdupB16UDJU5w==","signatures":[{"sig":"MEQCIB79ts1VwGhEdj9QHfZt5MX33lGxdp4JVMoYBjDLSQAtAiBWuNUeA1I1vJR1kdKx82pXlHgV2LgrUn2hroSlsA4o9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjjCRA9TVsSAnZWagAAaHcP/23kIpIYTnR+ePKVSdcV\nJ1essNN2NJkN+nTSqTixKGRbfoz8Kx5Fsmp3+QfyYn73F8S2cFTZmHhnIrLG\nW9B5m9t4Ia6uZ7aAifDhJ/V5xYSp4Jb5+RWORLLcROrh/NSRbkXc9SOSNw9r\n7hr2PnwwcdAQn7WJ4YTMzsWb35i+LXfpJzJljQgp1X8UWdT6n7IryZakJR1i\nOW/sBWkeov58np3H29/YtN3XP96DU4Thy1//w1NIlO2p2hh9nOMA6he1GbP9\noE5NPgqWojhyFSUfEuknNVEXVlsaTGmPG76ObZNAgzR9HhGCe5HlMJ2QcKy3\nxrlRCF3lcbuP3Z3Xh/JtvuDXqnjcRmZGkd8uEAsZW+TIEalreEXoZTfQvETb\nevZZO0TeX+KftC5aQoxYAZ7e7bAXpp8YiXHiXUj0WnqgIHpiERirCiYUOmhD\nlHWdM8v4h2DWMCK6aUA8cBUpOKMwxXI12c3XzUsRj7BezScL0bdiEdfO1Woh\nJmsFsbeVWcm2GqgjryP2YSgtWx00mhe/5AB4PQppBiQxzlAJ68zKSomdFc3n\ncvsDCXtkUrXzW8kt/PvBqHsPlI0CNyYZAqiWy1E4T5eLGm2wJ5myESDStR9r\negDEoZ7chNwXkqdit8fEi18qBQxPPNPIX2NIEIRevt8U55AGSozy9/vxV6oD\nbd2m\r\n=p6eK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/density":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/tab-scroller":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.98f7faa05.0_1581103330779_0.780040806137926","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e10c6d5076e67b171c79ea94815184152365fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b4727e43a.0.tgz","fileCount":38,"integrity":"sha512-qiY9p/byNe0F8MmMM+bG4gXobmXQBZsRoW9RXN91xO/N/Vl4C8J2O2pYfnTK6F7mXUL3S6yFBXxJ3gFG0nvCUw==","signatures":[{"sig":"MEQCIG5dveBt+SIJlegzqTLlkL5aCLbBzrxt5VeziAJgpGQvAiB1qYQJFm0RytXmuD5BZfFsVaqQ4Mun5uUeyhuWYkfRpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDtCRA9TVsSAnZWagAAETkP/AiJXEeB8zXl0TJui3W4\nUT420oXvaOzq5J2eeZap1n0VdXiulkAaOdoDHuuvYhQo1XEFydxJK+C2S2lO\n1HmKxnHpf06sJX4qBlieAoxkjOdzDmeHAlGfFzDSbnA1I8u9bWjuDbqOP8H8\n7qNzGd0hrLR8CxEqQ83hcf8Z5M3eb1VV+mUyQeeql75BbLj8P+scqprWy73v\n5BDavhuuZ3q2khjGKuo08rim5FWsg4+5Zl9LuNuGC4ASI+fkeot1+T5eJiw2\n23faqzIV/HwUIvOiPGUbRZR5iZAm1xvQfevXYRHtErScH2BEi0BLWFl8F70V\nkSfO+9nTqiTfTmNhA4SmV3zyS2pTnYf/mjQ23gcJtthFtBXwbGugBrepkBDf\n1xeiHnG1Xz0fqKvqDnrqKtFdZFwC1/EPEK/EvvVN079YrPsWtun4D5SZrlAi\nJN/gYkcm6NrEhxMxbCAtrlWC3IMVpmd4rK0L8F2EPrRQd/ZISznRxsdEo9OF\nUBtqBBoShDvfoZfxIhIQewXBfT2WixfR6/0TdycvAgynlNwscp91V0Ty3Pu/\nNF+BYvaazTZA85PpmOgLeY3kBYa4UydzxOjRSNHN8Iz2O2L+nk25mhmglAT1\ntkgPN5fUwK6cjboJiAxL6aOmDhuJp7ahNs8yOJUZX7Xh5X8jRKoFDqd2Xinq\niGVS\r\n=IahA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/density":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/tab-scroller":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b4727e43a.0_1581105389178_0.5350407833087956","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/tab-bar","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b4b87690080bbcf52eb06508b3df05e385fd17","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.91d9d5a65.0.tgz","fileCount":38,"integrity":"sha512-250uszuz+tBsz+19VkTwz/KI4FaR54Jbn7NUtx9mSmDAtofBG5/LwP9xfmqn9Imxci9WqSD7uz/iiBP1HfVEJA==","signatures":[{"sig":"MEUCIQDzCejfoYz4vRKTwBBy4bKCdFcKVu1G8jB5SlhJ1eeiUwIgSGHs+QRap5DVBO07sHuojKuPHaHfHNCxiFi8ESjSbEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePewOCRA9TVsSAnZWagAAbBgQAI6OYUDlwPfeEuFizRuY\nIImT45EYmzAFkaH/aeF9faDIwPv1x8SB5cq1JLGMFl0KF+j/v1DG9FPiTl6Q\nYYV9sYmqI+rnliVtXu+JpkjGYFigO4vtA7AW3BA7geBbRzti2wCIAVlDsb54\nlH7TFRWzRSig/ywojHxtraNB1LgfqfDBltKODlwfjArIAr9yW6YMw9Lo2cxB\nDCcSg0bBOfKMrLSz3y07v7fhPx41ebyWdbk5JrMv8xDrZFosPYDiFsTvhL3s\n8vZ2UH6ozVj9Bnq0jmL1YTc4msfntq/OlpixPJtmyT77cy3gNTZH8rw90diD\n0Z+WEb673ForeDSR3ktBFkg2QfmlYD9TfQurg6k9qYRqq+5tBSUfT05dEJs5\nAHba6YmFhXREjD0itgKcqiAltqRWGTYHFckOYr66sUbXslpn5gFiAGMF0NK9\nBGED73dBFrwKMsvMY9Md0/pZuiKqvOsZCGcaKVUS2hj6VcxV7FQ6e2m3qeI2\nd/rW89ypznHbD2snWvSYxAVL+ajCMWynPMEJU6zzFg815e1v0NoO82xuaHdN\nrdQx78bHjgBWRNrymV7DyDLUYN0L5bpjvX30wRVh5EgEit1AcgVT3MEeTOqO\nIQZ6qx0+ZS44z2Zfi0uDnF0lQjxAdu3a3dnPZh9s40Tx6qthkiO3OQBdpufS\n8Nf1\r\n=CWx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/density":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/tab-scroller":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.91d9d5a65.0_1581116430033_0.5681302236585761","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/tab-bar","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2df0d336426f488f3d7029d7f55cb2a22fbfb3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.d5c006ed1.0.tgz","fileCount":38,"integrity":"sha512-HMIBpzMKjcqKfX0wXCZxdTdtloz5cK3BNlXPK5rACZg9THFSdFM0VVMrzfF/hUDV07dhDK7kutMU7df3qs2mBw==","signatures":[{"sig":"MEUCIAalnx3dmzZomaf8VUicxXrb5xBS+U6KZnR18J0RDkHKAiEAqIl/qX7AvPoEjPjYIJRph+O/ZArBS65xIsCbvPCf+/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmwCRA9TVsSAnZWagAAAhcP/RBrAHMj3KstKq3T3v+H\nPOaItBobNcq5QrY1k2VENEMXdwRH/wrUkhrqwJsb8qCj7L9YSBxxPezCweSF\n20h4Y8D9fs20LEh62iNxybUHhm1CXB5EUF2nzSlvALhBsW7Zs8pGRxB4jrKk\nMDEqILhBdiyvTThM7NNeD4B35bZnl88rn9Adcb7uzZdhUmWC7NcOM855uI3z\nmqH3dXHctRsfFLxhQWXwfISxBUs8YpGxk9AqaOCViseQtzaZjZLdp4J6JLUo\n4xaf0t4nw9GhMOemjxpKpaXGIvRFbQjEESHoUHrZFqb5Ssy6T/OlnK3CiPVB\ne5QyG8qSuiR4q6aVJNIrOGslsaeT45cErbEdJGDSDw2+AO7slMWVQpFifYcr\nOUGzpsvbpRDjK1CVp4o5Fl99gGlNsicAdzN2sX0xZh6wBjS+8ULdyfoQk5OH\n5MEd0psiGvXqCMBErz/x2mmgxHG6nq84xmNwggOuUsigXCWG+ybEUFYKQrY4\nLaf7VsiSM6fITO4CnTaxk+BtQ60VcYpCeEQLxou1a2rfib3cal1V01fUFum7\nXEqO2yavFKPa7jjYVtRBXQJo0hhWjsrgcC9BCALwIt+Xg3S79OpkQAkq67i5\nq2gjNHrlfpR/UHNPI+7WQh+nZiAPyCGPLDAey2/l0YEy6rbBo1fabAJkyjdb\nYkMp\r\n=U1YD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/density":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/tab-scroller":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.d5c006ed1.0_1581353392225_0.3779598659989203","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/tab-bar","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd87f06e361e054a8497f7205de25ff824dbe3e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.559f1a570.0.tgz","fileCount":38,"integrity":"sha512-DCWhRoXZBbadvFPxKo/sOh6BUyME49H/s1iqweoK3l0xL6vvByKrY8f4vHSg1FUuuWHteeoQMpsEZv6Gat5nIQ==","signatures":[{"sig":"MEUCIQDkCoY+oHJ323/PivPEzrzD1dDDRljBCUa+Bln8HIyAMQIgQjP3GX1G3LkNfMGvrG9sArqUzf+oWIs6mOH+ge7Y87Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZI+CRA9TVsSAnZWagAAv+kQAKKd00XNbsx84wvlqUwV\n/U3E1h32Cxz7mFpan8Y0s03uINGOuOSHASP6ANjrPsRMSTmeLZUgId0t/vvT\nmG94ZJDYQv7bXKjaMiiWDPiO0XlK1Dheczg9r6pS+Ix3InnxO7ru62GJNEzK\nvRzrjLlpc0qn3u5tQ/TFKMHcAkKsA0yomTFtXSmHcHQ11drAGybHaGvgugtX\n9XoHuyuf6pnLmsq4J5tXtPaKDIhGMZiU/FVRFUFNtDvjPlSgo+nLRlZEWoW7\ncVP4jkmBGNchlaSdc1ywMBDDilqwLPuNTq5dyYSNez/ki4LCMAhPWJKYZBhK\neb+rr9hGm6TuR8HhMarw+vkQdz5o0UVk1r/7Ks2qzpxRYZ0TFukNiinHsc6T\nRF/G9ihsgF2dA4flEKXarcSAx+0bhJDDtQgCpKCOAUy2vj4c1kFiw3T5eDCC\n5Ok7LW8staJG6CqVsza5gyLRf4L29XGqdtADMeimSKnl4cy1jzXxScPbQYK3\nKUhjDxu4YtlfeqSz8o5CEWrBTQJkQe9F2sqaUAWvFs0sW0NtGUBTwL0xg7WZ\n+INUQ+Bjam0WKS2eTT/iFFMYihbZiJkzStWlnQryQsLJNdRKgC/PGHI2wV6y\nuQTyU2gOwDORtLpUZoqmtmzsTKH7OHySUJ75dm+knTZICGsrSBZRKeHyYFYO\nahpZ\r\n=PaTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/density":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/tab-scroller":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.559f1a570.0_1581355581915_0.861752156158079","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/tab-bar","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41c61da61f98210886ae71ef52711d7750130d07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.ad3bbf782.0.tgz","fileCount":38,"integrity":"sha512-339YowKBLjCOlvCrwbgvqSB5JLMeZMmlCX2TTaFvvSU1GHXEKncC9bYaIj7eIyGzKmUnLcxksKSZT2LKNnoyYg==","signatures":[{"sig":"MEUCIHXwXGcXjbXwxRBUgBjIkFJ/KdnQFdGNmq3G/TF5Kh9BAiEA8vX8xmQl4/M2XaKZrIoozde1CVYmoZlVKpDKrVAGxfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQas2CRA9TVsSAnZWagAAbtkP/j0tLfb3Mv0yFiGLno/6\nno/6F2sjeeJeP7JBQpdjQj3vEZ7peOU4+qQux1ZhYb/0ay6UW0J6Klfcmki3\n74hvuVzrX2cWdRCJp1iyr7U0gg3yg42/z+yT8X8XyTkKOHGLi60EcjJ4H6aW\nO9ObewS9+ozyyF/mGijrcU1ZVdMPUMV9JWTjfj7mzRrxWaOh6GQ8GURiwlcm\nUJmBDW9fFswLATyTIkKg8XizM6pkfGmPFnZoGQDjN5NcOZVp40A52lCWTvGR\n9cSbkqJ50KRVOBOnOO+JXg/HMkzhDgFHDanf6mH9cUzVxMxKK2FokRSOE7n6\nZPYxisbrXEWfIV3UyVxqKFtYrCyGgOVXFRy/idIe2eQkljHLRebd6St14AEx\nx096esKNidnNjOCMOLy+YCKiAO8vDGDHau3sNrRc4iHm5KPR3oIMb2tDPqkF\nt5Re8AHkshV14zy/CXVXJuQXFHDyzuhOU2DMHVP1D6jkJfCyxrI2ysSCzXgh\nVQKLo/l1blHcfcd9cab/rQQSF/YjvI+AyxBCbTicf5RCt0aYJgjaRP5N6jC/\njOaEBq4NGAerP8SHTRANrpv6VZObLLBbM4nZEdrSXcr/vsNokts7P5Rcdb8r\nvD9NPpsSpqOkptytSmqu+rhMNZYqQTT5JC8BJF3FXupk/YK2PmFAVTc/6Kvc\n089o\r\n=ObBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/density":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/tab-scroller":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.ad3bbf782.0_1581361974162_0.8706586664719658","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/tab-bar","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3a14736d5ac6baea69f93304cf25feb7f29a55f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.570d8e49c.0.tgz","fileCount":38,"integrity":"sha512-SZzv3UYCYhopW9L0zd+8CXnV2noboE7oN2zoX2M8DBhl8CdsPXxsTMu7AwLVq0JPVgXoaGwolqSDP3N6gu26eQ==","signatures":[{"sig":"MEUCIDND4dwpgeOKwmpTIfYnPg/l75mo+TTUCLZVVMQQxZHtAiEA34lsxPhExtZlSX6UhfKxg2EK+SShsmWme54MegmcZlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCnCRA9TVsSAnZWagAAqCYP/jRQiuRbqdEPdn5kiYph\nuTZ/Xocv+2nWKSrZdoCjhiiD+1963KSi4FQGdsAdzRBVedWeQvHNDoFmXGCe\ncqlfEPSMX8kLNP4ybEY0kNKIj3uR4oZ1hhPFUxAgjP94X6FAYjMxecUqb2lM\n34o59mc4huhfCEnKqH/HxMM/FA/Lrp/o1FBAFpoY9wWWRO3qvJPh2Om2LsUi\nYQsnCb6XVV+W4MtVsRFA0c9LRmNvKEAG3nIqzmFOPEfI0ODFPoxgSiBh3hT3\nPEHylVEQ9148PLv4XJC1eGTUKXI0tMOMtJZAWKbAqPNfX5TaCQhVVodKG4ed\n3HYoVMzk5Ype6Jvv2l1KUSzgaaNBCxatXYq96IAVOUplsylcjkfT13leiEYh\n/Ic2d6Q01D6n0UC2fw76QHnZPym0bZUgBGiNVCR4zLGcFgjWnWZIAzMhQqLW\n6pUfu7MeaJMrP5EhAiFQyom5Ia5jjUR9Ahfn7nzo0u3lHA2Sar25T+FGhdxq\nwLUT/l7j5ZzXIzZWunBzCmIhNo71wM9wHKjcA9GclgWSq4Qu4nFDx1sxuawH\nYL61x+koojkmxDGGzfoDinA8w+gIOj3THjhW+n7SVaNh4vp8iRL+LMr7AsrI\nbgwI/E0oEsSpFvWgLGL6AYFb+U0ji9bOy/t2UJaO7mkG158y1vXIpnaz1zl7\nX5Gv\r\n=VCnO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/density":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/tab-scroller":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.570d8e49c.0_1581367463288_0.8810822373553695","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/tab-bar","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86bd46ece0951885f7e6119550a6d18a81c97f5d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.48b06b89a.0.tgz","fileCount":38,"integrity":"sha512-LXmS/6bDHL+u1Uc2QRFpI+vK4h3L6j377fU1gL9erGuKxFCxmsHRUf98dnDItr1M76jV0jMczsUVjbEyIRDU+g==","signatures":[{"sig":"MEYCIQCxttvp+uXYzBJ8ELi+wR0EiUYqdu3jL0ZBxx8+7REMywIhAKSyVTOWrG9cJKAL9Qh8nHmQZyfo413O3hP+ftRJzEus","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvYACRA9TVsSAnZWagAAIjsP/070xW/cNExnq9TmB/0A\nd7B4CmAf3bc03coN72cOSnMA8beg9JSE5V9oAeDYLlh6HKhUanmRuC26BaXE\nTMRVxjTgTsMRXSDe/6v4994mWpxswWP1Jv7gE05ysJmyJC/GTPmZgcbo6Q0W\ngNUQ0Pe2s/s3FqUVm+LoeFrUR2ovS0feRd268HIvWFLCUjFkudwkIO6A6kZ9\n41011yRFjbdTisUhq91qjPC3g4AtKTGHgKFPl84+o4XUGw9hjUrRidCC6FDm\nIx9F8xrGsHSN6xYIs5O2PvMqmH0tU1OCHrSHYkAKAKEvjWdKahOBueCMgunB\nTI5NGJtKDnKbia4eFV9Rx+vHRe2rMjuo6a6yz2i5lgKOJXEzy53LoCQYirs0\nQCQAQV82WqF0KFb6f9ukn+1B3e5LCwT/mk0LLqQGS72kTLcpHOdQlpmGwscE\nkP0e5BB+dj5VAdbhCquTqmboFIEdx+uwNUZk9E9Jl4904MwTYaRrR/qJpLzv\n2IZdof6HY0BKSp/eOUeSne4PJQZCKJysWwq5ngFOQHV6eZVoV6Y0zHdwO01l\nilaHj6clmRhDCXyl4yuHJlisTcPT+gpiAh+bcE3zaHKLHkxya2/Kn+O804wA\npCeMODIix7yLZLOC4VaDr1n9Marj2vx5Yj0cEc0l1h0uoa/ByxGQgnDH4jTh\nPiT8\r\n=F9Yp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/density":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/tab-scroller":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.48b06b89a.0_1581446655877_0.8397728359694319","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/tab-bar","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18b4547bccd68ca07e82dafa8c590ef17036dcfd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":38,"integrity":"sha512-yC2zcxlj/l6XUueEj0wz0hikd19ZRY1BA/0WpwDW1JIYg+cKqUSVgQxAprLkuV2R37F9KndiEd9CHrbwftShlA==","signatures":[{"sig":"MEQCICTCVLOFJoAnlAE6j/kDZazdnkCj+HxK/lFee0JVAuXNAiBygounjIs8zHLS0QoH+QDOyKoAYe4qsuK6jDHLC5gHpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7zRCRA9TVsSAnZWagAA3+oP/iJPtDLUwDEnDf7dTV7S\nIJjBxBpFOn8gfxjAkqdUmFnCUQCTIVAaXlqjFHLslfaqzsooF5wSztv+QAus\nWQNQ3FCEUc+Cdt2+/folzmOKS3t1KYKpSMabfayIvc+KX2lVTkcIFQySITSu\nvTiG/JdUEpJQUVBw3qEHn2jP1KsaPwwKpUvnEzVPuBBOAGp+fVVIhTmYGPqt\ngriw31M1ORQRl5+5scmuWeQJ6F1wx76EZ1tBUsngNUe93tLNIK6lUikEb3KB\nyirpjN3NyuE4FA62szNzSDUlC3lhp1wN9gvHbEZLXEXGElJ3yGLWUmBw2ZVs\nefkRXXC6tbYJNjIZ5JHp2Xwn0OFX8xrZqpuwXyYXfRBBPp+rnffBGogd92Vx\nY9jouqqt4gaaOuQOHRp9CKtM1om2jOkPzLkGUtfgFoBupioKvmpFuSEzO6Is\nh+2SvYOUIPdbqBZUdCuaTaIauTy0KCG7rMD7hgiEryDSWxkUwkEjr+75b1N4\nPE6DW5kf6xBv6bDSyiupaFro28BFH6vEW5NC44/lc8bZ0xdMpzTkspYeF3Vd\nJ2gJEU4RK9R2fBsUxUz9PjcS4N63W8zDUdvP7uE+/gfafaMGpxcjvc8HPi2M\niFn2g1nBk0NvLOnxrET9xNKT+RRJcfqX0cBEwhWuM5wXaHvA/XOfd+yVecxX\nzuM0\r\n=tGJL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/density":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/tab-scroller":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.8c11ea2a3.0_1581497552730_0.8768466950099352","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/tab-bar","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cef34cbb9ef47c7283b8935c0ac1b689f4050cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.b2f3d311e.0.tgz","fileCount":37,"integrity":"sha512-yQm9RJ4J8ttDOfG9NVEikdv/qrJ4lxUgZcvmdU0vzo7QNIGgL1KAbOgb4Tk3lq9+amEc41ifD1Z1XBEoNl/4GQ==","signatures":[{"sig":"MEUCIEfpKcHN19plJQz3FARgGIjd5JsM1F+mikiswBj1G341AiEA6bliJBuDwPUDOaZPUI12x+76T4+HNqg0Ljw1kxg5nBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcNkCRA9TVsSAnZWagAA2YwP/27EnQlQb6dkoCajXhIW\nMAt1y43La9favfIzUW1p25Zqu1aGS8C0e99Q9E/Y3f2xIzcLOqTFzqVRYEvH\n01hBWNFwlH41jYMVKnGTbFxYTzsXHMuM8rUQxY+g9Xt2QREiQGcrWq8fxocj\naIRnnrk4kducI+buEI5mGVBpHfO0ARHUJnugS0Kn/anw1qsAUx7tfTmLACpk\npaw41a37bjeABZyOXN1g9EHE5XmPwjTpslIOPyF+uSDrudLAArv4VwApHJv6\nn3LY4RVthalrKK+rFa1r2+TP4/2nFhAZ49QPGIvYRebMbKkdUDtRsuq5YB17\nMS3lShhJ9NcGCRf0WoFoA6Vzr0xQXF3lGkNDDXv1it/Ooms3Ja1CaMptcvtz\neB7pTrj17owH0DbMOut2EwxWJhz5uDoGA4VpFp+W+8uQUyNgafoI/j5euTr6\nJNQRMs7yeiLbObViYhKY54qcwLd79O4n3HMna2/dpvSU+ZVjuSNsnDZtZo3i\nvNAb9sw/6UvxNlNEytXbV8Nl5TjNZkyCv/73AWCeYPeXkdnk5UPcbMi5ckwV\nep5lwSISpuGhbOWYxN4MIEOcs8/afxDLMXmfj6dLfnJwwiV9yfAKjzW2Nxug\nuAgTdMjrD3Kd0amYZTTLzyKVAiqGhgP4KsG2KVHaBBIjvbMyEwATWZ8IXf1j\nOgak\r\n=WFcb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/density":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/tab-scroller":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.b2f3d311e.0_1581630307676_0.6775164781502678","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/tab-bar","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7acbcb74450ab0a42355739092ec3c163078e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0-canary.4f488d0ee.0.tgz","fileCount":37,"integrity":"sha512-QC5JvYh0pmOJBdyPV2dHUxnU4pmSekJP3WI+daQ+XB6A71+ErpGkUrz5+NH8th3SfNCJUSG2ez3eXRfdMGT5mw==","signatures":[{"sig":"MEUCIQC+cwF7wTKlpGA6PMl1adl5y20Q7aoFDUBupodqNBuNqQIgSnqu6IKj6xOMzGQdhP+RfgMo+9PGujWqpXB8RZgh+5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaiCRA9TVsSAnZWagAAYzMP+wd57mWG9s2d0/3SX/Xd\nCMjc1gE4N45o9DychsbkUHd4YaRbuN0cztWEMJHTGS0oB9pAc9Xvo249o1uQ\nLXMN/ly/3GYOdSl284c+9bfpePHlBMN9qIyfk4ByaqjQ5sHKAfC8f5/p4j8j\nmxI4tZW2uoMU8x5GM5GfDi3MMIDRujhV+EdTb6L71My1JOzTIFMTn/MR6PWe\n4PYMWSwclRlQGnCCoNeHCdbxhpCd/leQZjtxZhN++4bNUaUJcYRIE7gSvXvI\nm9nhmDgF9VpdoAxTE2YMlN6Sc6AfrytWTR5XRVPuaIXW2tfXICTztoOu4DyK\nyJW0yiGUpldqjOO2QDQ2ydZFQr9iKEJYCkZDAUdKKxY+diGSrSY6GajQiZ+I\nRCo32+kMXXI/6T6dPeWUhyeRsT6rBG+guVL6EECVuRQ7UIPZ6QcwAUfXsbtZ\nB7qy0/69Q3gGUxmmU2q27q3tO2U9EGK5zdj+DPZM4jj9cXAayytg0IAtZ/TK\nGXd4t4eWYGb8rWI2e9WDV8uPCRwpux0BrKGDCBGK8IHdHAeega/gG6XIPV6G\nXOicuC9Ou5CO//QZEYu+jI7avNPKLzU173y9XP92DTK57kIxyaXP7q0p5nMG\nROV/N5E+vr7ARqDPaFfg6psgL06vy0zAYZtKDuFvwu66nKUY4n3xfP4seiP7\ne43u\r\n=Ve90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/density":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/tab-scroller":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0-canary.4f488d0ee.0_1581635234140_0.4944103657164387","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/tab-bar","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2e784c75cae1f357421ad2ba0fdd22530772be1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.fe79de07d.0.tgz","fileCount":37,"integrity":"sha512-uleHQnxPyuLjE4LYCYc22vTfib90Ea95oAgxWs33cIlXSnGhigqi2iFkpBQS4yirH1v8tZhxaIP8Dp57kLBDhQ==","signatures":[{"sig":"MEUCIQCwI/Ucogi0hXcmqtId7Z/rsBEyS/xzWmQ1azqG2KO7TQIgKefjbspf974Pd+qZfbPEux+MxQg7zfuyE9yXgya8/TM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdq3CRA9TVsSAnZWagAAx5YP/jw9FWt8CrRwIj2fRdMk\n4LL5ZRLmUoMBNVop1pthsuZiRtSfny4CQ2n/mnhGfMnU8P9k2hVy4Xs2Yf4G\nlSwUQBmMP1CxNIZbS0feLhpMHHRK+woSKiIcVnG5N5hN6iuME3WlOq2J2KgN\nfvtXZy1axn3mSye1ABqbBUY/h4ndYUCeWPs/TtlecNxwMYYSKrC+l27IIExZ\nsD2okZb8sXv10J4ZTlNmM6+OQFZPL74AthyxEJ2wq+IxVvoInX7n87XbWIne\n5ttNs31C/0a7FwCqXi6L11vqZOqBi5rdm05LBU51ZQcNFNkLifpBWhFDbJw0\nucEDzF2EN9qJ38574y0pgUAKyPL0Ugsaa0qQo+fh6YTHGzgI3eNqROLT94wj\n6dRKOQIeF9UTSNCvtFbPRcyrxIuVn5kMnASSeAnnjz98LP1Uil+S8crLCg8P\nvFz55J6csxhe65jCzF/e5ojDARx7AA94NS4tRCG7FZDD0f0jGwNTf4VMTJla\n4y+ynJ82zBg0whvmpcy7aCPX5qsekkiO5EudFXux554HqwAZHh2lW6rolZRJ\nGgOcM9aas4VEa4G/ecPD/c064Hjh+S5KPaQv17EE861wa5KAKo61yRKeARkg\n3pM01iNy1qrtSliBz8lTll/1l71AQYi3BFPLDnPuv67PMEscOSdpBfrJ14rf\nulcH\r\n=7oYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/density":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/tab-scroller":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.fe79de07d.0_1581636278861_0.6503907180141877","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/tab-bar","version":"5.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5ffdc4445efe32461ba848ca45b9ecee3222ee7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.0.0.tgz","fileCount":36,"integrity":"sha512-k6fJVekyS75dicOq2Etw3gGz8HRFwPXvdLzjLLUeV/2mMGcSNMKgZPJfx32Fm7KJICZS4Hx6/Ee4hqhC53YKsw==","signatures":[{"sig":"MEQCIFuInsfC6MKyRWpixuuZfGS4Pp3aNqla4Jk+4GgYBmCjAiBtVwu4t5ZlPEb5ydknGZIXh6aRrrBmfxeGLg/dAENSzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReVOCRA9TVsSAnZWagAAdpgP/2jt7dtmJK7kXRO833Vz\njZzrGlOIbFIqYjknBkeEiJ4ZPV8WtZUC76JPALHwtPImHA8ZA97S99B7f74T\nBxzYCmoXZwPPjwdMdVj2PnbOg9zYQoxdhHjASFjCFq1IzhBrrALssKYW6FFp\npuwUUHIM0MbPKTs+KdSIN57K8JvSR8vVungDT/3Jp+UcWdkbnsO6a442rZas\nIc0YmUlSlVxfPD8CMwfjGpTtl20/C22UI1q0Hejvi5VvoZYnmwV+4moXI2SV\npLDNJUQojAnV26kOuiV2SfmZnIlG+an25/KJtxSpGRQUQZw5BeGu8VElub0J\nh6TlzmpsvaM0RITB7Ty/t3ODU/D3zpeHWaxeG+MjtLlYBn+9cAggwYwv/5Mz\nPhwMJ0e+73j5h9BRt9Z+NCOGqe8mm6H72CV83dTC1zG4x5qFTjTTJVWLSuHT\nK3IbiT02WiJAYz92evvodOG7iBmon+uUNM1ydSRVAvaQXxA7dgIQQk8jtvhA\nJDs83m3qSIwHudJaZzBDDgSc9oQj0xShvdguIKdADzj6XjheOUFC8Hjqcylm\n9T5wjwDkiMpR60dqB06Nltg22Knb0t3Gy/oX82EsoG5B9X5cXbpRnjpiCcwp\n1J7d50ohLY5ylSCPuOYej5yhVZVB/RMCoDcVZiUVJhnbEnYnMlGjP/zEiRq7\nC949\r\n=I5kA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^5.0.0","@material/base":"^5.0.0","@material/density":"^5.0.0","@material/animation":"^5.0.0","@material/tab-scroller":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.0.0_1581638989640_0.12547034477583763","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/tab-bar","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93801343bc0ce285c74b95681f2836abb469ab34","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.5e313b1f2.0.tgz","fileCount":37,"integrity":"sha512-L6e+TfI026lN0pvXWeZ8FNHH4J4gzRh06p4PIEm0uIsWdNveaWHmpbrov2UP5qjYIn5AWdI4RuwoVfqhxmiUXA==","signatures":[{"sig":"MEQCIGlhmy5nk8Gxf/qdIZAsFqU8cFaNd/K2zSZcaosTK49xAiAgu67Q5MejMa9loSfj3Xz1Q0ugs6zADuUIueuSB5DWmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzH9CRA9TVsSAnZWagAAnvsP/1OA1denSIEGgu/ZsO+c\n+y4QOXUpuHRKmpHoCA6Qe/3VTZSx21lJOnUYFLlli1RUDpb6N8GOFUnE6t11\nFPvBqHlSA2jf9hYm0HrPNglm2MN1Nt3R70GdApBKv9X7DoyR3UyYRwaHShR4\nRmqJduxSvXvfBYpRQLUl0oBfFggGTVZd4Z9Y5kljUcwVQ+x7AH5GZ19NjAQ6\n2PekdrwJbmPuL/f7bIb97P+W2NfAZlXPQ1xMAQGO0wY7oaKAKwd6iOFvLWDT\n6kyzHe+3nFIS7qdLm53F/0HMdCjugBQzXSDobAj8fWBp0tWXqEG8tqV1FC6t\nL3xiswU5oPt9K1oiRJncbzmiZYb0pdiehiddlypg6YN3GMsST+BusBInP5lz\nBB6/L2J39ygJm1sQ1h5oWq4wNM4OLbfKwHxlT7EbiJEftZV+0FIWMtpZI/lZ\nFvoiZBWXoHLxDROnMpAlZRqGVpC4Q9SGsq8m8YHQWewvepQOi/1n/A99JNtm\nz9HvMDF34toNQ3NbXotU7hxPkgBoIAlTWqMH5XYI2gMHAG0hFoKrV4sarhCy\nmVvp+yzEhvbR+XFN3TLuwDTN5kBsi4aN/tuRHLlHwTQkbO0Mi1CmDotIVZAH\n6Dx8AuAoKfNoWVA2J9R//2TbjQnzUtdEi7lUbkDoKT4Pi0r4lmAZHqBYVbp6\nBsCX\r\n=goZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/density":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/tab-scroller":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.5e313b1f2.0_1581724157073_0.04604648330477623","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7870ad7de4c69b1dd1814e8ff75738902093fc2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6a56f387c.0.tgz","fileCount":37,"integrity":"sha512-WxT79ztZjnU61oBijJOybIqzBG5768nSw5jgf35QDikJ4qUHQ2GFrixVnCvu4ABv6QTTiVYsBkdghdS8KHGN/A==","signatures":[{"sig":"MEYCIQD+6LUSlWEnr16pBTU2czE5QbUOpZ8B4uxFmlWRx9Cu7AIhAJCE8J+Xh3JK3fsgo5D0Z5oLRgtmELbRCp55mJI6GUky","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6vCRA9TVsSAnZWagAAOQoP/RdntRdIoQ2U+X1kKYWW\nrf3bzXMrzHblgnU6kumM7Owe3AIMY7uNIeHU2vjfLS3FxsGGa7Ct2qAFNTP3\niRsbc0Hv7E7tIkvFg6iedV94jTde/R3FjeS08MB5E5y9Me/0N7uSf+j/K8dJ\nEQoxf1zfMF2Kf/U0klVq6clawNyaY1deiAtPtgh4pggupJwIP2eexJmlAyL+\nHIHP77j+Gi47hdNK4XeCeinZqhS2gOuGAxbKqUj5qw/1+btwyJuA526NyBpG\nfTbb7e82Do3Bm3keelsrWAV3baAd1jd+T8wWIaKZ2P3XPLYlqpUzNaOj8+ec\nVQFkzXPwxsK/bMikqxNvXiy9qPFPBgtPuNbUy8f9sOwtplH3AtHDS9yqK6mY\nz+nrQTxF3hueU3/WtVDduuCrZmTZ2BVYgiOOVCmPO/6s+y5Kg/TLLRZgRXLQ\n8bcSd4TH2nEWD6KDVtk9ZiYhDTWqhkPbymLVgbuy1Trk2wEck31KFiUZqaKh\n3kvqAqp9vQ8dA4DHyGxRASZsuJnEQdo3gJ8wK8A5Kqp5XH78qu5CYqb5zS6I\nGw9mpvTe1dHkgYwGQCnXikzwEXTKx2L9Zr9WlEruR6oM8psaCqKumcAa/PF9\nqZjlVyJw7VyGog4CXMjDbuSagfg2sRRWgNA4xF4qSgZDfcoOwf0Jz4ou9E94\n8x9h\r\n=PhSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/density":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/tab-scroller":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6a56f387c.0_1582055086401_0.32438501301993394","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/tab-bar","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17fceef1d766c8c08013c5c156f2b56a507c076f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.bdfd52632.0.tgz","fileCount":37,"integrity":"sha512-JsO2dLfIxGA09NkzfymGma2pdUmWgGtpq1MCK/QnMUteG+Pb0jJ7ySM/Ek4X3kSueg2BIkULt0Vyffycur4GXA==","signatures":[{"sig":"MEUCIQCBSPmC2az7A4vkUBmVm0D0iJfJQonh6p2bMXqKf3sExgIgeFdOdifKtZ9F+QjrfTw5HX8xtoU9XOyZiKshvwT0uZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZlSCRA9TVsSAnZWagAAaksP/jw2uifb5ah7rHN7uvdg\ng8SxshIwF9Gj2Bh7qQAGHebGLEkg0sbI2t8BnEhWrUdPcX4UR48ECz15wcGI\nSk8pjy8Q3LIfrVemQ12ebcH443sXp+Qk0kOYKd7rDlNmr0PIQeyt/D5asqzf\nQKic3c0wWhqKuEpwfoKC465De7Wh4HLR9DIywnIc3mzeiq6m917yMmv+T47+\ni/6q31ZadA0q/UR8rPrMSgPycVwVA6850MXDOX+V+O3LIvRY713LpAasOqsR\nhtmf12PnGDoY7gt4tvivAYux2c+df5TUJZe8svf/E05gzhguZEy7dy1uonIX\nYZoUKXPHPo6agquB6O4IY5nF0AIKi6FW5QJjufhW175ZOpAaiu76cOKJKzKm\nwuumTWEJtQy75vJTlfWmp9s0Qwo2N7J9OZROpKiAXb1V1lXe1u9s8nfUH/G+\ndELnr6HFIVOBESQgG1aFF8fdJ+0rKVRhBV/R1HeoCQWFmoiMq3k75Tdvuqwp\nqmU1qf10ryyhpIkWFCzuTUi6qb/bgDhSfDwB5S6Ru7f1mZAcOnEYqd5CbTOA\nBbE/HCrMIZ7V6KVsAPJJiGTB0ZVSWdfmz8jHlzWSDr/mWktMk82LjWSWqi0j\n7VNrTYOpJwldZ9HSIs+dN0kxSn8bKakXL5+qVcPMTNnVfY8CBwcjXAnF8hBm\nHYaO\r\n=usiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/density":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/tab-scroller":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.bdfd52632.0_1582143826387_0.9934082351798557","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/tab-bar","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a49652adbddb04a3bf0c554694dd01f7463a03e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.ad2e4376a.0.tgz","fileCount":37,"integrity":"sha512-xghFTacafsJmtMS7xHMsLTx9J0V0FsZsexTkTPTm09N5SwTzQTD08DdEOptMo/4VRHGeHuA8BCJgDJedmzyUFQ==","signatures":[{"sig":"MEUCIDQ25uatX/NFhWZHYzeJq3CDqvDZ9hxc8N66P5GL9aMfAiEAnEQEpx0mMaYp3Hu6/ZCgnBdfNKcTWnqVET8TINSrUYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNvCRA9TVsSAnZWagAAvFYQAKG6VKv3bugSmdwV0PZ4\nKnngjCapDnRgO0ZuCztEvj9KEBeFltOfTfcNj3qz+/qizSdFqKO3ehQICa9J\n7TMqV1YdV8MPgLm/jEGt7kUkF67xpCeKRsfyGR36pFanFedH8/XM3NGy7/66\nAx3p7s7BgwFM1m7hhkqUnkGn/y2E1G6mw8DPlRlKzi84lzQkF6ESj6LMgFMB\nBM2cEDCbD7CZk47VfJTdW+ygVjE4YYbicjeaEJlu/Y1rOEAtlj/bDDKx6u7K\nGO03ZuEan7naVC+Ximz8Je1t5pU6XdCoIwTUQwxpfmzE3f1vJnqhLx+zkosA\nUWdZytzO6qiXtDwzq8H/LKa6dydhSTR0LAq9SK+sDMDu4LrfgVynLTzChSgr\n08riY9F0YUdw2Um3sCPc488gvlp4/mHqPRUCjvUnkJ8t4lgOIst4cReZAqPa\nlP9/3EqzgKRcv3c/hrc1hhauhu4Vs3eZ5DBqU1LCg2DVfBjelQHBSYgiY97Q\n8pjoZPSEJjVA3nEYQMSEPOV9QW1dkYx9BXx4FHb/3FJiwaSITNZOSp7XuSy1\nfcaIxMl1ulGroDQICwH9QhfMTS4X+a9qdLB4ULyAArGtejvgVa0qcjwfzvHg\np8U3szKs2+eTDqg0fI7YnVlv8CncsqJ2RRctEPqRG3GL/1Z/7Y5L4u56uBEu\noexI\r\n=rP2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/density":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/tab-scroller":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.ad2e4376a.0_1582240623421_0.8344776153157663","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/tab-bar","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81572c1fb53e260978caf8cd1cd3e1e101dd5999","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.765caef18.0.tgz","fileCount":37,"integrity":"sha512-MkvUv5x05X3g1WRR+un3rX4s3L9/x1PwUJmbqH7dYtSlXS/G2NM8CWUROLaQutZFX82Xe/Lfpr+6hI7tseYJEQ==","signatures":[{"sig":"MEYCIQDLGUXxKq4sMlEgrYkbgAmg1ftAVXIwmLYg6XLHsHu0hQIhAPiLRsWO4b4oj0HbJC8t9j4kVUyTnhnh6I6AgzKA3HYN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBSHCRA9TVsSAnZWagAArKwP/jpiFwccUf1A5K3lK9/c\nqel0TF9JlBjaaIuPhGgbA/Vz7vTeCLcMARGLL1fY8UfgATrrZaDmWU5ELgE9\ngVg4REUbxRhM8TyOffPleO1FRxc1QLHinys75KeicQp+dMqhBMbo4dujkk/A\n8h9UHw3dzlmi0tdOgCStQmwu8PBaiPXtuDLVLdOLKqpzauP2tOjRLuIuPdsY\nnJagzqASpw8LP9bYkvMAnmvURmfbGFMSEF5LFLmfWYkaACvl1WuxGAjtb0se\nf0SMMAgd+rbCUeUVq/hE/6ouKY9iV1PknuOdjOutRrLMECaF6+FAh8huMjvG\nBiVb9aFoPjITZzk41/q07MuMIhsA/jZsPS+ZdthWZUrXd+I08m4iI4j1vxfu\nIAGaGUsBOwjMbV0/9XOCwlTxku3B3oNjdqQ5uz/05E02lc8ztOXc0Xoq/8yH\niJgrd1lOnZmUK15ukGUMBF9zToN5HqdiS54Uvd5sN9z1dGOr04acPKrcdqfH\npvH+mdr/F10ToizXVHWmzGs34KHMdg7oZYvQbVRwApPc+AumTAHBG33yUIDi\n2NjofHy647pVPA8Qcp9b6O1FlhHI9riDpfi+3ySAmpxg27MIyU5v/dSAOLE5\nOpzmIoQq+fDEcjCNdcwOnVSVTA6xNaW0YuLmjKvSc8gBmG73EFfchMS8lRfh\nQ9LD\r\n=E4cT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/density":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/tab-scroller":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.765caef18.0_1582306438969_0.6633606747135454","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/tab-bar","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f09f920d6547735b252067b39173e2daf13658bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.949562303.0.tgz","fileCount":37,"integrity":"sha512-rR73FfrdWR71Xspd55i+zNP3TX9eC4s5Ybn465rNR3p7L3w1ZxQNZTYUWE1PnRcN1/lI4n8MDi1y83PLSJXopA==","signatures":[{"sig":"MEUCIE3NSGqBW/nX4dsFCvwaPJUv3lYGsp2EIzV5EUqkmNaeAiEAlrj0lareHmJkauFWsuOa2fuajKnxUpCh1UmJFr285JM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/cCRA9TVsSAnZWagAAqggQAIJS0o8k3fMzgw74psEP\n7wcouX+5HHwoJrCzyvAOcE9jtfvuo2zdg4theCPaZ6O/i5FvvxzarHaxohN2\nsVbJRmXcVUKEI5yIl54iNIkWkkIzoLuYbbfLwfYW6vQlTV/v+Z+5uP+P6v+B\nOT0EkCGUaLmDKZPTK08mGEoikzyAjd8+mUmF+bRk/fV52Y9pyEBHqDeRMVNb\npgc7edQqxVlc8x7DTw7ArBjOcnKy8B8+8Z9TX9U1qE+gXPZ8xEPN3pnx7gx9\nWq9FxCqokGsoidS/FOBBViM0L/jswYSC10lLBYLirgdMZxz3SIifFkgbEnTA\nZHVll67Lpz46imS719E6quuK8wfTMBXIIHZpxSWxw8+r6iB7fv7hplxQ8zus\nRsRQgpoJN0KwTJDgUyEBv/ivsMuu523RpEznpA6N5gkJ0G4gAx+uYekjkYB3\n39CJ75NkDY/FunKZiI8xMowRwtyG6/6ZlV3eQpDhhP9AEszYq2ZPySgNG+fZ\nYIoIdrr3gwDd33wgiDH9QM96hEMM14Ie4cx/nY8TcHCQk5heDcF1Q75pU+KC\nF/zOgSPSBJ4VWyBVR7gacs65P6VXuWy2adZzlG6xOIrbqoFMD2vCJAbV65DD\nKYwaRnxA1i9RgX1kHAZkHGO48kf8C7Axet1rjrBgDfyJrlb2N7M0NNFxQ+DK\nBi7Z\r\n=tuAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/density":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/tab-scroller":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.949562303.0_1582317531510_0.08367996478430673","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/tab-bar","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2dfa09ddc13d0c8818e36cb99ac199efda0a5b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.7ec96974e.0.tgz","fileCount":37,"integrity":"sha512-o6QtZB3ff+4aBQAkDn3wcMvfDI3WfS7NvUgATzWl5+MlM794fkWVCS7Z/fEBXy5g8C2YVQMQXY36U58vtm6pjQ==","signatures":[{"sig":"MEYCIQDSrX5BuQOVV9+eMUungcDrd1C950jwNG1XDbu+SP3UbAIhAKuX6Tk57Bd6yeopbfmndgftMHQdsvl6EG/Lk+X1Uza6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBz4CRA9TVsSAnZWagAA5ucP/3jrC+Two1sRwNtfrqc0\np6+07BQn699rfJxouupkmXiQ/6XpJ90OXxOrn0jT5SFURyELw6e4ItTz/bjT\nVsmwe09nUxOk1OqfkRxtvHD+um6eDxtfd3yN0Vqb/GMkBsLEaD9wUzlPmNNM\noGqCt6LFqfEDCAWr8tBm4OUwWXt5ERJAZHeD8siCGRVAb0idpPCxbGgTA9jU\nfaJZiB0W1qdgUR/iHxrDgoT5mctExnlVum1TdYENqYBE54cm0aJ8206gHvEO\nuKpfU0bLWMhD8iT2DJNTvwkumx8MCXNjcQJ2d9uIyLKoP9xwscuS/EqSKuSH\nTyOOiqL8HKI8mZF8jCAeI+oAglUgm3QU6Qe0NcsIMoLTRztwV3tU6EHwLdIR\n4M75I31HDMn3lnXmfLcdfODcU1NELTypW0FNHaZPN6VEX5aJqsJli0x9gceU\nKYJrg6GR/9nZHteFpTy2jrJE7bgReObiK6T86SYFoseXH6shSvuQdZpG2q7b\nwuRcZETROfsqI7d1i2y4LVxyyk4/v6VhZvJqHQpDj2kuFUpvN5gXGnmL3aIv\n5Jc3zrZh8xJYxu2d/wx54oCVXn59iMeNFuYtAQHgjtFu8PqbdtwDz1paalJe\nFJ3soLG04VBzabg9RvYz4gY2bCbPaU2ZU/etPxQ9lxq0ajGjPI7v799VdhJY\n5tnF\r\n=OC1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/density":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/tab-scroller":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.7ec96974e.0_1582570743609_0.7407803032073277","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/tab-bar","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92e0e4762009a38a9ec5cf906c879308a2ca2eb0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.265ecbad5.0.tgz","fileCount":37,"integrity":"sha512-un8Xv3ycqUtc7MjSZXzpU1mnDhV/ZR0LxRkIV9O6GWvnXQJT+PRDPmBH9F2qvcwY+T7o6gsWsJlxGXTG40FEKA==","signatures":[{"sig":"MEUCIQDEfIvcv6UkDWbzc7dSomEhT/Jg+hVEL+JwtrsIvz+zJQIgP1z7Ebpt4t4RCIiI/fmTOrD0m0yi46h6QVW8GfD1l2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYs9CRA9TVsSAnZWagAA9lkP/jRe4hJNmW8S5buhqr0c\n/43rXAzi5DUMMSXcpiwz8/XtdOB2MWkJpvyu/ZhPmTb5flDTFTaWtXzcWILh\nILwkg6DSZnJBkAfOPofQYhOyq/Bb7ljBK3kofEPAdGCNiK0sFhQ6X4A2iF1H\nJWTDHYyQpBNqFe+JhUddWpg9+lc32rkqOVIpY3AxFBT0S/T8MwdDO4I1LoEM\nKIUtuD30DqQfSg17bisyCkPTYB2iS2KAC0ZlcxJRf4EcjCCkNtPMRJ082vdG\nyeiageruNymjQQ5VceKibX0HFvT/Y1nHlEjVdb+H5PsuiSLxzU32pNlzqMZN\nBIgJuXgbcSNXd3gjo7QTjYLp2rw+5cAYPy+tJ/+vioY5eq1kbcWl/Iw09F8K\nVnreI9FmaKKZuid7zpWqzLJqrHk1QQAgHrLtpI92YA2+Tq+Pv7+k+HhFA2Yr\nxSispY0ePJf1zqT/Oy8FvxpmLENgrsfuSHljl4U7uHSRYoOgNvUoHMyooZOj\nE0dve+N+JwCaRa5wwnx+2sf+dHtWWkyLwwy1JR99K0RtwhMfzxIUntQXKobi\nmZRWxg7mMiZSkroOYw/6LFqA/iijO7wUNMM53jZVxPRb5++OR0HmTECHSygN\n5ovmhHQxvHWFIWePv8Pn1YHNulEtpUSQsHMT9x0UHXCST+AB/2TKJfPq7CBv\nG6n3\r\n=c8vW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/density":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/tab-scroller":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.265ecbad5.0_1582664509257_0.3908876456704329","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/tab-bar","version":"5.1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b4e959a04f3af76282e9a71204aad98a512e78","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-5.1.0.tgz","fileCount":36,"integrity":"sha512-zK1Fe+in5cjkNIQH3Z7NiKqz0hNWehgr5e8lO0MxAFoTRodxUw5OhM9rse18c42uW+fItTJeSpLdz7RceENpyw==","signatures":[{"sig":"MEUCIHkd+zsx+OWOY7wBQzWM1p/0ktCXyV1yJpNcywbbnz1BAiEAnvYHYwKOIU3tEumZyJk81JrlSpj1MunCR4TmcbOEwRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZP+CRA9TVsSAnZWagAAI/gP/j4KyhLub2F2mhegw1dQ\nuQk18J9O2nHYgGhDjLeVQozNXlJjXSZRnEhUHFvdqj+JXxtjYEa7YFJ3MHEs\nrkOnC2iLBUSZWPM7e/qSLGieRG1aNQerMaXclFDGH6AZzUpsLXobz3etYW29\ntjwD36ZTqoF5aHeoMWeklqP0sMk4grM4mksLlNIo42HpPu17qCFpGrjDDw8+\n5q6tM9cQGxR+7hlwcRnbOzN/lC2ClRU30R6MGFAssTSniDWeVuU4uLi3z7by\nLvIIwqD2jIwywwrbebYdXMhq/AVYLYjMw34RCBwsWk58wtJr8goxsSIwQzHs\nYrCASAbv3qj9acREz0OFtDa+P1vmqR5fKb6AC4jJtP7xw6/jvc+/Ws9icig2\nJbHVU1B0SvYT2U8YsaeUZg7vZ5b+RfsmnWS80EzdzP47GzCcH5mG0mY6ZY/Z\nTqPAjJxV1RxpicOMiLETtT/ciobsUcFAjQCcX31w21v9dOaL7NLIKrA1DJCP\n2MBUtkPFUkYXmDuFsI1n+x7ibsvqNSui2nI4gkY08EFtmY4Zh2+Zh7PRxW5k\n/hzTn2Sg78n1hjwDtX41Mc6cSxIyOBF0bW1fdF/vmDJp7j+3H+OmZm/hh4az\nuJG99lOzXlYk6eO/Vv2rHTD5jLYzUs2dxsLpt4tskjp0csn5LAknX94mG8u3\n+rEw\r\n=/8/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^5.1.0","@material/base":"^5.1.0","@material/density":"^5.1.0","@material/animation":"^5.1.0","@material/tab-scroller":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_5.1.0_1582666750235_0.1417437785982345","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/tab-bar","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cefe142183b671dab2877922071b282b521da6b6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.2cf87456f.0.tgz","fileCount":37,"integrity":"sha512-/CG2Kp4aMB9WSPh3nmkXTRs3x5A7RMeiVynO80b0L3Bs8AzFmAHXSqRFBs3f4Flo6XNBThN1ddP+r4khvE/Fgg==","signatures":[{"sig":"MEUCIFDlP2YKIIvMrjmV4feEZb9pkZVZhRxmYjwfwigwNcNOAiEA2Hkvmyp5cuodvbEThjpUT2KrxFFdSh+PkY2VCh/HexE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZRwCRA9TVsSAnZWagAAbmcP/jhc/Vw8xiVr02OgzRYm\nrXbTaX+3hocH+P3Whg015gH+jMGonHqaB1j9JSO94Ye/46XJEpKYKFu8assM\nWA7IREZbjY5UgnJfBWzto9h+JhRT4Dzpc5eo60VdYXeNdP4lCaBiX44bzaaa\n5Xii8ems02HtYPWDCAmuMgoQ5uyQ2UXDPUyB8VChPP6jl6B6D9479ALQFfDD\nUHB0YJTW6ws8N7vpQe8jDvb1VCNoeWKldqiL7wyyrJfF7ijF1p9r79d3Jou6\nyM4kwQvcliKhtxeN7Dny64e0u6DJicztlN1t2O7XKpIaAhH6jbBLaKRyBceE\nKj9qiwLT9ygHLYmNeqSnLSPMvBFm3QzAIj9+TU2d3SKsgeS8Oolp8HBpJYfX\n4sa01MJ131po6k1huy5+GwbKC1F65SixXPTAg5KEQ7KQmCDch1Q7vWyaGlHa\nNsMIhi1Wz49oqU0rLMmr4XFJMlMIJsd7JuFES66+mq8WN8X+5kOJUE6mSb/l\nZhXvJPH/Iho7ohnCXx21Nnkt6Nhq7G84gylCLBzv+MaCKd8TfA+ZjGnm5TGD\nIi4oteAzrVSxSyQ0P/CnLsNjx4zuwO1Pqexfy0BEpnmMS2KdS1JDkqErFQGL\nRAJdVD4di/vdmD5yzhB7QeK2im6u/P90Am7U/9kPJDX6tCYHY2HNsD4ma4XM\nG2pt\r\n=uFG/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/density":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/tab-scroller":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.2cf87456f.0_1582666864299_0.365029534675825","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/tab-bar","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4921ba3355bac8221c6657c7291ab3ac323a4d60","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.781434a92.0.tgz","fileCount":37,"integrity":"sha512-oKfOrJkFTIPcbuWd3hr0N5DEJPXgy7TtMuT8WH66jPC6578snL8hOEfqpiPwovBCmIOBDSAVR86Bd9NhvjqE+g==","signatures":[{"sig":"MEQCIAPGAkzviWP7eH0j3Hh6CRs4EZiy5AWK872xyK+N5XaCAiA30u9yFIk9dYl1l2C2/jP17TIGKgxo0UvKePNuELfunQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa27CRA9TVsSAnZWagAA/r0QAIngQk/6e3AtXGMIFHiW\nR48onkRb9vBHoD4gR1IiMs7FccFOETpSwigAitR+smrOiQq5iw/b7CLm//6c\nQmisbdaMCq7bA73kwoBl3Wjv8Bq5wC99K3VzjlqiwUEwT95GgQF+n71+k6wO\nzMrR65bUgdsNlW7Naxl2TZDIchJ3lV3mzosn31fFg3JLrDzz7PRo2natUE8g\nSSsPmIZF6LvabRglzv7/AE+s+zI6Hh7W2pVvvcNMZIfF5BGMKmXucq//frky\n1J4cDVbiHfS+gJaTmXFkQkjF7HWG+tcUduNcV9cBrKPkGmGXz3nDIOST8u0y\nVfN4p0L3Peeh0Lb1IXnJDdTIiMUjb1QlKmp2hzLrM5yIec115bfiPpuUbsPn\noUfANR+JzaafzyOFAjar6xpkzHLHU3IOM0WZzZj/m5n+xNZEqyb6dRKuQVam\nN3QBhUiPUee3IXorADw0e8EvFMbn4aoo4j+W5vq2FUJjUlYj37b5Y/kP8tfU\ncdr926ywHs1M9yuCNee6mqOLMt4bFPeLfRZ8ATbZj3T6Jka6Q7vLs2xua29P\nW5fL23FVghXokjsbiihpx5uqhLP6vF6Z7pocdgdeVdMkNNFOieK/YD5Rc2yD\n9LwMPGP/uUA6Arvsukw5KxzH6zZrPh/3abuNBkYV9E/3TpRVCeTkXqMlrHve\n2woG\r\n=V6BT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/density":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/tab-scroller":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.781434a92.0_1582673338738_0.6605865985369779","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/tab-bar","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcf25d243014cf0f8b1dddaf632b18425a571cb0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.d6f60c98b.0.tgz","fileCount":37,"integrity":"sha512-b05bdQRmM5ab021uwS00kW3x6E35DIsd55k0eTV4C0zU/GzqIImSEqS9JWVMkYcVR0y+OO+sydJidHd3M34lCg==","signatures":[{"sig":"MEUCIQDzNeFDMjmHt/Sjrri51rawU+T4HwxZx0KuxqWt+AL6cQIgWjyV0KCZElmEykAXgFTcDxtrNvIFalfBYb+FYdSA/NA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY6fCRA9TVsSAnZWagAA5+oQAJNkyu0/iyAoeHIz2GI0\nquouuxFXldZkdcUMKwO5wpxQn418CVownYXjuFDhk/GOPpUQhSjQVHMcfP1I\noeg/btd3RusDSFUTrRhKIjIKJUWDO1Vn2LR7zST2RALd/Dazo+HUmUJNeche\nRop+EJNcYLeh9CaDwz5iNaawJEtjU2oUfUjTTw5+BAjBNc35LO6X4fJg4bhH\ncLZQ0Js0w+Sg6EJDyOBUowXZKHL6qwaU+5Ke4Jm3QVehrF9p+J4jTClW4ogf\nQVII0VOAz+NOMQ7LIEGnIJQE16R8WXcz5bOHfjAYgffbwQroTmiBLL0mmVTB\nq3lMSzF/0a/YMbUX/ucsOMCmg8gqQaHp6a9p1wPEf6u/yqCluTBoCoE8o7m/\nf7IQLZTh3X1RovvbjopqjP24LxxBqki6PjReBDczZ8ho42JaT1NI7z4QaHMm\nHaGWsr0Eowu85lgHtirUThfYN3eWu6YGoaSuLj0+9TnlVcqaFeRUsdKoGKf+\n+bfax2SEr7lKwL+KgI208eRCelQwrY3ZtZ4fXaN4oMF9bmENyZQUs0qWly1O\n9Zrgb7WLD/3QXC+MHoaEY1DLZdnn9wJ7MMQ9122znF0WdN7Z9X2jRaNi4w9Z\nOHaOHYM3tL5URyt22qH3PcBoNbENHgsWHIDfIndvZMYCUMq5U95E0Gls8qA4\nst/8\r\n=VvpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/density":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/tab-scroller":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.d6f60c98b.0_1582927519299_0.7892873248006571","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/tab-bar","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b34843eb727bd062340116281257acceb10d25e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.69edc6e28.0.tgz","fileCount":37,"integrity":"sha512-sEaP9wrbCr8z2L5fUdutKoAjuePrGBF+3Eq4z/J+soqgFr49pQKnjyALozGVdedJ4WDWifG0KLxq3bih/w1gLA==","signatures":[{"sig":"MEYCIQDLL2z7mGlJU85A+cKgpF53xNOvdLpKB0G7dZdgIEHKsQIhAIujLSgAFZ4R6OTl43nArFCzraAQM6a3bSjg+89FHLUX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZB1CRA9TVsSAnZWagAAaNcP/2gII3O05/94ZKUlh4R/\nHkRQJ6VYoQt2K0QmT9x+WGznY8ewu5BCLKXUr7nJQO113d4Ydz7Qk4HWhNI6\nThiEN1+LxzGIr8puieexrqQUngpcJsfb7aPyzuU/f8Nzlgsxpzwbsm5aI1do\nPKE74XpZ2BQMzndZ/vERcn90It3egAj+oI2oK6WrJUPAv/00PjNMxM5BA6+N\nheYmV/MzQRS8W1z4uVPDj1YFzhcMKIelXMLGxWKZnTEvOHMjONblT2mslzqb\nZ2FQhMCh8clxyzm4JYRqxFVp7plbDPNLHsybh++SuTFQXAv9l0oxrPL723rD\n20kEwdowY86rEbwLKIzBUxXSUaTstOdkpgM8PXi+mN25lECyKPE2UB6tr/Hz\noiMPaV2HN7Y39U7Dp14wTBv1WEeNM620SXI50m0qkfXEZdDnYSR8aGZ44dwo\nGxjLqR/jNt/+gHvaCJEdoL7RH4RR0jlZ8Mwblra10h1HMiKPw/Jvyr3x9QNp\nmVj54lMJtEwBYUAbfmXaJHZo5hQcUZxXHZycY2Vyj59q/1Dl2eZeN9escO3u\nMZSent3PvzvrqmFJBvHQ6BcI58kvKV+lmoq1qu1jbROEPKnsfGA43Us+bRey\n/CZOTJHvHRXAV3b+qswKXM/V/Ogn3X2kdSWaPVuZFiC56hqVSLhbjKbH85D3\necQM\r\n=ijoF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/density":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/tab-scroller":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.69edc6e28.0_1582927989471_0.683813818759013","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/tab-bar","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66cac59fb272ae1dc4d6ee54d4552d8fd77ac94e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.9372e4939.0.tgz","fileCount":37,"integrity":"sha512-vSsNjCxVLH0pvSetHpwHCCCooTaY4osb02MRLffR7PBtHemdaC73CQSe+rEsviMnMOs/VBeY2qbaHj8XJj7NTw==","signatures":[{"sig":"MEQCIGOMZMHIW6UDtb0+eAZJBvWCBv8y1MpNFxhtQnM2mraPAiBFm4gJ8lqM8jQhsXbg1t6t+LrctFUFs23oa8gOsCVvbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvwCRA9TVsSAnZWagAAaJEP/i7B8/LemAtgTEj5aSil\nhj2YWlHIpe4VFOXOeNW69OB6ZPvhE74D1jWpOMX+qRCs+blimdstzs5e9U41\nXxPZXqAiX+kfzyXVxed4Tr8gOeJoxYJnJELz0GkFkN593qQ1ufjTeLAvbiRa\n8vHuHMCHRxWt7NEHdbDcyhX6doOFx7vaIZ3I80rQBylVdu3idJTBFhWyBPXy\nAKjuzrExsWKSLmIpzvmZAk5DYH9pFEpUR3u8OEyso4jsHiM5ZZ1NnHAaimMx\n0ApmYcbGl7a81heMKSSgvjKnsKIpfVMjJDjQXq/7UhFYJhmPgst2wVVTmQSY\n+7S/xXv2GZIjtlJPuRBSo3O8xoBSAN2r58iNkFztUfQ+9HDYKnPo+Jd4Z7Ki\nUWyrah73zA46A5IAuEGEa1VO6S6VD6IEvGX4Hu3gngNwh/maEyLYJm9ccLoh\n9CLb7/45fbvLJNZELQR4PXQ9xPL9wPoPu9C+/HGjp17zA2MWFg2meQ4aBimg\nCjPmk4pXJ63V2ZW5c76BHdn7e6mGjSoMH/V0YeTv05hQXkx3p/89eoVzIZ+Q\np7vribK73TZ+6cZaR4Ek67LAaySdYY92YdUx5o7nMFF8Cs6JlUczlIVfzSGT\nvj24+HCSduc/rBgDJcIRo3BvLo944E1FDuPY221yhHykZv0puz/wo6uP/GqO\neG4V\r\n=kd+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/density":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/tab-scroller":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.9372e4939.0_1583262704347_0.21467222346500692","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/tab-bar","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22d5214d4f82c12214d3125a6cb45e647f15a56c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.9cf5e9842.0.tgz","fileCount":37,"integrity":"sha512-yOXago6hHlR9cVy+47TdndPY1NRnHYWqCr+pR1q7so+FFCGVxPbgzE87q1arC5r+NwW+2/IsDXBT1bTwEzwHNA==","signatures":[{"sig":"MEYCIQDvdWw9Ny5y4rbnJK+6vk6mMekxr5dzlPz0eOPVVRZRRAIhAJZ0xgwA0mq3Zyon3ZHKIexMfdVPEdFtHkVmv0Hln1/J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXufVCRA9TVsSAnZWagAAhGgP/jcNfPlNezF4cbjdlxs/\n9hECXmf6MCmQq8IXIdmCjWcNBOcg7g2cHJ0qQU/J7q52nshPXkXlbTDllVDW\n5iQfrZk+GEgG2iJzZ7MUqAfAp9837VxoBgdg+ojuvVPep3qtcO7WUbtm5mQ/\n6D9SHJKnQCHCnvoLd7HM3W691zFjTLs5wpipOZK4yWlrqnGH+SJzI/HG9vOF\nPw3DIaWfsTN95hv29408uyGv//GRwgTTsuxqhrMUMq91+x1/6BB4YYzsI4qc\n5SSXLDGCWYjAVWU1bvhKqNxzBCJPXobgrI/DVtrnagwpTR9AaVvw6ToCCgWH\neVVQTGE1V1v2/3VYOpCdbXv4GCZXzx7lSBuIg7+u/bHrwerhDjoEH4opR9eG\nYDrdi1qC00yZZgpyGxunEQ3er8ttZpRBA+aU1HD+VB6wDeXObxxTZzgwSDoP\nz9/J3cj6DW8tBu6/4aO+vhUi1dALpgFu9rDD8AW8en9yC2PBeThV7AUfEOra\nSBfHUg/AxJcN/A7vRlyNb+1Ic/G44ggDpxZf/LMjX40Q798prVxTRFZQlTyx\nKLR+M5+Q3ZnyvN3InshnXRXgsZKpfKbFFd7MYjhYQvWcJsZQAVaIYGhVRHAP\n8hwN2lz1z7zHy18UjRgrpepwqux8PdlqAVnp/t3QGmM5KqTT+rN5cPeDmUjz\nucqK\r\n=5R1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/density":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/tab-scroller":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.9cf5e9842.0_1583278037387_0.8121108707367293","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/tab-bar","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"114071e55648f2d781fac10c1d8b459314b4ef79","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.3657f8863.0.tgz","fileCount":37,"integrity":"sha512-31I912kEP/Vi41BUnB/Jd2b6kwu2EZhXUzoSp0/2f+IqfKNPidiZweTzXqTch4Gb/kjaFf+kXFIvqjr0YBQ5kA==","signatures":[{"sig":"MEUCIEpvlgqPNtVxd1JCcpc6MXpJNoetJlnewKB1ZwI5xWM/AiEAtZFZtugNqPEspo9Oke5leMW4miWyThNMIowzhI3RHsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kkCRA9TVsSAnZWagAAA5cP/jaN7RnzhEnbYOYLzcnN\nnVUeHk9ER8PdUTwQwcIPDFu92sBBTCVae0qbGK3zNrCBscgRWPW4sLcQQjMl\ng5ncFeeGg++kBTcNRNOcX3gNraJgAcsdLpVGQe3lWl8L90DotA1mRL2au5nx\n3WdiZpr50GIf8+qyhMm57DdOijH/NkbhJFmB9C22S5puOtL6AEkJRyHqKPv0\nf1bkL2v+DxckCaPNWyxdjhBUtk1CwBvxFZnL4mnGVK5r1UH7Ik9RZt1MAcyS\n6cTReD2HwM8qo+Fw1258rDIa41Gm5XM0YCeUILtNnAmggd/6KP1lGn7iUfKX\ng8pLZAcjvoNu+Av2exWTx080jS7WS0mPxUkAHw4seywxxk0Mle/EguKDmJOe\nRfHMsMxLnpBrqI2uK1X9hkmYlGqxr8/QkxeihzqTUu2czYu+Nv767L7PlKn7\niYWHEcthZa92g89Luh9c3oKBNn7EVXHvS7TeDoI4Uw+8dfbINmpsWkBsRyKl\nukyZQrYHvkBE7aP5sqXPnlj99DUPHoL4WN0bZSjGUv83HMI3YmJclmdV5PIj\n5pO/aPMZeMFUXLgd4ZaEMXUyuI88cKZYxYqVmBbgHNAQ6WrOEkO59bTfuR81\nLnFu3AjoqjzTB6RCcXF/2vJjs/66zqAL/vAB37BeUPF21z9YL3GLt0ekG3/X\nvwLp\r\n=dijZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/density":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/tab-scroller":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.3657f8863.0_1583343907623_0.2471115906597101","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/tab-bar","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0080bb80b0623d2693e697ff3599e9ff43cb7b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.98b843417.0.tgz","fileCount":37,"integrity":"sha512-ucKaW3jWuyDddJyaLlMyBkJwhiY3bxHNiwvbVtV7gVsPdRv4A7oZzzpbLTdGWQtnLjtwI3xWgnqJsBDhFXl7xQ==","signatures":[{"sig":"MEYCIQCKdpwLePI3ZBrNm7Y3o49/HkzkurUjSBBSrsJJFz8tzwIhAMm5Nvn4YRIxooMpiThTopkqSLbzmZl8AhBY6ZAuA9No","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWhCRA9TVsSAnZWagAA3aAQAJcPxfuZQiOstHy29WQ6\nfFkwQJWDw9jxMzeXNGlpaJLwfEmnlarS9/eOZveD33YPcInL7kf7VRSYBQlj\n+NpBYnfZOPNgL1GMflpl9dB4ZP3ODibbYzmRMEP5ZK2PbG5y/Rbe/Dv7Sssd\nUr2xXrILUjNDT076cITGvBMy5L0YQ+jaau4Sa4mayyK63fBZh1MtoJkcJ2ee\nw9ZciyUQibpHOfFhQn2nC5PTlGB7zO2HP3VHDOr5ZdNVf4IhqDmq51nIwHfC\nukoV0WJQULdBADHnZOBvtZFtLEV8ZJRTUg6Qyz6XDkSdyTQknvqC7rGGdcXm\nw/PCXeaLUwt7nV4UAccj7Zep5niWwsn9elB0lSYeJT7BtTGmpwAFFgfKtL1R\n2xvmKiW8Hy7HySdhEbbbLpEuV6xyY5cYFyKm9lHddg0LNfB94CbF00u8YqPh\nAAOxISvHrRloA7TGuaeo46/uV5lwQ2Vqdf9oAgLUAni3FXE+uw+87D4u/poB\nHZYTFvvxqMQXMQd80bjmtBKUtl3QltnRAbt4dG6WmuoMC/M0kbQbTcI7GYK8\ntuopYtbSJXLMq4a+SRx+2vtaAINLeBnMHEHxuptVizVeRg8yhZ0YjwvXf6Ta\n2PC2EHguEIVOu0w9SEJOaUlJmJ3ShJxjPoRsdQw++vdQjpsqXhIXaMM63SEv\n6ZR7\r\n=QGkN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/density":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/tab-scroller":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.98b843417.0_1583433121046_0.2009449134156165","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/tab-bar","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5348336f78d47e56ba145bd6b04d0548daf74206","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.17b9699c4.0.tgz","fileCount":37,"integrity":"sha512-1FENVVxcl34yI3ZBjpEii3zk23EcPzgOwnjtIO1pP5Yyd5ljt4YTJK6jD8kWHa2Wsaci2CRtmpvk+kuRn1B7Kw==","signatures":[{"sig":"MEUCIGSNhM/ftpQljsLe0DJDu+8NvKuL9sAIkF+oW15er1UHAiEAtJUYY/j2XEScjutW+N3h+kMAk1kEh6sCBviwYwkD2B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGuCRA9TVsSAnZWagAAh84P/R8Z9RV4z8hdAir7/XU5\nhwjkRLu00/to5+IkTRL6DX+evqQyDGFflY9sa2LQEHi8T0CLki+ABHNPLf+7\nyjYgWm1Bf62PAsgjOS+nfD/HBZ/TVKEC6HuX1t9o+lboRBY6sZI5KYIY7Tne\nNDK8p9bHRIP3D91npyWMq8tMxZl9xsju5CshoTkzRD8sVLmEFf7QFHzQfhYn\nxdo7vMJe9WL47bqi5Ltfo2ZjxjU4K+xMZ8ouc4n7NmxvGdPFyBMxasDWOKgP\nAA/BlHyXF9f8jNssWnVos7aoiH025fqU8qYYaoHOjWJgLYKJGJaYpEKn0PQP\nxNijK9fbMp47YCfzv/Ga7jAvX2p2L3tgrrP6riwsQ+t8XrlUKMtJ/YEGeKlE\nFc5543RfqqZUojO+VVAhl7a9jAYpfb/TZS5P8inVQB/Qa/142emGYMOzASAg\n2xF9ovh+dwCB7jveiajIcZSj2Tz1A278QvQaBLcfr2uaFcM2q/WZhDgfBbN6\nwShWVHLTryMSX5QR7KcbpqupLTK5v+/25rCs4yvs5jlQlADmttqLMXS3oOty\npsuqiodCGtoM8PUr9pE5R5v0NuQJ+dVi7gnOUXUKAtzY2cwY5Zwm7AYV/iXm\nQ0+Bo68CAUL+gvt5DW9q6jijY9rkWWmb3q6yM5VP3OYAXkVG5ZqniDle2+YD\nPHlg\r\n=QvO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/density":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/tab-scroller":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.17b9699c4.0_1583436205630_0.8691808009975728","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7992c772a3812d071ba0969e70675a9607f947f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6ee035572.0.tgz","fileCount":37,"integrity":"sha512-dK63TQCE4XFRzRR6HFdHYkE/hWBUewCuROERaBUf9C5TwX40IoyWJMURaGjR+GNkrgp36ZhJp+jDjptzp5ApGw==","signatures":[{"sig":"MEYCIQCIYfniCTORr1Ku5qPhUfOU8NWllvovMh5uCo7g5pxjPgIhAPvRPF5T211N+TvOoXNwCcR+l51cKKktFxt//ED5uZng","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNRCRA9TVsSAnZWagAA4dEP/05kR95bxanWE/t4oYgB\nALmicHS0mhvoOEF3Esqw4vNcNreGeeK8Y+WaGf4P4Xb65s55uSjjcy7gSZLN\nc39kdpIVSk8bzFARcGcWaEgaS6SkQTeWo9pt7mr8xTwAz4eFpMbR96kZyrYp\nyxaiHYSaFwx6Li7Vw1xZZQghKUzgya9ShcgHxbDfz3dWEq+mW8U31BgrIIar\ndhlDgVyqDND3fwQj6uhHFXfzU6gdEHFhVVVFSHKz3ibPSd0CfS4IZnWWkach\naqRETOFztVxYKfdpOoa4hMFMeTr/as8g9aGqbosSm8fXayrJGc+368PJvCIB\noEJcbVoRcjiQ7ze/3SKOYUCIwc9xBOdgl7G1dsKgaH+IgMTTzGQ8EkN+wIhg\n0XCnvuT/mj4HJpEOs10rqipbpB9vPxK//A5SXMpAAwUvEZChhsSR3GXU0r4W\n/nQF+57co1hempkdJK45bWauanRjKEnA/FSNOlpB9fZ7/+LShDZUdPf5B3yB\npXksyww6vwDK1ad0QpYpqZydjKtdZ8eKOsgWOLMw/gYQmzx7lkbn9/XRXT30\n9v0jL9T759/+0A9cyD/QroPQyD0hmD/zF7FHJ4hMqgWHhHq76sU4Uc2fwESW\nm3DOcuGsSy7BiWZ3KQ3sVfkGsBMJxvFq3Y3r/6rIpSsUgAGatFGqtjuE0EEi\nnD4U\r\n=CU4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/density":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/tab-scroller":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6ee035572.0_1583772496709_0.8458645018450779","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/tab-bar","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee21975b83ddc7e5a90498ba4c820c107effc04","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.bd33cb56b.0.tgz","fileCount":37,"integrity":"sha512-1Gmiq2+vb0IxRvW0IxQRPkrWdXqwo1oiSrLNDRh/WE5/x8yHpl7yHZYN1Yp96zV4lh90RUbzfPALpjbam8/bzw==","signatures":[{"sig":"MEUCIQDo5YghnmYIOqg7plzsd5uc65s7iZ+x/yrsqdeQnE0NBQIgYxKLVoEdsh6rdCNU6tCEzPuvagdMCOo97epNOkwmC5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnuNCRA9TVsSAnZWagAAA18P/3gqDRZSwLy7EsopCXGN\nGX7EBClL/fwjnOR5tcnD3eYBWClL8WG6rYfupcC4ncj4vFBwj+P8Nhh2z7tA\nFjR75mu4OrMeV9IXrwP2R4MpEADuCIBQfHVGsmY26jGeNkP3YENjKiLnPcof\nw3sAJDIdF0DXj8/FiSHdZMz+8qFbsUKREAErG7j3bR/RgfrCF/3kviIgSZgM\neNXfYQJ60pB0Px9GsKxMKi3DBes1k+DjyKn5hlY3F+TNb2eKFzX0935g7kBa\nFam6Fj1V7aWaNb/Icj9GCBG0V3OcA73QWYAnaqzLN32qv+1Us/9xyhhipFJp\nB2aAnFGN5Gtlmbs9RgRlhCu39Jg4Ft6/LDw22F6Qnez+OPmMwGnUl5pZRfFd\n5bmn433LEqN9NJ7kUVHi+t6TeaUV+S+CsQXtcAXYoTUEjFl1+30bcSIFiaE0\n52tb9SRCJ0KEBsbuvOliBSY+pxFjFRASM9mMHhmsTVLw7cd3U0U8DPui9I1w\n7zGqGwl4jYoRLfZKnM9SLyMvnEIKsFj4nW7DRINAitLHi+rpWX62cY+A+x1I\nNoiuBh+yoOne+2S5JqQqjTiibM7N1zr9Yiacj5xNP98x/LmpHrSvLwPvEUSx\nrj8MwNCThnq9LquXwjhWmtVVcxpI8pioINg51HjbxDnq3703Oxma5v0t5i4U\nF4+N\r\n=XGCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/density":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/tab-scroller":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.bd33cb56b.0_1583774604901_0.7397328459818635","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/tab-bar","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c293e5c88565a012d2361c4963597932ab7038f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.26c049afa.0.tgz","fileCount":37,"integrity":"sha512-o94LCWbHFdJ4S4qHnTbOUq7bNtbU9S7c5dvTNyW1qXkFHhBedI/LDY7gblt2N6nzbM+r/MFwmivRdZt84qTrsw==","signatures":[{"sig":"MEYCIQDvE7QB42DYOjF0jLO9gMp+cMcVtrt/ZkQsDyabD7IIEgIhALnyxm3V3MeA2F4C8jf5uClcf4DCcbMmyJLTNa3UcZ1n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hvCRA9TVsSAnZWagAAgG8P/27a1E1ZPaLegy8DKkhk\nVyF/eTOlZEeaZSbLyqj384gpI8quasWOrJ+H/sa6QcU/kHPiZ23dBuwYutVL\ncgXTLg66BcSRW7Rysy1TBhICMG6U/1mFAZaSgZDhIFEaFhd4wONNmjccZbp0\norz90+kKV2ebuP3Hc1rfDJhM0XJsYhQ/LpDg8J9RLWkX0fOtUmJzEX0rHupD\nL5XfRaFGbY1kwv3YqW615atWv8vo/7QQ8MFAuYrKDxa0XHODlX1yzDnTsoym\nQh7ep6f3NyAieUxZyB+ctEIrNZr2tjeMCj0DVpa750V/RWEcjfhsEMnmWvnc\nvjXCH+Fbq4IMNJDxnCGyMlkpjOZnAxTPj1K0Wiwxrt7pf8fdAAS83oCYMKOc\nbPQ/W15jDHuZ5mkZjd93ljLWrZrJfLzZT5dLjmluk62Lh9CkUUxTCFB3ertx\nydWe83xZh1sn1Qo4pCwcvHdhBA/SQsNCPSbogJcTSdTzFRnnnMl9lDzBKuSm\ns6DX13hy0TPEFr6fvvcqkAIhaK9av6c+ZgKSotAXCcZEbQPZqMVuBWQfSXUA\necRWdwDy6IA90Jw20Y34RzXfSmFuExO5Yg1J4D9ssjlYlnUWKwaNc7AGTkyU\n2Uu13XWTbDPCnbAcPLP/fyIY9u4EAW0JnVdpLVSgx4FU0msJOQAydyiyrI8V\nTt8y\r\n=+pfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/density":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/tab-scroller":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.26c049afa.0_1583859822752_0.4037715433101561","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/tab-bar","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b320be975884f6b0efa8845f35be5c1f28f83cfc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":37,"integrity":"sha512-5BF79txZvT6LQyuqvAcJfVJykDCWOpT5G4+M3NFY07KShPnkFyE/SwTmDSNrZsi8coy80upjE0N/AzTtJVCZCQ==","signatures":[{"sig":"MEYCIQDfxh6BD8BQ504BrqXmLYq7AtkuNTNPvTXVy+w0w30XkgIhAKOG0x+5+ruxoFO2wUQKpPUOID64StBqIupchgGgWQyV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qzCRA9TVsSAnZWagAAV50P/3SiDY8qgdgQcmUilWKJ\n/I5SUPqAgg7NjcfHqej1+typzJlehimEIT85+J6MZXYGV/wh12HQuwSU1Jz9\nJ81Ns3Ar0BZ7vFp1OT2xnITX+LXdyOZPl5daTlvwRvUYBVO2BZ0rD0iZqyqV\nH7IeqiKDgUXx5Hm3Zn9VnQ64TZy83zF3BR2PB1olFt/P4crVB3LurEPStYpu\noegTKHUiaB1S5KF1hI2jv0tOzSL1pFqc8+SY0Ie2Tlb2nZLomnFgNqyv4z9w\nL5rC4l6RAF0DbJor105oGakiRU1JskcoPu1OOUfW8SH5fnjnEXvKIo3WxpPj\nXdIWmjxOQJI7czQ43xjWNV4lZn5arFxkYro+cDJtUJkFfbgTXPuohNgXYogC\nTPT1nNR9Cq07lWTwzDYF36P/1rrXBrI1lNaqIZrs5SHms1843ebwtZzGyTMG\nq9P6du4Tr1I99la5jjNyM6Apa16LTxBbLeww0EAWO6l3t3QAEooIYlHJoaij\n+MY1dk8jc1qsCxHVJHWmjfNaLJ/Pn3KVEHaadMOVjDDJYLiahHiXL07snDTV\nTfWQ+c3nyggqp5dWDJ5goOLs/XEv9LoWoY6R7/d4CFD5wWa9Emz9GDQlwx2Z\nh2rcvJ+a8vAmuJ0wteDzxx7ME1iphS2Fe4uGUtu+qYWox50oJKK5nvq1ZiNK\nvDWq\r\n=R2QK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/density":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/tab-scroller":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.1db5c9fc8.0_1583872690727_0.3842929359891254","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/tab-bar","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8e8db68d6d25b2e7867511d9c74556c1a15c79a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.4971637f4.0.tgz","fileCount":37,"integrity":"sha512-ktEtiwCMd6ab5jr+8S7RcS94staq27Wz9arTR1toJhhsWGMDxouFXpLR/CdPKhxcSTAIlkcmjiW8KSOY3D7g5g==","signatures":[{"sig":"MEUCIG7thlInfMCszVeS0EhyCMI17DohjnsDf+YVDD/a5VWnAiEAnHbp0Vb09a5qv/4RT0LjzzOGTHWP7AD2rpnoOH4zC+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvXCRA9TVsSAnZWagAAjtYP/j9GxS0dLU8OHmZPKXt/\nGql7PPsougP/HuBkUmNPJKZiZep389RMKZLKdclsqRx6C1qUkeFgj9OKu2XP\nawDsI1t13tke07nlnrSq+T95TgjncY8p55QJAx1GKOUBUp7Ogmn6/JWwCQUk\ntHjQvfDJgRjK83jEyavHaOETH9xvIgaKi/rl0i1Sq9GaAw/cQFJaEhBlt/SD\nnnNqN6jgjZA4AwaUu17cKAgSSTYJoxj3HV21XuTkAeZIEZw2H9QqrYt+oRby\nW2019HNX+4GA+xL9E+nGo2nJM1XvYlN7rC8SGt6G9/Rkg5gYKMWYwryWaIgw\nbqDekXBsCw564Q5Y64gG+ILxVth2uMP8D1ILsrWFvztQ0WcDOlke4Hd9tnRp\nVy+TDjeU6uSlHAzVxpOR0gTLR65Ctw0QMzaunhe04MN1cNQMWvUDJch3E81s\nOofwZuHcZKTrW73PX0yDF1hHbHpICjRUABVG0m5M9QmsbUzYu9AX/g1yXRCP\n0N8kcFolpASc3nPMv0yCbBGnh4JqY7TDNtSfQ2HOSopBCwx9BLKCleeBsCDy\n/H0DWG57dY+XVgwaUQL8PzR0JB+rUvMR0eGNyAu2w+bjOWyQVH0tmFNl32A5\nILbhSB9NNVbchBBojXa6k0tUrRH9086qCkZeIS6ar+lviJXFF9jD47j5U+TC\n4nW7\r\n=3fe1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/density":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/tab-scroller":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.4971637f4.0_1583881175145_0.9642462217426109","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/tab-bar","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8f1ca3df637f2f4ede3a1962098784940e0975","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.1ae8130ce.0.tgz","fileCount":37,"integrity":"sha512-raz69L5GZW149YE4L98cQ1xNKVN92hzAJFcTdJhxCmyUOkFirEp2dZyKjaMZRStve/rslgbAHAV7voEQFtu+Eg==","signatures":[{"sig":"MEUCIQDvU+KNpy/CSSUqoMF4DQ0r3qSvSNh7ON7XcXVTWfQgjgIgRzyYI8z+nSDKCXRYJSxtp+zS8eukbkIAZH5ghq+OqdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1zCRA9TVsSAnZWagAANoUP/AhJD1kCbkB141I2k/Hp\nWtjYWTwhYJ7iVbvU1klmhL+iLvvZ6/sj5fMh2vv39U4Z1WtxgJ63/FQaUDHc\nWxPkU0sp/qv6rQEFPYLIX99GBGnfLpvda1JwSmGRnLAI4DUdxu67HPaXhdQm\nDzMJTOFuc0axuTf9AZPX7DAM2ieHVtDO4trNxUWB3vntnqZQFE5BdYkhGn6G\nzG6wSijGLWUG7aiG3K0L6TAN9x+CG3XdJ4c2WYSwVPq9+gF98Bh11g2LJUqW\nEYu3icItjyolpM0sS+yXCWuplH/+Ga9mBgBZPjO4FuxnfW7fL/Zz392O1Urz\nPvvHGzJJ0kK7tLw1xmeWe4X730GpULa1wLC5LasOy8+n806adhIOCE4kdUuu\nieorm9MUT4Pg+mmUaXMbjte9mgsSQRsEN+dEtAEc4fajuXnzm9xklWaEYzaC\nJmnonWs3b92Fi0nAwn5CvWNHhyKnXHH7rFeKBkw/GFNe+lyWmmoCF5Ta3ZAh\nsZUspOjjPkGC5A8gPrF+HgkFLaC+BPtZM3M+nq+butuEZfG7QIHjz1GRx4Y0\nrAxeU2YZa/cJnnv8YViBl/5+7jDWTeExZ4XE1BvGktIb85Gt7uB/FGtm9ndl\n7zeOFRbnKnMM7gyX4x4YvPE3xHVNSkzu9y+PaCVBfgIX2C8WzXOpRPYeDxKm\nCRfA\r\n=vUTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/density":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/tab-scroller":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.1ae8130ce.0_1583881587257_0.5318171255866848","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/tab-bar","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba560aabbb67ecd224688fffdefea7034f10148c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.8639c2690.0.tgz","fileCount":37,"integrity":"sha512-iw+97TJauLWlBCwOm0K75K9TP669n/y2E6NejHABAIzqq1zZZ3k688FH5G9iWaoMo0zWRYOUHqr1lL+VWc3Piw==","signatures":[{"sig":"MEUCIG0A1Ht3LxGn75znWeXFg+3GOqZ8B0oQlpn5Ttnzg9gFAiEA1MzjTRYQC0TA385FXgaWq6Hzf9NGZSs69HxXLaoBtRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZvCRA9TVsSAnZWagAAEisQAJGfEE5L68C0ztywBZ3p\nkice6iw0G6Abq3QIko94F3EKoqE0eOw0HMvj9cPafXtxFYtQbbB2jR3L6oDu\nNFJjflqt82QWNW2AE4SfDd6+TWKrhJepPmMmD4ASqBriod+CnNqqNsSnSkiS\nWJUTTKTzSPDyMQrAcb5IyZ1oQcJu7tWjsW52RNTjyUaqWaJIpiYIv2TgaUf8\nSnLLuhSpoFyRFUxUzz8T2wp7A0YlmDtYQYDxRBxl+Q3Wmem2fOZW/hSNkV9I\nibT5T5cHEb4IibIFJSIDBCqgQMY7SE0SYI4/DfG6DYB57cpFxr69EJgfAFoQ\nBGyUiWChY2ReEnVaQL4rfe04gdf3DCUMqeXjCJW5TRM/Fim4BcFr7hAwqZMP\nFM4Lso4JW2U0espSmfP6H/rIimCEC1zeQAMyHk8/pi205iCZJrqXAtT5d/Yv\nn9Y1b0wXSoMi2om9WBfr8e7UARWjNIrdiBUQclLwMLtCD6PfTKV1ppd6ptlz\nlgApGIf5PROaeB6sIDO3cy8mpwtu+IPkXYvsYKoHi4KeiP+Bp6QJvc6eUXqF\nLT4jgPqHtshYGt18TT/RyAJqMNH66VyLATv/UK3t8jR7zM8XqkCIdAwkm9hd\nb5zem6yn354l6HVaVVc+ngG0Yrs6F91js1qh2PZhst1/qBrDFOF9KMmPzxT8\nvwQH\r\n=5pmC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/density":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/tab-scroller":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.8639c2690.0_1583908462578_0.7125185595199421","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/tab-bar","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"303ee3008df48d2a6996b86fc7e29173dd7b5c39","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.d5808057f.0.tgz","fileCount":37,"integrity":"sha512-Xu5THTv7eSaIiOcRpSGPnsYdHkL1bxINt9TGbymwwa1l5r7ewukpBE5nW3xkPFsOagyQD2Nqs7xyp9LwDVGCXg==","signatures":[{"sig":"MEYCIQCCxBxWep92s6V0QLbwv/bC8R+Zl9pScqMAAkqDZA+UwQIhAKfqyIL0PF6A2Na1xASixbu86Dmg3xavJJvsFfEV/JTv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRFDCRA9TVsSAnZWagAAhEUP+wWM8TW4mDfnX6JzCXgj\nVge2jNCTxnU3apchjPrVNc8p23CZOdMhlXrzFy48SKYfzS4UrJJhKXKwy2HO\njgCC7q8m4M3CiVllvzQvpY8t7zs/YHeMcs8r3npbTxU6PBb92R0O2tw8WHNj\n4hCiBR57eOItyhlh+795YUIcgLCHjcFzNA0N0uv9hICViSyIyA9eogqLFu1f\nEeynPi9Y7WDqUY+lfDEUnZPWAxjvKgNBJhEZRl+oEftyB7nIUghL4gya8p3f\nCe7pyFAB+1bUUeyYK+Dl6po7HHXGWCcmb/bQXfP4+22KmLfSCY7r9oEUR3hN\nq+VSYs9CiEdukgdYE0duxVFbIZG81eBOSSxWkhGfi5wZWG+pKvAu+Zdaaji3\npE7pyQ+HMoUo7Sti7MxiLT+dBA4+gw5dw7fqEVhWdZZeieYhUohVzFr+u2u/\nbjK/W4OAkFMWNqQF0sI0urIIAmA3bPnbEnA8De49K66eMaTAqPhGTXOSXO99\n3DwnEsouXrAw5yupqzeLzH8d16A3tjJEnuzTQBn3+T6HhZhRNEs6koPSrgZP\nppTEUxK2ujq5nR4n4XJN3g4BjC72lP043C+9yxKdO4gJODR4yd/8nFU8zorr\nU+ZhnWedebljoQ5NbRBidjLY9ycGWOMzcDqy+VKmgHRr/Q5dpXy/LT+kt8iP\nkpF/\r\n=13iL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/density":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/tab-scroller":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.d5808057f.0_1583944003030_0.6558932385284968","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/tab-bar","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47816d924658b0a77d494b1c257c488667295344","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.b3f58203d.0.tgz","fileCount":37,"integrity":"sha512-HNohiz6A9gZ+u02i2rvh/hBioatBFZuhFgZhO400H4n0oAdByhPS9PGA/hNZF7aKl8lUt1wGV8WLOr+p7lleNA==","signatures":[{"sig":"MEYCIQCOg52Tc43u1gyTig20OxPw6KuKfFO0j2l3aTUMk0us2gIhANR5givgbQr3mEebwNQ+aKiBuz7heM7cWBFIYMPEQuxU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5cCRA9TVsSAnZWagAATFIP/j2RuLoO81kshoum0GmA\n9LPJEyfawOTL68gFFIbH8BppB07O9SnEfaNC8Jh5LHg7pFSxCNOMqRP1Kshf\nVbCAaPucy/91iYx4V2m00ZAiSnJOvyUTvgIU71JgcDmiKve+Q7B3m9VTZfjB\nl59p9XX/6DimW0lnY8lU1yoGnhS+OjM9AJ1lVbZZap1/9pQb0bEo2Iun7jRF\nyfbhIh9jwnow/K2CvGYqtIy4N/E0vmCL/aZ6OYFNH3f/DJ7I3v53AuapyDgR\ntSNS1QKGOcF8yygrvjE+qCQpOhp44gnf6TjAr6uprLewwQcVfoZZGRan2sRZ\ncqv5FPSXKfz6DYOXbpamRZIBaa2GrkcXtvDTNPUhQ+1RIJmRdFRQWT30mxTc\nP2oFWi3OG8Toaxvro8FSbUN97H6nQScOd/lWB4h5ir/hDDF+yTKXCqAmY4p2\nJP9TUWWJ4x981fkkniGbtp0jRBPYYz0FSKewB8ZDgncfv2rxnIHb0aslH6kY\nZhUUlOk6H+SUO2kvj2Mg26G3RTE4kTcOnzEeWicZtFQ8d4R3AunD1QO57Qi2\ndrAFVrL4dkd1PxUww7vH7K/OfHShQfRR3og399aWagUXeANDcD06jHkUlQBL\n9KpSGuBNukp4KRn8g+2Vd6CLd24BBy4p+HP7LWmEbd1Ia2tqX9WAPjwWRp3y\niNhh\r\n=HS2o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/density":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/tab-scroller":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.b3f58203d.0_1583955547819_0.35291649906914513","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/tab-bar","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"601229f4b19699f931b3e9c89d15f971db554513","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.bec065920.0.tgz","fileCount":37,"integrity":"sha512-4rSGhze2xGaH6re7nvCHdZT+LEU5hFuLC9OmpaKjsXdeVDQKRt0t7uqUPBRycGGs2zq1NUkHvmOh+jBzhwWKUQ==","signatures":[{"sig":"MEQCIHPWQEOg+N8cVaDpNPd28P6bTwEDeOWKaSYZH5Rc++e9AiAqYDkLPHG2k9q9FmcFnOo4fVFfZa+XpNcOUxOGAujBFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapnoCRA9TVsSAnZWagAAg8cP/RZjvNhfrPm+F8FU5Myl\nb12KqR7G6AdmCV5b6g88YKrW7drMeerqQ297nNPLATN1U76W7TtnN8ntC98N\nYic1Hf+k8pujfKWfRgtIrCdF8wUZExvSG5OmIHU6jucX1s9/RUtrFTS+CYSJ\nfQL8b9ycoBIFC/7IRDfT/IbAI8jR3iMIh2bTLPH2M8XZCR8Pw2x5w+Vm+IAa\n5fHRIVYcAIhrd2DtWFJn3dUZmnb15GaLnk1enYTVurMA+taIb7ekq4DSNGTR\niSz0FV72vuxjpNRMJIA516805zKblTWtTu7t/pR6svIVLa8IzzmoGv9B9EW5\nnGciOJdijZcwsjn3IFbSCuG36W7n09mk+dC+7SPHxRXmpwmjDbtgKRbdbU+M\n7nOHRfwMbVerfgZR7BkjqFv/9A7TILPv84zKpnQbQvaokWQrTPj6KkaT7ufX\naGpMcu4mJzuWEhPZnQcUXg0rdmaqFEpLFUaa7cK+pAqsDMSTkH245crK3URr\nDpPs8KWGp8teqtd74Dr9SPgoBRjodZ7KPMpguTZrUUtJLEerKMOIB4NGAkam\nsvUIgpF5EOUndmeDO5c1WqautOuIuknHKwyD+LO4HjIOFS5BS+o0DpZN443c\n3ZTlQzRUxpG8nbbZ2VvQcTYk8M7aCVsyWaJzbG+GxHf3DjJbZeycX65o0/q9\nVG4h\r\n=ntjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/density":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/tab-scroller":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.bec065920.0_1584044520392_0.7131683664367523","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/tab-bar","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d3ed0747279e9beab1185e97a46f5bdc6fc5837","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.776291ef0.0.tgz","fileCount":37,"integrity":"sha512-5FThUhITxRWwkTODS1lwNKWx+VLoRlPqigKYj0Yzu3lYzarpc118ais0dFu+YOZTTusUV9YlYEAu6xrlguxKig==","signatures":[{"sig":"MEUCIC8haCZuBvuBFSLhhGWkZjFzbrsV/9Yv585E8FGX17ApAiEAmj1Owp88+fnqIEAUN4zlgwA7Q8LlIdox7tofaBUSbvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSNTCRA9TVsSAnZWagAA/rcP/R0WmAX+DqXomujX3cXC\nUHX0grN2Z0fuCFqW+Qkipc+ZsvObQiy76t0luM3ygBHo635BjNtkJ3P1eeJ3\nlzly6pTLNhc19WjEN29dG7bRMpKvIbq47gfk32EYDNWVg0jPby4xbLJEYrp+\nAlfK4Ey8Lbo6OECaxFUipkKNAE+w6gMvtZNBwhAdGVq7Mik1SiWi2fb7CXmL\n9gN7+zCYKVlz0u4oQLiey2Aw5ECpCBtPUJs7RSjMmZEKFzLLMviqGC+EBNIL\ntSa+Qrkh0pCOBBHHbLt007ggBJvCFKqMZrXz1PZ7hJf8XkcicnnQp8ScY1UK\nnXka5oOON3hsrGZdOfL2wJcoX1I63W26dFZWunz4i7uscTsGzgUoBkNS1KmL\nYKXlPCTylrXSBk5PMv1pe1C36Fj2Nxkj5yZfAQB/Jd+tDiK1EbnFZCvyx+L9\nC9DBCRqRsT0YQwFEa3RmjNNhYBG8MMgxII/KUgRzurqEmGXfNy0d2ft64b3C\nPIDZaJHZDeQXB5fYFzdew9+9D1z2JjPqYGcuCOvjtykyqebHwIz6iRXmwpZw\n938vUueShoxwJE1QQ2RMutYREEtyi6g7QOd911m5HOW3dMjbcUWInCHL/4cO\nKBXCQDwDcLAkF9Q5IFbevnIwrEPCsuDb3lM2sVvaKHERNV9FiYYGzx4f5uqZ\nSSlK\r\n=eYbP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/density":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/tab-scroller":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.776291ef0.0_1584472915177_0.19799918341465772","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/tab-bar","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51e9a02877305a4bd4c1cc7ca14ca003c7f360bf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.ece19f3dd.0.tgz","fileCount":37,"integrity":"sha512-Z5csRL94EOmdt8xM2QpQpp8eNHx0WT5qmeUhyNik8EJeYDBMlS3YtNK+eMW92AaAQ/Mvqh7YB2KcozZst3RSLw==","signatures":[{"sig":"MEYCIQC2K6+zS26PCcprziWuPNZQiU9uZH5/Lu232tH9aDtdQAIhANn3cdB3mndyFFCsWkT6MraevzgvZ+5/q1DI96f3M/4Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjjCRA9TVsSAnZWagAA5ogP/js3RMDGDiMPFsqT8qId\nTfo6FPqoZkXohn8kPMgbdt6STbO0iIwVCsQqyizHtM8dSfo87crzobe4OrMT\ns3PhhpUG6/E+p7OPCP9d9UxcqYCbJC/0fcTeI4sBsraQ4LpAQVLNY7xGX21U\nydL0gnnDDV9YXSSO8lHMsxs/a3LJVPljUL2V33BMgihKNJoYnj1Ra1hBb37g\ng8MK0Pbhyli96C6ljwUPqQJuPMYAiQhioLV41bI613zMoOKJxDhC2gJ4q8Nn\n+8dB+GwccYsw0wKesZ0aRIasMyJHYmXmAFD7u3YOAiAvlq/fHwKrPccKE6qr\n47qp/Dpn6l3Th4zHpXwQGgpkxUnonv0O1gmGiIyIvXVQLmkEAVsH3AMkGEoR\nDtKP2vvAb0H/iYCZKpyQYvDyhwJLbc457bRNWSKUlTCUT75Mim3iqpC2sEyc\nhq0MTsTWs83EUQa07CmDZhFGjvMN9qB9e1DuK77MbkvPF+MUyhaLPvVAeIou\nIqP+FVKkor+dziEa58AKtYWhALe3j3WQh/pnQX/LusNU5q/HWX4ggYz7d7tV\nSkBQaUAC3d3DcsNEKyKa+6s2ENE+dtM+jf7tlS8jDSZCUlmUNvZysRQhuqnG\nQycxJf844wyjm+rmomCXWIzezWbB1e7lfh+oSRP0WsPkMj4xbbEL067SfxyU\nRVji\r\n=mLB0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/density":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/tab-scroller":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.ece19f3dd.0_1584482531271_0.48659791217841986","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/tab-bar","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce4e58756e4bc39abbcefe810d4e5a6a8e08ab12","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.4dc45af6c.0.tgz","fileCount":37,"integrity":"sha512-6Z5DMGUTX5nzfgoF7VgAWZNLKzCoAdwAO59KckP5h+nztSKdnu0Jo1Yl97pFIojeBRuL1YSVzPVjPe+RJQZNgw==","signatures":[{"sig":"MEQCIG/j6NJBhJ2AHbY+LluBWmvqtxqLSDtaz0fQIi7S9h6/AiAhvLh5TFAGe/UE4jHacq7hocZxYDUmtHJwW71utH4urg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX4MCRA9TVsSAnZWagAA7wYP/3Ci2Woa3+7224Z56uIh\n9fJy5xoqNLEcvfhUbOA1WMdq4Mj53M4d7keqKc4wGgjVM2SgB6ru8gr5CVqq\nVQ5KrrN1BkirH7jYqGKznZKg4MR5VPdWe/i8ue1NAS5pS3Un71IvL2yK2AY7\n2kxwi1WQnj/l6imBaRhJcdViBmdCfuraqwSCqWZLyTtoRdEsdrSxRShC6Yyq\n06RdzS12SMGn7+U7sWD7isTb37NT/whuwBAMNFlXwQ8LWbvkpc6F65HI/2QM\nZ76aQPUpsolbTa+6r93IqLrEGJwW3hu4jp4XpXEE5tfCu1nuTeUGmZO6doWb\ni5jmkFewGCfI2vDewOIow3QG4G4NnAl7eCNIQrho/DpDCyrQ++s7n8AbRp/B\nUrTwJRiJiCn/j0SJ3mbRedInlLvt1y6haFGSbDZHqMCb0wFlTYK3399Es61C\niM8897UQRHaeD3l7HVoBsqhnRYRuyZrCcYVaab/JiDNRiXkpt3pLpfFIJ5sQ\nvyUB6ZjTQWNcHvJtaXbtE7GSNcH06AdtL+NyIwp2cfPXnmaq/G+XEd09rtG2\nMMmo6DGMgfdpcTAZ4MIm9yxmVf9PcDXPW/BfvYhgcKG0vHKQ8YHCaH9/mjJO\nz6xVs1vyWmHnt/OtW1CwR4+OBGH89lck2QsZjKao5wLQbFG8MQOakxtCzWAM\np3eA\r\n=WmIm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/density":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/tab-scroller":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.4dc45af6c.0_1584496139171_0.6575216776794166","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30412cc20fb42edf65814d82ac736b4bbb37e270","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6b48781bf.0.tgz","fileCount":37,"integrity":"sha512-Yi3JubuQyWks2VpGHVim1fx3wLqQKc4yNgNAVyyb2/OCLbUngqX1C8rFIUlRe2DSZCVSYOpEuy9HvlpINot58Q==","signatures":[{"sig":"MEUCIGU/I0NvE3Pcyj3Z4DeCtEINO0N8l6czL8/aGwM6gNA2AiEAkSdyGsGmV/Y/crgYD/f1yomRIfu/grDFTUa7SqaJ7wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/iCRA9TVsSAnZWagAAQ7UP/RGey4FjDrMNfE7RltDy\nylxQK28Es+Ky0MT4eSq0ZTH8M4RdfEH/lux7okCvf305mjARs2H9nmBJglyS\n5PZL4qwBYqS53A2uXkrMOm1LfNqnJZo+rjq476EN4pKpLJHMFQWTmKRPl9XH\nNYIHQ5q/RfS8WDtwOMK8BfIpoQD9Y6HIb6MpxmE4xmJE45ZdIKarCCjxHJzH\nOSCxgcSx/z6+q2t6ejoAZekkA7cq6an/39flLehMSRcy4bnIzAPOwIDpN4aG\nCIRpxF8D9zR4P8IMUbbXmBrxjSn1PaH15Wg/oRH3nbXQ2kCmS0UWgnVOWqZD\nm9ayuwR2DQ8WWw6scAgGNFuW8IRrsKBnuelmENn+5sA5HlJYOB9s7YLW0+Jj\nZaxLJknOQHjJwsXuXu0QKb5Q62mQceB5q+vUZ7sBakj97drMAuiyyykUBEld\nVUNv+ydkeTBnpRMTFfdkHbGVABtGaNKu1TfnbvTpY1bnZtrOrHv/Bpd9oURB\nhvB4i8CLvc2PsIBqFTHr9ghX7ELLCs1dbQKg7vVTGHSNqAr5E4Di6E+VsyAA\n8A4kbFnw9H5CsoxtIIdYDitKGVJ1W75cU4Z0OYKDrDtGid+cVGALvVvtbT54\nB04jkEEzClZaRwE7E7zbDihTasvwax+sJ2GD0EyUK2T3kt/bXEbVZHldt8f0\nZUZZ\r\n=cziV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/density":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/tab-scroller":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6b48781bf.0_1584545761939_0.5625722941629949","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/tab-bar","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"281259f61b172cd9591a73df38d6a8ee3ed672e7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":37,"integrity":"sha512-aWtrf9TLDYyL0q+BFn4jNaMrRlm1c02wnETPB8+2ZubfskLIyL/kpTjFgHayasNgaTGa1ajlRAqfUcj4+LDdXg==","signatures":[{"sig":"MEUCIQC/jweJvs7vTXTNwg7hBdP3xN07gdzclgaWKkbWFQUfswIgSO3qz0DTAcWTg1FPPAZmsvH0N9wxCJvUEwLMZfOQWME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec621CRA9TVsSAnZWagAAYgwQAJfwCNv1O+n2j7QiuZ11\nCUALGffRZN8AxSNELUT0q+UuqVX+ylt+QJr7pYqrqHjjpeKEA3l0JH9ZugJw\nVHrH7z/zcqplBK7QanPqDC5Hm1YlSOvaKXRUp1hqy0C/YPv0llwLpO2p/T6R\nz485293W39PBMzNyWVfxZKUwXtvAS2mRqouJCj4P5KCVRGHHGgoz2z/NyLJy\nzAcH3yWjBX/dAUASG+awWCneJTUn3OL4BKNFj+IFwBYidy0SDyyEhQFDH2JE\nPSvIPoUwc3Mdd7OC+XIeZ8LzfqT2GXT0jabw1M6rNm53vOo3SmsW8Oqq2zJJ\nP4CYEoBnQ+jUStTa6D1p80q2IvDJf0hYeLWLlav3ZVhxvzpf+tksCciCf/BY\njEo29NPUoDwh2vOotSEVdKvT6mImFwr/3rspckSMygKgVjDN0H+Kumi+Qoy4\ngELqO4Bvxf41dBq12gs9IKiUgpvyx08P4+Cxf2SpE3wZoToX1mwyzRXmjT11\nGpYVPHPaZyJhuXmq6OMDlfrv1a03kvLP8ov62TfsqpqmmfLNetgdLLiiCejZ\nFIks42QM+1KFaSbuc34MVRmlBIinv2bE636kuHyRiv4ijaDVSLp8SqqU8Oo+\nkIqejXC0BYZWvgcoRD/dIC7ossp+dvUwnoCtVET7u5f5DFcyjAss8galCOej\nwo9i\r\n=DRg7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/density":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/tab-scroller":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.a88c8e4dc.0_1584639413011_0.3411261435697137","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/tab-bar","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e47f886bdc559abbcd4d8ddb62d7e4d95374d2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.cafe18860.0.tgz","fileCount":37,"integrity":"sha512-RANUXfiB76AB+zorgfKCqAGWEdUqEX9kfAt9sL/JC+EZGotAcWUz4Tf6GSDXmXDEne0Zb2qGxYpKeOVIyq26kA==","signatures":[{"sig":"MEUCIQCsmuxkFQCGmTGHGaKm8NjDDzMY/mLD2ivkjHEch/nDTgIgduXkfiv4tb3KDKWb4X+jGy1UrSVxTf+whGi+XGiHLsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkvCRA9TVsSAnZWagAAC3wP/0e677HJtLzS5Zkrhu60\nRNZH2VMA5xGlFwgUUSTD/EyOcp7VFTBzPmEpV6dNEkbhxJ3y5GZdu3+SsfTz\nqFV90xY1ln0CP9B43uduPcz25mn+ghUCTpl6xdBrZikR3O5TumrfYUJBiwX2\nOsbL0mV6HbT5rngfcJdL0hsR3uiXs0lFMXcW+pTvfHFg/J92ueU9OcMAEzQG\nQs8JyEqO4GhIpXM3wsjvnjubnupzn/joPhYjz0gmVn6c0fKhFhNQPbgrewxg\ncG812eIuahIC1LD638UGoXO9mqpFSD2kNMTPthH/C/8O1AKhAC0EL8JWLbJx\nhDtQyJKhIvouOiWrWeydSnp9PY/NKoNRWkneU6Jfv1cWf74aBMUjKHJqy+bc\n0VhqT69tHQpBZ5puBvES1j/dXon5X7Ue3hcc/mdWvCW2jNkRhYnIkCJ7WL/o\nDlPiArPr5wKnFysS8vFP2CjcHJAnoFWGFnchOOipjom6kz/aWtX2HyfnFKqn\nUZPUX6jAeDAa5PSgWjY7TDRVkYW6xS0bA3O1q7lcR/hWZqAztxTO4l5crc3r\nwUP8Ctz4H4OrreuFFasdY82e+YL10Of3jT4qtr2lG6FVs/42kWpZzLS/upnF\nmtX+QKGr6V7gIBTi76Q+XUmX1E2wSVyNMob50V+xk50AN9EX/Q6tWF/INq6B\n/FSC\r\n=ZuMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/density":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/tab-scroller":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.cafe18860.0_1584716078355_0.4384001121510903","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/tab-bar","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e84a0d9911c02928af6d8948a7ab6af60fd74048","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.35a32aaea.0.tgz","fileCount":37,"integrity":"sha512-POEHzZkRRv994czmuYyGB8kBGWKasKtzDUnrYpxLS8ZcjkbUyw5TeGBKQcceNCHFCgMQHmn+8/d6pmtCLnYsKA==","signatures":[{"sig":"MEQCIFM4in5NrAnR4Bu4fNfMkfgK/a65DtSM/6fRqgtvMq0NAiByslJU9gxu2E6x0RCkF39r9Hs9VptXAJydJCVmVjnW8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSDMCRA9TVsSAnZWagAAeZ0QAItvr5GGxbVYbHlJqRQl\nTvVq/ut1gmHQxzUx5ipoai7yI0vQf6LblF9ar9dNUQ99VqM8aKNiWbBGR98M\nS2/fbpD41K3nUto1pkocjvOUZ3kHBXbmlHvyuw5uasAAm+I+O/mpzvmDJ8nz\niTJPQD8SPrlqX09Id31Vg/R6dbSzXKb6qjXGApKix88bgvluKFlFlhrC0nz4\nvBkkMnneWYEkerHHiwZkekxKCaobU6GCXgwQxpDxB/dVJasqPTSzLrJJnQj4\nODthM48SLjQOhIGiEoAyokLheTYGkx0A4YlEFUS6ZUWKTgEiXlTsDiSk7aVQ\nI+HEQq3TZLuzZxF+0l9j9GP5aOLruo5k6PmXBvfpZioVEkL/rTEXTK43IUO8\nFCNMXcqtrhW/jHY1jL6ldNrzCSch1+e2LmlOWB+SFW/N7LRqEkogQfDGHHMT\nc6JqbnHWtbSToMc1D/OS1qg9dnvKv1PHmryhA8UG3GZ6ry2qCjJ+iFidTjyc\nGJdtfb7LTDfPImWOOo3vl+WTxbyYERLvJF9yT3eTAvZpD2WlNWL2S7VxEe06\nhEL+X9sjRGzV6J6JUBh1hiJc4j9CkvETEsoWVh0wUNwFQLgDKj7Eof3I2PJt\nJ/w1VOLp3L3PhOimKS+patNhW/qP6amN5pMPIcNLe7HtzNl3RGcfYHOjCLol\nmjtP\r\n=NNqN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/density":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/tab-scroller":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.35a32aaea.0_1584734412536_0.2784074101812781","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/tab-bar","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22574c249ad5bb7ebfd2c6564ea96fd4f2d655f9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.e75deb854.0.tgz","fileCount":37,"integrity":"sha512-YsiO6WuZfb0YbB1bKDCOTL5dMcjdnswzMD34iBccGOlYLXPFZsxXt5J/xngASBPaiM56KRMnnPCT26xAH06/AQ==","signatures":[{"sig":"MEUCIE0SCG088XvOwA/bLjSZVVfTJd1IEppatapz/Qv/D/yEAiEA/wek9xDV38+FVsaVZsrHWmD/Y9tDphOBk1ZmIIkvpBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCuCRA9TVsSAnZWagAA3tAQAI+NxlGziN85Zfri6gqM\nMXreJhim++F+62/3OE6WhKVHI07y7XqAO/tHm95eNfnWTpm5D1ykeISZPjYv\nv6LFu87BDZsTUUidVbqKWXmvivFwQwhYTcu4a2LzLtaimsGPpQy7SH0Lf+Dj\nSrY6vGstr9RtNOy0qCW1UVj+OvsmMtldaHLLJYgj7p3CRg9SryNSsfBN96b2\nQCB2AO/UD0PVkYpCdBRwYVCNz11A66zJUSuNLK5U0yVeCkvfXw7l0m6CDUw+\nNkcaRoZpYGH4P/4Vjl3F3fRvAv6s0TRB8wTQ9MpAcGlbPw3g830Why40o6a2\nTLPG1R23UmoToqC9JkTMTPSuPv/RjIfaLDgUHtJDHwY+uH2kFO/y5IZoi1Ve\nEMm2eUvjI7Kpl039enE2oeFCa7eCPjwu6ADF2ZA9F+My3yF/L9h9W3xKJUP7\nEi/M9fgOEqrhrqI181nLwSR28/VCaXZUNj/+WEHjdM+PPl4JhNmGfa7gU+pf\nfPmhohEb8ZaVL9ZI04Fl9lTZzey8VV1v1xMhIRnHVoK43jiVU52CVVu8PP6s\nGP42QLJIwFisSScCBqHstmEDrZHzvgZn5BiKj8zgKP4neGBHnUjeUzzsE2Nn\n5cIsf8Oz/9eTcoyPaCdWI9qW3uWckn2Tj6EZ4XxEBEBUXq1+WsZH4vHGLYfN\nDL1E\r\n=sgq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/density":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/tab-scroller":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.e75deb854.0_1584742574068_0.551561281185496","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/tab-bar","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"475dd7f1eb09e2af3a9c0f176449baa767b3d3ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.2cc6966f6.0.tgz","fileCount":37,"integrity":"sha512-AXVqSko7AdCXJnrIpAnaEuKbTpQVJjRj1Srcr0ZHQkskmUyHrLAh3mNE7dgsiLfw1V3Wwx00i0DMqmJWc1Q+hg==","signatures":[{"sig":"MEYCIQD0+gj2/jEZ/yDJneZsYmnYP6/dqzJuuBURxDI1kcO23wIhAMZbSyhJdjH6XLnZqoTVOj1Qryc+tAvoCELXBBFdBpVA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUdCRA9TVsSAnZWagAAyksP/26LOQj8nrXarflhIZk+\nLdcMShwTrvtDkm1QQZRDyNv3V4jmzIp4iQLqSoCx8rx15MOvIFaJML6BbtAl\neApTPhVdKC+zV4jDqcfn1TRRsIdI8Y7tgA4hZWPtQQJ5mZHt09KfcfxraNrY\nRBwKz5A9+elMrchTLEQnqrM6cxZEPDL0NKN2+vVUByWAKeezOzRcT9r0FiWC\nd+/p/2iw33kC+a1/K1diiAdzJQoRCKJX/1vU7IX3adVahw5lyC7P4i/e1E9C\n0CcFttZrM8grQyTrDx9KvktCoMi0ZFNCui/AhZs+IOCkApjx7e8BOBimJSZt\nIrMO9ydtFtLYBmi9hHboNx+HU7KfmId2Xgz9PiMnorsATziSPsGosisiz68q\ncYeG/ku4Ogut/vClyj+Ilkdg4IFDsbZsF7YPISd6BuTL9WMAwfZW/t86M+sB\nfeygbhKJwHG3XveGok3wP15btNkU2XfU5G+Vrvqavw+xt+tWiJ02K4Jb0HmP\nybs9664cdBpIFlH0Dxmd18OwHHmeyxlU8Wq5swDDSy6iS6mCFzxuEHSElUDo\n3wZw2fLAQlgaChv9mmx/zXZHctPRJobnZvjgx99XnHSgZa18jzJ0ktwjp+FY\nofqTh9LvWZnusAyPXP5bSLJBQVHh74sldOqgav9t/3RdQq396CjJIjsrktAL\nb3kw\r\n=DCe8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/density":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/tab-scroller":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.2cc6966f6.0_1585075485402_0.19177738517604914","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/tab-bar","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b115ceaea1f6e8bf1f2823000e8ac9c89e2b3057","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.8707953b6.0.tgz","fileCount":37,"integrity":"sha512-YR/dkc2nQY5lUKq/OWHKclpCBylyusLPICU4E3JqQamxNf6LrCaiOV5DgGA1nY8fpKCg1EuIy4g+qDwkfzA2QA==","signatures":[{"sig":"MEUCIF/BNPjkuG+Bcp9gmMdL0PR2LgBtgmN+S9nQ1Ic4xOZtAiEA2H+bVMJ/6t6f6y5DBvfkUy0MkcLC2+wLR+hn/FC2OQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXwCRA9TVsSAnZWagAA0TgQAIbxa4cIg5XWELd2NvLs\nKIFhCjhW55RHrUBk3dg842/dkVvwL7kMNNCA6gAMVzNO5L0/Z+c8XGYgMVep\na96RxK9dVrcbAcyKvfDYmyFny+K4cMybQtb+p3Y7xAy+gUw6Y0C7uvB97mN2\nrvwIuF36Vi3zxgvoRvrZZ1ebWxehrO0YkvkvwTOecLyALbIhGBbApqNfo4uq\nPZYVqPZwkUZ4IeyRGieni/f4aWX0F67UehcweN30dF0OsSKMhC1enUNohX9d\nRzYP3TmHscQ69YKo7cNgI3S6bm+HmM8nEd+/FoDUvALlEOiXssdOU2gXxMLB\nUUx2XHJd6PYXNfiy/CUUC4hr6TXpCsOSGGcI1tqpjLS8qe+Ig+gwU4eS8jKt\n/727x1O2UHRPlsIgcRQqeBFw0GFUMJ7LMKuqyPM/N73H8/fCWAPaDIkmhxaj\nFuVGaMc4Z109M67xbpv9lJe3EnYTbf82nSIKUkS2S6Duc8nNyR7MsjrnVUPd\npOWuclbGIHgjA44Fg1BgbswmOb1nqg7nbjwBplQSENWlkt2h4Ykubq15RJbX\nrFKECiLMzLLFHpd/aMV9YhfqqsFLfsFVG+4YBbuGnuVugrZxBD5SUqbDdrvj\nS1kaVbuB4BbrsVRQBbihAVtP5sy6W1LGEFepuVIJTMZVNp5XHph9M4dcqPWy\nIds0\r\n=dL84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/density":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/tab-scroller":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.8707953b6.0_1585075696067_0.7041302691697253","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/tab-bar","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca7e50184d84455f1604a4f611f678c104d563a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.10af6cf39.0.tgz","fileCount":37,"integrity":"sha512-SaFzGPHEe+LkReolHIZeAE8monG413/VpAHmp7ph1dOorYlaNI8NXbVsJwl6KL0ezmdMVcOOrDaUyDwd06aq/w==","signatures":[{"sig":"MEUCIQCnF3wN14011cd2SLxfqBfQDOanaRJoNu/aRDxNZ7MUjgIgZPPBtRCmmVucZimdILFgyPhvQIEeRM156tf54RxNiHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CsCRA9TVsSAnZWagAAI+EP/1d/5/Hywniz8S6jE/1+\nmo+FUFMo5xrNONA8ZliSTkyKElIJnvML+v/pH+nn2ObcWCJPYyvx2fZbI3jD\nGW9DuNwOPOxloTqzekhEXsy1Y/cg43Uh83sn+W3nt+qPMjg1lze2rKSBrRtU\n8LeRQkjaoYkAqM4OX6H72HrXQbRJhesiOdGYT03K3jz0kSlg1qwo2xQYSe7t\ncEnf2HoNTBL0qLsWKzKLqSOD29I9QKxGmm4mvP4Etnt77xtGyMqZpNAHv0at\ndHhoQz1Rx6E0xJQX7wEnf86/61i2EyLyib50/u2kV9ymdV3q5pr3RyhucXwY\nCJlYBCh4yt2r4BWWrDx//PUjpVUEJv0q97ZLdEt6qAUHJWa0xr9+WY38FtV5\nmx/G9wC3nQMX8ayn6IznedjBb6pnnFkFbCPnnUTmy5IGXgeV5uVdXrF64eD8\n4yX8955nyXNjtRkxF6pqWR8Qu+4gjfzZunlfq9rqLirpIZVCxvaq+9jI6RbQ\nNpVqQKQwj71eoUbEwW7YS7z9nNo0hZ5leezh4+RhGPGLuTz2PBtcerTVEz7i\ncz/AL2Dq3RoZjRD4zt3ZjZJGF02ClIoJmlweVZVBBPz5qaYlugG39IS4pXfa\npJbFaaBMIVki02Q/mK5ry8bvR+owtrLf8jsFeeQBf5eGs2A+12o8AhAkZe4W\n6UfR\r\n=F3ZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/density":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/tab-scroller":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.10af6cf39.0_1585160364526_0.5995819953742403","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/tab-bar","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9defcb90ec21a8d68d20fb24d4b370af1fd8696a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":37,"integrity":"sha512-EMeKGxAHnaFRq7PnlcnME6N6TXA8fCjAnAWBpL+WoJSaDEvlJNY+8MrIWaCDpReP6fjZWUbWQRZgtu39p23gxQ==","signatures":[{"sig":"MEUCICQg9rXOMW80RzKq1JqqNbtHJ4RDgC2Opopx8E0oPN0lAiEAme29FYvMR/mjX1QKTs3BnZ1E2PsA+SMg/kDu+oVCLrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkCKCRA9TVsSAnZWagAAuC4P/1Br3PZSD9oPSu9kZnrM\n3b7mJcxCBU8ntrJK51PuvUDwW4C/eyv/kSgIwC8O/U6i8KCr+bsrwHHC9uqR\nsA0NOr1+UxFNaeUZFyHQCRuSQN0m0P9ogDs5icWztTvbB+6ncesYiSwhmA+n\n41LCAxjiaQv3yYCv3acNrmYXykrBBcd9o/rzZ3Cebqi2RqkiGnj91c/e/jOQ\nI01E8jGJp4SqLdLAEY8pjQKaQZZdPv+dcDZYvwPourxqGoM62KwzJhVWseFP\nZv6AYrg0A++fAHxCRNXmihVkcAPlkotbBFFfGE06p8Ue8PfJ+nVzI70Vj48b\nx7F4/PirmduTTgCzxt6hnwbqL44URaJ/ctzDjd3qL4eFz0Fhi07pKa8cU2cv\n70ngnP04S0QlgDRyqzn/NOYnoAT5SUOJ/wM2PDtkKT4dEWx6V9gZKmbs1jn7\nVkD2yp5OhshjldPUNTZR30xbNSdtX5DsqyC/ZwJeBIJ3AJgLcvdK5KxboKXS\n2W9hlG+4JmrCZymTBdSvN1hwvqTFzPCBF/zf/rShEMwX76i7OPhXbvm0Ue79\nFgL4XKW0NoZfDHGaQHtJqhsQ0YAUl/xlVbJGSpPhyiAZXTNlWBT2XBuhxInQ\nvn9hxrcYaGZK1tXsvYENn4AN9DYwufUmLjji9y/I/zB2MCxQkrv0I2Q7Rcj+\nu/HS\r\n=/Je8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/density":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/tab-scroller":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.7d8f9c8d7.0_1585332361884_0.6030344579805802","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/tab-bar","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3424226eca19de268432668b86c2318ccc4ca717","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.d6315efe2.0.tgz","fileCount":37,"integrity":"sha512-H/JiGePCeQxIb253mZ0ttGXYx5/UAsd0S18xS3qAUw/S6pjt5oZ94k6b3jggNXoM4mMxd2FtUfJPOqXUWYxNyA==","signatures":[{"sig":"MEUCIDz3SxfQvmn/SM4LYJaDpwzd1rRiROjZnMwCmLKT3TN4AiEAjkRgAwkRL1X7OE0cmYqtbjgl5yXXzyqd4luGvdy4zt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqoCRA9TVsSAnZWagAAZDAP/3RuVXc1tWUX24rHxV4Z\n4qdEwjLPoOpjghvelVIDBMzgy55bFTJfE0tYf5RGtZVwQn1oF72l1JGFF9oW\nJrQvJv9TMe9ePLvZL5GyRftiLozfSwaCXNkJGBNpmLpwAzR5vtcyLsNYjRk8\nKAZnH3mc8JfwgC1V8fdZWWppyGPn43NBXWL/SM/uIjLshoehP42BMaGEK70/\n5NdUPdhExb/MqPaE80M2wSOnwbJb0TIKnCn6i+gjO6V6XOlco0+ty4WBQOGo\nb2DoaMKlOZngIxZCIDOuqUZii4kHINYfN4xQQ3Zi65g93O5N9KNZ9s0+9dkl\nX03Q4V1/PR//sDjXyyEIWZDKFD+KyDCzHnoyfDw4Cl3HQ39Hauwn8WDAe0d/\nX+65r6KjHBaKRg/5fCU+kbjVAB1UC89PT3uSRl1sUSqR/lSShVealYOu7OWk\nj0v5CqXtuJjmwZ1dxrUjjrm1AurSDNMmvIdi8CgXc0YYdIHd+b+EA5iufgKu\nGhqQ1XNGGopz3zavK66sKG+Pjtq02U7WcRbwLNvd9I++ejSYpw/JgmaZmYNd\nCLnxQ+xEF+0399U9fv38qBdluwecQccYzcPj5FDZ6MEgFPYAaRvVEteLVTal\n4qn/hC7gI0mjgbWvN/klMEXAhAao+ahe8H6BduWbu1QrCpq2KEqbJw+MTHuS\nskYe\r\n=bKTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/density":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/tab-scroller":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.d6315efe2.0_1585339047908_0.853252641279844","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/tab-bar","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1774ce65d811642c5167f514591c5f5c35b0a18b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.a3016368d.0.tgz","fileCount":37,"integrity":"sha512-+DAXpmAsjTWqPQMmMa601+nzK2KrtyMuoKTCPNGwz6Yk4YDHtDkDa0y4m5AhHktq6wyRj7a5Yw0h/XPFz+qDyg==","signatures":[{"sig":"MEQCIEY7WM47JeL9faCoH3hA01UhVPiu6dZHTaJWNtHlPC3CAiBydL8lwHkXc6nM8EfgVJAFvEEc+M3glYpEDc5MHNuvuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4fCRA9TVsSAnZWagAAnS8P+QCLQg7Qxk6OGTNjXZWy\nBZfJqVBH5yir5zwaBqlUvB3QiRQD2IvQqAHmgzgXWAHggV7D/o5pXISK19x9\nceSswDCZbrrL/RQISfM7ey3tfR7J6wm9tDic2SzhBvxBF9i40lDNYjs2ZG0G\nIMuHxHhH4S5VxnDJXotXSFDEhuGhIbnOU+aYUdv3XxFoc4IWBdrW2wqZ3mD9\nG+j6U4Vx+FKLvF1G4yt+uGcBz+UNlYKaDI24oMN/AgfCSn9kQT5ZAUuKwjZh\nFlcTbcdwfjHbWQehUmL7Yzl3oCoEHPNUUX8w+TpeRfBBaKVydhLDx/BG6zvG\naRVtXwyzOKy9sbcyrSeXh/bszjOtiANDmwzW5p/CfAevR1hSNyIuFewa1uro\nd358iorEwp5i4e+mZaHbgsilZjoeE7+LL4C3V7r+MKfchz+9OGu9No5fnrn+\nJyWzaQ1RAeijC3I4F5YRSMPtVJwUAsaErGu+GKw/wjXAUWceNdfx6UUMdwxR\n1lzauHdKQvXjmGxQ8CGLWx74sgDSaQlxhRECHTQSDyMzl9eCxcUrPEW1Mjf2\n8H3SN5QQ0741YQOOtwzmdXgnRvbUA69+ObnGungd/5cn7wakCa76mgvGDrX7\n8OR5cRm57LVNRVUb1pAWWvojbFWYenN5pSBSn4frRgT6iEEfmuCIUnpC0Cdx\nM3oA\r\n=UZYY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/density":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/tab-scroller":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.a3016368d.0_1585344030431_0.5625154214204244","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/tab-bar","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9585a5c7c95f817933c68dc07a616bb4676b2736","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.4b45b6620.0.tgz","fileCount":37,"integrity":"sha512-U384kt5Sbd4SjoBj4LGgbNb7pJaQYXamDUypYMNfUvShELmQZ7b/IZXOSTfonEXvAy7mRw0KJy9jEPZ1wUA9XQ==","signatures":[{"sig":"MEUCIDYjeSDcu+bj599J/hVZ/5I63xsrvlj1FjetffeoEUHwAiEA9SobNLfm2cKfpEByROQY2bR3uGZ8R1jwwGaTilUu73g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hdCRA9TVsSAnZWagAAlbAP/1dV4WSFQisVLyURDwls\n89r8CKhZJEMCQnuUW1DNIkWJTyoUl1omQL/x180F+I84weQtKwEbCgAc11l2\nur6YIEePn/CQ2sPrgh4xmD+mkT9cfoWcXbYjA+jAeiig8QYCmVel1Wfj/E4p\n/mkM/udSmTicfkMXcT18blBQ67MxXgqG6azM75g9yWOQ+2Dxh4DMFr2ZpTuM\ndVaPD+eAVYU0xLzrwMHfBig0Ns9fIY0Zrk7p0ehHsgX2yqk7aUDTlffffcb8\ngAtHlBacRCrDzjwWto3RYnNaZYoXS7tOQoOwbE7/xqWbZa6VxgY77IOw5m7X\n2NaClGju81iexqWA+8SJzpUCSS77y/C4U2SuuViBRIgI2Jp73tJqVAJgpKw/\nb6KpwiynVud3VKz+XkxhmZXqGWl2QvjwTpTZWkkecSbKLGjpZFqI8Iik4XbE\nWVkfdChOBT0leDEcwcegEyKdZvN6evBn3z+1brBFF/pB+vzkVOH8JAQGhIIv\nfxAD/Q09V9guNfGdVbI5Bn+9WJpJJtS4Sp/LFp/FcgR3nM+tBmnRSfQa/xXm\nFDpJIIle/stWCU1M6iPmues7jWdWCGNNmxjBManPiINmDt1UwIXkAQuiqYCG\nOf9c0O3efb8vj4hIXV28w1PchHoUXgIasdkaMw06PjugWIOF/UbVotUx8bMn\n7lGB\r\n=f/3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/density":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/tab-scroller":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.4b45b6620.0_1585670237015_0.11984052517674337","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/tab-bar","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2871a67b8e3f4f6ea5029090ecc77229d9090577","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.e84b9c8.0.tgz","fileCount":37,"integrity":"sha512-8OgBgXFyzTw1vbaKkQLNnjb+VNsfjKH4SKtIk92q/yn74YwdZ2r3ex8VSbBhp9i1+Ts69G62fFhnXL6uFKL7kQ==","signatures":[{"sig":"MEYCIQCjjPixDl6HqHNLa0AdrgF/s2Yxz17gqI9iUWCVB+KINwIhAODoiQMAZWHg+1xp29YwieU7xkbd7Ky4ukRVbklr/eGA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfjCRA9TVsSAnZWagAA6E8P/2LYdapcDfbXPaBgCkVJ\nnYXPAtjpSqTsyZtL4A7KHb9UlZ7RRh9flCEB0XZ2JBzW9Yimh8Wi0UqgnpjY\nJ7DbHu3UYgLI4d8kH0RoRJKb9Zx7MB/6Lkbh1ejwPGsVVrYHVl8qZ8UmAk9t\nMyxhaVytU2FTyVGmjrrPgpF9rhprXim5nh9PnVcg7qTKvdnu9xgC+XKt8ssl\nnUcqjpoYU8PAvVk6Ertfcu7XVwlXP1pmhfMVzktkJAuD9ya135tZnFu5z+VX\n387spY5edcF/H92PpHn3GQ7lX0G9B8+okUk9Pp95RIi17xtzIQA1vV5FgZZz\nMvK7dslTg9TGDea8x/J6lM7xbiY/wsfN4BiXx67bIJvdQ3Tmm3k9XlCkjX2R\nkcrE/ain8ib0MAn2wYx/rWZmzoy3VND7y19oq0OZ8zshDHmhcK5dewz2o4sH\nfewhxFEqYHuKgcawOzJvDfFC0EtpqRk75RgYHPyKkGio+gh4DUpa0dfmNWzK\nQiWnBM4vOQsMBZ8IRBMQzPnNpGxkmryBuBpRxpZWYB3UFhL+wJKBqHookyZx\nyT1Ho5oQJCtCvOxz+BUUEbDLfMyGfm6vZ5VcLHAT9AZZESm56nIsQ/c74gbm\nnJVqQxz3AwbTHrjL0H8Rc+sUJ2pQ6yE/L41R9GGAPd09wuagsMqyZZLiUB01\nQfpb\r\n=L7Cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/density":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/tab-scroller":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.e84b9c8.0_1585760227453_0.6748556489643436","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/tab-bar","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71355a99002a2c6bc8e94c73ecb0873c7391d509","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.e33c49e.0.tgz","fileCount":37,"integrity":"sha512-xyHHbRKB79Iwv0XMIEunfswqvmxYmDCVmPAXn5M95Op4LCvOaNX8z7IUkI8D5Bb9I47ju6GEx2ilupnBTeMeaQ==","signatures":[{"sig":"MEQCIDge26cwrOkeu7EKkm4ViQ+ezF+Biqf8ycVqfrPnRCOTAiBOvGBAMlj5OJtoFxi6skeFFR1Dd9t1lip6BGOaShk7Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS2ECRA9TVsSAnZWagAAP+EP/1CHGHuG8Q1kXzYI/kYl\n6KhgQxP6LYeygo7/LvWW7857dMJrH6NDpNpI9G3dk2f/SDt09p2wKDblHKlM\nt7AyQ3HRWU+ZEs1s3fEAmIWEPQB4o0DBeVJLKiunsK2fIBeOKBkiCf7/gtJH\nCgXqQrkBugOh3SRaH7R0BQrBu6dOLrFPKzIEfaPrQzedv6BAgELqrG7i8g8m\ntrfLtVvhlQ1dUHJ1IKb+A6Tqu3NELzXQxgBtjhCIdakMAlEU6sLucgs+7Kd2\nc+kHEPJ1N7ngW4TfWyVWC6d1ltHntjriwg1h+Qe9n1MBsn0ywM774b3tq3o1\nmNIMSFvBjfyNElFOzw9M/bLEoODxe2sFcnzqYDnubhVHWbvnS7hWnr9jplu4\n7KSLihKg1zBK8O8qiAeOwp3/QOLB90k6XizJNITIhxeJGk7fmeCJdGzAsSTa\nqNOrd37iFT7ccnAWkSlvdfN6+kYn2lAf55xO9R/XybzGaLSFsEicyP9IXgfr\n3FyzXLy7xMUAtBzTS6bzcIi7+OH4rbuoQCmTdTQYH+Rt1Mgv3FEmpEA9CFfZ\nWHH3pbEp/2q4XbW5eqpct/bAUCy4GEVTO/LgfR8dI98jBAq3vxLzJXd7Rx8q\nIBvPgUdu6E1jaGQE+IR5U9syfC+e2o9anNLcPZGq4MriEwbjdITFksN1qIci\n1LOU\r\n=WZ1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/density":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/tab-scroller":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.e33c49e.0_1585786243576_0.07640020498699251","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/tab-bar","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f478dc2eed52e56fbbbd53a78fe130cd540684d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.f1f8e60.0.tgz","fileCount":37,"integrity":"sha512-5GcSqltgul6aeDWja3wlo0w5Edq5Oam0lc3pszLnC46bm3cUes8N0NjWpJxsXSDdlczL5G/2Yh9IijoT/vFLTg==","signatures":[{"sig":"MEUCIGEgO45igxVjoB1hWESSJOWx8BTUjsjccZY4zqrFSZhsAiEAjoRymkI9yEpbJxDq1BpxsgIFWwWuIhKAlsL3esYg9FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjm9CRA9TVsSAnZWagAAtOQP/jDkZ2khbq5H9GZcb5uB\n91byCkk+pmGgE/AiWa5KKY4ZsKKfT2Pz7l8593m6hw2af9HEyPLcCWrvYj4L\nxiXLhWupyJcy02zVnshOKa3qJ7BAxCAdLFfEILWWTjPHdxR97GQq6dR2AFrA\nsQpdQfNz/+XijOXw2fP8SP2O+voZlC8hl7OnWvGPQ5vtk/1A2SzezgyAdDSd\n7MLOKp723HVNkVAxt9pZAgq+7KMmtj6YwA/je6UFIjnO/tT+bFCQdP6pgQm3\nWhzldoVLtF8A+wKj1wYKvQUfXhdatanRnsQrAoo9w/2h4Cfu2cGr380lH+Yv\nbd0pDVbiEmRGQrIcOhT4HoISoPT36yPrFtig1HTX4JwKz7GjnWUvHRSTjt5h\nwiqIBFLGVyBYbA8E1iimV2N2KZ+TZ17QbZtdaJd2+zMrTH2SKHQlL0XZz+FN\nXuL0YTxablDOiF6y7D7Qb00CKX+Tj1+5l0lfHDbm6MRTxojVHdWQqN3INkH3\neeg7tmuJFv61qjlnHf9w0dHl33y1vwomxXaJ1dByVmF0GaJj3+9I3UR3dECB\n7sLzvVHtHrUNQjve38i3A6INNT8uIft03lHfZGhNze4XB+LSQjExRaXtHfwq\nEgrZiSPM5pz2omAiPAfMhSmaj5EZmIlp3qgkDrRbmzcuwD/0fS7MvCFSOjbn\n/E1n\r\n=67aL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/density":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/tab-scroller":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.f1f8e60.0_1585854908856_0.3935398374980057","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/tab-bar","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c659c6de476a19c6591fc68a756128dfb9b03b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.1e17c49b3.0.tgz","fileCount":37,"integrity":"sha512-MZ7PKOYXUU4IO8crzTCMyJbX40HWifI3J1SUhhDm6wSWTNAr81iEH0hjyDdhU7fONczXVj73ru+xRb2wz+Esrw==","signatures":[{"sig":"MEUCIQC77az58gRh6aWAibuZRRNgFj/Z77GJ2GWwXsAA8ghHzgIgMvtExF48599i339Ust8ug5aQsX8x2td/gYUEFi3hybI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rVCRA9TVsSAnZWagAAyZ4P/0XCJZEOEb0hXh2Zg2Lt\n3uvioeyrEhB72U42rmnwfU+QfMybkpOGsz05vT7KAj7hWzAFgiLsie++bNNG\nmRWOkAIGSOEJQoEPcGRJWnaPHGZn1dtRW7YT/2/iKpW5LVNZE92K/cD7jYcb\nksB2ojHogDGxTKQ57G6MO/aC0L/azQNHuUM5gbY5t8PEPuXbvjEbm5Onf5sq\nMf2PqtbcqrC2Syvt23sgl5xWItNt4ZavrABlPBEcs6ZirKV15sUjQIwXjFgD\n7iZLMmGdjcte6JvrCSRTYKGZfJKX6gDuz4fP2EjsEzYhS08rRbsPZhQsPiti\nVv5t1TyMcMITewCR4ILEtzWoAkf7+u7hzBN40nuqV5ZDbNJoqxaaEPeNMmXD\nlptlrlzh5AwRJuPgU5Tx1JpQbanGayI46JLUcbkRpG954htu12L7BEmPD3Vx\nufUGsUR0GbZudUelBGNTj1iyXED7uWqeYJJx8qffHjryiAWLUCVjHOaknFSY\nHdJN0LpMLUcvs96MU4Jn+zX+WQgoAXOEz4GB0paZ0OcKqTTEk3R1qdiVDsg9\nK9zb0AIIvujERHB7zZH2kw+mozroKboNhN9vPvwcQffImkbfqd+wKqWzzPEc\nZrGuiep/HkI8eLayXmKehezyM+3QPvaG7ln7eNYd0F2FJL1w8TMoslm+w3dd\n+LZW\r\n=+MEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/density":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/tab-scroller":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.1e17c49b3.0_1585937109294_0.8754713877757307","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60593a8ddea4e4037208744fa7a59caed8faa82b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6a40ef217.0.tgz","fileCount":37,"integrity":"sha512-z172rfjoLdY3Kwtg82cVRdycXLZ4A0RVm5LCw+ZU4gQgNj+3w0ggrA6QUPeMMK+o6CtpGvOFIp+cGP3cRMM39g==","signatures":[{"sig":"MEQCIHRzIwytQvxcsl0pH/8FjKz7hnVCj0QeW5EuAVdqP68SAiA8al4ZKBuFBH59muMXnWWHas9y41XurZJ8aWYcTNXCIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42+CRA9TVsSAnZWagAAM70P/0BdoBwST9AU+FOpXLUh\nTNmhXYTxGl4+Pax0ZyPFAKR/RpjaK4GZ5rNYXvE6TPRGV0F47DRsnauTctKT\nu8h3jf1qXDEpCNP9WxADrd290raxXPtJPpTq0eeZ4/PRRUkf7bVOrPK3X5i8\njJg8aAL84hmB1cdrxYqfNmWLTt5YbC1YVRqtuL8cwHMi/TZxx+WGHdV4T/ut\nu6fKVSVLKEDUl6e0M/7QfnqSQD025PUpjlJQ1xJHQg0iFf/KPwGX1Tdauy9n\nNOC2isY8xg1A/IELf7jZ1NvLeyQgfM6LzyblXnzNg8b33uu+YbsTdjyBETae\nJtQ3M+D3sGWq93xYpLHaW0iCpelle2XbOHo4TkiNuMeu2zT4KqCLprdYerHr\nTJq8Mfbe72tQgyzqYuFR34YwpmTsZQlZpf9RHa48QWwoFoLRSHPahFAeSRJz\nEZiSMB5puTTha0C5JDq0GXRppES2cHwJ3D30lwosYVBfRiaX3x9XMIVhcTEn\ntIPK8PQjJR1Hv0nOu62T7OlVd5OpbflSl00RC13tIks4rl2NlKNZe+85XoPv\nRUrDOeowd2725hfx0T4dHb9iR9RElSCl9eKaHDzI/AYqBY2oD+J0KZRkrRXR\nXBywzYpj44iBBTUA5d094f6pikaAwMUJPH0ZHgvqrJY8Um+QfNXIA7RJwL1q\nVH/S\r\n=UaIG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/density":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/tab-scroller":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6a40ef217.0_1585941949831_0.21893031661626505","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/tab-bar","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6188daaf4c073204d952aa3736a8a30d631255","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.5f24faacb.0.tgz","fileCount":37,"integrity":"sha512-E6QN3GD942o8Rux6TgCBkWYkFWvNhD3BNQNad1FeSA4Ca1q3E6Kpcw5bWMgzfKA6rHjbYLXOMw+Ev45DYqVBHQ==","signatures":[{"sig":"MEUCIGyhUZpQ6CnLEO6UFkVIPTVymIzZVzRoQz8spNu3c6hpAiEA7ETR1x3KikurHul35AU48jJi3DGez2klVsO2uX40iB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje/WCRA9TVsSAnZWagAABgcQAJQD4TPJisoVTAmMsczX\nrgMxLeSSQ382pKW2SimGoR0/+H99IhDBW+puzbX2CIR+sD2a+EfUqUTMV6+A\nRHECUCjSmik2EV6PQtbYxtyfIvAC0X3+Q9NQ0inUZBLJFDSieqkPJklWGhl4\nah5lHcv8rcCg5ihNs+/QGEOlqlOhTJgrvRhC80KDVD48Rn8D/ebekb05Knh7\n3gPzVYwNch0Zm8UmCy9ftkClBSure0fqL+Qlz0r0Ds9hLTpwMZB0PPEExN7k\nWWj9XJDne95IPgGZNQFxog8Pkv4hgY2DQQjmWa0VuqJa8L6NQ8VcPAJ4l9yA\nxULH5Sh3OSOWkSHxeQYrdoWb/fa4Zy2xW/rWmsiOL2ppIMVp2zIo7ChVVpmG\nayWC7NBynWm+NYCRil3f7abYBw65UM4AdBXSUt3PWfOtwXOZkMUKJUFAmjHO\naYqdGNZylOhtrNz46gXmZfbYwC+VkcXzXDSWJo+qus9mRnc1MQmcRdQ9UkBA\nx6cXi+eMBvq+eI/WgWmLKz8o8CD5s9MLJ7odQxda9xvq+rwsWZpef7IXVFQR\neekbGa6Vgzb+wnOeTX3E66kOWdI0Soml6+Gu054SnO2yEhaY214uXeQ+Uejs\nvNz+fKa0hQ4NI3UKlA+GzEVAC9qM1C03jzn/mlWmYkLUa7klHdfvDwQxbX6p\nttY6\r\n=4ZH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/density":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/tab-scroller":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.5f24faacb.0_1586360277844_0.684654301548673","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/tab-bar","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c322f1f2bfe28beabc1c2288139fa605488efd04","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.82fa986b9.0.tgz","fileCount":37,"integrity":"sha512-yN7PYmZwZi/GAY8oCWJT+LeiyJ6DehSE3UUSD8pOJ/tx+ZxHIL3R4x91NccJL7d6llahjcW4844O6Jq5V19KEQ==","signatures":[{"sig":"MEUCICY5LVdBSfIKqgi+y8//1dvedSev45DO6Cseb7w1kteDAiEAs12sqPdeWO8092so9rBisjj5QvotjUomctdSqVm5p00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfEACRA9TVsSAnZWagAAFQMP/ihAJiuEMI9LYiZVfHVZ\nLSjYFEk+GV+yaPNxkrebgoF/see6djy0No+jsb/YlEl5DvGDDRmb13F6/Uwb\noxkW/Aai15zPVoEwOn/nOiLeMpPDI40E1b+1cq/1/jr+XoqV9cvSt+f7XnOX\nIrhKntaqSfnGY4l+FHajbo6/56e1JcxjkP2LPjEM8rDQQA9TNpdHhmSEaaH1\nwUTgYcsV9GdROmi7bA1OyZ9NBUYfKxk2bSs46Rp9FL1kskveywNXD+XnUc2h\nlKPXQSMp4vLQIDQ597T4wuwiu1VGptof4YyzR22BFd0DE9t0L/Rzx4PQ+U6u\nHOjXO8IGjmX7orf8n6PqCshYjXRxw6rVpGzx7TQho0fUyAc1pMjLeffdL1v+\nuUOi9Z0X+F8D4KmxU+Dc1MX+/C9NA2ZRR6C9XD2AM3YtlbDJBVbs9lzRcbaU\nAXf5h/QkfSyYu7TWLl52DLf2fEGdHfLrLKJFYG8u7ijjIZwNYjAL8b2ytw29\nv/oNtkOBOHVIcZcUkK8f4qjw1jTv41+pdtiUA7fsDWMJc7Lxflp7EHigAMKN\ngJAAoSva71mEKDVy2rss+jn/8UpxWrAMELnf32LlT37CYl2HmjPn9o21igZG\nzg1e8U0I7s2pgyq7SihFvH5sSqcV115vmBM4ys80esnMO/e4tocCZmOX0LXQ\n/LvE\r\n=XAHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/density":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/tab-scroller":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.82fa986b9.0_1586360575944_0.5423238126075729","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/tab-bar","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd1f794f012202bf644d6b8641d0a11a35de4b3f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.9930d9cc5.0.tgz","fileCount":37,"integrity":"sha512-N4mnvXsBylVNxJLj92XgFqCmtTCtbLaQ9jMNhNKBTZVDgsY0chrDB2o1tNqEgIbONZvyA+tkBYhd2iGdBbeLFQ==","signatures":[{"sig":"MEUCIQD7CCiZIS0JpKMlBnuO0Y3UIJEWmujIVnKtYS3UGfjurAIgBJg2e48C8mMSHLnYr0gASqvdXQqteJzLfCf66+sGDFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejicMCRA9TVsSAnZWagAAu+QP/2k+OSLJ3MyTES+ZuvR7\natxkX1P2aAffDOt3YXpdRLptN8eilPSapJK4Ie54A6HegHyXH0cvG0cgW0CB\n5ZIVo7SnG6oE6hNoPmt9NjnxMkv6OarM+g4gJj/TKTlDLhB3iB1YyVXsRKkZ\noOj+JeSdZl6O1poGEz/N2ucOpqbGT346YIii336saUxJ3zuTsVTVIo5H0EXu\ne/C4dMcRw172rT43FaIdHzv+Sz9BPQVP1nGXW08I5fN+wWRS7x8k0I/je5sV\nVUG8ZXhRj4ni4eprmTuw0CDyUzU1JbClMcE6Yk0q9zqlpKkuxtrrBbOt/8JB\nZKoJVGImLTF3iyaSqj3vprMxkjLbR/HpnsyUYL5iFQE9JqgdhiaOZUPRhCEN\nt620DoLWxovMxV9Qh+xKav6fWQ7MIrml/E0y6U057K2lOX/fdvA73p3ANaNM\nXBLuk9jW1fPvCe6BP79KLyeM4IcZgpojqOQwam8+MdYm9+3x9AFTX+N5p37w\nLCQXLI2X/eRPmTlPZmTA2ckA8icp9QCPK+wDPjmYARwfvjhVyMOLyhJyodKz\nrGTr1d1kYUh1gqxacDwvAPhsKEc6pwfRvxAwD7NyKKhN7h4zfcflLinLGhPF\n05dabSdQq3fZ39uthiaF2nYdEn4jmi5G4b20eVKCxcqkTVYqNcRQAehJ/WXh\n80gO\r\n=3PSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/density":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/tab-scroller":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.9930d9cc5.0_1586374411871_0.5494418304346851","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dac5055d6525b0f062814e73718ae0904d10c70","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6601d24af.0.tgz","fileCount":37,"integrity":"sha512-O6kBtRSVMmk0E1yHrwcL9hpj11uEmcTL8yCAcRMxsoTbnefyAcoZXaoVKn9J6b548RYWdLd4VeGyNvb6txOgnQ==","signatures":[{"sig":"MEUCIQDFTMTY+qs1c00gje7efuWO0EPEqHcQBnTV4XxZbyPWNwIgeGp+ueui/dAeRws90Lzkg1534JXTbYU189x2hOYIg8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmzECRA9TVsSAnZWagAAti0QAJ4H3qY0hjqASeLT4N20\nONkjTlft6L22TGO5UmM/Wg6XcNDsE2Xbc1mdtwEe29vF42yi4a9sH60PnxHT\nrR/a8L9LBuMNl2q/PxE9DUAoYlaVZ0GwbI1rNF+EFkPPALwwZif9hdSDaSO+\nLGNFsas0+rh4pMRLJ0n3S0qfLuiMhHJyAVyLAX4MYEBRMUTVtpEXF7wb/jeq\ni9Odxk25ISA/KIAIeoGTmVpnzKJgoVtRdZNTvv0ZNUELB1tT9GAUKVJY5XHy\nIqxwyGXC798at8VqjUbGZHhqLalDLKmJT/qC5vPouukJidYuBcbzXFSe3oqN\nuaGWuHm+NjKE0M5OqzeyKFyS/MkR2zaJNxwA2XY2JRQUCbNIv+Ikd4Skog7G\nCmwFV98q42f5COI6fnknL1AM5fGWj71z8ksVzcii0dV6qgY7Yr2Of1b5Mws5\nBKFXOyBbkce3hglQ2TM9zI20q92SPUS6VUvp4saKE6BU/NOSs7rPrk7q52R/\n7fMtFzNNc/mMybAJ+ainQmfoI/HH7fEs8I0fEddG9b3iKw4afT1owgGdwxyx\n0M92OZHd2UM/3OvOnpkoEK/XehtPFuVSjI46lnU1zZsYSx9+s/89JZ17xuQk\nTFLkDDwu03yfs8Xaj8Bfb1MeSjOaGe5EOLBN8tzY2euZjlxUC88yoWtvp0iV\ne4x/\r\n=bxPu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/density":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/tab-scroller":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6601d24af.0_1586392260452_0.4948663778091442","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/tab-bar","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f5e0c787539a1f11fd462e90646e60295c5f6f4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.05f5e1583.0.tgz","fileCount":37,"integrity":"sha512-uOHf1whH6yCGgoQQu9gtl4UTynK6haHIQpCkx29liPGHWPl0nzJF/wOFI5/fkaI0K4PPZzTV3m0n3sFO9tNLMg==","signatures":[{"sig":"MEUCIHGNWgB0aqWDTixhP6b1UfSadSaeHxDB3m8qOn5s9S0fAiEAqxprMaFvYgciqgg6snM9i1BXogpUU3wdVnnXTD8664E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDVCRA9TVsSAnZWagAAGVYP/0vQGWiBlGmNWoAvEciy\nr6M4CCf/N6umuJrXYw2pPyOEYzKrzQRx7AKI7FphnniAU0ZHl0W+Ni2YZjBt\n0QXP4ab4MJS37A4l3oEVbT612tX2FXpTNcVgIsmtpuTiv/W/Ms1UsQmIMACX\nCq4y7afZfGgyLs/HMH+o1GljZO+OnfJjvSVkYwW1vrONoqX1XatKCzThgchq\nyg2QCLGWlHxIAIDToqnFZjKEwkynAKBX8kKDvNcTX25QMI+3MpGG2+g3iGiG\n9K9YC42Rwvpg4Et/awN2QucbIIEpZJdBDycgxV90XoAtVxvPrl03Fyp3B8Yq\n2/88T9cmudGbX/E6XwpqjGRDRnZ96d/jzNYxdKKyJEhZQvTP/Xkk6lC+eZwY\nji98ZA14iE9AeE4AumT7eJpBzjUAGCR/joGlrt1XeAKpTBt9knCFhSMKg9IC\nhaFV2JS0kw6MK49aKd0yNY2aeyE+vrfEB68J6CHHpiUD68L9sTQubhi1EiM5\nyvTuSX+2GwGsMAi06YklcxXDnLEkGpi4imKNF/VX3/X+rXA74nw16UmRYL4s\nBsxzGtovcNNYtdJrNihazaF3tVs0W4lbHZuCGeJzTt1h/X+cAW2IqPgbTKY2\ndBt8NEvpZR6Niqn6DuPkFBs2nJCS7uXZ3FjWEOAP8H2krI7OzYvKFe9X82Ik\nHXUu\r\n=QgxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/density":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/tab-scroller":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.05f5e1583.0_1586393301133_0.3649113064275227","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/tab-bar","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e3ac732f96ea56ef710781982b5105789b5328","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.bce00e186.0.tgz","fileCount":37,"integrity":"sha512-JBk3ND5hjcWjmQj0qVgWODbeohNlH4FbP4Qs9Y9bkWR2x/wr1x1xhnYzMVo8JufYItvLhQVpLk/xzaQhKVWUzg==","signatures":[{"sig":"MEUCIQD8Y9l6pIyiR1Ss8Vc8QiHoixHU/eYziJXBAXIHRqiTWgIgeIL5LnYjRZrzLZKiUbFoBtyhx4j3HXz9MdC2rjgy/Lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4jCRA9TVsSAnZWagAAiCsP/3tI3L2EN3Gd4UWgjmu5\nw+ybnWTNkZRGpL7BtvD9NB9munR+DQaLLshFuT41q8yusZLxPKLqWSIT25Rx\nMK+atuOXpxrGyOJ+RFxE1k2Ive19qk95ml5JUXTaYOwVOxpWDUfElBygpPfm\nwjPyvhnIfF45WmkT2C5DWWQ4wGFRCAPpl4Da/t/p2zCgzeQwUI6C93mKVHKf\nq1oTouMZwTpFIEZWz3ch2YsWFjNvJ7XstOjE1cH+6DDMl2AeGfG6/BLYt16c\n4O2Yc+9yWJUOPv/Zp1Pv3OpTCA321cdCGoTsSVp3L+0MHJxt1ZB8x6fm1DoM\n0UBz5mAz6oTwna9laWbUyETAfOvDlprew6TbDLbIjeT6aPuwEUAIaSP8SViy\nXiUWCEUqhWpb0s1ygRZoIDfw0eFIBK7uUVlzdpEyzAbKNesIVv61cATNdbfj\nhS+xP3PRcBZC/Wh7zV/jow2wA77GV85bP+mrjj4zN7JO7MLTBLUNRYbnWCJi\nUqEY5QMTjgBsdo9edMDuNx1MhSKGICbuJorGXYq+GM36Cc/6CN7CwayTHpFg\neyH57Fv56EhiJ4aoNBBo0hwgnsw2Dlr0hnvXGGKutKX8rm3e2C7bUuoyzZkU\najMf8i+FLWSwUAS4auMkLHFMwD12FCdqqabfJisHky5w40jRGlZ2lHTyfIbb\nGEQd\r\n=9TqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/density":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/tab-scroller":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.bce00e186.0_1586445859320_0.8085127909088949","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/tab-bar","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fd8b345d10a3d40935a4828b94b2baa473d0735","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.927fa902c.0.tgz","fileCount":37,"integrity":"sha512-MtHEEV4Y9oMmjcDV8fF9NsZwCMDh37ioDwrERXm9p8jovRIV52ftkDV4n3/fjBrMw3b/jQ3I99VkOnGuwm9AwA==","signatures":[{"sig":"MEQCIH1AjNAlHBp3hgtjiAKnNnRGLDuxaK50JkfkfxXsKlnmAiBoOl9e6tDFjZ0wNdHhffLsAoXDpVOqwZQ0Y6Atg/QDCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej23ICRA9TVsSAnZWagAAvUgP/RNHna64tV+SDEhw2LR2\nUqQOM3KdyV0bcZZ4TWWkcmCcLO6SZJfb5VGYMdSUYqwpfAnNZzgI3fL9aVdl\neVM/ea9mSoxQ0TrSVabnif//V9lw+q1+xeWzSHl7/3mXmmqHJHaQOKX3iAmF\nKzQGOYq2o4giTSdrLRu1AKWeWkGIkxXafXiJHWRnf+wor9ObltZrAdsYVnei\nYebcDrGu0ZhZMeW4oov4RWweeDMToDw6akA717gIXFyBi1bl+3q4Vs8XH1D7\ntjDWRmbez4Hs+y1O7dncBNRyj5BIrcQ5xrG0g6IbyQz6pBnqa8kJfTsz/HEi\nEpqq3trM5N3qqO9ytJZjGqtQYwp6Mn/4fVVoEtraVmcW6OjRnlBbjVIzIJXd\nc8X3FyNusymKnpixdxUOMbCDEtO3DzMe4k1nxeo+RhRhGkpTU7IILEvg+snL\nCnjMfkHHg4HP7C/aqVXs6Ksl9bbdII4kcyWinbaXTwUjZPR04++QmGaGCI1O\nm/5vXa6XtZE6Gdk0ypWCrDzmJ6lZSVkPFFO7Pj3q9phxPUffIff6Ta0nB//S\niVZaHZ8JSfG2g2U9TuoZo7XXm8hDghrVdOhEr29iLRWuROSN88TTFhWNMYer\nEefTtxeKKzwSLssTFFomxygCzCKL6yu78f7TofS4ZYFpr3V/aXZnEQ5GmtdW\nOZAJ\r\n=gY7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/density":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/tab-scroller":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.927fa902c.0_1586458056172_0.6766572200810559","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/tab-bar","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903a44305b888f36e799b368a84ccd1ded5f9400","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":37,"integrity":"sha512-s0O5xJJklddFf4nLNdW31TAoW4IBz4yoJ4TpNkiUzSAGHrnnbUAnrwbj66ayFQxdDjmOk8Sg3TnOQvy3lItC4Q==","signatures":[{"sig":"MEYCIQDNOqQEH9HvlyOKOzSUMW9xgoHPoG/SQd/cHDue53l7qwIhAOkmSPbpHh7hvaHa4CnVsqR1pJ7Jc/Zfbb3QmGXgWxnm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMnBCRA9TVsSAnZWagAA9ekQAJTgjt0kL+wn05kLZF9t\ndMXDcadxuRQpHvDQRW5AJ7Dm6YqdXgfe77M5BvM9AoVimtky9Oy7z3WuFt7g\nIhWrox2TXQsJjFCCRdow0rwogbVBFa3MZrTbVSP/eDqSYBJhOZjamg6/l/RH\nhfQEJJTeFDOkiPWqYSw7uKQph7AEHk09uSOGSFM0O7n5eTNG5o6jczm53RDu\nOGGR/4t9QrT+YhdAsRmLrYxdc1cjfxDkCrh8DcPa+IP/6Or/VScXQ4YvN/KA\nzEEx2bFss7S59vbMTwZ6dF4bnv8mVvF4fRGtqf/8TE8FE4Uv3CHYHJq2Bhr7\nuRhJFhm6ly9OQvYBUmKrCqCOabdI/yHJC4a3+4Pvgp0W6YDH5iLYRG0mEHg1\nyxzb8haVXWJEqGIOLZsSzfyK07O1UvaahPW9lETuZRulUfCwcHfOUPxUWOVY\niUss6vIVQJ9kK17YQrdew6hrZDT6ykLJuS3HYYHwHxyhnZyfOPo+x1KSM7Re\n6O3sl3PEiwE3foxZr0x8Uc9AQZ8IYAHIO7woL/Gpt6d3bn8bGtiWKjoMSTbr\nUaDNopAxYnOt3aq/glCmZJtPb3nenRZoUBKVGO8v3bnf2RqhkWP5nv4z3LLV\nZfapP36IJZyOkEzGhOXJum1IBjM+GB4r7w2cRwtuI0E3785owupdUfIKNRpQ\nnRaj\r\n=zfsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/density":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/tab-scroller":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.eb28b6ecc.0_1586547136966_0.2976952155103141","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/tab-bar","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b6d812316519c1142c3f67cbe57d08aa5e126a1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.816a43b42.0.tgz","fileCount":37,"integrity":"sha512-DScetqicg2PycuUQEQ1+5/0UtiZ4v9bQwZKjEOaC8B+WSfgwuP0OzTgoL3ybz1Ab7Nls/ckx/WVBwt5GTFThHg==","signatures":[{"sig":"MEUCIA119/9ViA1HzEhsS0JqPBRctut7WTtuGhuWvXQQA1wGAiEAt96ypmCAFC2voqWqIY4mqJ0Au0H1SCrTDID4fMWLwE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzfCRA9TVsSAnZWagAAUZ8QAJv1bw+n3Zi8OIFRmjQO\nnEv+WrKw14BGv1L5HR4T6bcLsmPmA9NDqm8PrKIqzUpaUv3+ghkoYW5lPJ8R\njI9KwZWUoBs4bly+L537Kzt5HLEpZYJIpL7FRb6EGkLbFSCKaZ1IPQQnk8QX\nJua0PvIwyVrpw2NWwudXTqzThmq+RKcs4ynXj2u9SDvodbncXRK6Ud7yVsrm\ntQ0f9h3do3n6l3c+hyrPqdh+EeTxqIXroxRU/uRT/sbVTHKEwT5ceAU3XRNd\nBMydoE/7sRU9TaD19UenlI/WP0c+lH/xrIfcvslxyRcS4M8ezT+p+5AcFlhR\n3UaQcWVQM0R59wsxyUbhOOgBaTonD1GP7LaTk4SnO+4L1b1wa0bdpbArqDjS\n2JMTEXx2H7LLC45heWwVnZnDa+wo3EuY1b7NKUWXsHpvj8C6W/5kCO4s2hIP\nZTpjkPRR5QVzKDihloeTPVOBKyF6rCtbVAsL1eKw86juEAbWb9Oas73rE35D\ntqDc1lBR2mT/QWGFeo1BwCK5QXrNTnot4QAHvdZju78Zt382WceiUbiqmVFO\nYS0QqKTVrLmNYabfqDDwVu8wjNx7AtU77bdkrBRtPtSLzpmZ8lo/SjdEDsf5\naWyQG3L5SV0BbTOgymmarU3klhmm5KCfyNlqnQT3h2bXiFV/BGFjzFOJvuF2\nPVkf\r\n=9CU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/density":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/tab-scroller":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.816a43b42.0_1586552030757_0.6388332643865187","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/tab-bar","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a160aa5a12824469eb90eff188bf543998074b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.008c4d319.0.tgz","fileCount":37,"integrity":"sha512-JU9jYW2JXF4+3v+i6Pd9n80xbXQ7mQfro6cFH9/Ie5usLLg4EoW5oN68ySARLg9tUEaPfDHX2K54lnAbPUr+ng==","signatures":[{"sig":"MEUCIQCAePtAILgUh8ARfwx4C7ZwBq1uzwRLXfSl3lmN/ZrE/QIgATycFWYFwmiqir041LcuFNNRaGhgkJP/iRqKcq8FMug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJTFCRA9TVsSAnZWagAAnM0P/0b3P5FBGOrulgINhQC2\nW8C9NDIHcPetygs45ocCsN77bEa5u39WQ7xN1H+SOf33xYXgQpcV2tc0qI5E\ng56cHyhWAGNNFV6rprkf5jrl+8vZkqH8xQW59MFkPoOJTsNNTsrXz9asZtu5\nlCMcZblqhtS7X9m7wkwuYoeZnfBaJOz1THWqlmL2by5OWTf4NOru7vDLFcLG\ng7mAaCzDwPs/nrX7MhbB5uF0izTyP6RYER+NHoDlHQd/goyNPnqbXzpdGyba\nsVTVDpPOCJTXKi8WNkvn7mdhn3HTNp1LoVnVfLP6zBrCfGvKw0TuKrGcImir\nOa7jFYN04ulqbRbM/J+SF+pC7BXx3zCpdaZnNrnY024o8N1euDu75YIJj8iO\nvnHQYUy1e3VvNnRoDfyAXcXFyLPIsMjokH5BPbLjtxcjzgYVPZqKeirRmPAM\nL7/YmVoBNJGQkMzDFZAZOBfKvX+qkDy+Tym8rf9MDoLuGEvDAhSt6sXd6iup\nuKwjx7qeDpdFnEc0poB9ilE8o+2wxevGxBWWzaNrcT5z/YPnVgP5nfkQFzEX\nBboVUjl+4mdJNQ4ftKqlnmvOIyhLyHN27MXwCHsQboIsSIzOYDMgNxxF41kp\nqJfWu4w03aiXYGj+Ob6g7CsmpDan0ekSZmntGipZAKOCL3EfphDQVHlTWfwn\nKy5r\r\n=IzWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/density":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/tab-scroller":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.008c4d319.0_1586795716801_0.03737121300788315","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/tab-bar","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed6a46915ec4f14426c55363a7778a0ce65952e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":37,"integrity":"sha512-4h5PcTr72I7cTlO8VD7HbXWs9Me/5na7iOpxi9yskYDVal67/eoIGHd6kSawtjiJRwLWjr2OdRt4754qikZ7Tw==","signatures":[{"sig":"MEYCIQCXvUIvk6HegnmNPJ/CK0T6+iw3aBaFH7Pw2wAyUWjAugIhAK8J2Wa0fyAOXGPr/0zOFhud6oadU69YEe+1/BRqIVVk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUT8CRA9TVsSAnZWagAAZ6kQAJaXNkqDqpVX7PuhMPr1\nXmF5XQBbG2IQFMDLxVjd8feYXRB1AC8WD+periqg7i/uVJHqlBuc5Xxp8Zyh\n2yqgxG6UrYSwg+vOUmTxz3qLq1jdd/KFAQvLJSJee6rw04Kr4UbVVNV+5llo\nUGAzFpfbcxkCShPcYexoFOHxfxbcG+kwufZO7yB0kwEErmH7UdLbO8x5XNkl\nU7FCKcu/8EmhdvcwS/XU9vYAcS0NP6L6Tk2HQulnx5tuFtOhqklu/pQZfQUi\nVZieNuGCnoWxdXg7vaV9GGWbxFmNWiAGLlJAeGr8FAoIs2ZjK0Fsx5poc4WY\n50G0lrjbfg/j0R3TcPBWZj59MMqWLc04b1L1OZQ1/lTQSJUfP2fyOH83LrmD\nL60Fpj8Z1lj+Pzx+GQkgU/GvAU1HO5n4FOYjIwH3WEs1yi4shnosFOK4cyRy\nV2u7a4MZUl4FLhfq7giu6gWhBU31CwnKzMqj6Kse58yDgqnWTFwkx51O2ySO\nAFpiM9vl64XclJCUJvN9x24UmexG3Qku9q/SD9/cP7QeyXl1D1sW7Oqhv6RS\ni73/uB7n9d/Y08Fr9BmaE/Km2NjQhziJT4ZLN00rNwnRNyYJrVWj9KzWsrMv\nTTbs4JML724r2yZ7pTbJ67+/3H6KNzvwKTg9eYT16H/9k/wF47/90YYCWmtW\nbt7z\r\n=3Ay/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/density":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/tab-scroller":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.cbb3f28ca.0_1586840827557_0.26877521291595663","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/tab-bar","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f3545e3ed764f2dc531c71f1b7dea47bb216dc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.f172b0f90.0.tgz","fileCount":37,"integrity":"sha512-fsROzxykq6i6Ttwrs2CPoUggRIhJcCh1cfBfn5ZF8HGNi4tKLT94hxQS3qmSUuSn+qnMwpaFAtsF87ssz7R0HQ==","signatures":[{"sig":"MEUCIHuXzhtrTar37UMyP6Dfo17BQBBbdIjoe38hwXm0eY/UAiEArCVL2+0R+ukBfXGmI70yj8GViNzVZkgkwTeZjMeTUQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMdCRA9TVsSAnZWagAAfM4P/RJlpgo0qVl16L60pFz/\n+Z+yM8O2aJ174/J7ceyhPuerbtrEaE64oZs6eZNdXhjAe5wOtv1dkJ+tjKJ7\nzOEJDd+a+yPLzq9XSIHDBf9Uhbn6zkFym3uDZFyqZY3vJUQz2e5BNmkmWgj2\n8tZXoXpSopcyntnYOIwpnevH1MxeFYh3bZnGJe+xpOxtBVfds7CELdq3TYc2\nGJv7oBsJNQEQMWWFXkjKWeO9RpS2UXTnE7WeM2/HYuPyP4qtV9dCnX0E3NHS\ni5UrOf+Z5K4Fi/HnYUczZj9UIlOYK4BWfiukdMA3bBiNHuWqYWlK/sFZacd3\nZRBaCbH8DtVWvHmA0AL03makzpXt1Z64GuGHpnVGycY4SnTO6YlU4XWMjJjp\nmq2uu2LUVRKv08JHfuS+/Hi7d6LrowjtH7RurpUao4d98frPj7cWKwhJKkz+\nYfbVG2d2dkQmohDphpyyNYiW5mx0Ok47To1Nbdo0IAMCtICrGaR2dYkAuPBB\nEOuv3sh4yBoZy74dMR669Hw3rFNpjUOzTiDHZQfsiLnKB5M7zVbagF/ujMo0\nXLsK1MSQR3fbsy2KKGNPNbPlPPx/EJipGx4YNIUAFmffboTY+gqlVmj0Zjp6\nxubKMGrxQ1mEKuc8k+ewtHxe8q0OPQGD4lYCkiTPChMrp6umFN7w0Py/iXW4\ngF2O\r\n=gDAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/density":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/tab-scroller":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.f172b0f90.0_1586905885053_0.6915115367939981","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/tab-bar","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f7e945fd3944abbfeb342f827038a53ad060230","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.c02642273.0.tgz","fileCount":37,"integrity":"sha512-Cb3QcipiQZDTnno3gr0CgfrAjYszhfAr9SzpLCtXjeh3KgJsrhVokjYHddxc5M/LsWL79haCnh6QFMQjpabGNA==","signatures":[{"sig":"MEUCIQDLjYD6YTj/5MIsYMAW1qFunKHbVKIERcYswvVMBBxbLgIgMX0GSJg45jYJ636+mENJzX1jdOwpdjSmzXkUbCTLtIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPhCRA9TVsSAnZWagAAc3sP/0uCWALjrkxZz6oQtHYF\n1sud2ED+IPm6/epZZv61LsHnZ5hcDP1pz8tCl+kx9xEJ1n2Jc8snYk96GeDr\nF7FKRaN2JOQvTFa2m5Zh/8ygPdP5cgQVXKx0cw71LjL1HenfQ8/aQVg/T0Z6\nVFVrrd8rqKlN2a6oyXos1Nu9qc/B6X71HJ4avpx9Fd8llspgFfuFii7a+OBD\nUooJSyibHUyV7z7QycY+cDoJP5C7w8TrOUCwMXOUXAE3+v0ItF85IaIzSbON\nbVdWjeH2SKYRP9sel0adGh+e5Fqi0l7jldDwWkcvXRVBFAJPw3EDXfbDPTxA\nDFj3nURNA7Vm+oHn1dg6fUNtTDU55uvX6RJYQC5ksFQ+JvE6mbL1fYQy5ZdS\nzv63RRUoqHj90lWHXrA5uWPRvHmAghpY5BE+2MgzIIJD5VzVjXioBA74MMs8\nPe1BiOD33phPRFl/xs3UHvB3JaZC5+0VIob9Pjs6JqqZqpOKoL86mBsIA7iP\ntDc5iHW1nq6VM6Td4J1VyprK3lSoVT/VY126V7SuMh/WDL8IUeCwryFAwecn\nt3powpIaeE9MkuOd/KA2qJbUbHA1nx6iBJWwr7KMgVtyCRm1VXNkGMy30jtJ\nydsoP+kywywY4FUG5XLs63LiXMkPCHjL5fHYCbYymXz2fTQ4F5Pu/RiOfp/u\n5Bg6\r\n=BQ+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/density":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/tab-scroller":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.c02642273.0_1586967520661_0.8846336956695955","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/tab-bar","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c973a29fbd0bf740fb2977d104b270215e11bd3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.8a299b568.0.tgz","fileCount":37,"integrity":"sha512-r+GALbbndcnkwHIpK4q8tnmSD6jOCT1FJEeuVAaNOKhS3TzhW/Ih42BYvNzzjsdpErqVCpDXrZrU3KIYBZiIOQ==","signatures":[{"sig":"MEQCIAIomobc1BFbxf0b3i0L++n1mkj708iuBlyNRo5RRReDAiBFdzFIaqcX34NE2icgvqviMwi4ZdPgA2z1rB7T0Uzujw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel45FCRA9TVsSAnZWagAAPJEP/jYZT1XG1OdhBHWjzzrB\nfXqdtv2l0UMCsfV/SPmTA/2rUT8J+EwJXbz8VZBtGZ0XbDQEPJGQYQSGaZHv\nXyY4pfUCC+ZP9I/1hDXHtP66Ba8e3D8qRyi0s7V0N193eCSxBcdiQIHaLF05\nOQQIWZXe4z0LVqll1INp+kTSrFlMDjO39hkyymd0YA9mU9EgZc4nxq2AfcAF\nd0cR8XgifczgQsQXne7iguFvC3QEHgzZWaHzBcbrV90NaRu1Kch7OFYQgtGK\nKpF3FrDR7fa7vtyI9qDGl8up4BS6/K1ScW1Su3AAEXH9Nh7te3HVJq5AdqC8\no5JLT7KGbovi5jIno0nQ9vGtkkTm8pRAlggqbfqWVX1Oobio+yPOjmmaidFT\nStpEjoo0Iw8tSWg4uJGHYbIChOKKyIWFCZHXY0pQCI2GtXTymlYl/3KhSpql\nyA+m3ZChVA7FTgO+7czhJDoGsqvfaAZX5x79aFUQ5U3It+h+VuJlGiNNfoKj\nCDINvgzDbX8wXMCBeJNbhrBmZgraR9b5k0PzUWFXLTWbt3E4WGf6qNOKoSXq\npFwViCDVCKiOIXoy1Xj/wumANHbE3aUrYDjqvVVKwmwRx5c3nlc1yHWfW8Ts\nX6aY4OycXtOooIZw+gj6VQx+Y/CXtVxjGMDIMN+vilxGQKVu4Zco0FGvZOAj\nRt7G\r\n=FY4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/density":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/tab-scroller":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.8a299b568.0_1586990660707_0.09825182604310712","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/tab-bar","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6b698186b899d7a4d8d94a3da0c8fad6638c08d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.490fbdc09.0.tgz","fileCount":37,"integrity":"sha512-dTlrkuqdRAciq8nvBPGPWR7+XYabyiSjIYEmN6wz/OSDU8lpkg7XhoDEE71yeCx9PYc+HTdX9T0NSDPVYfBkfA==","signatures":[{"sig":"MEUCIQD+wW4iJSSuL+3UyaUjR3O5n1huJ6oOtRK2gxHRb+s/tQIgZYG99FRLlVPRFQUGFdhEoLj3HeDtBacXco6JVYcsiI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/SQCRA9TVsSAnZWagAAblEP/je2Vv3CZJRLatwLM6Ya\neZhcrozlG8hN5EP+XcJ76xyITaMi6M1LKz5EKR8s5zYiKFJL5JR9828+8XvG\n6Ky/h53AoqVqeYzcC0iNAXfq5Y8Bst2I8ytk0ONp2HzyoxQ6SaK9wdaK2Y/8\nNeJp20N0aW68f3aJkJRi6ACZpVCyw9PIzkLBdCh0/BOfZJMG7XwQpgYp5nSM\n0ByqrsJDyCpN6QifEyitxJM+1Lt/fkSQh01EZZnl1TGl3JOz05GmWd9ghQCZ\nCMDvUjiKX15cABz9fGcOvWdWvufsKVneW027oQMLdkynitZgOy5jh/lVCW4B\nDQ6PGxEEhech5NYRKESALvYaX4YEZN55nsKlExm3qU5elHrxF7fLe0v5cm2+\n1yxSn04+hsnucfra/NGTsBhMOzIqMleGEwIeiM2mcx06qbUMagTUYPnqN658\nVNd/cbA6KXItTf+PUvBABv/5qu3u6W8hrHpD1iCfytikf5lu6jpQmDy0E4j8\nYN6FrT83//K0ny6PJIhYO4DO1U4wS3nrwhmqoTY0yS1FvKsacaR/kQTSWer0\nV+D63Q/eK6FC7Ssqd2+J+Cm8WQ56eikdE8M83MBMkWQGrFnL+Bps3Zp9fVxY\nDayQU50kcG5N59z0cR69c3FZq8yTTKVUwSpwXQt4vZuCdtTBbg9KADdBSBXy\nZCNT\r\n=H1Ef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/density":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/tab-scroller":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.490fbdc09.0_1587016848449_0.855457327258949","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/tab-bar","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e0b8ab3973942253a7a4fc95d31eb6b019cab4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.f838c6e55.0.tgz","fileCount":37,"integrity":"sha512-FkJOsqpKVESAilLJ9U9s8IlMzWhvPS3nBmKHGQTKA//mExEPSuUekjIy4TcRxJdGIITBi+WoYYH4TAE1Ey3Tdw==","signatures":[{"sig":"MEUCIHbwZrXT+A+7fHFEYtSbgeO81+FGnWeNp2srjBK1wiYfAiEAtq+zfuFjFah/mdtedBh4VoWKwH2btpVdpFQiyC6qX78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtyCRA9TVsSAnZWagAAV3MP/3nxByo2ddMW4KiiAmry\nVQAVMeHl67kULDv09/F9kqinP1zqf2LH3NRSpVrhhFa9ncSdqaIt2hghPEdR\nkxBjZqNVgegEVQXEJUdKwwLnkTgFgT9AlbT96v0+wykhd08PEZFMjcx+qlWS\nQ1cLGtFz42QvE9fkZNo21JZCCekzx22nrlAC4Qw0gNG3By5UmgD8Vwpqi/HA\ndIiKDHH4P7RY07UJ8D2Gu/RxAjACnQQDPE1MvfGoIo9mSI5eKtiLkfcvP2jn\nZctOuq4z4/siclZtsLAgyOGTAEE5YeSKvBLBkBdUlDR1ODXa/xeqbAUttRKl\nJi4ZcK/wKkyxa14F2cgCTJ3E3Ex/CBnkZIibWn1GJdEG032MhCGjJ9N0JuQB\ntVWsr7HEo9NTLPQ3KpORcEGAguJJMLxe3lmQOEmzN65IW4/vdmyyP+VjzNmH\njepr3tZl3psEQLmaJzH8cXoNrJ/0PMqBS4De5iAv0oFAl1z4l3/WZcrszzBF\nvId70NoOVMTyC19b1KtwYNIriK7AjjxNACSbnLefUn4vCFAi0dfuqJsEg4L7\n1m/7UmY/MypmEiXpmQTsCFmAEJZagtt1vD7+o2psa57HF0sgVo19VPxP+X3U\nFiHV0TC4vVupUOONygVmlIVWNCdLPjHpq0IfEvFrE2EvRuYnYAcMNSfSVP1X\nq2k6\r\n=ji1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/density":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/tab-scroller":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.f838c6e55.0_1587047282277_0.4727797641940952","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/tab-bar","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91c3350edfae05edd664b11da6445a0a118086a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.ce6cb7024.0.tgz","fileCount":37,"integrity":"sha512-NfhuebqBBKPFGsEKyGXmB7Fduq9ukxhsy+VTMMTeRQZvxkikDs5owo9SuhuK0D7MmXjUgxJ/GdQZ3b+IWWIV3A==","signatures":[{"sig":"MEUCIFvLE1ka9u2J0xHpsU61BLFjHXVfUVjb6vI/vxoC9aUfAiEAmvu5vqwO7kXh0mHnMokxpB+VOF2krIljt9Zfr8BEjDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPXCRA9TVsSAnZWagAA4ssQAIETaBL94paU9SsZrrL8\n/a4XOOrYXo2r84YbXzGLZ2QotpfCFtvZccjJsrOfi58YNaKEmPerecD+Npo5\ntkxdGHH08O8c/Q1uevvMvKvFDTrWh89x2gf4rJ9EGGyAxhYJO/umVklp2VB4\nkccl5T9otWNgBCM6pfEwDP4cNLE8iyusewiMNl521cXqnZzg/NuK/whe1Rqv\nE4tLUt/q2c2p7d6RIpeNBY06krVtM2f0tJk2rdv3OJSgxegwimolhYyITzDD\nmse+LQkyBOQ3+aPC/ZAABixCFQRHza1aPNa9lxqZdjRKfQDxirwutSJSKC/O\ntFdcdZWVGTEkIq4co6UM3nI/mDtctKarVNWJ4+IwPoi7JNnbX/utIaflZPZL\n/XzB1TH8rBliBwV//cOw5QHKSCgkdjqhMO7EMFRQveL1lTPg7H+/gCsvbHpB\nmgaVuvFY7iig/b2SAQ5LgkR9miQPeT2IdNcWPJ2Zl5sACc27PMJLd0H7f03X\nM1w3OWnmA/xN472aGxmU40pxt+Rm7LLi5uMC/HUtyq8YbTZnS9FiiV524fLt\nLfSr/auW39hXYcXVax2Mze0hz+c2G4gXQZxzlaLh/oQvrF+fbAp4Hx768nBf\nizcKMRMwZxhMGDbGLZYUr1xw7MzRkX8KOc9A7aSW3PigJ+GK7v6GIWPzodt9\nOuF5\r\n=FQ30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/density":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/tab-scroller":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.ce6cb7024.0_1587057622901_0.22348253726352962","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/tab-bar","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c33f3102e6058c49b609e60b1639742e06dfcc7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.0ab62a65b.0.tgz","fileCount":37,"integrity":"sha512-Cv1CMdVfyWuZq6PGs4nuZ8+fVyiBD8U8h/+7oP9wI6lTAU9wQ2t5CRzO+00CoUyw9PU40VU7ZxFhV21Qh73ljA==","signatures":[{"sig":"MEUCIFYra3Ok9xhT2b2atCnENZPfIS/6jEB/emLLU5r0bq3xAiEA4iYF+01RDCXNwndCWm8hIKlMFfBIL5An4cz2FgMJxq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKooCRA9TVsSAnZWagAAp+8P/jc7KwkFtbdfDWPgnH/E\nm9FGpWudiCpO7EXX4iwP9ukMFN0IKnYwX27APpVUNbUvPXdc+jPtlQXxhKob\nCMoYzsUrFqGio/maXXNCgsGnhyt/ro8NdHhBvhAiVUAbbJfCl8HunNXvkBFI\n2e7/QQmZScASBUof1t1fkNPw/WAyJlqqAJMTBD9joT4PxG0/HIBBHiocEVWP\nJZAvJBQcvihclr4NTiIOhAdxOK6sb76YU8MzgP98fjQ5tuIfXqQ8nwzH2LV/\nIN5wuH7k6lvzEdIlMoEiJWtK/AoLlPZYtTGmVt+iXzPTts2rsfE4L3AsiElr\n5gzVbVuqjVPViIyr75r6wSxGcDYJfoSyII2SO6FJ6GhDgnC2FTb0xSOrVMau\niQjWTIcGbUR3vyoVIeE3OEFF9NzL7zNJOFZKqjKiaOoR9a88cTJGS3OOg5Vu\nDt3pwej1g5JH0rFutT8ozZiVRiBJXpeJ2sn5oidvrSYEIzKpxK0E5CfQI7EM\nkrCnsDPtWWGGml50pXqjmG4Q4GyucDpZ1TxeefDQBdkGoCi/aF+lTD9x4A3E\nnlnD33kyZIAuegjhBMJya3R0aRyyCQ4AaSJFmmxZpDfizJOeixjSJBj+w5xe\nc7VNLx9PR5a6vBXEexTjMIsGkXJaUWqZo95mGG+vGTJk/4rXoXVwhL9ztxGS\nzz2c\r\n=HRbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/density":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/tab-scroller":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.0ab62a65b.0_1587063335597_0.6762252420501456","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/tab-bar","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0fb1fd5abd43e71b7437de2c0bfd9d0ce65c927","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.ca61b656f.0.tgz","fileCount":37,"integrity":"sha512-vGhvaGoMesemoVnqNTH5nkoH4tvdlxSx03jtwWLMORajb0u6HRHUPnxj1hO4Pkc3UEk1+lrzmwna6jEDpmpLEw==","signatures":[{"sig":"MEQCIBnbO16yPuAN3CedIGL0r5i3b/XYheYUUMoFu9VwL6ugAiA4IhYBbv5sTOkCLriVhfqW+hdyh/1Mj39pA7pY1fQ+kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLmPCRA9TVsSAnZWagAAilEP/jjaWTMGS4f0kcXXg9wo\nuTSMX1C1V5Yy68CVegcgV20Czbx5Mw2Dwv7Uv06xGIN4V8tdQUsq5LZYdntG\ncUUeMrgLKrA+zaO55mjx0kK8Z+d9DKkrEICQaO9q23cV5wnTJI3yhHjk3isW\nl8pIERmfnDR6P+q7wpv46NS1WEw8KD4VzZWB1F0zX9vscNhvmjLQnqMsj1Af\nuKvKZZ+nuZOPo8fUXHxb6OAZCa1EXvncAruZrgyy3gi+bgrbY7RmL2lWzoaz\npcAPoMc/FE3ouM1YoT+BScOZeiwwBeH+aWPJKJ5cLRBywZAZp6N5W6y12QC7\n9fiqBeLY/Kmp24i9Ii8OpB8mVX1H9CNVB3kqKKuVx/qY9RpZsyQKNbRuPxS+\n9LGAJKkiPq960ACJ6gFEc9j3W/2P+2A7N1SRJz5XdVXcT0LRuzr4Eq05KiCn\n+JMkmWRmOCknGKxibtLdvUSwMgMrtpU8kM/Lk4PFiuDiu66O/PvG9LC5B+K/\nqQVItBzHtS0CuXvYPlFwUfLDffouRAxE0ACtcmjSDmfDvy1zvvBSoAaSLFcq\neRnT4TxZTFlAdPM4ImbOahFBef8ptbLWT00rjwj2QdEU9ksu82glFPLAwbqe\ntQlXp5n0oSyceaUp6oII59eghFsITLmEP5o4aOCTxYs3e2Xjw56Qb5t5mVmt\nt6H/\r\n=Z+yU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/density":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/tab-scroller":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.ca61b656f.0_1587067279057_0.8244766692732559","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/tab-bar","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f0cb3340c05d8c4c8f13f61fe289d349003f6d4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.45a6615e3.0.tgz","fileCount":37,"integrity":"sha512-itNGwLNx77Xta4FXG2IHugKf55cll79aMr/DeHekhvxd5gVQ9HgwRsrStn3f2x/+XSg6D7GODg8RA+HnCDqBlA==","signatures":[{"sig":"MEQCIEjfAOH6oDvUTLE0vCVk7UfYnJbDkB9JAQb3QW45/Pr7AiBAROw+Czzho5dkLs8mutREDaGoEXBiBwgg4O0NnUfh3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemME6CRA9TVsSAnZWagAAEu0P/AzjunA8XXs4QiksjKyl\nEgWAb/SDxZDibW34vq7mEYQ074MkfB0dAkPrmy3XwU04MxtPUyBy5NHEPlkF\n8SLyMEi5BWaDgcuAxisT9/kgWRLJvdq5VKQCCI8JWRuSn+0+ZNrocDkCKQ5B\npLoDDYYaG0faNJLEK9nzFMt9ejAt0bBPPz+fFIylk8M0JXOEcQx91rfp/7p3\nbTGtWygYjF5ZdtVPU+P+czERspM0lVFga45XHOf29yWcBsuDURtxvnvr4ps6\nmMFXl7fe4V4DCGM3R8bn5nR9RTgkUHeu8goyEv5Zoq3jzpMDk5WELkFx/Ee7\ndhtWOHoGmAjtPcRykci4DRi3BNYOhO54+2VYhIxB59RDwVUhdtn+treVAig3\n42WZnKz4sp3Qy4SV8bd2lPVZbB6j4vSUJo0Wl+Xn88oZvEZvjsS9/hp5ciem\nC+bZB0wOdC4ezli0irpPVRQRBCXWiQP5NukKTytgPd2tND2e/znbuA+Fyg45\nODFi+nSSFC58bMBDIHdg2pNXAq13xSKgDUqR0mBrvQ0UIk2RyRIQKZc7ux3C\nKJA/u/Cpb/xH6tg++1PSsPnG8qMHLH226V8/DeIC3Ee22Q1wFGp6Qc3NBckX\n7p8evmzQm0P99lWKk8F++oAq0LBcYDbR2XdOaPK29MXgc9klYrKJS7GP+0Sw\n4oH+\r\n=u3TI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/density":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/tab-scroller":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.45a6615e3.0_1587069241721_0.6471417055972808","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/tab-bar","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0631268455a23d608c5c023288dc826a0cdaf523","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":37,"integrity":"sha512-pgOTWAd6aeGmt7ehHfCwlwEKjADIwElt7s4FvtYVB8l8c6gwlkkLOAqQ68MykNc5H+AWRXOPIAqx09bz8NS7OQ==","signatures":[{"sig":"MEQCIBUVQ3JJnmE17l17eU70luvm4DfJYBQHarj949C+NZdtAiABgE0R/2mzeMBLEr/bY8UZRiH45pv5HnC7U8zHCfrQxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeqECRA9TVsSAnZWagAAOWkQAISRni6IeO4ldpUcoVlt\nig3xHoAasmaP0AHT4VASh03IUYy8USdmDwFxRsvV4s/4NSsekRRPPPb14egm\nSQrPLO5qrUz8U89IOKYEpyHeJ9zzQsHlFQzhBweQ0BQSnTdrTocWtab693+Q\nxoe/9eTLghW69V8lAX9G0eP1teLGYFkkySD/DE+8OrB6QfrHvJjx2yjuu3ZB\nLhWPiOKxWFFyf5pPu7GerL95WiMAh883nYfRhiBGOGD3M3RTrjyL4VYG2nEG\nB80cfFxXUtALAbglGGJGI6KDhT4l8jTkC/zxGcELlfKZWEBi+zLCsjdKlY6Y\n3wYs8WanpIbpts4J7m8W1gJHGAxlcJtVws/nl+hBZIp5EWtEp0IGe1rWjT0e\n1vVTgXU8iqtAlnnyiJvUqubQ8xErspsgTz99wf+y4/HvYSvN9nZ0S0OL/JoE\nMb/jkuaZcwSPy2P0n/Bqm4wZ1+B9OTBAQRG2dgRdUG/VaQqT8ZITxkwhpbwF\nPvOZRqCp3/UV80oP+zyIiof7umqCO2XGmYZmFMV0+OJ1rhhm5nzzX+ljOk3H\nOQRpHusN2Zf0BH1eawrV2iMTaPZLvNaZDXZKtFT2Sd1ylcgjf5kLhVnNPGhn\nUV0Kl3AMKmGm5XPNv85ZdQgLX8cA7EWc0e+wktMd5Cjn6nphwMFpe70jK41T\nFhyB\r\n=Fxsi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/density":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/tab-scroller":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.4b04cdb0f.0_1587145347842_0.4903809964228758","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/tab-bar","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f5e71f771293aa7a1793517dd35f0f103b0eea3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.b273afa93.0.tgz","fileCount":37,"integrity":"sha512-buDz1EuoNGqQLjfHmHbVrBcFX8vj2P4iss/dutds3AIH9KjRIiouw61gyrGRW+Xd2ob7t/d3KL6XhLCFKCZoEA==","signatures":[{"sig":"MEUCIQCt85Ny1qHLSNW5BOQEa5ndshp1qAKdWyAFHzlz7eYpdgIgNW4mGNzFgX9qU3+pQLZAcEdsg84+dHue0KBzK/YTNFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXiCRA9TVsSAnZWagAAZwgP/idaUTpP3dutA+W2VlAK\nkUAxgvNDiAkN2NqyJmu1nKyud7aVFRr2aUBa7+s13wltmPk0+sYwCzo/yLJ5\nleozm9M5Es+FArQ7+3cEfzQgx4o1A0gS6VGI662mVPEMd2Nr19fswjTw1NAo\nFJqjueGGLfkX0mkMRdu0nlvuT+kg5PnF7qBvC2Mr8di4Dlm6AAl/T3EbCsB+\nN6WmoD9qHUJ6F6DtczwRhll6ot0/VvIy1oaAHdeHd7wAFVrccr1phPRKxStY\nX3zrdnfUV+rxOUpJRwcPM5H1sOegmIAic1xKa+7xjiQHl35fW7KyheJKECUB\nkKXmyyHGlkT63YyQ//hVsk8tBpUtwVB8qLNs+9u5ldd7tOUsk8KsxHpdPJ15\n9ajTV2bn4p17ZSEcTCzMuJSxlrWoW3V4GylVTqx0ocpOU2E7+dayp0ptlClu\npigl6Owb0Lt7i1Hv8BvqSTWmu2opKmqTdz/sWefFz1MIvjn7MuOMzdE/5AY+\n4epdEjIMsAoDyebMkHkgVjHNY0/V9etAVbcYGp5HXm/9XM/YukX+0nCBMvcy\nAocSCmethBNXwjaxIIS3VoO/9VSMd7lesgz754p/wI2AbzLix5ThM+UE6XMO\nIEuEik5sfALolXUmfSGXB3BSF0UbUT2yrcGghlPWGU8ItJPZ4CUrj03HDIjR\nKKYJ\r\n=i5pc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/density":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/tab-scroller":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.b273afa93.0_1587164641860_0.9567411076804551","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/tab-bar","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e00179e4c42172b421877df595ff587fceb2d78","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.b70bc601e.0.tgz","fileCount":37,"integrity":"sha512-RbPDU2NhEZEKJRTynlX/R3CwcrjrzG8DSiMD+NLbcSZ0N2iehVRe4zWXfNLuXQMQDy/RksxogiTil5qAKp8Z+Q==","signatures":[{"sig":"MEYCIQCZ7C4QE4H7nh36vaxEOEguhZ7P6+pGzLs7WfrWetEMuAIhAJpXdVHNNBwQWwU3YkR7rQ6UDced6Qk22d71K9MPwAwa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjpACRA9TVsSAnZWagAAvY8P/RZ1i8YkwREU4u4AD8Jp\n1fvkOW2N28VNnL+1Uq6lx/aeaVhCKLXLbVOsBR4q0mEwXiSLPfyD0hRStteN\n420rYpF3ETXx4bXZvyS9mQ77DMiDULmT/UJoxroCAdNECOAZj4u4stTbL3I7\nrHVWg1YGGo1XdIKXi0/8fjrAacxizx9VW6tlMe7YPZWhZO4dbXzZB33l6fld\nrzY0EBxPEgLjTZOHUg8BYb4iHKGKu66QTWPb12D/MBFKLalMiU2c+iIAeYrR\njlYiKPHT7u4/LdJ2nS+fCslFMGT3scWaznO+/5qcCzKtiQwnquO4eYPAZ30n\n7xQuecnjfNypMxjiBzHTtVH192hCOn3/omwDaSKnDs1HAjoHYi3igQCIf8rG\nxsg/HdxTaLD1daDlJrQ+FCkKFYCyH3YzbmuGz6IO8cfDWE62M1fkX72HTBV+\nNgDirGCuNcIaIAu/FBh2BLOY5palmjT31PWzcAIOMy/pH6stRJoetSG5igqM\nH9q9l7Tzi8gEpspqreQVBteGKFxg1BmGeowlIFyJbKTLrwvdJP9DONN+fJ7l\npBvrlx52emcHc39v3CJWzALX2ltchxJrBPPNP6RtcphFl1whbeuWizJckztk\ncSTf19DTZj3tQ+wj+T34FLptRYPdFbxbVaGwK1Rj43PI66JeOYtoYAtfdhol\nEf/S\r\n=ebqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/density":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/tab-scroller":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.b70bc601e.0_1587165759988_0.5505673844932744","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/tab-bar","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8843a826afae4f828e99c417daac152f55a39347","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.c4b4bba96.0.tgz","fileCount":37,"integrity":"sha512-qipTq56tJ9nBt8Y0NhueYMVqCpJWVN9Yoe4CuaW6ix+MiLDAsBIIh7W5dlYQ0/o6eSJULJTBgvhKTU2bxEr+aA==","signatures":[{"sig":"MEUCIC67I/PnT2qWQRefyME6B8+eMn437czNwBg+m3p/Yk0gAiEA3SDjlwCobAyZD0D5VJvS2FqNkRCIkRgsObNvmlz5GIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkd3CRA9TVsSAnZWagAAXowP+wefrork2CsQcMhoCitg\nPHEW1HwRshZKTEthv6y6YiQS+DKxrPbZmJFiSVuXrk8H1V+3EWej477EX7Bg\nyRxwxKyi1W2r8Me1uYPA7vvBQAuSmEXmu38nRYp2DOVaP2hYcP+v3gAEHalX\nBI+EsBsxQ1HIZDIJVl0o4jLtZGr8qFX7F6GfBjR4pMgbLIl4pSoQKxsWTkix\nEK0bL3KH17YzB7d7K4Tna0JvJ+pY5AVXsXFo6AmhdEx6Ei1M1vL+mP9OeSm7\nexnOJjXWEzLg6Sbwd/BjIauh80cFxeGeMhe25fet2dT7rqyo2AkjFCiywUo+\nyn8iPqzsZxSP+sHQNiik5/DhiYzyZHCaMM+EZ1uBw9np/EpkqoGOFLa8PWDU\nc+ei21WSJMxHpt4o8mnmbTrMlpILiHabBnRbYpb+BzCGMn/BnoJOnrrJOXQM\ns2RLNFoN2DFAye4IZktm3nzeFdmI0bTV5k1BG7s3sCfq+MRH909BIE2N3hWY\nLCy7BfMYDfXXq5FbVJ0AkSZIokHcqLcyn+vxTIHY7N4dBY/ZcqKiAyUjR9K5\nP4NhI3eIWnzqcYvYn6EnZSxsTQeBtWlua/UYpNTJ+vRgYCo0yFQate4nSg7n\nmGZRaqzG0hZojRDi/rHkNgYNhbyPtSBn3nfdfj+1Vwn3VIU6DLMvnTV69+Ho\nsfal\r\n=T3v4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/density":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/tab-scroller":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.c4b4bba96.0_1587169143296_0.8699999357051955","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/tab-bar","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1abd23e7f32d74c1a6a96d5871e9a74a7442ebf4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.6c1ebc721.0.tgz","fileCount":37,"integrity":"sha512-m7JLwKH6Wsrz6avO6TWsYSoQ1gTDg8mQ2ny4PWCXMgpqiW1CfAyIEgu4LYubFIge5Z95Klq7rG5+9gZZGh4MMg==","signatures":[{"sig":"MEUCIBKdZ3cXFXy6GnfJiVkcXJ8ggR19Q6BLpgiJvXtHZv2KAiEApYZz1rt0Wj/LsugMKvcLWl/tPm0ua+7L2p0e+PMEuz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8pCRA9TVsSAnZWagAAFBUQAJJ68HFLdGmYzmQp/vYi\n+XeaD6rW+BHO34NnXPZR+UjVz9EzEQB/me48DcF40hOHfsxUBqaSxlEytSMj\nvZoNTgLtTUPXtv548geYLROqlSyZQ9pm6F16V3+6kiRIdjGWS8MeE0UGFHVT\nnkvGtjpZZn10O9IB7jx/DSh7bL15VcnTtnCD5IC7juYTFehX6h3Z9kdnsfvG\nkD56YDQAqtrVjnPhmoMkkcRXzYeYZ41J/h4pHu9WHU3JZWQM0laSf7sVYYdV\n6DAq/Ro44iyV0fj0psOf3lW7VTT1Na6diKhjGuhb/xBFIMD7TkVkeu1sjxOI\nHVbGZpA8Uwd8y5yN4Ss85w7Yo1iYRAB4caSHb0YGli9WeG72UopB/B9SJP6a\nRCECcTRgeg57l8o83oRWSIuuerRI3tmO8TXImFAfdjfL4SQLQwpLMUPEHMoI\nUsDESA6tqdS95hFE6ayUw7dCNEPbA01I4GK2M/pjdN3GjNCUFu3Gwon//kBd\nERAAm0Q2+Bf3vP6a+8yOatsXOsrb0p+oESpKjhm667poDMNS0bKgjw1J4Db0\nmu7fWRB9lCSQJy31EUbOVOieXluu7/6v/IqVPkOISEdmjTQEj+BgaRspVz06\nbk4AlvBVN4+fGOWE1o/qEJWn+msih2nyB9Pk9F6z94Y6qZ0wYUSi74ur9dYR\nKyxE\r\n=RHpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/density":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/tab-scroller":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.6c1ebc721.0_1587412777405_0.9930370629568566","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/tab-bar","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461070879e475096163fd9b4b59ed79e670f37a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.9cff4318f.0.tgz","fileCount":37,"integrity":"sha512-+mMDseuvx0QHA5Jt4X2+ypGZvmu7Bywsa2ndJCgi7X+WKLMFYdywFGW4jp9rDXIZeGLCJ/wpnYLRq7+MfYG8Rg==","signatures":[{"sig":"MEYCIQC8v9/cyfHN1dSRjGAsdzMfFXdd35NpUpeX3vMweS5Y0wIhALgwI20rG1iK7EaGc6cRGSLzNj7zGvOgs4HUY8mXedbP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengyoCRA9TVsSAnZWagAAduQP/0+NoEd1GLqw1GtyTEsc\nHwHMc/hj6fRluxZ4CS4/8WmwcRpY9eYm0ufzxJGTY+ikaGSvYXj4DNCTCEac\nFP9SuWlrKWknMIU7xbXsysoJXpjR2fDSkWUBdRyXjik/J/KlKTmgTaptDphJ\ncn2px+US4pxIe8cnjpNmy1WBT2RUCY0w2thPW+L5PR+OU8nDExzod3QnPXUN\nZePPzVT2ktYVBaOOJcat++/wN1oO51l0OAa0gUkSW/xid4fPNZJ6oUmr7Tj2\nCm+9kbXqJLniq4BS7taJ2SZip5pYk/g50PoxRcW2XFkB1GdF5yNg9Jkor+rW\nTc9yTrb3Y5ZscWXpTQDjYJWLwgVwQDaarXzAkTiupedjrqSUm++tuTHpaeSV\nALSEOcLPa9EDh79fqcVMIW77A+OHIKbkCrJktiRFIjv0Q+oFKeWTbUmZduhy\nFy+MwnTJFKBFA/aNnbvuN3Q7pCGJ4DsC+aKyy3+N0XOUqmUJzIQR0iP7DGRE\nqcYriqPm2FdCgd1ssahe35mMBjZZTCJOVoLuIIhNwjp+1V9Awm1p7ER+0/Jk\nvx/R1ZFwsf80ItNR4h9mnUoKSGtXBfvHJKGE8M0ew5KMxW0EbfbX2Pa7udg7\nya/vwn2tmo0ZBmGgKn1vyG2a9u3ZvGCXL9MxAy5fWisMsQM3erlj6f5eyaEj\nOd2N\r\n=dr33\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/density":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/tab-scroller":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.9cff4318f.0_1587416231682_0.07047203845360817","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/tab-bar","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c48ab6c80faa27c5b9328918f18cd78d0bae553","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.7b4482402.0.tgz","fileCount":37,"integrity":"sha512-7s0Qh/QIP4YBt7/BuuyxzMEexdIG94o3pDIBczZw6t3xQylIVKmbiQWGcAaKoVzBbFAI8xI073fO0HZvTAIwdA==","signatures":[{"sig":"MEQCIBsb/Qo6Qc3spJyguZINQT/wtsS9pZXGCQt+DWv1SFs1AiAElVILCq0/4FfBi2Aib8iGgHTXWRWbf2s61xIAy1rdqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBnCRA9TVsSAnZWagAAJRsP/Ajqq/5cEDk2ZthigA2x\ntVjgyHdmMZJU2hc4LadLC9ycpE8/bkzQDzAFZs8aQGQpjP6MQiTI497jycHu\nm/s/fOfEajqf6hSFe1H8bRKZSqZEER7IYHLEdCNniermswWB0kS06HqnQv/A\nqZSfHVbHlX84gcUmFi/zxcne6fJwOsvQJxu2UaBQW7MPMWNPnM2gH0yEDBKa\nkWX/cZk9FGr02Ixadejh7hHT/MvS9Y2ftaVpVGkEEB4zQeoPgAeMHPVwb2dP\nxhumZIWUPF3P2W4nLk8E6kokuU1QT/E5amIyKhsz2PTn6/abVfostngnD38w\nk6AX+0al8lEvqJqZXJ2DJNWP6WKp1+T4zG7Nrqt7Xo4GVyuB0mBSiEMe9leM\nysNL9OK77mdjtwpZoRi39fvUj0qx7qPiumTAdU8Eft5MpTbBrO2Rri+8ymAQ\n+vN/bXCNUWMMagZSl+5DfGEtdFEf5Rytkvq7GL1x/HXFuPiS5YzhwxgWfLbl\n+Cdvt5cZdiDMcgG/46Y6seMqhArO1GSX6Yia0xMCfCLLoJyC9NYYljvEnNaT\n9xcPi4LTghlt9MNUHc6tUgRNJWC1K9rXK5S4Ybqzbp7xwhkpWH+XhH2wLRUn\nTCj4uJfnJXa2MexOlBm9tEwHLR90DrAegFci99FtkVXV51p9c1jSDAErGkQE\n9mXt\r\n=eS7F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/density":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/tab-scroller":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.7b4482402.0_1587421287481_0.2564423926032151","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/tab-bar","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"657604cfd59f5c04700db013091b8e91525121b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.deda86d8c.0.tgz","fileCount":37,"integrity":"sha512-yZvaTDINoPn7HfV84Pr+LV6rHbODQU6Et5CaYwZeh9QCiE+LqPLC+uR1d+MLQwkN8gn2HI782HPu9YnN3jlk4g==","signatures":[{"sig":"MEYCIQCFR1geCWzcE0BMgxzTbgINOgSl/TtAamEveS9oW0dgOwIhAP1fPsA+UBIMZwSKHsGvoDh8yG4zpJkgQ7ktOG62mzzp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklbCRA9TVsSAnZWagAAAwsP+wTNSr/wRTppiH50kvV6\nh2mlEV7MFOpxPXl20qA3ZaQ8F0USmJ2Z8Zk2k3DTIyXqHpeaVLGsC9LLbybu\nV3/UaFlmb1vU4UB1fXWpN66AMN5F2xPdsv855OYpvR8Iiyeql+z3vvNBol4E\nWB+aF7dRwleHmtZnJuIy37TUGw50hGLRV2+URie5m9Fn0R8o/P6KJnLCB+qY\nYfqD+fnxUlZSzhZaKFlZaGj7ttGtRUszn7jqzglLgjGA/QIUvBykitPT5iGs\n6XNyu7ZETlH7mXUjnjFlakTdTKkPK3HvuyNhHIwAtIZ1IsrJBfNL2Rzj5LBK\nSr3YJ3ivDjZpEAziUDp6odhZA/aS3hbMBr54MvZLo+UyxHM2vissYysyaRAW\njCZLcLDeXk7q3Y736ugPD2vgGDpN13Yg8L0BB0n75g0bLQpslNl+mmx015BV\naJe1QHZLHRkJxxD6N9C1XKeSbrGgcRObh2eh65Hkkygw02e67opoiG+yV6Zy\nzNXmSurb8gRmasX09jqroXpqNuJRuRyeTyng6pcMlUNBYdCrnVlyZrKQWYEM\niS/VoyacGHNKR1Pdk+NDJPNyDFszu5hLlGkUyarN8T8hsmrFAItZZxVFqjfX\ngXnyT2rlpINxGxtYW/FJpbkRNFWSy5jk4TZsquytJm2bo+k8fPzGar6SdzI0\nDtbG\r\n=npUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/density":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/tab-scroller":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.deda86d8c.0_1587431770852_0.6174215664581091","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/tab-bar","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68c03ceaef7644b89e48914df23101158cc4948","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.d10412cb2.0.tgz","fileCount":37,"integrity":"sha512-wr4M0phYZ+ibL70LOdnB805lxim3m36iw/aAcbZLqnTN6fUsVSyrTmxX5uCrcvPBDCxICg6uIM/SwwQmxmZYfw==","signatures":[{"sig":"MEYCIQDerl4QRcTY/L/08RJ/p474NgC4VjV4rmkqlA594hCrFQIhAJANGh8IHdoGTA36IgU8fXLI4sgzVG2j5zFVYz5lf9GK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzlGCRA9TVsSAnZWagAAqccQAJ8GJVqdSiC6FJ4wE/PA\n9iszPstwehIon/54TY/TtmXTcorZv2lNBb2dKvBCiLKrXiZFUr30Jf0MelJj\n6/N5xh868G4wLbluNWjqoC0Uj+GEsiD2aKqbh24fdB0bxdkf3XmNFdt/Xj+Y\ngfBJGkgn4poMl50WYdnotjgPsobIHz0AGMCS/VFq5TlORhfTqrx68mYfeIQ6\ngVIifIRKpSamAW4NcXZZ9jhzPMGxS1d0fvXT2/Ra/msnnZHUJuBtLSQ4FiMK\nAPqeyOC/9nXWRVb2Pus2FuJo7mn+2ICNS8S2Nv+jgo5qk/vUmuh7pl7u/1do\nwjSoY//QRVQiFyHjDzgkvAoYEGcR9QbKB/O+avsYglkrxWiXdZTCzzi36CLK\nRirsX/wCGo4/vSCrxUhMKx3apE3HyawYhjaau0vwrozaZlevXRPfdNqV1kcd\nbsFBWLaoNKuAv25hAXCrrlqPmoQtcirqME2Hj63amI8FVUkh8e12hdZ/tYeJ\nvEiZuCP24aWYQlRaz70W2nFVXS5onvb1ekNCIfuPMkvXXqPWYp4XfQ2DlzsU\njxMSavBW4e8rylIvZ3G8ABZ2m9Xszc+FbTrj1B1Fie7xXeY1iOoc6dqlYhb5\n58ic7iPVZg9ZaZKbsoN3jGeP0WKtAA0UUusRovZ0bxZiLwW10w1MnCPLDfGS\nJjXC\r\n=gKq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/density":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/tab-scroller":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.d10412cb2.0_1587493189920_0.7731196731132286","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/tab-bar","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7b562197374372db399416a7b1891565f99214a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.c141801d5.0.tgz","fileCount":37,"integrity":"sha512-OhAh47/n8uIIOcTBsWehlCDVCf0Wbu1Rp1xlvO6sNGOoYU8YYIzCk4hIx2/lsABVgQmXLwFZd5w2QDkgdYcWqA==","signatures":[{"sig":"MEQCIBijsyjvjfQ/T80RqaWbg29VjDdNQ9nM0VMew1w75XooAiBxqwXKFnd8T6QNCLZCXByKJN/gcuhg8xPtx+vpL4RcOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zfCRA9TVsSAnZWagAA8Z4P/iWyLFtjwIUat/mI28jZ\nIdECy76he4qrJVP8H86jlt6FzjM8ca2AhDqC6lOQjZU9JffBPF+VNWVd4KR1\nwIergkooK0vxBXC0OTo087RN1obhCctC6YaRKr0LSoG2GPKIjgOYaboafLku\nKMm5rgP/T/MKMGJ9bJhBFGGtzhhA01BGRlVPURDp1mOx/gBxhbsJE40io/Tq\n7eD+4XRBMBrd621uHINJhfzzou06JTo5jGrogWP89aZoXuyYFNtkWba+PdMV\nK7jU9hJ9GIAdEzeOsKnbfwI28NSG3keGjJm53KRANODwIWVS2mYe/vEa8nd4\nfP2rAw0ZY60QJ1m6QddP85eo0vNxw9OHjjoJ3qck0n5GBo19ItjC4ohl5u46\nU7bq5FjT4DFIldr4qgh5SdGjOpojJzlyr7Ywp+hGXRduWfO2oRFLl0yc6Qgu\niIeB/476onTn8CbKkTmUOVQ9rDF+bw8lAurMQXPMhsMVk5g7oaldpQktDRXL\n9hSuJ+1BkLJ5igOHqTONQl5f8Ka8rZKxBfmUYXlqXU6nWl9Ff6veLuBbyS/V\nSU0rZICJDGzjWVBU8fSZTuLPF+joMxDHmUfZZYwD4z+w2MK4N6JWMMo4pct1\nHS3068dtk+HzLGhy2vZDyMWSIWBPhyn5oy4oyGDI4RukvBGW8gJWeZ9g3xer\ndUhO\r\n=W2Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/density":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/tab-scroller":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.c141801d5.0_1587498206874_0.22535349042578456","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/tab-bar","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25c2b86059808794f77473371ba6f1872c86b1a5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0-canary.28d10a96e.0.tgz","fileCount":37,"integrity":"sha512-WHVAK1svzqOwBrlVmzJrY28/ehdgBKNxOLLhuerGWdKy30Gv00uZH4NzyxgKTPThAlC6YoDJn0OtZqUzNcijzA==","signatures":[{"sig":"MEQCIArln5Zzay9y42/9Dq5pbTnZLrRdu/zIT7+7Zx2X2o21AiANN4FaVRbeXk/5/pWHWrp+46A6I406/SbbtzYoT+kiNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBfCRA9TVsSAnZWagAAD0kP+wcCxKhqKEfVsXfS4Eey\nCf8Y11eLYU94kgV+P9NfaToxnmJT5ASWEEiN131FQFcNh4cTEBjcZhi0RraY\nWX35DWJznbCjYDwnpaC107CIq/Otq/Ro7r1lgj2g9QoqicWYeaRhOu6LFOE8\nH4NwLmbk0+jmRqs5e1Yg8IcjaA/z1Bj6Fl8ARe666Gi6ywU/mWZU9i7vpIDf\nqgCM8YqPoGQGmw3CGHQjXuiv1jTnuXutqWJd3AU7uDTah0aCUXLqo+BOr5JI\n8+wayl07JVyEHNq0OkyAhsBYiRJJl3xZAxadvpDBPJeCbeXPiS2VlDwuS39M\ns67ROHxqaFsB59S7CySVsM3We6CXTBsRdDYg8UBWcjIo2krI+M3kQfO6u9PB\nGVcEf+3VAIZKc3NwXgaftwzlr4k+vzwji+S3mkV/hQHdDhAJZxzN6dbzV6jV\ns5rwHN9JMiEFlGS/BpP5IwQUmg2sE9pa8IQpPWaCy/wILB5s5NrZE59/Ubi6\nyKXVa42QOMwd5bY7jkzIcTT8DGWlkMA859439LK/kni7/m+2g/khO0C0fhkr\nrdtN6R982Ozvx3gIdZPANRFRELBfTopG5i5nVh+2SFkKCtID894zQQK7YuZZ\nPhvMScfLjywWsNjYYmM8kvtPgdKu5mm7cBoCcJVg0Ey9g1jI18FsTqpURVWF\nsvzG\r\n=71bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/density":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/tab-scroller":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0-canary.28d10a96e.0_1587593311214_0.928715861273189","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc81f0820b3bb0872e23396d2d067b611684ea69","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8540808be.0.tgz","fileCount":37,"integrity":"sha512-f6TAnyq5l0lMQITVi4IJHF5iU3nfI1gvAbgKkQ7V16SoJ6VThVeiLpU7U8nmoZTB3WgcWr52qP3UqgCKk+hR2w==","signatures":[{"sig":"MEUCID2ZX5pHPWQ18xnbAArUIyM9rhc5loNAcJqNKu0rt7ZAAiEAjGUhGfBP1t2irsBREP8z7+9/3uok01gJDNtGOpEDlaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/9CRA9TVsSAnZWagAAEIEP/RaFNrWuGFqCyIt1Kfmh\nDaSTvxgVuePdf5MW8jCf8pPmC4FiwowH200tmovLx2xtghE9Jr7uSCSK4Tvt\ntT8EzJAPhDrdQDAhXAndn03KJVSFiK4hqT25R/Hu0tYcUd3/iIGowITwIeKY\n8Xe8HV0thLpCCsipXxVUBgLMJ3M11Pz9KBk7oZ2BapLmOTAB2I4peA4Cdsz7\ni2aKyHISgAsGYNBpqFjOCvlB3qIu1OmyI8aWdKy5lPWMLZEaQA7gqutzjMqt\nLm7BZLHQphg9z5K+qKCJ6wlZynXoDwJr5JTXhSCg1Nl8ss5XpxrJbFf0hMMn\nmqgKa7MII5zDbtlDXMKWC31tIVSag11z7GCVLxDFzhnwKiRPrHuNE/SPoVeX\nxJhngtuF26nYycaUydxi7r5n3ravUMpc3TFq2+JU8YRBYcHQqk6T9mlISqaP\nLdQheC35R4/YroJlnUYrL33oHUmHWbv6O/+wnJHFKhD49qUH3pU9AalNxbB7\nvinYTPLeyIjl/mU0rQGQWIBfHRm5aF5syRPvq12mp8OlTwKuLf4tIxN7PpiR\n+ZItj+rOJQtZJcKLYGzrOlhN7wDPGyDTM/zxqVZOa2pulLIfrn8GmH+DI9/1\nqB+KiOgbI5GoZJ9mncatzqYtUxQh+MB8fgtuu7xSbW4MW9aDLxznFMIP4jtd\n1nbN\r\n=4I06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/density":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/tab-scroller":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8540808be.0_1587662845397_0.3672086353464008","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/tab-bar","version":"6.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb477191e61dbfa9765fed910b5685d012907c4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-6.0.0.tgz","fileCount":36,"integrity":"sha512-Au+vTT92E/nuUb7DIAqQwdpLixy0VWJM1PlV5Zqw1nqAz5Gj8toZWKpThlZ1GjJpgftS0glr1KpxMLLXiaDnRw==","signatures":[{"sig":"MEQCICAL0AYtsLgHf7vxv5m0Vg6WlTeYa91SPzlasZktv/O6AiBmXjFBGnRGlQTiDUz9ObeVrczrhoQ7iMZqdqI+2ZbMMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodAjCRA9TVsSAnZWagAANk4P/2WAFL9x5hk6fMkf6CWk\nHWsup7NnZIWkh8cDwSmKFyjm7HNgYg5cHRQcPVFeIWZWpWZYkVHaLPXN8Hr9\npLYzvq5ONM4td68bbJKlgbc2mHbsTRiyOKHDukuKARZqioj+nOTKbzz2WguL\nO57nJd+VwAo5PcdsCgMqSg521RQILUUieETl1zeHhqi+/c2AOBJoyCVKAWB9\n0c7aphArJ2RdviqR1skXkwNBlyBrCt9LzyIIHh73UwYK7VmfZ4KoiBzeOvKf\nk9b/FYLl+zqlGIhkwhG1suwOlQDl6iW4ERPov4DQCwDNMog6MfV9XBvaFu69\nEzxvD8jDiuqegSJL4ksOZtNLeAmb5ovRob/PrapKuuFpV+uyG5agKOYqPeqi\nEahqqoRPq4FJcajKzcnF2XwmA0fXSt0Cw21ZMhLT7GL3jih9nPdQY931ssUb\nCxJHTZzRv6cjhqf0meWXf7ABTKtN6s8JF4x8l+6CwoHfyZLhdmZ1pR3zAnPL\nSlIG6NtQ7IRdtPSvy2knQ2X+AIyLE0xT2a4FcGjqep+a9d8azGNXW1Itmwwz\nTlj4EpXuIna+EGKHkLaOI7tP6rX8LHwu4JCFPj7vLXRxgu40eLz/LqW0co2I\n8g2Bhul9/iAQ8upXeB9Z5snxfqETx2WPVxqBCP1XeYky+eOB4GP5l+9wZ8Lr\naftp\r\n=a3ut\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"^6.0.0","@material/base":"^6.0.0","@material/density":"^6.0.0","@material/animation":"^6.0.0","@material/tab-scroller":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_6.0.0_1587662882928_0.584062860066134","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2770a8bf6977092236b7b39e934a7121fca1b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2673adb74.0.tgz","fileCount":37,"integrity":"sha512-e3JOaLYIby8AEdqVW+GZIQSt1hRMkblzUI6/Wmqcb3FPwS1jXS9qgIQbLbGm7rliV4H5+WG0z7izoo8Y5htErg==","signatures":[{"sig":"MEUCIQDNAAKFTshGsjhd+0hK3nCJI3FDRn8gUzvAXfYmJwfnOQIgDHXu1mqMXkWq9OV3D7Bno+G8n4XJV0b71FGfdOU9B0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrdCRA9TVsSAnZWagAANrAP+gP/tdrZLKOks/56PTYZ\nfSLlqhDyTWu4Xj9Gs0NRICv4nB1XGV2zXD8ils5QjjsRbVetyVuqgO9AuGpJ\n1ZLW4XVUkpFxM7Dw8tscf92GcT0Slexm9tkiZOYCdF1eBbsrR2onGjWNwNb6\n8EZdko2ElC1cIL24NgEcETNG3c4ZFqDuOEgTZcpYNTuZGOONC9yESJ/3wrED\nLkWrusXn4M+n108pSuRxD4v3UpyHI/6OnBifAaBm4sSSVxFInnp8v/0LFjXQ\nhRHhcYg9kvkxmvneNPuZrudafWxPr6JhfmDIdRznYnF7yD84/X3Pbdyl4mMF\nSBGf7AbGbevFAATKCv7T2SQiXdfO050xoF7Pdq20PDxB+dbCYJU9nBIOkv+Y\nCfoUAiUG9JoDHID78terBWjjK3QvSA1SYGveUJ8WkvkZLRcQq+UHb2jizFVc\nKew+XF9yt9NRY+fy6E/BucwjoefTC/XKdhvWQ+2vJ/g9xLiU/6igF3N5vFoO\nXqe6zRRRwN5WrZQ0K6tEpgKrbeFh5ymLObGDu6Kn5t6zWuf9J+UHWzYOz2hp\ntLfY1bbw3Ie8xx+n3RWsoFxxF26srhVUEo3IvoW5FWhsjBIXs/kcKslzzRg+\nkg8sBuWVFEecWAdCjTmaV2JoLRpOK6cbYNujlbIbD2qolTlS6z5YduyIasnx\nDCWb\r\n=QTEf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/density":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/tab-scroller":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2673adb74.0_1587682012859_0.4794731975631048","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8dc430e512db686fd5f44a341fbebda915d2fb9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":37,"integrity":"sha512-T80czm/ZAd+8VuWOOjikQkbhl7T+5Fo3EV+8kjSPSZ9Al22AIqEHKUDT7xu+H4fZ3FRw6p8QaxxmxQNBdYb2vg==","signatures":[{"sig":"MEUCIBmR10Ayy4EWDoa1Z7RoOx2Xiiuv+Y3Y9yhqJPHPtxgKAiEArWKj0jKR5GrBDUYNUnujFUpfc0ciYgof8shgYrARz/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojE7CRA9TVsSAnZWagAALYMP/0j3NeBAP5wqAagbVuex\nOQsBPKvu69eHH0nIx+3RTtVg/iQlPsbkfj9JI07iesSARtHjEdRMrywndy8z\nLEehW6TgNek/TQ2x2WAy+LFY52qMBT0Q2z5CdnrgJ1oX1TvuTLN1kHiM0fDs\ni7zlrSLngdtxLf/ay6q3+YFGQloDBWDvIQ1NRmUrEMuD4pMplS/PU3yCE92q\nHpg+3jgVG8p+L+eStLAVqUXggS0GpbQ5lQjLnLekjgf6krTPqUQknYruT4b/\nrzi55jX2+2+otBOvG76vYfVgodROCJpziPNZ0B9V1g5ky7qpbjIqp3LQ+8YF\nZx1Z5ecqVmpJHeSPCHo/ixhilD3qu1Zv6RU0Jaes3XIhR57q+1IjiSwYQPvc\n2CE1GZeDRrNSb8Kvf/SMNLRCcPv84xn7ZTllFwwrwA89305/IvUrpftxk2C7\nQcF/GcC5yEP8mV4RBMOa6/mF9xUxNj+JDfah9xg1prfRQvgeUVQozkddkYUt\noEu2kyFStF6ShpjgiGBw0rB91eF75bTx/YBWVhqEpPx5rh7QzV73UWh+kquD\njgVpT5b+XigsAlMcDuzHFp+eLFpZpLj41n0FrFvg4vYZ9UVnOI/M6WaOpmlr\neUwptcDkWCxBYK+fNBPMHyILi+NrRnm8vgo19fk6oFom52FbScdrdOoG+Jq9\n0OVE\r\n=OZmS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/density":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/tab-scroller":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b10d0d7f1.0_1587687738695_0.8419836813462118","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/tab-bar","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56a6e436b85309f434af37eb89c1471d73255de9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":37,"integrity":"sha512-D1fMWIvDPEsGbEoEsHwBJPHSJibfbDhimYY2KYhVwWhu60WydfnUKXOL6qqbkNPvNLnSwu5+B7w1OhvusFh19w==","signatures":[{"sig":"MEUCIAksJaa6PidBO05hZmEuieYTghqh3Btr6OCYnOJBfzfgAiEAz2t2tEOIf8Tb7bqiiE7CuFTz0+rLLj6iQB2KDX8jK0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1UACRA9TVsSAnZWagAA1/0P/ia2K95CimXkh2Z5w6I7\naWG9XVTknQAiBVWU52ti/AqmeLpschbfIRMlOj4SGpHdUIHFC52bZtdSbnPd\nhTQbbrgCmR79bAp9Jb8/o1B8Y9XVFkvjSmKv9eYRPmaakgXqcmCywXfRx0bj\nMJtJKhcj27sYqhf8iSJoGufjgNY6hfoJcEDuizf6jbVmebKE5sBo9nupH9Xe\nSP5Rf43QkWCKEbmogH9YhHqR4nDSxAqZxMg3BAcyLonoOM4OtXoGqupWSPvJ\nJ8XtyCkJPnKen01lgHx4CD6nREEHuM1qGh9eZZzzO7zuyl/Oy5FxtV3Av2eb\nT8m2eBMGxasE3U9+5LrAO63e8tx5Z7yn7k6nbkWvrBERmSKXvkS2cIgWYcIf\nUPuvbwES0XTa4sYjojjrbv3CCFAuA18YCz2yR1uoO05b4g0+EMJ6Ey16ocW6\nqHKkmLBdCwl43FagaSF2zlMiD0RzE67/z/7oWS01Jh1D5dny0A97os32231b\necILAdcUEgQnXiPVDgiyVYm/7wAH4ZzR28Glv8761aR1XGMKeM82a3RsCmPb\ntW+G/ntHOea4HH5hBsLnoV9nsKja4KLAKcYySJLQft95mKn635WOqw1nR9mp\nnOPnFAeNVqBHbd9y1XC3fC6mxi95NvkplO80O/4dHkMQBbzmTAGu+HhGRvPf\nUfjU\r\n=yiiY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/density":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/tab-scroller":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.3bd8c1bac.0_1587762431757_0.7106013629872519","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f558a49fb3bb3186e95ef8cb1bfdf2f8f211302","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b83c8dc22.0.tgz","fileCount":37,"integrity":"sha512-zsi2KecvO9zG4dQ+08FoQ/jbF8qMUo9yPNDEQRZtwxwAPxcsEb7Yq+VeP80mpf6q1kzW4zvhiPykSg5gBrzvzA==","signatures":[{"sig":"MEYCIQDOFwgrrLaBJIvXV3qEja/hW6+v8RAYS7abGUv4SIcSdwIhAIGEpEyPMFmwdUNbo1DL0/yY5oxr4Cdy4z3rKqysL+UG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1f9CRA9TVsSAnZWagAARyAQAI4gTSIjgFkaX7ZbtmVx\nvCqPt0xflYjOp00pXwDvMov3E5QOpzBrsTVPPpndAqmzAhsoxntwWGh0jsmf\nA2/itn5yYM4IpLy9A6n0w0p6CcXkdjlYbCsad/Du29WsEo0gyL2YzFA+bh2X\nNXnjhKsPPLZcv1i93vwZbeejWHYWL9BEIS0YtG731iEkpMa3wFWavLl3rECN\nLWzNpE/KiNp+F/HpHFlYnHB3kp5yl5WT6MUblCqtspp6E/SlCpDUymJpBywN\nWtzNwcXgNVKe8vK6idPDJWyfLyHeO5ywPDgFCPFG/1UUKNZ+waIBsmIjHISU\ngStik8ssrKfjBN0QBgy9t15LSJ+TjslNol+JUHOcWoCmEm1yO5XvBv49fpcd\nrpwaWIKz8xuXmIJ55TwJmIRgw2IXIaGEfmf6P2/3R7UTPyG+POty5HwOTP6W\n1IgxNdph2Rsayoh6xCP3zAckz2mv0paLjhJp0uNUTkdZNzPBwSUQKWnq5Azg\n3BUVDcHZONaESvDSHnayYWK+z3mK61NUyLduVY2BiBeLBsVSrzf3Zhde82zC\nz/P+4Bl9rERdiw2iEit7DHfll4os7V266ohQUhGSpiWgcqabydOSxjWlW7nt\nZUzjV2xW8dpRohLiy+ElsT36/c+53MMOzCKmGPYM1W+xsOxe3KL0CQU8IUj8\nGRta\r\n=v0Ds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/density":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/tab-scroller":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b83c8dc22.0_1587763196796_0.539092735823788","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d089901282aa655a398ff1ab1ee2e3813945de9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.1b3dd846d.0.tgz","fileCount":37,"integrity":"sha512-lGriCFbdRsrU86lJF0DajCNY1F7bDw4X678H2hxGL18/YiXbVIpF4/rQigVpNhmWnF9uu92NCG1uy6g9vsRcnw==","signatures":[{"sig":"MEUCIQDiGho8lWPYVP/eNsXwWJiWFheIgzaXUuTp4EhpYtTr2AIgFmWeBaWJp7T777GLy597UEWN9Ve0ATZnR34eSJ0FXdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4gMCRA9TVsSAnZWagAAog0P/1wfnrFUxKfPU4S03Fc5\nXX3+KK9YlgJ+sskO8ZcAMB6xA0gLQWRbnacRq10UUUKkLKRPT0MPik/l58t6\nUdCNObe2VODXGAUDZ8M3u4na4j+PDCOD815HIqH6jNdc7h9bZQLemuTMdzr8\nrA5cGVKsunljQn7D+c1J+v9hbXgi9vmkG/B/WDx3Vk3O+dzwgdftPX5hXxTE\nF8gSsyKbw8Sw+LTBvZimy63qbDbjy2WU/BOlaKMhcMKpA3i+8jqMBjrdNzdP\n9ZvnSvfcfUb3GiGq6oXhnbPhCzT8KWHR9YqEjH+GLl0CsHHEr8+bngtevocu\nxraXty5S56SCBMerknwQs8FKwomIAGQ2i/HRVibh9e3FWYHWeRjQAdtNxH9i\nRUJzd0a7IVGD106nRUYG886FMwiYC4UsntVB5vwEIGHYjiFOOtlrRVAsouC6\nmrvHZF0rJ6+gI5lycKExChvj/RDGvTBGoTKQ2+2HtFVVB3JwslNag+xNoc/y\nAw+VtpPwHsREz5ClztC98oKiFBF+qhWYc9R00OxJlhkfpW/0H1TLjYi4hTUz\ncE7DdIC8YpxSbdIVkXpd3hUrLw35zB5iofJPOis0bs+932qGEea+ZsPyR+d8\ncDT1QUtH1jepEZlq5KmXCnbheNYXQqfgA3H3W67UjPzhMan+JY1g3+kQe48I\nA3cw\r\n=5n++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/density":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/tab-scroller":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.1b3dd846d.0_1587775499741_0.9265241512564124","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa9aef862bc53c109b5b667f29ae05bfa15d7cfe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.29debfea7.0.tgz","fileCount":37,"integrity":"sha512-uqgyllTgDBGxdMG71/xdpyPFDaO1fLe65OLqL0XguK7lQjYkXqBHg97ydoIdL55NXdWk5QQH66XPfp9ac9wM7A==","signatures":[{"sig":"MEYCIQCZQqx5VwhzLy78FA8KDPJGkLlTCEkIR6wzOhq2q5QU2AIhANXQVIJSCKNt+QV0yCzNaSLNN3FU5XTltKL0I4zre7dB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptEaCRA9TVsSAnZWagAAZEoP/0+81/G5W1jtrFcGzk4k\nim5R0X8VUSAktY6B0ZLxO6VakLphygpLE3qdA4MxOx7XGUj/QwCemKPn1jCt\nDp8JcjD8Qs5e8nZfc+9qWDKc7a2tfwUqaqf2tuyr23TCoDwR5YHlScvt28sK\ndmfD3ZuJ+WwAST6fsxWtqBMiSEcFrb8h6nr/LH8qax0D7R09cT1d7QCq9sw1\nTa6+fsvIJVCa7M2tgdMLPvYbg2A3tMvWuJQh1/40JGsYMhsC3PRMXhNXMcLs\nQlknbb/hrC3iUo37ccGRbghAmj37pOb35Z2h44obM/jkB75BiyOY+o1ySwZB\nwwwiZNTGNA0ATh5wsXPkxMY+CXMKCbR+G7NDIJ3JkMTcevWL6pEXx+18E78L\nBXH+aLkN0ZfILg8aTH+nz4X+0X3y2WQPh3tCAjdxu1iKqcqJpiFzn3vx/Jwl\nu5bssuN3mpZ8Weos4NEoqec48BZLYIJ1rS9hvwlWlzzp8+79iZTV5Y72AU2f\n2mTIEhckNl05q1xDy+dkXPFADRFplrk6GtP1D9s09V3Fws7PE/ZmfsMnzUbB\n8Y25qrHqX55KpAX5Whq42q76zG726GEji/05U2QoaHW6IkvbCVSJElQ4p6Pk\nMbN35oHz1Xf69+4gq28qwOIT8ioWRnlcfggnNuG8WPq/qYC0n+Wacr7/gXJi\nsSYX\r\n=/WZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/density":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/tab-scroller":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.29debfea7.0_1587990810036_0.9366528893657782","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16770af05d39083e33a63755bd28d2c650b7b457","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.28d32f8e0.0.tgz","fileCount":37,"integrity":"sha512-nxatRssrdj8TO318+ykiHNVUjLjft6aUbLOA5EOh/pLSynxlNlsLQBsw9g4i397ODUD5r2LwTw2tPp8HvZVjyw==","signatures":[{"sig":"MEUCIH5XU0dl3v7V0atXOBGK0KcQ65gVZQUuOj1aEds7Wxy8AiEAzmpURdIuFhszJPO/p0/Cf3CIa0xh4nCVAhSzYZL3HMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudkCRA9TVsSAnZWagAAqo4P/1CzX6ecio4EB4vvt8rM\nEsxSQD90Tc2rBPpdPk5B0lZZZt1xeWU2QqeoxTT8WDZT6Yqa+mC3L02y1/kj\nNX48IcXg2BCjmXTfD5U+i3SnA9p4v0N5Ia+jAdnp/MFNo1MrSsIOTxUuBxT9\nF5jlvr6I02EF4u+qfulahhlQooMFj77B0QdoHRei62bC469WskNBPhp8aQMK\n83Vx3fTy2Bl2WQ98xrmYXWd+9/47Mu173jLziAECfUH6ArQNtWXYAQTGwoCn\na032nvKFtziRf+CjQbxToNH1xI7QuEJY1cjmnnV/37D7KmaQEB1pwD+hU4E9\nsAR3RvcPUEZquFXPs+rDNKiW44sq802soy7fkhSy+NyZh2gIWB5Syl8kmG1l\nV6jJjMANKmz+IahrbB3De1RzUk8F4tdERUnJ7J87GlRU94FaUPOVDgQqe2ue\nwrnXvTx3wZerVmIAFA2LzWcBGm2wa4xUnNQ2Upypb+WVHej+6oGCwtnFN5tr\n/T0iMp13wRM1CSkFxFym+cUqwEV3Eq1lFIcRQj4hzd/hzv/QWpRfMzvwViAh\nzBB7m/BNfi6GqnbHG+X2NK5abaNdjMgSUbpapVGKZVwje7F51O04Zn8h0Rvm\n/+/w2ljpYlAH+AyJItacxlVKBKng4meDeJNM1atrnLs7pq38LVP23mJr+9PL\n692U\r\n=DC58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/density":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/tab-scroller":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.28d32f8e0.0_1587996516181_0.9456434792922557","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/tab-bar","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17a0fb7fc891cd7adb31f29d560a74976a1ea894","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.af71cfdd6.0.tgz","fileCount":37,"integrity":"sha512-+Abhcpobi3Q3Dl6+ilNfQk8FAHCw4HTUsKFpuvN/HHKHzdSgmzyjt7d9/YKcNBVoQdJ1tD61/Gnca2GtiDxATA==","signatures":[{"sig":"MEQCIF0qt31QPqP7tYHxT4vgTAho/eUGKDStF0kwWDQ5hbgOAiB0rWR129uOkdCM4mjZp4rgJTB6GIbBklr5pbXutHpswg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLnKCRA9TVsSAnZWagAAzWoP/2AXCMPcm462TPwDunls\nsjwCcXsL6MKyW/OyU25iCz7BcGpgWKtvoDPaCyhSR8P5y5k+SJ+TZ2aOHiCy\nTqkriKWcjqX/F15iK6H1077rfncLtAwl8yqdXOlgQgaD1FpqcfTt0OICB5KH\nQ37pc1q2SLoZdgbR8zBKK6igXvC/0vrW2pWk62GNrEuVsuxnjejWFmEeA6I1\nALIIWVcIecDkHEidoPGgmQiYFTT5Zr5iTPPl9aektxLfSnlNdMYkQgA1xRpq\n8Atp8HbMqmLz10wh8IQH4KRs/rBRybqoVSTJWrRV4Rs2g35TVwStbQ63fk+P\nFCdpyPa1JoujUgfGk5BE8I2s3Z7oBcR+IvAbHaG5BaFbA5cB4WZ/6B0swlAe\nsFAF4QsCU0bdVevWRhkSZg8gLam79kJ68wRO8AeSAlHd4Mh9taqRqqRNlG75\nFChdFiwPgm1XbCVWBok9tV4VfprUWq0nvpAFSmo2Ufykj4kb2JpMK3aDaXJf\nV8hhzpCck4sTL1vIJaJUYcxAaLNiy1VPJSDV/TMzGWRojaRErs1PFz7hCsjc\nW6z87IdUPVS/tfT7P5kksbBu5iDFgRFIOSuvq0ywbUC7BJYiOyaClua7WUsb\nLnNDnjoZ+MNmHve6TvEoAW2DnDKf07MnmTtPkedQ/wi1BkPdsiQ8R5cDUhuA\nHyWO\r\n=Ky6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/density":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/tab-scroller":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.af71cfdd6.0_1588115913685_0.6128050174078827","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/tab-bar","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9efe72709f1b741b015b0d510ab3c3637f1f795e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.99d2fc961.0.tgz","fileCount":37,"integrity":"sha512-AR6HH7k7rYvAdUNskIlb0W1wV/9vs4AARKzjcemUkhOdSNrBo1Ec9hNAZB0chPoYN+9TUm8Yu7S3iLK+dqK95A==","signatures":[{"sig":"MEYCIQC4ELqudm0Jy+FkCHAprRp6mo2Yj3k0s2xdldXsNyX5FQIhAJI4nYmVDBK0/Lp3YaIPCy6WU3DGERV1R0R9OfAMXXNA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVq9CRA9TVsSAnZWagAANgEP/14N8vWYWNmzw1KMmJaD\n5gupgEiRwINNZFVcxjV2BvMdhUnKYDpzx2D4t0MGD7Lgwr+w83+Y/gXw41At\nFcsgzNgCXPKF/bjaEr4WqwGlMjaaW4OPe3w3wLmLkWo3Lve9S45yCCsaiK7g\nei2PPZGMx07djzwFAzNTAzIfmXhadPb1nzXMQga+rDuTA5OwOFoubsjDE3bZ\nJi7NoJIYE+6bkdrlW+tBgyOgZYGbl5QRivN4UV5j0t1cN7+BdvNIBuRknO4p\nzZ5k4HgUKTr/DojaDofNB1P0pzxD1cf0mqIwat8VIHU7rZ7JDV0nqPWKUgig\nsRrRpx3Xd7z1rnOTLZaalCyBIt3oWOR6mJNe5Ox2UGPO6C8NrQVtmfxNDN50\nvApfaa1FrEhx39kvvEzWqMA/hgiZfqKjnQ09kueUICRObY9KKlHWTPQwPd7q\nhyuaxtmsVnLnGOy/em2xF1WKAkB6kZkMVExDCUa++Ebwj4Ot26p09WlMWYTv\nVqDdYajS8ceLw//+cm6i9Y+5pkNuCKddVe6BQG4xR2UOQNk7g+GCPo/9dr81\ng/tIWRgk9kUI6p/lwapqpUX965/bNje8k8+v7cv2Mfb9h4bg0EENz6EPHc8S\nzxhVYQeS5VEAYHDd4xwikdWKWUEphoieSLzKq6r4YkSd6ZWCMYq/fm2eLLbk\nL5vl\r\n=sUKF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/density":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/tab-scroller":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.99d2fc961.0_1588157116712_0.9569385435698832","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b7fa5aef4f5f3db673bfe1ce92d0c68081f55e5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.0e052b24f.0.tgz","fileCount":37,"integrity":"sha512-sfd3SlxXOEZNU0b1HNn3eYW4b67Q7YzXOW2aoqieTV+sTKDo+IzOcL3v9Gw1KV2qj5ZWfNfYBC5+5MPSw31pgQ==","signatures":[{"sig":"MEUCIQDQXXDuk7l9kaD2hOXuCr1swGZ6pXXzj0LG3o4KVzhscgIgQoe+fK6KRIRVA8axOoOpAOUxkHLRpDdWfwvH7UjPe8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqipNCRA9TVsSAnZWagAA2zIP/3SSqIfETXneRSPdrkVu\n5BohsrGvTfCCM2FsLcSpoVeSiFC0e7uXR3iS60Bel+2M8ls4GJc8h/IHEC1g\nKTzB6TYkx1f8yzmkwe9x6BepEyLxEq+XQnbnLc/+ZGhAaZAeRCh1aV2BVzPB\n4mc+Vq5bV/yfTTg0H+oLO9mB3RRQL67Xe70EbfoO4ogDTmJei+bcFcrGDL/e\n/nQlth1uYU6784/MFtdTR/rnVx2qaU9h2NCGHczAn13OCTIJHElWrKGepl1o\n/vJ3xJG6xk7jD2w32FTSvHWi6MZIMDta185lGCW5a3bGWyTT2UAesmBVvYEl\naWnxbAoPJFb4HJTuv6W7OLfXD5AlYRCgU1xszL7+GEkET8LIcAtqxILxxKxr\nZSo4ScGcOC3nTM+9ryPFGlVi3z/IKftij05slx2zT8Fww5z1tQc01E+z97Dj\nlGcf3dwMlhykOyJJ41ikPoCtPVpVtRb5LLFsJ50deSXM+5cQuoLT3UBycx+G\n1e82mk6c7PDwKtEryMWl/mp2pAfEAgab5evW+UoUqO5gzDhROLrrLoc7JUD7\nP5odIdm+o4nJHpI7ftUALWq20rncqiuy9heQbMi6FRCpmevp2o3QTJ01HJ4n\nXM7X9aYoqHEz8mcOSoSwA8UBcV4oM8sHe0kxM3CyCMl4KlI/75K0q1khieBj\ncf1Q\r\n=kiSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/density":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/tab-scroller":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.0e052b24f.0_1588210253044_0.8846535020444284","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219cc47962b37a2a70babf48e51bfbc04c087168","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ff4bc632a.0.tgz","fileCount":37,"integrity":"sha512-GdPR6oYSEBELzVqbEfxFOwC76Z5NJdd886nZU51pSRF0NB7TmL6hERjlYX5lj0m73NVMKzw7iIWIcSnZl9F/Zg==","signatures":[{"sig":"MEUCIQD+dr90g2jYr/shG4UEYe9rdYIsePEPcwEmMep7h0ubVgIgQEQSjYnuj8wJyUD2omk/XsMhy3HEr50YltuvajLi7dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqoxUCRA9TVsSAnZWagAAIswP/2XbFFuzWdUf/ixkiGsG\nz0bdqwNPAijx+8rROcRAAUlK84bpvvsDNELe6X7QKh1j8WQY55vpJZOGYll6\nmsLRN92/6IwJ1Tuf1trt5udY/x3FRM/ctZ8Ndk/CqgzH4ioywWzYweGN4rqR\n78eoMdrFrxtykcynGOjJQJiVrtg2IZUDMImMp4tPKKsBhkrrDKyXyc746GwZ\n98p4lOp9hwJRRWJjEUrD05tDtwT9dOtewQ2LR+EPATRy6Drt+rOI6s4GoZW6\nY2VqGC144vuf1n9CQv/AiKBbHps4bT20shbsVduL18Tjl/rRWJd/RNJRXhLj\n20if5hOnakNmM8BA65fqOp6q9jXbNCj1P6GJvSEZDlSB6UYumVnUmt/OSEdH\nf5s6Tghwo8v+6WJr3gs5cr7qYBCovVLU5fhrsTV5aSG25n8diC93O3t+nT7i\nLOSkgXQX5r0F77fw7mjQ7cs1+rTcx670tTIFCBb1JPyWeUr61Z34PUOTs1JZ\n7gFvIvzYSs9EZh1IRIe9fgrpB3yvl/smiad1QnGiWPOTRQ7qeKNNn4SQ/uEX\nEZ2/sYWTawN8hTjw/GlHZHvLJqIlmU1rAI7GqWosK06yPTyuXBgiT8MQvIA9\nftAxVhaQdJNFp5R1HkJU7FEMA8k12Bylnwrz6dJhAy0Y2vKNVTPb7sQEi8JX\nCUTl\r\n=SQt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/density":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/tab-scroller":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ff4bc632a.0_1588235347929_0.3257557202226131","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37d2579ec7ab9cb0407e854177eb248367abed4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":37,"integrity":"sha512-hXWgDBa2x0JOL3YKaX598B0ZDg5XgiH94X4qjSYcLAVrWL2ATG25hDK3aFwYrIkg9TqxJsTscdBziwncWfjB6w==","signatures":[{"sig":"MEQCIHW4W9ah5yyULq3zzEXTqWHhi/efUNlUmYIoRunCzm1WAiARu3d4MdIXbA1TBXqHHEFw9zzzaTk1zA0X0SwdMgHvBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHpCRA9TVsSAnZWagAAmXgP/335RmtzcfKGee7sVFIe\n6QgpeeinzcKEN6x/BTb7RoiVZcJ8n1BnLKpe54geZp5ijBx9gMjZbNPIo+ML\n5I0YaxLvl1PB2qNxhQsWvas8TXIUl62We2QLgekdHoRjMXOVkLToMQvd2sz3\nBLRzv2NWeiplcywZUfd3akKmF/TfMMbPkBIUouWh3mTBH0nYaXQ/teIvHuHa\n1UN1M96Va64T10jL3Hv7EBE81i/aipxVwo+t5RO/YAMOKgupStgA7P8b6mDh\nEY0XzW27L3ZutzFfvW2Qih0sh3lJh8p79UEtWLGvmZm3IrsfZFIrD2dk8IUk\nBDiFEo6mCt1irfWNzxLYJf+DJ3UIHF6kR848MACWTfaaIO2AmNT3GbqAIGyy\nRYBsnVrZtew+Q8NZkG28ScJ932wmPb/lE6YbrP6VjkuKn2uPUmNEateguDpA\nCaCgr2HgTn8Acb1IWZWCE8nqjTNrEjpMkwIt4PX+Hvfd2LNB+jhDO3HSP1P2\nKUyfToh/VlAPYUrGJ7Z701AUtbe8hD2odYl+HILpIov/aWJzBBSjHY1urVQ4\nUjIXs1hF/lILyaLMjXyWCJ+PDE6s3Pgt/75qYChIlSCFXS7+mjPzRKyTBeUV\njgD3ftb+tBSMS8v7Ik1H9O4H+m5/zhONlkknwIXD04zsD0b1w1nAFyPyUGx8\nVX2m\r\n=VLEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/density":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/tab-scroller":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b0f83d2fd.0_1588257256556_0.802321564259473","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/tab-bar","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b1c397369f6069d1a74d6380ee8951de4fda3bc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.e59906a57.0.tgz","fileCount":37,"integrity":"sha512-AIusvsqFdHnP98WNKc5THL+cBGjBUDPnWnA11kQ02z0ivFmdBFdaabn/GMWVkct2E1wJD9OB+DCYWUN3mQdKDw==","signatures":[{"sig":"MEQCIFhu507T63fNOtgik9nGrjtbIIGBh8ULNTai+BWu/2iJAiAljJiemQAlJuLqQjPhlXDOzLkXhPOphaQR0cLQaQFfnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOzCRA9TVsSAnZWagAAB0wQAI4Hy+ELtmbYEB/7mFS/\nMmokvUgopdZl18CdBSYKfJ3VRcV1E4ZjfHNkeyGBVOQOgkBok2By7D9zIfu8\nH2YSAwAeVSLQAxXVdQLL1U7Frtcq4r8FFFWz+rBCiUu/AHwAnLRFC0byqBxD\nt7dA3xi1xP3k5nG22apwLCSGOX487kTwulCz+mnflEmN+47d/a5APkxwEKOs\nD+fpYHZzdwSLj07CpE85ezObXOeh0OizhEwXkWSQiD5m1+sw6dvn58eSpKAk\nfqpJVyYYmLN1afctlKl4sjrQpMiwBdkS1YA2ARg4stL5nNrcinAGNoZ/aDkZ\n06WrnyEepCvFdaU7uHvsf14utC788roa63tuJWWup3iBZeS7m6tOEqeuZ1xq\n6O+r/lHohMrauU9dAnFWvxhg0eFm2zvS/xw8C5YZG3YsEGgnvWuW2ollLVIZ\nR2JouevX2fmk9xZSmIuW2/uhjKaWQ36fjJk97T0UNX56mCHJK1UG5QJSmRfU\nwGcRg5Q4wscCMLrreWuse5eN97fS+D+v9VMD7T/x3HSN1mG9B+2m9GBTImA4\npMmQ7cuHyt63Q6vQpDb7JQexyzUmZBNygGBNB3DLFKOpIOqnKDAFrLoHj4bV\n0Du1os07tuTnX2ItFUByRz3vrYIClxHekEVOVSiWqUgyJlO/kIAcE5tEmXSv\nkngH\r\n=sGac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/density":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/tab-scroller":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.e59906a57.0_1588347826555_0.7941387565393705","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/tab-bar","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589bdee443a613b4197d29f9ed46936157f9bc8c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.c02712b59.0.tgz","fileCount":37,"integrity":"sha512-yQLvy9lVxQPuJrTnupcKnAId69CVjg/rDTz05UOFuFfevB3zMewWyTq/gQPrdzKAv91zh2qrlkmZCoyLWT4b7g==","signatures":[{"sig":"MEQCIGzKgeiWvU3jO6TVSK/2sOAx+eQ/QNnT9FltVrhpnvmjAiA1DccM2/UXLO7AZUpKVPPUzgTwza/B0PO9KVFnirLa5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGn6CRA9TVsSAnZWagAAEOUQAIfBiJY7EmmcElSQiQ+P\n6jLes9V2PFf1zOf4Jllzn5kdeOBDeni95GxwD4Ae9E/GXLpx4DYQgwF9Pvtj\nen/d2u8rHPfDXukrvcA7hRoG+C20P/kgVog41smnMliJGBU+zGes5ABoVzsC\nTIQah1XePblBaC5YCEciX+BMS02N33uOvi5VYI5PWO8n1beLJSYhrWnmbZ5+\nRymymzEzy1LfzXGdCrSdGle46W6pFtLfpfq71n3+SEplk7Svkhmlv8Hlv0Gp\n0n5bFCjRHZOZ2gwjoO4gxAOZgt6/Ck/HHirvP9nVBly5CD+PwpvTseqH1yTy\nyPqxVsYQbfC9DW58vGpjfbhlLIe1C4JpUW3f3/c3D4tiT/oZjbb5qoRGpWVS\n4v0m+XVGubUEPrhYFjNU/wfoA3gj7EfLWSFY5YciQgLJ3FPpQuASUgvRmG5d\nYjuhCjgZPJKkMmW7ilZvk8WeXxF5OcbLLscVXBwVT4xBthG4OzgjEqQNfxAh\nh24O0g0TKEgnrWVwZ0XoikXfcIC2Z/6kOVrzkSr/vYXh/+ylZ4/t6Kg+zivy\n+Oum/xybCozb+FIM+5MKquCY0lunr0xiysUQQ+4CUs3QYnZfJKYT+pfLpBow\nSlEKpJu+utLnNPbo/jJXG15X9e3Ep4X/JZUfCcjAhoB4U3KqkV6VyrI3dqlH\nEIG0\r\n=Sn/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/density":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/tab-scroller":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.c02712b59.0_1588357626024_0.7275073253525239","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be262eb2cfec3296537b05d61c72a411389d334","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.15d65448e.0.tgz","fileCount":37,"integrity":"sha512-6kKr2f3R573uwWaaywR+g+Zyb17pW+YPFxM0ryuIAkX1kwVijZp9nRbqdXvsU17MdkSateGezO2Uwgt/HEFGhg==","signatures":[{"sig":"MEUCIQCeCAHONVRE+axXA88aaSXd6+j3unv/1f5hkPK4Gkfa8gIgaR0ft58VngGILbv3AGAHaTJSRZjRHwOakb8IzOrWZrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHdGCRA9TVsSAnZWagAAeo4P/1uPF170zboNHRkxu7yg\nkck0j4KVAA721QoL95kqPbb0yGrjMa26P67yQUoSmpmzGvUWjOLGKHNBsDh7\nypI0XvSPn6HR6YpvaLInx3wczcx4WCp9nCoOneaKFuZTaz3jTG5D7pQrkqcb\n1KJqtPsBDBjZoOHVbbw5PCmCzGsyUep/dNLD9zHLYckhWE5qW6bYtkXuHrS1\nbFsnmqMkUreLxNZAzxiMd6Xp/JqTyr7oJ1dG31avag98dMChz8NvOvqTsGuL\n1w6sg1K34pR86GVnhLfqF99KG2kLkBV29ZhOn4k8La2Kx97DCsxmlo6cqBE8\nMdnVTLDXo8Yddk96Vxl2nG7RsYrfqgVgsRGKxPibCunEBvtSM6j9ORkY+giN\nSMRfEwoFymEZFfn7pUbgIBbsWWGyl3ngyYq3Kpm5HV8LLHHKFNdpnfHte0Sa\nG5wtbFGdJ8puEo4TLizwYXhvXUQ6RKxT/FiO6fLv2d46/+lQ3z5w4osmNswe\nghJF5rv9Pzvmtqj1zf+v247mCZL5TYcbaj9HasHGROr+uSNhDBuU0GwUrNzt\nSNLy+9H9hrYkiZbfJjSeUe3FckkJL5f0ZdL5C9o8XqlUGXXYew10Id9Rr1hd\nRqza7X3V2GZP9QUACD8jpblvtd9rTvhfOyAkuKKOqbub7ZJKlTJWHjwfOKs1\nOOaH\r\n=4ZaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/density":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/tab-scroller":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.15d65448e.0_1588361030516_0.1394479660731256","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f4c220c43149908bcf493f1553dd2e3e1530259","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.142b1549e.0.tgz","fileCount":37,"integrity":"sha512-QcEHwypIRqkn05Hw1USciN1BVtJBxaMu6PqarzR4TSKom7iuhNAUapArv7nWbpUh19zkAXHyguBtvf5p9FZtCw==","signatures":[{"sig":"MEUCIQCA0HhvmqXm6bqZJoqdDJMNiTkIDVGjXNNW8zTSEZ6KDAIgDKeZ7ov8qI6qHBSMQQ/6KForsptsWnrsB6bRdneLJc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKSKCRA9TVsSAnZWagAAqoUP/2XMNhTt6w25BsxVJNV6\nwbrnc63WtCcufjhlmNlOM0WWMTdZ6NiEQb0QAt0jfz1c84ox+rnJSoxwkCd4\n0MK2z0fAUIqX/jpIuNTXAL7/q370ZkViKCq8qZyNJonZlSpO5baV5Cw8lTS6\nHeJtop7GDiJ1Eq5AIA2AFV/US4eSn6i+F3nAcGr2Kys+3KgGggcb81IFVK3c\nvCb1pvOqySrUv/In9wRfb9qnSOQ3RQbJxh7vAnHUiap9q4JI0limcuUVXY5D\ndjNMu7Z3gtUW825IcSNg2O0apKMOHtfwWRW4KLI0u1e9vInnmLl9+sFSSQpk\n6nETUPS6QuqWWpex865hpEMe9IE0dKkMN7kEZxfCpLv56P5sIdeAMrYyNsVj\n2/mf9mPejCfeCYQKM7evg6CsvqLoiDj5SFr8Z411C/Kub0gr1qfZVX01sE9V\ngD6aD0XOeDQE9GUX1Kl3YSGRldVMW5JInh4G0E2hhaJZHrTYxf704lf27nY8\nK1TZlOD1y9JierPRYYPgzrWnOVKQION87oEcPgdkF95YBRhV7sk6gG3uexGB\nBKHsaSAvP7J888MInOjwEg7m/RbVgAoN3TI0de//T212DGPPnBIVLZGr++wM\nHUqkCy/4khdCPba4e8nDC9ERQgEnTkSUNUHbTbKAQOgGXgofi0muSqZgf8BH\ntCUy\r\n=u74l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/density":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/tab-scroller":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.142b1549e.0_1588372617823_0.719788064724461","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/tab-bar","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce0906d50e585501598e6772b6d580680e9d525","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.524b7b812.0.tgz","fileCount":37,"integrity":"sha512-jfUff7UbVbWNVWNUPDkXKPNLsl+26dlqDL5IXUnwfnreDxeT7bEMmi2pSk1hXdugLF6F1RmLZn3YWs4N2ofulw==","signatures":[{"sig":"MEQCIE/cvAc7jM0gx+yiIve6ZcF91E/SUNjyfLL8MJRWZrMlAiBuD4iuVHrqIDNAZkCvXvB82uCZsceo/KhAELmY1OD6EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4nCRA9TVsSAnZWagAAQFsP/0KrxgO2dFwbkVSAXP8I\n+LBgdLbXYp3Cm/qya8GLoasPqj98iS2M579FKLBqZcZAFevvegzJ0yU8JQW1\nkQYmoutKQ2FTNnVuJbXqhbvn2WIWfcy/Nsdhc4rey3SnfUZnkIKHIqpyBrkb\nw1cpjTqzxohu7HR18l7jf77XoigKBpDsiXqJQfianZ8w1h9wEcLpr0gcLoXh\n1K8WG9AoPtNiueMhXIdtrs5yVCa5Jcu1P4X17kmxphyG6uknpKZ1mwL6nPTE\naZ9ZBVSLC7/8sMiCEFcn9huA154bp+UMLG89W3ovA6rhslrmOwrWb8N+KKR1\ncupq2uRXNEzBpe/fd7qfH64y+OLqR+7+z5wzULSLMenAGJyz2ZZR38s3nmPE\nujcIygleBhZknVdgZQecZAPBDBu65eWPfN6uieRiH+JDniVYRcAPeOY074W4\n52MZ4g1CSW8H6QtowvPWBRX0qikA5vwTYZsiY1w3kPN6yaH5rq2WH5q9rzuL\nk4Nlb9rpj7vhc6Lbbln8t2m2nI2dOFCMxZHmawPTdcYoVrAO7WmgXVg30mWl\ns1psrNi2DlDwM8kvmB0R5RxDFhkIvaJzJFDJ37/byUBGDMXEEtlatr2LVguY\npMfo1oW3RrQQBTOAyJU7QdSxpKLJWSNrp2P/AsN0TBuZYxqGAX0UUZt5iluS\n9BtR\r\n=f4eU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/density":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/tab-scroller":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.524b7b812.0_1588538919227_0.8765396396451772","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/tab-bar","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20d569f70f65a251d907054ba851d87a2b93611c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.bd8ca9678.0.tgz","fileCount":37,"integrity":"sha512-15CABx2DQvG/oiiCYzmE/m5dSRUYxC3/ogFICh3nsNVi4SXmzi9EQMdG/wCa9mFOQFvoz6SD3Jt23pFLfmG9/g==","signatures":[{"sig":"MEUCIDH6YMuiKtqH4eLigBOnfOetbt9wRvUVNd9VaXmFCOtTAiEAxs97ZtwCt95KhluhRAJTSkXjvL+aupazBhGs6rWOs6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE7RCRA9TVsSAnZWagAA+k4P/j9oKgi2KEuXrQ3e8PiE\npE/DlpyfOVAVN8fAeNBMwfyoQSjfAsHnSS6M3UoNnyTWv6WhWue1gNRrEoGV\ngrljYDf+29Rp7lb9FYZeT0MJ+GHOPmpjB7mUdzBSraFfm5LSpUCwxY5WKX2V\ne7LfY1L9h9ibt5kh+AA6JuutoVsJFO5dKnxnNPoBUkxGHZtudIdoSMzqKYAL\nIPHzA3cBRXv2DfLog+iaPvG+gzGK8Ge35sCYXsBp5g/DONUdM65DbO5V+9JU\nd3NsL4mgdulLcBY5k2D/AXu+wbOhJuPIAAWiUoQTn8VpIx1cvbGdVF1afMnK\nr6p+vEtudPn03RoGaCwKDD0Sddwj2fQUqHPn6gbsRMRAa+m+0zNymZ2oIpzj\n7JFzH8UShmNsSxUK4cvas4d9KxqtGAawj3MwKPLv8JftUCH6EoWqpJUOXWKm\n9g8xfuUGqU3JVKR18pp96Qz8ze8wXV7UVAsGnWp6PWUwaHOS3ffqnlgJWSx0\nW5owG7B0geCKuSA+G3LalzUii1XSVt2NNFCqAu/6XX5PIslz6yN82tsT40JY\nbaxIWFtdISR7tYe6LvjGprFQF5YzVfuJJ3HE8xAmf/K1OzFPPR6wgD/qNcYq\nvG3xBZv4rHyArc2/3L7O6buC8SZi7A1FAA5rryTIPEB4INwGmO2kf75qm3/n\nJEVz\r\n=x3qg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/density":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/tab-scroller":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.bd8ca9678.0_1588612816799_0.14615371510261443","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82059c5f4ad6c3d7b952c5bfb4aa7813d75f0c00","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2553e86fe.0.tgz","fileCount":37,"integrity":"sha512-3lIYhtegHHAE6M4/io5nFf3FYcDX2UK6tcw5soy5XAQ4gREcmJMwUxLgb56Gk4SnLpt4JXYqWgWRkrXiWqR9yw==","signatures":[{"sig":"MEQCIBKKoz9/LnzKmk3weKchj6VxVDJXRo0hyW5zk9SDu3d+AiAtJ3io07FJ3heY2Fkv+sEVRtBgkUkJoS1HrQ9cE6LeAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGsCRA9TVsSAnZWagAAwVEP/A/tkvbqF1WaJQ/WPc6M\nFL0ip8CvXXQDuODVtPGeCHfdFn8KilEZDqt4ZmXNI630cSsc75Je0r4CC/n5\nPgrQPvrFBDE8gORQBiHgHPlrrPjsrssjbZchv7j+2fQqqnOumuUe9LPqeVpD\ns3P5bqjvUo5RoGo0Jug97tulLdj6oLAg5gr2MxLieSjs+f6KUNFOXHz4PS1J\n9aTloW6MFMFYU7k20GQYsC4ZZyYfZchR6rAaa57oVX1q5DipaF4BuLFj7EhN\n5YFzy19sVnqK5zonZAO3KPoTZVH7KxRR85wf0RaRfrsxs7URXYs1KM5IyfF2\nAGYdwbZo1c7nww/sAQtkniG7UHu7Zc1ewcJATF2Omj6twGs+kSDlYVouug6l\n5EysnLMHlOi1iTPDsWCNnugnVVlLwAI3tZ2auQQ7srKobvqgtv1/HL6xVwNU\nbw8FNENu3erv20lK50eOajYFt1VQuHsk8AHGhyWoxnij7PHnawKkNFwcYTi0\nwisMAiB4v3GZ6obJj6vWNXsXG79jaXraB/Xk1U5hooya7fpbVcpkWDmikMjY\nJs/a52nXH2jby3jklx04g8PUhsF5L1WiJ+2zq5w+/adujIq+QJq2EitARSr7\n0EvfoZhXDGxjBqnmHgopw3V7iLGPQBNO6ttoirfiJOBm4oll4L1BrScEwo9W\n8Kxs\r\n=+L6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/density":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/tab-scroller":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2553e86fe.0_1588613547743_0.1536446982836086","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99bf1d5d874933bf5130b8f31549dc61788dd2f8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.03dec929e.0.tgz","fileCount":37,"integrity":"sha512-GE0oRzOHqS3DYcfdW4RmWdUhlyL1EV/YbFs75JEjJKuYeaeMkb6ZhOnF9EDmMhmysQExCH8mDXMTqONbQiJV/Q==","signatures":[{"sig":"MEUCIQCEKOJFDAThBjlhPqoJLnz5/9xMP1yXjIE1ed5A88EPjAIgNwD6Zyq370pfWQEc4i5tfCHmxFO85VvPsRZ32Jkiz5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKa2CRA9TVsSAnZWagAAuDQQAJ+vBcbz5rLvq235r0ce\n4WEKNI72H8KHKRmapWXypiRKRsKA3U6N/V4R2t5AdZimqCTiA5Qn43Ua8xbz\nsFSZVfZcECPkbIUASk5uAAWfGCI+KejKiNLsSITCRyzV0006b+xL340m8pHQ\nnnunOD5kFBCZbHKeuwPLBz+L0bWHh7G8Cv8mEMklXUfbieLB1uW0z967S76h\nQ1jk6NtolzTYmyVXE2XBOoDhRlFYHKwrR2QSqq9t4iKZMBUDE/tNcVOA77Pr\nYb/O9nOyKSpAZr9ZVJUR1RIHYOAdq4ze3gPfo7LKYuY2OZEzlRplLo6lD9Fh\nb1kemGmaaT9xU0AiDdkmdTcBu4TY/No4y+o4FW4h+8GgjL/WcTDo0rcCzm4u\nRwGwo1vw2yOphvACoffgBtDen0bK02aQ+SDNNHqrAP45qGOcAye6Pkr7FNfM\n0ouf3BJ083SJRVn0SlVPGvLMJ620fepizP0JwB2cLP+fqs+/DkKNZCazZ+9O\n6pVA2tfBljgfWic5ExLbLmU/mGqEs+4j+lmTSpkKmiSfTX08+lUOvg4kGxRe\n1byX8TPQKPMxcRlJij1Do1OuJza+ler9ON5oVBpqt+DRTUEEAFKuBwavznyX\nV6v2BJu8lZHeaTeThVXV4KAfdsPIm6IYcj+kS1yIF+xyISwkKIamVB73olNt\niOuY\r\n=L0p7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/density":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/tab-scroller":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.03dec929e.0_1588635317562_0.8581885554783715","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6153aac7ab79829fc408a0384360754bb8626a1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d92d8c93e.0.tgz","fileCount":37,"integrity":"sha512-pTcN2N/bUEBgZdleJSMZFCoatUjZS5+c4XWwQmuy7bU01lL77nG7B9aVQbEXvQt+qPs/fPqqAaf5BqSvpt66Eg==","signatures":[{"sig":"MEQCIBv4If1pQVhA50O6dehfe/zaeIeb/OYouZT4wHRep57AAiBJ9+nts/Wrr6e6J3ag2W+U4jc7Okj0wBo0r8PCGNY2yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZutCRA9TVsSAnZWagAAAyIP/iTV71GojFKZ4+JbreDE\nYpQz4fyPcwbjX07Mn8vWp4YfVqng15Vd8pm7Zq89JNSa+lueQWLRLpq8gbRd\nMCfpxMF8XKaj5IC+we69Z2du+8wkyYw4Jw2ZL/PDIuzmp2bKeVpiGqbO44ms\nGjXDBdMamMQwFy5djIwm6iQgx6T6NufU7+apwUTLL/57pQSqNAl85Tuxbttr\nlze1+xKv3ooA6TRXOEJyqHsEiKZFIByIMNXzAB0cejRk1VUtCyDVT6TsvoR6\n3lUO/fuc52NEvnMwTZyDq4ME2qz5kden4bJvxnn/r6QFR/yweX1W2WVoncZT\nlfPdyO2x9Xgfn2WRlxmsI8l+A6eOBq0++OsZDsUUCJVo0qHUgRrwerHUx5cy\nnh0eDdApuV9fnFUNpW7Pf1I/tuVPdOqiB0bvi1hNmyCMaHJRb5nPHCO98JcJ\nQ1CKTBKcW2Oo0EP8sT3Ajcm5UcYfpjcT7s4oELQcYR2ZLWUkyHXj5/MnmSbt\n1Keq0EdW03yCrIByXngahsRkdPIuYmSgDWndyhAgW8tqJYjalf29jMwLnBer\ngJMF2juHAkm0yDTGp8bSWiYRR/4X3ho3A2wzosGrL9kjPSCDYZw8j8oB+29H\naFS4se1Ht1hlyf932oGGg7sBXmanb8FnBjnzk7o4oJqTTeaNrEh41KliU7H7\nrtAn\r\n=fuQq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/density":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/tab-scroller":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d92d8c93e.0_1588698028783_0.26333225099379476","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/tab-bar","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751916f599681c3394fbf68b40d4fb6080c16238","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.09f591967.0.tgz","fileCount":37,"integrity":"sha512-QJN1Ks374y1ZLvcsrbFm9zdWcgKl0wWsxGzguBVjzhA9TRZ5VewF9Tgoe4DaI7fbJk5oNq3Q5mwQ5jEXcH0e7Q==","signatures":[{"sig":"MEUCIQDugo60DmJqnmT/byHbjXDbn71DrO3ZJqEJWbprn8O3BgIgE6bIRbejYILxFelARB25ze3aiJEhkZ/0IcZgLqJojj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUmCRA9TVsSAnZWagAAydQP/RQj8Mma8WKTr5CxPB3p\n9lgeg0CQrv72uIE+3SjvnWn5+2UlkAkSQZA/PMLeu8vmVUUiFmLoarQhTFb7\n0wnInYgcOln0CKO0ZxgO63k7o4OWqnpDJamWYp6jfNb2S5mOlyjMPhJpfLbK\n9E/BqoYI3Eo2bPyYovM7FSsUvKbnH96Lso8xPsKHhMGLX7vf3DuSrqZl6kE8\nPrTDSTOhlBmePvqufPhr3OOeFzLtn9g+MarvqzRx9D8pEtSpWtuSjt6IcBs+\n5d9YPQ/HWnkFAANfzFWSzIYZlS2IwjR6qfsem6Cd6JYuOe2Gt9Hd+lN8YEGF\nydpq4xIS/RXb0PcN502WlDk2NSFfUBw50GyEzeCJ1QRhgDboTPExChq0F37p\n8qH+UduZpVIPf2NrKsbDYn7JdQVS23vJ3ianpn8/H5Zo/K0VNQzt/wg9/rDb\nffUKzEnpER70VsOYF28LVUF+YzExmEo5E1FNNufak6xaZsAgljvX8WD39Zdq\nNke9B/JVLLPiParpeRyESaWWR9jcvpY1kcv12ORFMh/MYokE6U8I87OBt/JK\n8b23iF05VsyFrAtVd1diBRM4wS9vLqm3g8iN1vj0V9Q/ndfA1uxN/4HltR3v\n5wHDVGZhnRBkgarMmlvm3hdSug39vXMhVKoDmAbioU1CohHelciFZd9d/uoZ\nqW2B\r\n=Z64R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/density":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/tab-scroller":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.09f591967.0_1588712741759_0.13269739239297573","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/tab-bar","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac4314eaca012b858c03a3666150dfe49cd2452","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.3846ce311.0.tgz","fileCount":37,"integrity":"sha512-h2Sk/zvKMbpbeG+7arhc+eMl6JA+qo4jkI7LSkKmzqxyhwCTOC3gRwCO89dJjHBP80ArCaUsbg+kpHxwb8+0Vw==","signatures":[{"sig":"MEUCIQDi3UZDYY2TViiqi8nBUXvZ8aWq4wc7j1ToIMUuhS07xwIgVqANLFluH7crhqWhe4S8uN7uq7pDOO8IWHIuDgcx93w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVuCRA9TVsSAnZWagAAxX0P/jz4OGM/DMcyNs00gVVI\n6CiylCVIX4R4L46pDpLEW9hO42iRxHMh7LNLONP6tk8m23hxO0TOd0yGH+kT\n+GFzx1AyfVWNz3lYp+3M/9s8TgQ/UJuLzFvzApBQ51gqY+doYV8q1rGOJyIG\nBrYI+zLwXIfe9KWIGhQOkDFG2uGQEUY05vpdU14rLwy0Gszkb+rYm7JO7xnu\newadFncQMBXvv+kkxvjMXai9CTgQBXXsFIBk52dFAfG/kaDOGMkCwEbMAPZV\nGtBJzq5IkKK/iKTiUQcfVSGFBichHi/mehtoSbAUPbnGIATL6h+pvux6GVmw\nnN0WnBNbkX97kAJB7k8te06P/s23ch1VNOnr1agDFghVLSOWcgfSsYfL321N\n+7n8cQXn+8YaHakWJy8evHTsNPKfNRL3fZoYVaWqyqsAsVjGDxlOoBUXSacO\nzby1rDYInYkkaFFiImMpsZfdgmxTjZ11zGP5w2OVWfzCJ0p6D7BfJGhqKzx9\niCwTcy1dZNP5YS0REGD2C31++F7QBA4o0KnlxJTQv8J0olaYyNLWRWkrGWeb\niF8uFrmThpWbS/IhP0d/EA/pG2mjgIGupf70YHj9ECm9pxVlRJBLSrRGv1FH\nx5OwX/VnhPntrSTp8VUTFfhE3bTS9caxrdrWOyw2Q3D3vdLpyIH2zrzxnBnX\n9f7i\r\n=7sKD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/density":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/tab-scroller":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.3846ce311.0_1588774253766_0.0890957916497015","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"845caa1dcd28dd599e597b24f480ca723ce9219f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ed7f32463.0.tgz","fileCount":37,"integrity":"sha512-sF7Z+kS3raX07pN2vUjvRBFpxTuB+vaZTivzl9RPUd27L8Y/t/xNEJFO0/ibXLfhak3Nw+dc2QE8vr3CtO8xIA==","signatures":[{"sig":"MEUCIQDg1umx5fst4KNPgzlpmE/L1seXXXG9tabFQcILb5P38QIgKGYEojL3W1K4jI8r4ufO4lZPOfNHLv5JRj1rflnPg+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuElCRA9TVsSAnZWagAA73EP/RVkGbw0mQ61eisO8v7t\nxoy0nxKCiCsvwI5+n4e7rFv/g7XGArXvo1M804lOLOxyWNxD+0U5ssWVBgoP\nDiIlVVn79iMs0ftQ5Dpfoal/DNGw7Ks14v8kn+F7tArIpdY+DIHz0vUkPXgt\nAkQOK4iJVaG5a+pj4YVQNULs+o8qbN33dlC25s+7jBO07iy3+mD7MdvkKEnb\nXcMzqUqypydsfzUn+keHJTMMC/3d8BuWPqWR6qh79jPQ4VSoYu6XaFSnGzU5\nSdEg40QMfb0siAnI8K+CTSQoZjF5sqHLWKcKZjEYXwgMnD9o8Hfn9UVmJDjm\nl5cL2yd8lH0KPVXAoj+QmWNhDwiBMgYbhlc9XAXAQioxJFjc+RSt55Lc7Vp7\nAnjbiqU2CKDvdiOV84TcW57mGfPx4NJ8NHwoUzaOcmOU9R3s2NIqTkZBNSQW\nPm5Vcdl6Oa7IQlH6Y8zEdP0xXjMYiLaKORvY/OIKgVqQO3pA8goH0Lu/a/+h\nBSsHykutqypkB2Z/iRJnFLG9nJ57xwAIB4WQdwCH+hpG5CKs4PXXO5E8r2GA\nR3LchMEDMdZWYWh2LFeRaPoX+TRJQkqRs8HlSw2oJJfVLO+CT16x9baFCfc/\nSawHpyN0eSH93TOZSpM/6B+dwx7cDMnRXU+UakdvfvgnUM7rVm2kH6/msStE\ni9JS\r\n=exZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/density":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/tab-scroller":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ed7f32463.0_1588781348681_0.28166412556728826","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c601465582bfd1e6b2f85f59952eb441dbe35f4a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8135cc085.0.tgz","fileCount":37,"integrity":"sha512-fH/dXSzmiza3hr/boZpatHh7K+/3VzNP8WNYIIyyFKiYCbzdGzTe15jvXt8th60uUVqBxRevSxvOq/pVk1agjQ==","signatures":[{"sig":"MEQCIDz5UFBeT2zyj+o55X5cLJHuX79EKLSIrcsWftdMrPm4AiAZUfpdjnudOvXUXqIKJdLtrvr74jp9I4qOGWz28D+3oA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZhCRA9TVsSAnZWagAArFUQAJlx1Ho26+538yccGtrR\ng5rOT8+HOamLU3NmGJmo4jcrhW98PCjZKrSINGBuZOo6diySxVY2DA5xZYYY\naYbcQdBjdhz+Aw9Pln89lL3kaf4UMg8gwxvBsmCDCugMsSGLGXqJ0YJ0klbn\neLi/nNWpRmBvSiJtzuaJzZ2w8dst2LLccCSZ1mdJLOtS2uLQ+777628D7+Bg\nSeEWP72z0NiNPs0s1DdIy603/+x95ngUgnW5QaTS5GQ4/WSnH7qzrGgSRgag\nsZVmQXh8l7xpcC7f+t4NoIzaLesw2+ygjbVT09A/FNBL38Kv+oXa62i11hfM\ngd98/XeFIsWb+EY9m2SCgFOkLRVaC8Ek/2pYzzgQ+ZIZow1gr/M7QSdpytCe\n3D5rYed9Im4if+TFx1Lm/Zma4BV1/DeCVRhwauuZhuGRVUrD/OECszxYXIIl\nmPMk59ULZSRtNGNUk378UtCgsgv4IpJIgObwpdAPCeJPcNb5O/LipjvrmZY7\n94wANRMK/IJIOu/+8zBSsuwjJf828iMXLesOXCdZxGJj0qPfCE5vxKcw7A5t\n/WB5N7aIQRuvxSGJQshyhmmG+4mYTSwLdAPY8nnodWakOfar+nGhRnSeCtbB\nwmlnins2+tyWrIkqqiTrafdb8YWx7/Zjk0Qe2EfbLEzgCAMje+/mgf88A5Kv\n3cmA\r\n=JaWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/density":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/tab-scroller":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8135cc085.0_1588794976855_0.6016462344745694","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/tab-bar","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c9d25162bff615405671d4fe7b1c93f281bca52","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.deb212de4.0.tgz","fileCount":37,"integrity":"sha512-uEUMoOUaLNg/8xqXg9PcPGpQLf0VVcLieFQVsuoO5opIZFnnjm0jgy5ilFvEdmeINHJmcoBF4wPsrTg6CLAVkg==","signatures":[{"sig":"MEUCIQCUSH/OUPhfQPETXTTXK1OlbnPfi4rDwIKjJp70Om7ZowIgB6V3WtubVXNOmas2oKK0OvWnn+sooFuzt+Sz8FbyuwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszgJCRA9TVsSAnZWagAA1bwP/izaBGO89olyY8FljPZf\ne/iON+exw/8ryXazq8UZ9I4mWlGM903di6cU7JQXHFtrSzV1YprmYWCOxOD5\nSlxx7iCdjl4oqsxANxbnWpLHtPw+0Z8w/jcbAG0jt7OISOdG5wHSG5b06LwQ\n446jj9B8jodFCcmVCQ2a1d0NNc7qhqApIXe3+IiSga4e8yk10Rwq5CyCP/gG\nryjsTjpp+TLw44znR3lOXDeYh/KjiBQR6LggbJyEjvL2Nh0M8F/O/ki/npKx\ngAkXeStZOXcwQI3E6/C9vN5F0+IZIsrftidfChu9zBMWL4x4W2rIyX3XEYXq\nb25dNcgE0wmaSzIuplzYz55G0Z8abJ1UvJcOmR1wnRhT/yshIDM5SmRG5f16\n9cg+8XTGbFHJ3moYFMuEF/M5+2IjHzwcD7VBvaRHCbztslRVRZFt9GelnmPE\nU9PudXU87Akuc6XdqyDxo7cl6iAdG2s9pzUgsg/SI2lP6weJyRIX7Zjc2ccd\nbNy2Gs0RnNkb9Y2q9uL/EnEspdfjlX5Pd8hD5ldo5nfgyqIeoUg7LxzmyG0y\nYYLKxakAo5EEgXTyEzYFeuMtOdfrDQ0AY4yU7AtdK0DhagYpg5rQFHypyp0H\nMy6bLLSfePAYimX/ua3yvtYcXIWDNmx2wp5SeYz4hi9O74HBbnSHYEKIpL8I\nGCUE\r\n=X6wH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/density":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/tab-scroller":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.deb212de4.0_1588803592991_0.3150365461093587","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/tab-bar","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea08a0842d5f56299da32366f07f4287d46ba712","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.f83e00898.0.tgz","fileCount":37,"integrity":"sha512-IP0Pmbyh7JKEsEhAYIY0PTKjw876JsiLALUpK3EHhTX+1vXRxn4TA+fTgJWbcp3BBPtweIjQ/RYZSmTujQN1EA==","signatures":[{"sig":"MEQCIACNwApQvgFcJbYh8dwfpjmCXgTWYmCME4m3OxlxmFn5AiBVdCswNV9QGLXaDVDcdEHNdC/aTQETIZOvXPruymRm9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxeCRA9TVsSAnZWagAAE1gP/RltlEtJhpSBGshBpaMx\nEvrleUvHO24+CglG7D6jCD6ygTJdu7upqRM1MuOvAU4cn+vtbIiHPDlUfhV9\n0H1rybM9QJJ6oFoVAfF5jRhrgXLu817PCKVh2b4Plh5U1tMedeYM7Ds3VTKX\nrdAHIQuuA/rkrVGJrNCQ3nDgdGYEsx8rEvu/BKhdLGnm2P4ontY2XJYqW8mq\ni/hIczKA9dFmMIcc6cfDs/Qh5y416DQ852G65OAKFAN3GgRQRJqtO4k/scIX\nYttACv9ojGwjjl/s8UTMLDvVWJs2N2enMJl+OUUfOAXUru9kL78XBcJeTsRf\n8m44k3BNC9cxg0S83x/TIu19z3SF8WrBuz/ODOeBWizq9B4nmkawZmVetdA0\n5OLg22wBtwxiU85/Tbi9vFNG2hvsH1BX+VBCW7ebxcu397VXcHMlaYl2zABe\nIzBRFYQQx4TrnNW2aiNP/JVjcCMh4wVI+6CwaXF1wBothlV0VSsco2lKzo7m\nhytBRBVv+1DW6ONxg+FYPBCr86xyC7bEjd+sq8wwqLIWqUHXCA6chLPANegy\nQElBlTTR/UkUhcfDxkCA5on8YEhuzyR8eByZvKElTudR0VybR3h1l094q6xY\n3veUt9FlzL4WzU/gjw04w+PWOurZPcxYs+dV0697+15vnurlg98z5vHzXrvf\nEOAz\r\n=sAAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/density":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/tab-scroller":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.f83e00898.0_1588870237159_0.4909349770879794","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/tab-bar","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53e1062b60a6f2d8c0ce72c587ae625a36ae82da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.047e6b337.0.tgz","fileCount":37,"integrity":"sha512-iP4Kxea0QCZyM+NnqOtu2/X9LUi9XWMhads1ZtQrYr/x9dxM+LhuKthKTJGoyNTuHI6LIpwarqEu6KU80439ow==","signatures":[{"sig":"MEUCIQDi1RGbeS9h/JX4MtjUfyTV3+Uep7JgVoCf0I37rXTLWQIgNEsRJkoC8XO08bA3uM8AITR+Q3pY4HfE/5zMxk7VUdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadoCRA9TVsSAnZWagAAnSMP/28WVDikBU3XpRffwOfY\nSEOh0m9Or4tkQgMpkYNh6WP2sUIszwsG8N4cyLsI8cD/oAx52BuW+L2KEsWZ\nIk+1Q8cO5gas9CRZ+0kJOppsBJdMsNXUneQxO+fvhxm/OSkkivQXfVEXaEME\nbRn5kg5YjmMo2T7ZjDoTIR9oO3yWPGdduasQsDcq08XSl8GpdGucJ3Vy2LiZ\nY2G9Lzg1AJadLmy4iXcC0uxgz9XSW1hC6gpzFNGoJn888gnaQa8DTrbx+4lV\n/aGJM+OgC8oVIyRQuTk1wgzpJt9YURdYg/mTNOEOJNn3sThkRyi3BePX/uXA\nqGEJMBlxC7nApCiShF9Q3doR/hMd45pAXHv8K05PvO4uzWn5gDVQ7SWThDE1\nSDsBeGJp8gIRg9QmB2TQCndAMxA6kWhnfeMSpQmu9irnngGApQHCcn2WZ03e\nRX2m6R8TgOYH9A4gm9aVLD/FSDi1+gYFOwSYsBp1NB85mPzyuA2vTofjpePJ\nFiG+GL2hXynQILn1MMCMyxigqoKn4c8iLAnd3FjAo03PFvSTEnlJdrW+V1Ee\nkr1M5SDK1qPNxKl/8q4OnlFpZavFaotDR85kjrznVMNwSYVqN8YWApJAJDID\nysnFQJqZek/bZB+0zn72KaJPOH6ugfSGUR9ubHYQ4/LuLgQsyvccwl4mnvvy\nVOE8\r\n=ykD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/density":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/tab-scroller":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.047e6b337.0_1588963175590_0.4906343226455092","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/tab-bar","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a7fa5b649abf049a22e87135c39d13e0d3f98a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.119e21426.0.tgz","fileCount":37,"integrity":"sha512-84F2Ym7nScWc3osS2CPXeui7/r9wzmo4+RTZxLbC5M8dLCmifqOF0rZ3d4seT0xpUMOzHDd2LAP+6Dn3wzrMGQ==","signatures":[{"sig":"MEQCIDckR3gPzqo5Z2HhDb70en6Xs/5sr6fe9Yi6U9E5L83tAiAVFjzqY91JAOouldLRbYPplYrAAyj9BSpbVlhsTSCCFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb/PCRA9TVsSAnZWagAA6mkQAKLsR4VNo53G8QWZrW4p\n9pgUqb8tVJsUirB5BpquhArKbfbzSd8CcA+EwcsLLhzF6tXz7fBk1xgoYzlw\n9qfTzeJxWMQRBl7PwrS1ddBxlvp8LaDh7SkaHPqKfwzlkV9YG4ELL/15PF6H\ns43PoHJsaYPw9QpwG9ysEhYmS6X7j1P97hcdUa4Y70uxII+UbfiYnALa6vYl\nCqSv0gUE0GEVJd6a/YYrttjP+VmE2dMLRZ85hvGUsHNV1qOoEQSdNpHUJ5Xc\n42OnfdPT4jWyRxZdYSHfZdijB0BVLHLm+kohw9n45mllalimdvPhwQeYlVC/\n5KRmzvErE6mXBs8bu2nGSnX9iLZPhoSlLVm6eokL17UCnSG99f6DOMFrtENe\ny/jG2s1U5eCUsUWePcWOTjxwjsLEWqgfIIj+YQwCd1GYriHdNuRULVElBS93\nKUuqcfoWVB8Fh+lyTHx9TA53X3GnV3tVfbrvj0pNVGBOK6079THyC+56SC3Z\nnU7bd5zWJgCMgop9w/q7XSnLBzSIQdjAbJxvIYGzq+bcH60iJPQwxlsTaqJN\n/KZNNZXikDR2njJUluA9N2RTiB7NdYMAHvwqXckQ8AADwwyfDx/hpQQ54tlC\nlZABq3fxdOb5/9T+yEG0wc0re2tZ+5iw9vPAR0aeeVpMCVrlaQq4eBdyYpV1\n6RbL\r\n=4fKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/density":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/tab-scroller":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.119e21426.0_1588969423513_0.4706292779825785","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af16ea29c9071be27ba870d10ef2310334119a1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2f052d824.0.tgz","fileCount":37,"integrity":"sha512-+mzhaNBnYtDjq2QUVqwoWITqDFMSpQl6zq8L5wPsVcJejwtmE1RMJidD92FyY/g1/r4luSpCPXRkTXcIKuRVBg==","signatures":[{"sig":"MEUCICK5d4sIpoAGdEbiiWpb3aZbvRQKkTHIqKjFAg7vKKFkAiEAiIafkEuYN/bUKuOALjtEA0oJwnuZbR/Ej4VaXeeRIW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpZCRA9TVsSAnZWagAAwvUP/Aozz+pmZSjJT/kTuR0n\n5GL0wzdWX883qms4WbbZEq9jj8QKaDzmCIHbl1YkmdnCNw0LM3BQysAg9IuG\nPmvYPRcQWFF2n2BYP0EiZB2F3yMfB6oL8O91EpPKkAwjui7r8vwzrFrnZIe1\napjDSEdZLEIrRdZzXHfZI3rzCmXKmgq2/AvjPYeJWYUsO3jQJDHx81cPuQtq\nRLtQrsUajMIuj7oMIA5EBow8Wh/ReWsSOxfspTrFhBnA0vS7n0NAEZeHXM/e\n2kZC2ik0HazXHe17qvRIMVCn5jItAO6kZxH08kOWQU1QLM03gePMfu7j1gix\nEFn1VMIEh2qKWPwMg56vkRAhIegIwQuNvO9bguw3X4RmbDioWJgxxInRoJYY\ni/tq7KK1WG2AGpAo6t1zWG6Dqc9FxDVCCtLMt1RTZNzsf8rOvc+xgB4wvkXh\ntgvNU4BkXHKL4yZRm1AX3eJZRC651MisPj/kI5U8284EK8ZyDIIUNcM4x7Mm\nAAOabszZPeRA6P7AXhsRoQ4/2JYE11LlohLc95nYiuaXeCAtOqQwIbixUWJi\nRvfWrXEyElr45lQO9/jR/aDwtirOwoMk5D0XN0KEVCLTR9jYEZufURQ27Mq2\nws1u9utf4ip467gWTH+0CqSYBawd7Sw23iTJRoEcp2iVvvAxYk/XZX6dkbgi\nyDOk\r\n=W54y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/tab-scroller":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2f052d824.0_1588972120981_0.8513581854910308","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/tab-bar","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dea5c02508b672e36537ad8910afa2f0c96a37c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.e84444387.0.tgz","fileCount":37,"integrity":"sha512-z4Tc7svKmurQFfjQ18oSIPczCLPoobClHZMJe/43aO3ZQv5EcRWSr7h2Ni5Ha+pHDO7h0J9o5vPVq6P/xL60tg==","signatures":[{"sig":"MEQCIEg81DXLdDn4ZGt23LAiPIWusaHjnI3Pk8sv8O9imH3eAiAVbwoLOhaG1MM/Hd/FbjmaHEJQFJ+Kufmef4fb7kWGPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/9CRA9TVsSAnZWagAARuoP/RqrL2glRydjXcDpiN4t\nPBb03zpCr+2Bf9XzRMPimxVKXAlnrKrKHDl7gTALNtAQ0GSJpWe0mM+QkVMv\n6ZW5jFDiTmIjGzwVxawa5qmwqLV7I3y6q3I+SPVa7cTo5rmIU4DagZN2ZdS+\nwkqaYFgYno8uqyhqdeJDxQfaQZ0XlAN832EtbjEDNJAO8RUOUuiRIgfr4yIz\nhaPH/r60CX1FcC+DRLVmFndqM683TnVzEBTNp7R232pj0OEPoAJDLa+maLf1\npLQNrJocbbBrMxyGfQAczk08fpQzXoxvb+lPCNd7rzWAKxhJhEu5qz2bdMB/\n92XKzjeNBW80WPEyOVnD91TZVtM2Z2D2qLB1+rEaW557XlHeVQiYtzGU+2GR\nhUNgr6Ey1680ZMQrFcPjCp39IZxwJx3zlkmRDVccjhBegCFQIcBLoAH/94F0\nxZi0ssQ7dUuY4QpGq4rOa+0M0IdQRC0hLOEFymSfoE5kHScF0TqfM5jA2ozp\nj87gvkRG4N/GOQrc5hhMjmn7VbzXjfWN1waLsseQy6gBvma3f9iHEmhSBN/r\nIE+w14uMlA29n0uVReux3rST/VjRZhZ8FijEe8/jnSsMHgjL32m16spky7ry\njQlyEOlZOd0lLYnwCQ70y86LnJ3EUFIqYP/wLwXl3prMwiDIb/2vTCKGrTsn\nUQVO\r\n=dOmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/density":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/tab-scroller":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.e84444387.0_1588973565088_0.8013723955762924","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/tab-bar","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61aa60579312b8d86f9a4547631782008bfe6c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.893eb1876.0.tgz","fileCount":37,"integrity":"sha512-NzsOCjunPDrcuE5YGVfoZ2Fa049yNSxArgS2jT5lzcQOYYhAEm30peUPh4ffyAqpu5WNJQGHhQwlf4UVL6L3tQ==","signatures":[{"sig":"MEUCIFxRNbMlLFYlIB2apQ7BeVUSu2lysUvQguMAXstDkmJyAiEA9E+h747n6zSR04ppI4Q3eOD+LrmjE9XNC12TrxYBm5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV3FCRA9TVsSAnZWagAA31AP/2QQYYoWx3efIwVAqorQ\nMtvYtdDn4VkaxhNY+TS3hF0Zo7T5PAbPDuw3CRhKYtjASIV4sG6mcCCp3LbK\nIR5ucM/45WtzlHq7UfjICngovVRJ7Z+2+ecGy+ndjow+ew/8VEG04dV9HzGG\n8AW0QkYliHCsn8RMHI/tMgx0w90wL8GRGSeyslVV/ayBSylPJxWTqHwucZlK\no9s0V1tDmgl6RAvdwE18d679bukBaa4q+le0oPsaGEi+81L7DsNyYJW1+EWG\nBuPxCnlfiUZZo723VERimsUMex+sE5u+eEjf0Ey2myddjQCKRGvyowPGjxnx\n0/pZOHSoLbC+ShZXjovlLwR2gKw0cr6HMLhPpW3NFaGdaLMuUDBMtItZKAye\nlQutPaJ6XXVvt6I+1JFTXui80dlD9X0IZgKNbKZ/9WolQazy+vBFND2JAK4X\nxhswLUQ4NBfr+Sn95dzDUZ2WiOzMKVaHoSNBcnUxEtKbvKVCYOjt2Kk/Dr0z\n31hVxr6O1rdaLmVVE/9QlV2zdh6xY6eyK0ol+LkdMa5rUMzVOxONDc21PcIQ\ntYwdZZlyNJZhBekc1RPxiSgbsluiLcU8F+3xXYiDDQL5W3IsYdnOs36lD4+0\nP1+XHJvq9/vMiDGUYTW9oa7mK5nQ6MrsrXVYJeK5NQAz5p7GB6dhlr+kmz7v\n7EPF\r\n=DWF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/density":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/tab-scroller":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.893eb1876.0_1589206468665_0.05337926021943029","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f954506c9c7910cf24790b1df7304f0ed3fdc6c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a5aeb3001.0.tgz","fileCount":37,"integrity":"sha512-zfvFvI+OQC9yU1bP03Jq/N3gFVA9PVyCaxYQGKR9lIIX4/3K1/7SFokCQPafwUrU/M6yIuTtcV00UmNot8VB3Q==","signatures":[{"sig":"MEUCIFXPjIA2bqkIZ1GxfkC5bA+mnvP1iApFZTqENZCJL6lpAiEA+FRkyMZ90bZGhXVkhUYimMn69pjGCqw7slH5kEghjt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWGNCRA9TVsSAnZWagAASAIQAJDxZUvU7J9GdYv7rqvv\nzfDrnpAKRBjyJSQQv/NXps4PebSQJl8mfza0FQhHn7aTjD73HmqaHck5dCLU\nmYS4SRH+KcHcqRbAFxU/60NDHizJssg9pXcwAJnxbWc5i8Y8TH14YxDzF8Lb\nYTsHDxsKwZEcVS73yM1lzXK6eswUyJ68joTe94gXNYu6Xid26DqV/TJlttDX\nFJg3tUwXWOLXC/eO2Cre9jNLY/fKp509RqJK3hZSox5F+6+a4nQz5fJxHEEy\nb8grILxWsuhAMhywVCdk0uddadl0+2WiI6DkAenL+MW/IMi52TBcwTe+xfTI\nd6rLhFkuNm+zVELUZGziT6Qs3hLvs9vmeaPw5hF4nV5lFcGz5XUXxysFZ3hq\nehOSj+IhNGLdAutcJ2D8uP7evFu8NEZIrfCeewJcDHwDLbKA8tFDfnHJ0wrb\n1Z/T+6D9Ixd9fK/0GTcZRSauzBrN/kW9Bjy6lWS14CGKSnSsXNXfKeYSciP+\nQbECPO84yCmexqCDVN3/ophItIvYvcgA6xw1s4mVzXJwUSN5ddJAyHF2CXbJ\nYNbfoofTLxPDy3/Pr6cIQjAqIymqAqswonI8Ji3hBUMPk5Kg094399YVkZO7\nUv83uUEpGmav5cpMUdipcMcZDuk1v2LzynAEjVYrsWqhh6e1TgDUsCJjuuas\nrCBh\r\n=+wBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/density":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/tab-scroller":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a5aeb3001.0_1589207436968_0.768990082616374","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/tab-bar","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b8301a873e43155907def979002baa96b426c2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.610c68d97.0.tgz","fileCount":37,"integrity":"sha512-6umci9WI/bKdgBqtE9NifkXAeTMBUqClYOfXaYA5J6d5o4o5E58mRVwgZnCzcKp91Ky6IXRrLGSsaaZwE76tqg==","signatures":[{"sig":"MEUCIQDuSGppEL+hC65wM6dlvK8KsJFpdWLelbB9bqwUVyfgjwIgVJx07I6sTKyOFVcmR7TnkJJwHEZi4s+l9WoHxetoeQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaimCRA9TVsSAnZWagAAutAQAKK6g9bBcY40JtaqL6fa\nf1GHPGRKrv5y+/KL7UEak60GWUaEZbMnmUtOEIIs0eKDKEdLjuKlkDx+C2T0\nBMxxNFQYohsJ7RyJbAOr/sxH7os7M7/knagn2zl31FNCuwuiFmgIEuYoMccE\n2iqncpUjQMqGnVFWexzwW1FWd9iyTMXqK04wBG1u4c2T+TeSUXI+HJ1Rlku6\n8jO7SvTQAvotaWRX6X22or82rJCP+phAnAKUG4iZg7rK99TTpqshVX4MzvDi\ny63C5EDxyIm69cSnkqAP1HjsiOxOfodkRe7zfxiiNCiPxCJ2NS2Jy733JYEg\nt06T/74q8WzUj38wPFkhdcRMBNQB/CfKWBpo9elWPA05VjBQ7wDZzvAChEKB\nnzlEuzCmC9jpeqR/DupCgYa+VsuhQ+GBUAU3UCqaTuFHI5BAxH03s+eFzZg6\nVNV17z8RugL18xu0Y53LrIOJyCZDW/w4nzSTHT+cY2EJkDIL4O19PMMDv/0F\n3R/0+VmJ4kNYK81Aj8N7b7xhvO6VTyarZoA8yAy7/JiXOdGChhlNp7OmW155\nUO38lDCvs0HoSq26ge9neJujudhFf92wjQhmFplmE9J+pACoO5PNU4SiiCUo\nNHHanRY4kLkuSy8DP3LklyygSRqz2N80sJkQeern9af3tpNH19LbUXLLJEZ/\njQnG\r\n=C8zL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/density":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/tab-scroller":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.610c68d97.0_1589225638192_0.14845560330977325","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd68a98a056faf3f3929a35368b7000dee368fe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ed52af767.0.tgz","fileCount":37,"integrity":"sha512-zJCGbbLcM0ucLVfMQTeC2RgLAAlPZgW5LeGOxeRXyKThj2GlKnxsMCtJnEwCvcShiQn1OAWvf+2a3Qi3aUygrw==","signatures":[{"sig":"MEUCIEx2EVOJ16pU2o6gt1H3APUBmVk24XfQV31/RV3nAgT3AiEAubS/C9+9CPPqcehHJuHyiSb+6kKbB0eGhrZGAknE8jQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVsCRA9TVsSAnZWagAAfxkP/jZzkQ1/UYfWVnHH5djZ\nPFR49KFcSQCwqicssF+SUAu4CSh8mlDN0Gi+DYwc6dQy3MbzCdsbX7ARErth\n77YKQ7KsmzkGarPIhSEEdyYBW7vY/irGCj8Jqq84letIpP91C9M6LDZDcr6S\n6OsWQV4f9szToFZQUS+1SVk8uRRKCaD5QQL8vv1sv5iGl6RxHylpgY969YJ6\nyV0dq+bxty1H4wJTo8QLS+hHqvb//y9TN7Lj1vZBso+a15u5PJeRMTwOy0Fj\naZBCinpS4inLD3xfNY+sDtLxkXCyr2110YkN53QR1IbctA9a2Zpn46avxMsp\n71KJFSUzwdA/pU8xM5YZ68ZhBVRo7gog+Y6Dve1qDorDJGp6rJ/VfRQtddEv\nzj7wnv4oz4otv3uVZvhrTqTaXwOGQzMA4qxwIY/Vy2dPhrbVRID8wX8Btr84\nHHwcqSnhGEfzKkaYPq1nF2FGroktj5TZGouOxf5L7YdIZoAHihKJNnajAZsl\ng7BBm8C8WMAc3ssQHWxo/vRm7/U11hrZUoyaC8dViFmVeL6560r1VXFVyoZE\nXCJxH+0h9+mEhE03P/H8WoPDT7/Hk03nyGrsZkWY2pm3W1iJH1yYxoRDQQcK\nqToygLMpLL/kYyRTYGYDLZU44Gecjrx57spUQgANZMx5HO9ur5fkfXclaFPs\n1ND5\r\n=++Tu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/density":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/tab-scroller":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ed52af767.0_1589228908042_0.2689309416949692","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/tab-bar","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fada70e6f12cc88bd081b37ebed621586312b8c0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.058cfd23c.0.tgz","fileCount":37,"integrity":"sha512-g+MpnjRuJKVy6lkh/CQlS5QH5HBC3ZnMZqK9jiHnH+GJx8rPjU+zeHtvo3ldf+tohQlMy10nCfjMmgF/7eQt7Q==","signatures":[{"sig":"MEUCIG4kEF2sUfIr92bmI8C/rxAGEvTGnCCvPcSFNciE/s6yAiEArv80s4bVaWQ24IUkpHEGkMsYG7eJrtBFkJHdlEiAJH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucL6CRA9TVsSAnZWagAAxjcP/iS+Qz8kcUkJi6zV9wbI\nvk9i9+wxhbr1KVEyXvXENhhzl7p1WKxqAbT1ofTdykh1lOY8+qAaE0BAAaEH\nTRP/k4x0/hHEt4YRiwERtInlV9n4R8HImogm7DpY8rtbe4RstGwTKqyJUohU\neJ+JcahjOcrapdoyS4qAOHWlLuOEZLUp9WFeGyvsvJN/Usaze9hUkHlvajIf\n3ooj1RrWjczX+Dhjcff7QnWeh9oqUcRx1enLfmBcAwuX2Gs1bLETNU787Xpy\nZPQ2IPJ2Q5uQ2nylqEjdJ7Vu8Ku9S8u0GIlJGVNXv108ebz7NopcD6pQAcww\nhgOryu5Lf4KDcnayxVgiQWtkgNn44u09nNqY1c1sDbFDUOdo5ZcBAkBH0HYq\nKj3MF6dp7T+mROxpv62bh+RbNttt76JJSUAyYNScHFUDk6r8kQyjKlxr4m8e\nYMXKhl9XFROSssGpR0/1dsh7pGLpShziqfveDw5FucywUUZXLlzyllQJPZS1\nOS14lWgQQUXwA1u3kLxerAMNu7yFKZ8kifirR9RARh+W/nslj76VNt9Iw1Xb\nV7WrolCH284MkckxxGYYcRV8yLU9a1f2AKi5bxg0bEzT22Q7EKW6rUK8Ki1C\nldpHlTeRBHgcoOSX1KiQXDgYqxAepVB7TSXE5k2vKLZqasbv1Ihls8KBmFXQ\nbvzf\r\n=pOnm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/density":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/tab-scroller":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.058cfd23c.0_1589232377887_0.5587495139044913","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/tab-bar","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520a4708aa484e0bae48eda3f03ea4b882b2b688","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.0a371b4fe.0.tgz","fileCount":37,"integrity":"sha512-XhCiN/2s5DmbIcii/I/j7YFbeO/+dju+tf+DJq9LMM3mza8SRrUoTSxJnNzOIDZYIzOBm0wCgdOWiJmk/WgC/Q==","signatures":[{"sig":"MEUCIDyTUOVRf2HmU9vIIUCR11AUmiB7cvtJy1PiKkqzu7vkAiEA7TWH0SLvcYm/OZkFqO06tufG81v8VxElem9TyspZhQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy8GCRA9TVsSAnZWagAAOF8P/21HiKZ1JM1ctMpQsZea\ngIqqEhgCWxKqn64rYAIctT/vzXfsS/fMzLynNpsYUZXuifNtEUSBRb9H5Zu+\nmFVAdex7bXkk0oK1/rS+/upUpoixMtgB4gihTHL4s1De57Pg3LdVkct+cYbQ\nY1iacSZfmZkuHkdrY01APrmL0Hrw8X0Nsp88h0rvOEBt7NzSor90pUGIqU33\nInxY+B/gHYKSDn8nYfx7jYY+hI8wmShkDREX5WcDxnU6S5igvZUV1yWPosXP\nvpDxyfYs8BexgQUEmbUf5dJKRYGFJX9Aspux2jnUAn7ZseXmbD1OvFkkoADQ\nPzvAs+k8f1zXYBLVzP10wx6Sx8vgnA1d9NkhI/c18/um6wLjQG6Y0HdrNzU3\nSy8iUI8vhG9+sHOjKTQF4RwKdyQmhpjh+omxyRwzucPHDH05mX+1fyKocbtW\ncasq9CaNIYRPK5PW5Us0DG1sVoSvfpIF0fNUa2CZrgFw8So/eUEP4TWPo5MU\n7BD2CGl0zrYCU/ITFFO53PZHCRYVm3uwgDznPirZteGz4eP6PYX4C/5uBzuF\n8rC+VqDmcgaPIAhaViSnjDiazq+weqGL8v8XT71yCPE2TLYnouM/HKA1PNLN\ngoOQf0JXCWMrAHJiH+CJ6SHLtHn8UEzwHjT9esffyYZNXDr7MhjMp44ne/Co\n5RpB\r\n=zOVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/density":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/tab-scroller":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.0a371b4fe.0_1589325573559_0.34950031233458256","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75b02a6f002999a964bf92c857c581d27fdf15e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2139200b3.0.tgz","fileCount":37,"integrity":"sha512-JxH5nPhsSmM506/tvdelXMRGFU0RE5type8Xhf+09cXGqLRdwmdAJNJJ/HxwHTJVsDB6wBsN+ME4yH7RLDIWjQ==","signatures":[{"sig":"MEQCIHnxEOT9RlB5KDBjOXkWZfHVC3b7Fp2ih62yZtZCEug+AiBkMhyJ5KjMt1a+6T9vmA54zn4aAqEKh8Tr69wWPxmbKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAjECRA9TVsSAnZWagAALOYQAJlAMdnbUAldjhhUW/JZ\nX6hCj8YWkcLy8aMgvkgRVtQ6SFqFxGfJcxBEq1dSP9j5i2ATZu1JVi432b6k\nJ8Tdc7knVkzwVA7s/72lPll9Hn3KYNUBUGEe0h2i7GqH/u86tXl7zUGWu4Wl\nWDq5fQtoECpA1vD7FYexecyjq1QyEUlGKXXbmJw5DVMcEqGu+LmcOdPg2vnc\nue6RrRku2Fewqn5HzJ9Vd3y5QHgjdt5qAiylg7LkLumOLzl+Zbstd1cNXaM7\nu5rCzzTN1TzcvHUok4kr7AnJ2MBQoWk2Hd9xegoHzn9L/HBwHQCwQ2K2XMS9\ng5dmcBalmlRdZNUon1sn2bu7lsRtykLefA0C9PpL2xqtu2ALSCkQ9p7me7Ho\nlxQjK4UbSoLLTVk0UEykIXqED5LTR2PF3wKRFeJtbn2z1Q15y4KZgKrznHA/\nT/Ce5kJ/tXPLmW7mShq8oK9tKnUnVxLp3TSykiClJ6xNuzV1S6KOImUqnX4b\nqgVMH7o7mzAtxyTufWYPZR7Y+yOb34Vj9geMaH56cG0bYlYiWqx2xRlTiIQf\nMyIQweoTfa7w6sQMj5I3bJkqyjMKZSbPywF1Y6xh2VJcTqRP7mUH60bXYoEn\nw3jPahkmTj1k1vwUxli2v0meJkiuoEEggOMUKV2gPn9BVT9yMe+jo58VX0xo\nUwfe\r\n=4f/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/density":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/tab-scroller":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2139200b3.0_1589381316392_0.025571744500058058","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea4df9f8573c18fcd85f370c31703b55ee1ce14","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.744d751a0.0.tgz","fileCount":37,"integrity":"sha512-71pOscrs4BK0APCan66mvW8tYtVjupEjYuGr7ilC1rbePdQcosyrbvlJJPrR2fVOOL70ai229lkVkbeqmMtPbQ==","signatures":[{"sig":"MEQCIEJPUbIN4Q0uVHZdxcm5qy8q5A/C2bAHI6d6QdfLO/tAAiByHyrTsYtMPIEghOxH+YKOLkFxU6TT1fTjbWXyFRLxXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMyPCRA9TVsSAnZWagAAI6cQAItXDFdzdYdzaVMCH9te\n+7yOBjppFErb+6rGtoQnWY47Itjr/HVJbxG8/YEvcpEStyUCnSrim0ohGvv0\nMCHMPXj2KfjthDPpe+m9tcXlSETN9oX7QqaP9CaHkHKa2XWd8H9f8r05aYMD\namayQb9mHIHfSuWIhUk3VRb9TZvRyRpIgj7Owr7lVzp7/xC9OjrFlmzAUR+4\nR704SmZRibMLpBlvD7mq68bpyII4CCXoSuGYn4Knj6H8/pnI0CRUJxwRSBlN\nizXHh/xwvPCuwzbeUcLTc3mHapL4q9zqw3L48xHcljmc+RJkPDZkjrKKsU5o\nbKxmX+NZ+sjSrCzsQgFwdRUR3omgfq9UY6N4PUWhs2W3SD7AF28uK0mn7SeO\nsphXvbWH7uMRryxhOlsm4TjXvMJt2ezFO9aCNKqY3ll2TSWUTgWi6tRhwFmW\nBq1xjai7hJLcRVWa9+r8ZRfPk3Gltzy8PTzQoXSp9Wprl+Y2VWL8xEcmO+Zi\n0F9S00IclghBXI/Q9zJ7sn8Za8Xy5P9KVKX7/q8X41PldP0AZZTXyqGrWyFe\nUegvVUNCU+/+gkICOsl3N2SB9tNG9CveUvKCPzmXyxeY/WFXZHqhUePR6JCl\nPVSZJegeB21nEazqBJXCNfXL8tcoaP9gFcbn7GyxWJz7BPSam1F3tmVxviAT\nJkaE\r\n=AdOR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/density":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/tab-scroller":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.744d751a0.0_1589431439445_0.6169364187609891","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b099e7d89bb4bdfd42c18e184762f6ce460cd6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ad0c0c103.0.tgz","fileCount":37,"integrity":"sha512-v/dkbH1CCAf3TtHADAtZqEdE/d+vNDyMDNvFvlUxCyKswiZ5r1KJ3ZF73KJAE5loSgSHqWGX4nRz4gnJvN5xOA==","signatures":[{"sig":"MEQCIBmxzIyZgXypGXs4u9RKGsF0JvOzJH5OBHAgFsRRO/tjAiBa3UfHDX17u7Q2RAne/WkMOtkTahszHaihkm6eiwORCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVtTCRA9TVsSAnZWagAAPjwP/jwJFS2G7NMr69Eytq6H\nCP4PXy48E+oDBTK0R6pQRxuwjBpknnTdcMGdjtWPEtherHcfc125/aTTbneY\nwR48lqiRuMOp2Oyd/DoZxnLPPOIpp7t4j8WjGgl6U4VRYx9t0ukVYmz3wPgg\nBAF79QDH0jh2LOYPbDqG9BnMOa0/0p4+WnEk+L/tZZmhGYAb5vbECM57ioPO\ncgNVRLmuVaAvhDUPFCS7udgJxvkz7UXHT7+U77LJcxE8aGUdmAzpXIlwv29V\npRBXmSG2Ccl4EEbUN/GTTmiGpBQqqSQt8ov6HNEYDOY5uVaihWs6ohLdiXr5\nNKQbQCTbRJiFO4Nq6cs7jf+jAvOh2lzkwahtNZBYXGQ1Z7iLNa3mEUc9FpXO\nmzo9vcgRax6IUwdwj6Ka5p1wQKosQU9FBqDg0p0b4SJk1wrzHzMiymzXuMly\nFu+RGx4NO1IrBCWgNhrMi7Z8iGj5IdPjS4UZO8bA7strgMp4gHBAjMRBie8l\nLJYMCUqtPBrFIGEYSBOAsRgd3/i06zEywPoLQdWl5SQFmaD5+2MKEQhtJQOX\np8Sy2Ry0OsUIDruXdcHz+xkrQrSr9Rvuy3JXloxJVsHMXefzoMsyUVQP4uS3\n3GKAiOyvzok5b6iz7bGC9fwkGMqOD/Ia+NCccRkXz8zUsxDzgrLTneiPOHG4\n5utU\r\n=UAr3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/density":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/tab-scroller":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ad0c0c103.0_1589467986852_0.36486749561600473","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0f10255bcda536b8defc204b86eb419074995a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":37,"integrity":"sha512-4HC4rcTpPughWmGThQQLU+vbPpC1JcrDw80xXtKFDkTXb5ysR0aQuQe6A5aC+nAT8zeeukQv+zxJTFcuvi5dwg==","signatures":[{"sig":"MEYCIQD3QnxRleR/UEeRPbPRSAd4cwpnJzKjBfz9VtOCN7YyOwIhALZQDjKIdDqZJlQ2xXaxhIw+nHxO9Zka12Sy0ACuR4Ei","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvvCRA9TVsSAnZWagAADewP/0qtShLgcriqqZFURS7u\nGzwM4YHpQTOdRc9y+LeseJK4PWv1qcywJa52Aos5MP5vZ1+r9C8sRgSc0tDP\neo965GTleTbDtzdbkJnfQezsnQBvf3laOuj10uG2aZy1dkYUybOC1lO8fqg2\nrH4yFnZI4n4kX65HgKY7OT/Y0MeGfmdfuI9yMpF5/QNY8JQf76U8r9BRfthv\nPV0cX5oXUn3LsDTJMCpubvPYRhGK/iH/ew50fbBg3TrZlKrQ3EQeiue88rTE\ndZOGfwE/TUm375ceOdK4+TlF6p2Rh2Q/BZGK6yisBxNiIVcj8bqBN54ApUoE\nT86/2dmH51w17kBi+OhUHRT2gPQVi4dZlC/tsSENePTxNe0LeCiVPIYh5w4B\n1wY9vvjPBYT/7Vl4rch2vO8QxI176Klff5bmlevbft0g895kdSQCN9ZIHeiv\n0iwEKObYw5k+lvVaqXTXPFE/hj6/cA8jPelJak2jvw/qufAm3mr+lPSCINzJ\nRwDNKGI5bwC8gdozHvxRIC8ao3s18DTv2Sozld1ciSZciVwDgKPJnsf2KnhE\n5suFsKs9eh3O5QA3GATvI6r9Vtb6uSBr/ICcbK524JwriimLK1F3hfqJRTTF\nayIf5it62/7XCTF6Wxv/WpFZBLZ4V0yK+Nxy2DZFB6x3tZWKkkFrLQ4HRAGX\nbs7K\r\n=WFNb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/density":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/tab-scroller":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.fd8f8f2b7.0_1589824494658_0.27331721662161534","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/tab-bar","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd110331483305ac44ac11d83600b93572e12777","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.730920fbb.0.tgz","fileCount":37,"integrity":"sha512-22NgJfswcVdd6gO58HgfcluoQi/qF5LQiyIm2d11ruSrHxlojuHooiOhPf+1z22/lTQmzt9Q4tiyTX1+1ER5/g==","signatures":[{"sig":"MEUCIQDe+Zl3JqDo1KWEY0PY2b0ezmdTKFEXajcI+mMXKDxruQIgMcAb4mTpX4OSZ4DV5A4JpN/L39TCVH+YVtrBF0op9u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuX4CRA9TVsSAnZWagAAsf8QAIlr4ClqK4Acx3ejyJb0\nRb/IVewWjVmox/AxSgwe3QBBB03YJwiWUryUdv52pNyDTB9zFfwQJmchLVYF\nTtC3JUcPog1zXm/S9pqCWYDuMg5xZbuBxRdNH8ifwqCwVbmaEUR+5rCKdpQY\njhcLCqB1JP/pT7HT9ElRg+8s4/BtvOnYqzd3X10AOj8qDeoWbnLlRweuJqXD\nfAto27ETbrjyGYKCEyVXGKgOMRfIUBFAIgag5Hw7AFEFlm6VIzk/HEFHBRnV\ngStuzL1Kh18IWrVeMzqdBn/gwsR0ueYZI6nK9wbuhvmGqTqSH3bxqb/IYwY1\nqmQCU0Yjx7hQ+CCwCB+O0PilrNNSBTbdwRpTcqFcgBgUvI8q1fEjb3ccYdbL\ncMbx4nFF0kZS5lACMtUR0rFFSxP7p1UGaY6B5/dPPzuwxUbumygpicIi/UcB\n9duo0To0Az2YwZWgPnBmUrET/vS42MDog59i0dV5wIzxnPMcItxRdQcnXH0l\nw4sGml4SNFoPypkJ/kOi7fFPT3zvkonNNQAQ2ludOFC9oWFScGds53izR0Z4\nLo15+OELuWZItSpXs9+6QMAuJH3wCC+ERj9RD5cHOaSYch4QEB1DA+54rj97\nDsoGsrmx46iOf/breHOKYaCqMKF2zsX4yXsgUDpfwSeYm97c/SQEGel7p/zW\n3Gyj\r\n=4dzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/density":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/tab-scroller":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.730920fbb.0_1589831159999_0.7834875580899405","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/tab-bar","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3049365c57d5a4f2d0254e91db4f41358ee0e785","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.bcdad99bb.0.tgz","fileCount":37,"integrity":"sha512-64aO8F0xnYBecmobsIWbTApiCcAmLoCUFKTZCjiQG9C1YnLlaU4+TaNKnw2UDs5NyppRnFpjexivuSeurs0JYQ==","signatures":[{"sig":"MEUCIQDAjS/oMDmf7Xl1OFNMegGhWxy1xCAE7hFMqxc42vN0HwIgLPkkQ43gbWwQJCcKkCdhyBN/cH5tEB/08v9tKAf6fcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1A3CRA9TVsSAnZWagAANWgP/2sluLfJBsgToOmG2Wtx\nuN/kcksOiF4j2PScs0oonDWzbfSL1awmq0KOOCg1HyD7jFTZt7Dr1DgKV/+L\num91egKWkXi520nUIN9o3BQhba74uCKNfg5xZMBh8ErKpWGZ873kBJaTLssk\nefBahskjIQHUtG7porMYmzaX0WHN+LOeWooT/mjh9B8mWMTA25R6v+89jG36\nL6nBDxuwFtjF9MQtHzYK4PJ/uqELiktuTf1J7lbTea06jzxkHYWFWCtOgDZk\n2UiU5T0c32RHjdp26eoBzFVn/UovCl/n/ge1QMZYT8rj6UiCzs7hPWNf94Um\nR0rzxd1QSN9hyRdMi3sWx/8FyhjcPKgHEldyym1f1+rJm8bLXRSrcTDEaYB8\n2Zb1EQ8fiCdqn3BtMpCl+1aXe3DHp+RJILxnU3kOq00eSyUJbfFRR5OGmML2\nSyLznPTF1H68F+KHrb15inFtiK0xBP+gQXNeNDVnHxOODQkMIXrlo75Qpof4\nB0f2m4wJm4vN/1mDMhkoawPXobSk1/qb5pQp2bF7z7IsrxDmvw12IFrjbW+l\nkrvmj89WA1N9anU8A5dfWJ6U2Ix+iWHV5O7rpqTGr3kV2bQgccVneSYxyXgl\newPxLMsWo1RZnIIw8ChGJyuIqSaUPQhsF7ymL9ylP9u2CRnpRNRV4TZMbmqN\nFqPR\r\n=nxo+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/density":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/tab-scroller":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.bcdad99bb.0_1589858358673_0.09484264262173592","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c9c660448100b383ff6a77aa9a212a0fcaa44d2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4497b86ed.0.tgz","fileCount":37,"integrity":"sha512-CKX5L7MslrbrZPl+3wc14yO2YiZGYTB2yVZVHaAKZQhR9zwgrcFV0h5o0E/B1RZCsX/V8H08NKrU8eaeAJ6tpA==","signatures":[{"sig":"MEUCIQC14luc3e/rQbrQCI4CwCSoN0H4Jcaz0b7Geq2opFSrwgIgS+obLK9n6CgP7SCFU+woaZqCIIEi5YjQsHrInG9D0Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fcCRA9TVsSAnZWagAAipkQAKQYqbb+PfW0K6KuzIYB\nZjTNZxpeURqGRyUHxKjd7uSxLL/8C9m6WUsFif1ivHkhrZJMwkRqpA9efq79\n3odyOS1iUDC9Hz4tXgw+2kDm/4xKraEpjmEtZLJBRvFBdGhCJe6/tguRb6OV\nMi9UCyBQSw3LXm4Q/pfhrw2Ub63yAI+2k6xTzPu2ikR7t8H/JL+/IfjebpMv\n7ZVA8sP8Jx7+oxCcxT1Ogj2uyBNP3lOS+3uWqRHhqXRuxy4HJgCUpbHesiBz\nZh3pI1keRHh6iKecASfHhwUugEfNxctWLyZZyy0nIohj8mdgwbKsR2z2E7YI\nIb2YXnC06KO7daT8ZApKB8QahCrxE6CGsuhUMkCL1K/vgD7Hj/+k7iqqFHj8\nyQ8kXTGzm6X895nBkQE0XxjVkOyQG/zN87oc4AvkqJ3p/+fArMWdOH6yTIvI\nEUchgVbNWA0geiqfoqpLi7AfNmgbvaFZaGf8GK2sVxzMtkY1k+OHW1AfSe1b\niguXC9FtSSBGNZ68JS9TLFOaophz3alVGd0bKoQAVOK62aI1vnfpA9A+4Qne\nZKKG5NWDBXhvZODAy6BSdyphidMxXq2yO+qxsRE5FSd+O+6gMPzCOKf81/F0\nSe0ZxjyKjCX6K/JRhQDey6Ty8ZuKxu5gkArn8OmsBf5+bPJhKLBsnLnMAOjy\nSaM7\r\n=etDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/density":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/tab-scroller":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4497b86ed.0_1589860315913_0.390495981098514","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80562237f7015026d3c42b944bf3af7d183b1e5d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2e60575da.0.tgz","fileCount":37,"integrity":"sha512-9o2JL6LuacsZbI94IrFvbTsbhTdSOn7NwFdrMtrPFs+/+ZGzCOT/NPpUe80geDBMwfw7Cjhm5HEwbFMJ4TnujA==","signatures":[{"sig":"MEUCIQDWut1ixdJ30hUD6NhoNw5k/9kXjRaSkHk1OXNafToRGgIgSVGQkzI74wMgDFj94AezohgLBSXdFQH5ealyJdigF3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAT7CRA9TVsSAnZWagAAkswQAJmPfznK8mRa0lvg8AsS\n9W4/RFgvd1uQYYakGWukXUierLmU/hpdrSLkHfrsR3dpe0+2tfZQWBIbqNHb\nFDrVpQcytAkMJQgo0C1SjGD3UaIGJbc/A/Bb3+d1cF6fB3mkMewRhmmwxALM\nGcOsVe+uAnLpxAskTqwvMEivxQ+jqF+tOZ/kJ/5H6Zi6Tr6vnDrR1QYXQlKG\nNGHX5NY2O8uHYO99FFnj84k9x4lKxKX8PIl0uIv3ysTUPJ7HrhC9xuUTPKcu\nuhsm1GhSO4b9YLFmGW1VlYSdAfN+US7G8kmeAkgelxTe39T8ZxRpu8b2jQy6\nMpPZjVo1VKFV73IN7dhLmwLhG4iy59ws8GKYfQxeNK2XC1GpvXlbRk3XuXhr\nETeKYk0Ehm3sDsO52mhqfSEhatcsZPEPqJYLUcoBZmWUjDXPgHOzhyZu+aig\nekvJKj75wSkzZU7OeogdYGfacVPRGy6hZaf6j5uFePfMSwiS6oHL3wJO7lHa\noS3GzQAsyO/ZMzaRgEKEu94kRRYZGGCPtsbY/c/OKdCbcZod3jigQs9nJW92\nGob7oV7Wj3msl94skaHaVn/N341nA92fZmgjkZcR8lpnhcS5UeWEFinp1yLW\nf29tFyesLyca+ZKc8QUYU6BDC4502GjCHPphcw68anPfS1Ne4AuRKuG01xwx\n5dVT\r\n=kVVz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/density":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/tab-scroller":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2e60575da.0_1589904635308_0.2136702768238523","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/tab-bar","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"996f6eddbc51fc77cfbe411d66e153ebe3ae253d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.e3eacefcc.0.tgz","fileCount":37,"integrity":"sha512-C5s+HExf5VvWOm0oQHF9i9dXsbg79X8aqQXKd7IaljTKzgKebfnikhbMPuRCHl2dUEbK7N7ReuC8e3eK4PApAA==","signatures":[{"sig":"MEQCIETYlJbg8jDxoZYDJqdmuAQx+6D+nzG6+2XGYYKRNnq0AiAAn5zo+KJrH+9DfBjx4nDvzxESv+NgdHHkawsV39xj4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBnUCRA9TVsSAnZWagAAbMgQAJ/M5o/ge32sS8TCrpqa\nSqiqCA3o2JZ6wmVZOHg91rvBsSbvKIqW+VOHuNpmXtSGjIm3JjgYLgTcMsi7\nELv0GiNG08x6/OvWPaxsSZe7VeS/YbM03ZuRqwXLBNxSa8c/RA/T8NG1KZQA\nqZOYynXGMAleHQaa477D/Km88iylJ119+CpmBja2pyvZq0Fs6oW7I6Q+FLCt\no2E+4BH6nO3ToU73PDc5buS2vrh0xLXjl2jWpgJR9nBYFCJKeGAujdRNQ+GU\nBs3rKNmGX4vq7jrj28M5CeIKWbSQ/tmCHbzDmoElKlYJxoPnGGE4ruDp9/3G\nQgNLOBLPKUCYjKkLB9Zv2AHlbXzV6PvyCz7NHRtxjcA562Tj1sz8QziTcK7U\n0ocf4XWAn3eWhhuCIzwuIMEtHf1OGbqznBtg7AUOxXNlaRnjT+09RHL2Negn\na3PfH7/KOz6WHq4xS3qZRscjEOkWIgL28FhLwXBTpeON/bikiug57jvpadDG\nWuqDBONBKdMfNdBBBvl+Bkxno9aaUFZz2zF/yk6TwALAYEwit0uUI5E9pTAL\nTX3cNrQ/YLaPVQZP14jSVsNYgIe3Lr5IJCNcMlNHtlDLv+FlFDoBQJGKVsnE\nQ56wCRqeU+4Gq2Ss7DTk3OFXewkvxO7hrbffjBgUgEFBUFUEaaJOS2Lga+fc\nkwAD\r\n=DAgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/density":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/tab-scroller":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.e3eacefcc.0_1589909972107_0.5341647447373785","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cd117d72aa34eac2e9cf14c245657f07bb08c33","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b065a4d2b.0.tgz","fileCount":37,"integrity":"sha512-WlPNxkG98aADZqzihijMJ6E+/LbFPp1D7Zqb+LmDbKJxjlyDDG4b81/gR3PyNNzdYavw7AwwBX2/L5vmcWqRFg==","signatures":[{"sig":"MEUCIQCLliEQzg9gngn10zTxhVBIzcOQPpvO/qFd/vj9pKXSPQIgLAwJpzuhy0FNbqRtNS1HRAQrS7Aov0QYYSQcP/ouseo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUDzCRA9TVsSAnZWagAAFUMP/3U/7Ti7+NhLLiVIulpI\nWnpSgUmKDVTNttazaG6VN5f9UmHkd6dRC5Pv0wy3wJITb35wlf8tIv6+Aiti\n2MHwcSzD9sZDAZpc5rj9+sXRB5vGWwfKtk6mFAVVvRmUEoR0y3TbApxSRzST\nw/zsBQgQ/tgzzTrjB4os3uOw3zqRq94WrHwSGfWuFSPjWLn8eJZ3Ruc5ygpO\nO3ExbwAdZb0uUG6VP9tnGNDgdfX39POzbEh7vkXZEl8NGfrDcG6NFUXuwOej\nL3HC807b7vRjCmjQxzSYDJ9J1mlcvxQIEDyYPS9WGcl6sKtGNPFfqJLMe/zc\nf8RNBS0T9JlR+HZaXh+lWRvMT9n0FM94djehrokuzsncuBgVqqHVU9IEzYYh\ndM9bZ9eYm2dhw4OBhyZz55WA43AErCW4t2EnEDep+YRGKXoZMrX3SHNv0S4G\n7tlcYwRtgpeA7NYRPlJaTJU3KcGR/POJvvOZpPtp5l37M2HJ3+4ZnMnPKIrj\n83c4iTsv7DYH/R5rcXgMn9SFdxj+WggHkQxGxjU9R54vQQGvM8wiw+qir51I\nQCrxmvARbPib/DqCIIBPfhuwe8jEGzJN1sqSEjiBbAptsRVIRnZbT/faEIJN\nSupMM0VRxW/UWQ8bYK8ZyWOUgS9H/A1d4+nujlY3c6+Wl0ts4mU5umvp7GYV\n3LnF\r\n=sq1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/density":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/tab-scroller":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b065a4d2b.0_1589985522622_0.22943315467683822","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0934932a9edf23ec723ac70d886ec9e8ebf89bb3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4ebce8d78.0.tgz","fileCount":37,"integrity":"sha512-gI4doIvrYo1+ZuFBx5WW2Coz+OMpS9+9Sen3dI773ESn2iareRY2wMl06xt7GCGB2PV6qL5/98DrdJAVN2KfxA==","signatures":[{"sig":"MEUCIHOnHcKm4Zv6MQF2YRHZ9chpL+y8Fvt4GGhXvHe2w6GpAiEAq7eJLiiCr9or1Fp1NytXj119KAf+LvQJBb72hkEUw0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhkCRA9TVsSAnZWagAARU0P/17OD/c+NGpfro1yeMwJ\nKm8rdnIME84eevNgEJbObkdRLJSIJnFCAs5HWlqsCyygVdWdZlSzIc4/YC0R\na0iU58zrUWUmZZiXHfJ/talDMO4MOhYpHePTtM2272yGN2n31lUHu5BS/Pcx\n62DIAw7dzL9i/huPEsynUIvARnuQhAGQ2cW9F0HPw/bq3NWAwuK/spBDPRzn\nTppnNN8MFmMMyuX7W2QaO+LZZpeHofWpdxZOiiYuP/XIQl4fItNieLchu4dT\n4MjFLilWXnHy+gUaxlKkZwqQJiV2wHLypWQZXnRj2qgBLlctB+uNg8M9QiPu\nndF1xTzq2rLdbWOElARvapnZ/BdSexImn2WUzDGznuro39Y2IDXSvvJVe+vB\nm9sroN1Gkxntpa2J7EfOC6JYZpIqafRgNuBR532mAgjqN33iH5OYZHWghw+S\nbwPAeCqBSpRYYpaI9IKGl4ItBGeJ1VFYqttN8l8ZReNRolqYX+APP/ym6ZXe\nz2fWd0EGDmehfnHnxknCDj3z6bhkoaaqunqJZtd5YFIWHT/M3oElHh3hoJGN\n8IqRFYuykPNSj//bmBD5MdE69J5h2GHV7E/Fk2u9dLCG3VO5+kJTwrUQBO6i\nHgKQSN0epZ+sQwP6lOhLN+t1DmHvJRjdSfpph1z+pBaNUPTfEDFc4o2yZP9O\noH4Y\r\n=Pdb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/density":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/tab-scroller":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4ebce8d78.0_1590007908185_0.8806227013751202","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"158ef888875fae7637043f8b07ae65a04d810d1a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b0fdca492.0.tgz","fileCount":37,"integrity":"sha512-7uE3Ke96RfC9r7vvwAo3XCaAUlbQQXzvazSYWg0YrOb2rfBEbYK8ehCrm4gprU3BN7G+GdmTmPurH3PtZnD0XQ==","signatures":[{"sig":"MEYCIQCE4vvtVE6Xe2+8yGcQjPPDdBYvFlhfoBFwILAbM0R6JgIhAISoQC65ags7HJWvzWTARVNEU4S9eT07mdkz2wA9yFKs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdbCRA9TVsSAnZWagAA3HIQAJ2QeXG6Wi3IhAvUQYBO\nHHQUN7xEwnVy6jqZj+BIl2LM7ci/eNru9VG78+ec723FX6LPtaUzPNQpIn+6\nNELjdMkmFIR5HbefGBHkaInAFvM34cB1Qm+M2An00KbCQXJLGHsUDOp6XUTD\nfor2lKjlONR3Gjc8wGBYUOf+qjXEZKSiGYuoV76APufuDkOkiaPXPd9zvhru\nPdvk7dJCM1Q+cfQwQV94UQ5+8JJSlyRKwIRIXVsssxWBBjibbYEGBN36OLUT\nFn0tA6kSqzMrkMIrT/mkwpbQ8ywLXtWLWVddbTEFbr4SQXH4ld+XSYqyfR8a\ndLa/NHhWKP1OT+KgjaWALLsMjRcA3opUCvKJlnfF4wFNPdGFKGFShRltERSu\nasBR06L16x1+WcG7QUjmN7PCZ7TxIMyBBbAIR0kwCq6F1C+ToC+DP88m0g6v\nCmZXXsWvJ/sOI/N3y3hvGeDTTJyXgXeRaqd7RXRY6cwgPQZDt1GBHiWFC41i\n3MCsXLUl3Usf1jMsJZuOKgeiSvL6PTC68gDXwHnUOaLNY2n8e/wMmStP3u8L\nemTzWvT/3z12t81ooDTmu9C9v2Y/DB1BVneO1jQnZSIxNzMTVBUQBzy9Oik9\n6c/VUZqjdgND91UKgGvExnP24mtK67Ta5DG52jPVzWmY5t4012Y50tu6Ke4M\nhlhT\r\n=NszB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/density":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/tab-scroller":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b0fdca492.0_1590015835011_0.8717800569265788","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff746cfe4877e47e1ded7a02ca4ea5b5121041a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.c67667e8e.0.tgz","fileCount":37,"integrity":"sha512-tZaN2JkIAnpVJb43j/yzvfvdl3UPnci6TGIZthHlwEOfu+mqXUWNA8/oLekpEox6WxnuAtf3r0+YaW/1yux57g==","signatures":[{"sig":"MEYCIQCayhAcoLH/oUKWB3qujZVPc/SGceZUntG2O3BcE7P2nAIhALNhTY6otCThWbC3XM4L+jLU5ko1suGoVH8UQP7SiV3g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyoCRA9TVsSAnZWagAA6kEP/jm9swlEFQwtRtxpZCMy\nJdBOCng/pM+QEFx0Cm5lcYVnqQjR2m7wpy0ceq0RolFKBHH+jtKFBgfTGuz+\nSu6gpzp4vmMEe9HiZgnxGDzaBghF9LhxkhUX/z1+QNXoGWKhMkF9jhc1aIFF\ns2cSR+8szn84AyawEfbmnzydhBOtf2BYoRb5VGd+gTfqmAL4rKuZD7y1ixgl\nomd+nsxH2Z0RFi/1+g9cxR8Ckl+Ko++rmwOVKphod1m4v1nvjyZZyZBMzXsj\nv7BVVd24czgqVk65xTLOQt6O5CFxfC+QANnXwYCrHaHqgMmWllYiGUhsK68R\nJAxxas/tEUtn9A5ciTHVNL6BKbszHBtlNrdcpTTzaVfPGb5OyT9euHw4pdTJ\n9A5TxJShXCJcFa8Icnb+iwoVjjqw9HGzsbAiysg1UR+dstPX/mCvCg8Q2aKT\nqTr9EXH2DW9LlKYxhgZ9wEdegc1JgCe8cEM97qljpbkw+FxEEJ0Ane0AdvWW\n8M/HatQJLRfPvMCQEvbgMHYIKWwE1ZmSve9WjhwrUhTbcL1IXFtV/V4RR0za\ndbyIf8KBPs4fVujpO42PPRmsUUOB3UO4hIjf8qU3655iOsb/pVN4T2NN81N/\n8U285A70/6d8/VCbkyQZOu4zDy5o84qwfJn4NYuuLJkpMkolLBcmTIMGyobU\n/fHM\r\n=Azup\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/density":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/tab-scroller":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.c67667e8e.0_1590070440153_0.8934280664146668","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/tab-bar","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa11d70b70926831537fa001f463cc9e4e93161","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.62b5f37db.0.tgz","fileCount":37,"integrity":"sha512-5FS1fCu083BHyl2/X05LLdeNg5hMMr2XXg7Vpcmyn8tgIs91EfXVIsox2QfgXvHTNM7nYXBD9pf/ciB1qyEOvQ==","signatures":[{"sig":"MEUCIFTQtv51ICih+mVKPxUAtv48rOERwPcYmfc2mHVaAUV5AiEAv8s5aCqmbvFr8uu5pjAjsEFfd92Q56lqrYTVb++kv3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9/CRA9TVsSAnZWagAAPGoP/jvnkUhjMUhR209EflmH\nzde/6dMpyVeOVzdHaiiUyeCLwM9Vz3u1RQezndntQ7sIFb6CY7sPY1TfAkUH\ntSJKMjQXND/AdWtksF+MIw5BJtUnidqxnPk/ce+yQF+TFW4JA1sqMvGTgx/R\nzNoTU6eGgzwFEKRZHrrL8ESMjZLelVZ/GxOFdgQ0PPy4aCWbjdNwCwE7V6Td\n9wsb7CgKw8suNwGRlo3smMYqaR3gXVMf7wdaEICR2SZCbMk77tAss02M9m81\nT3qg3Ny09b5XrM05YOC/B16jitVJL9M65iXWebDylvoA0GlNV+5RsgGBi6P3\nEMcEP1+xMbx85er9hJ4tyqkEFOZVilmGaieyY79uf7x1Kdv4NSlGZUCnRYnm\nqgI/7CFJgQ7IE75Idb3fqFqWWlKj/T1KS8tS5LvhY56gls7DfE2EN5AZiw3m\nhDtGWEiTP4Z4BETgSJ4HxudiHTCsLXbIJDJTarOgJUCPhKb1fQjDR9CiOywX\nzi10N9Y23ZgRpnxX+0hRCJmzAPaLNC6IGouAeATpDMRnrhevtK9qw2t+GDsk\nwEv0Q0ptkVSEi0G3DavkMGqEde4qELShkmYPTAhSKkF79k3q1n02CrK4SHdc\n9Ach9wkgDUtk5KRtI5Z3HcX3e7l0KlEstvq9CMksUdTZ/JH3Lkj2wyVbbWbM\nibJL\r\n=sXZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/density":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/tab-scroller":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.62b5f37db.0_1590079358576_0.566295097063686","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2db671f92271e8c5f90260c2aab6c65d271ea7ea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2e218dbf8.0.tgz","fileCount":37,"integrity":"sha512-XbzI82RyJdJ4ACkkLpuui6mKhwVONggzXmpUNPzZNoGgQ8zZRvkoJ41+gguqQnuWrOIkMffI3dwJLgYL2Dk9eQ==","signatures":[{"sig":"MEQCIDViNlOFhqqTCAWWfU/J6GxmOa192EGI62y+uGi6cFEAAiAVadOBjX3GHmfG/EVXz9iamyvhMP2DVFiRuiwGwaKjQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrRTCRA9TVsSAnZWagAApdIP/0rgwaSP/vu79pl5dkuf\nTyw/ll4Hv2n9LH0o+ZioHv1eEl9Ol1+yqw8mI9Y03Buv8vK+zDSrA1EDfLkH\n9ZEolSJY2YxSkZ1lEkYBWpSyjfE6+bNmhwLWsHIEkmG2sQybNvKcXuBWyZdX\nZiTtvwdEL2m78lybp51ja1z453+rkNlkx6KmUTRDzEno/9jH36I12fBD3Se7\n15SxRZQl2bRDLy3yV29nFMsXO7851DTe5+LYqSyUACDFRYsyomMts45RvXIG\nVCjF5MG4S68SLcUF0ed8OVb3DnjZO2QPCv5X2Par0si5Cb5Fr7ypOkYHRXlm\nbjBIS+FUQqt0/JW8JbhJht4wZgIsiFz5eoSXEKN7Pas9YX4xibtM4P/RdRO6\nyi7IC3FV/QLfHss0O0LYgRGTFpyNF3IkWK6mcCvsUuDvVtbFgoDuGbyhCH9y\n9IlWHzhVQe/6Zens9YK962lqvv5J4HQGBumweJW14RLmcymIBw1AwSsodrte\ncQhmJVBQr+LezdmekuehcgjwM65VK7hg+gHF6UUCmAFlI1MXQD0DAQq4R/1T\ng/R0drLvNEaHjAw/qNk5rhbJalEHTsariNHnhbtNixDuJpTSQTZ7H4AJYm/7\nKG/TcFj3mLO50ZmNDMPn/J+XK1NCzJG0cK+B0bVWemhbUYJH2MLDXgDf8qIT\n8blZ\r\n=MEPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/density":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/tab-scroller":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2e218dbf8.0_1590080595319_0.5168034707650995","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/tab-bar","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42afc89b2df8fa0c93e383d269639d727a5cf871","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.7fd792bb9.0.tgz","fileCount":37,"integrity":"sha512-SbeBO/kwtiRaK+VGOSI4A7DLWPlyjQYqsIJrDcPqXeZV/XcnYgo+mRKMkUDptUbnz/cagJNyF+QESLzxeQB9Yg==","signatures":[{"sig":"MEUCIBu/VCclc1/SYiTaLWsZnIBd2Nu/ywXzIO+76RHDiNjeAiEA6VCygxq6VFv3TrqgteGdAWIH6NtNSDmZ6cv1vKAQB2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrdRCRA9TVsSAnZWagAABNAQAILk3FbrnU1VzfW5drnr\nEf8tAWtmk6YgC02TNwqQ1VU/ZyA/2PWLWNE09SvQb5HXgPHlfXmGOQ60BziG\nFNQgtzc0EoaNIPHP5ijeuILEGP/8F4Dfi1eUcs3v9bX0cakcQtkEzQN5v//h\nZiHKqLZ1pwrGMmVipAnJb3jsUUfGpJcCgEDWJWwygZyh0tMBdBSBAU6dXMG9\nHM6BcXKF8QMC0uqlUPdaN43RlaHb/yctu/jXmrDZ2ywxVC6QUh2RJNNRAjjH\nEvCYoLRs41kKFJuCQfqZchiQDwSSveWX6rze7+uhgrj9sYIm/Q25iAGI+C/1\nGvblubij1fugSLctsuHNYKHIT7O1wDIV69CwQbTRP+RR06RiLkSgDyjuOHKF\n7EhMY80Jp2z2cS+m2kUw5athSAr61e49RgZZB7V2WPj4WluuOwvwbkNLD7Wo\nqpw0HV4gghk452ynhwDZL9r1Ekzk1GhtTZHvl7Yz0ETPVP2+UZG+SHUBOYFa\nA5SyO1VUxSHWxjMW5VF58KcizdxZorhdJTl7PCbOI0QO0+kHE3Qww/8EoM+t\newMCwi3c+XhO9vNIauELMTnPE+vW/mU/ccRJEG4+GiW+NunTAVtQueSYqq5D\n274B7nyuWhXRaG1IgOZCKGFo1YTpTpPY3T7JVMqRS5n+LPJNYm8suV+kl8y7\nOfyZ\r\n=GEYB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/density":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/tab-scroller":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.7fd792bb9.0_1590081360965_0.8933456347411839","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61274d1cd2ec5e6412a762a5817b3c3ecf8835ba","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a66493cd8.0.tgz","fileCount":37,"integrity":"sha512-gTHhONxHtSxGaODi7W2f8zKFGa2AgAw4sWlVboyKop3Tp+lhcMepsj8qjZqtlGFchgI1Gsw7tkQoFyMhY8OjEw==","signatures":[{"sig":"MEUCIQCKiWZ/bBRATHBSh4xImlkdpFWozNntdyY6E+8pqJFbaAIgPp8sf9kGgaOJtaFOHHMAt0XMZfhxVAxx2s+/sZT5kus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgjCRA9TVsSAnZWagAA0LQP+QGGAXrC/aCYKYw5KE5H\nxdw4jdGJOqi9ajMhpZE9j7/nbgE1OE1D89w0n92bXqDkSZcHce45nuSRIOrv\nlT56r9hmliFTPISlJSnt7MovtBrgtct8ja8Le9Bma75sd7O5btUt7g2VmkNq\n07fMQKQ6oC7K+nkRo1R6n/xVQvpYM9iE+ueRq8ckt+IT9g4UWOUmcupIem1K\nLPMlb9qdGHw9tEMbA9FmvK0raMx7SfXjCQz8QWOAk4s7A0NQg6prF+Jp3y5X\nhqtcoFDXEgVndsB50rcxmrH4RczfDO9oVIfCpFSLbhpPPddWvKI5B+xKHxaC\nbRRJIZw23DMUj4w0DSBZ+ik4S+1Sb5qD+0p15Q4fJ5FFPS1Pp19Kf9a++Imm\nDj1DfofceimE7fMdIepVWXV5RllLKZTWXQkWhyndhShUITc0AYyWfrJvVq9Q\nrBJEcz11bQs+ZHIUMktJUb2UsS6XoGpp6aWgm11ytfXz8Nvf3BahPln+QVXG\nNsFGrD+bHMAKrvRC8dcrYuKNo+8ladh0EibLLbJTq8CbNblodPXNmf/5Y9Dx\nzZ1TF+YZZYy0svTaO81llubAsqqVRYV37gfsu3+UhCif+GQ/pERRWci526lV\njH0zIxo+uX9L5t55cUlplmLhnBYUUJ8UldfBcJddigQ/EUJOfZX3vANuRgXr\nYk2U\r\n=M28l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/density":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/tab-scroller":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a66493cd8.0_1590081570972_0.15808400346097318","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/tab-bar","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50d1b340a5df2198cb08c3d063860ffac9aebf8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.da05f66e1.0.tgz","fileCount":37,"integrity":"sha512-GOSzJCQqRfmRefGYuJnMyqAOReU/4maJalOxlC/e3WyV3Dz0bpQ6amNZ+XjrErCI/zR9uoVCacKR8Em3zVZhXg==","signatures":[{"sig":"MEUCICGDINk66+a9hMawQv5Pbl4Nt8K7pLqoIcqz4x/LdPiwAiEAgl+EoYyXbWfVRQ/7YoAiBpOhRyjPNPULel2uXqqBSaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexriICRA9TVsSAnZWagAAhNgP/2owtB/lRfguAO9Taji2\nFTZP4QqlaA1IleFmNtRYlg9x5CbM9r6v4nxBTAr0gfk4pNqOikrtUh2hFWEK\nX1OiLUwuo7Oqc2RVLsbxPA5fhxdz6NV+h+hf1e982YFh7bXYEAEPZrS6BrYc\nQ9rKc2Wf1nCEpaUKhVk/nXLc8PzmYsHzKF/LRNISXxcWuCVa7O1A/+modYmT\nP97DTpbFhcCVbr/UXvwVCJoMVcyLQ+0mwI5JwjSDKZhGkrAQATgf+1XxeyO4\nqO1JTnTWyNHnyCKWvck4s9t4Djz/MtX0B4wQxxsPMpONbPegNfrjgkc0lXwN\n8kO0xhE0NdHxlRP6Gylk5X++aDkQmgVfLalA4cHGN+RhjcaoFVlVfPS6EVzC\n6JqyjZAsBU7D5EV7UH5QeluHIybq8BKd+FFuATQ4Y8C1ASxbXcXGraQqxyqi\nwcolMmdKBYa2s4BNGj2uD7zVDcq7s+xaz6fvWW3+zmDQabYVP/yXyZaufOO5\nrTxd3aEF2OqlfQoLwDEnOteRVtDjBRCze/juxsEptimVZh0Do2Q8ccOiVttr\nps4OsnNVKYdh9wUA4jGVu/Pl5+WuH5G7GQpKb7ZJknzIlSxVQ2WDe4jJoYtn\nWZ7QWWkHFwYwvxB6VUsfSQaG7N1FNi4z39Y3Q9AmJwwesRWxAINtN6T6ImSm\n4KAf\r\n=ITCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/density":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/tab-scroller":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.da05f66e1.0_1590081672457_0.4751494175901192","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/tab-bar","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4de843cc1a904bb2720118052dd01a6ed2582a94","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.740860e78.0.tgz","fileCount":37,"integrity":"sha512-iN+fk4ZKeK2Vldfgjd1omzmDh4DMJZAUDOzhwrEr6yMK3vT5gE79cQYuSLHBfHatPXgpZmzMToiBmwJyrYMmPA==","signatures":[{"sig":"MEQCIFRaVy/Vs43HSsFY+GMqPj3AwsoyCOSECXVa1eHBdQT1AiBgPTxK5P+jiLpZycNDMqYKZfWpmWJtqXcnPluO/Yr+UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrodCRA9TVsSAnZWagAA0DEP/jlKM2XJdJeakrxmKPpG\nAFuU8oeCmvlIT7NbMxvBwMNcgQBq3/KDDuHlX8MguTYah9xdtIwosKe47x/+\nMEKftYSKXeODqLMDcnXrttPkkUN5fSEXgCFBt54taNhZid68kGAtGEj/O1Ik\npIM1qp4UByL+NG80rho5bP+YykEJt4cytjNCOsq/cn6xmO6lLNrdmFxSk5Jz\nPJSPTa9zR7A5hNC3/9vooP5hSzCsIw0HngYA7jH1eeua9aj/gKnCBHxPY7qe\nuSbNBwBj0FyuVkVlvi6ftQMgSxiFy+KaZfLe7I40xgQ6zhESfvMEOdeALlBm\neXHLDMr2VymzJlZiD3q3GLcVc+ALk/tgIXLPWQXsZpWtogvzeFNCMpdofq5p\nBc6dSxBnJS9UsQfjOkUYzVSxnfBXxxNVgP6bNjAkaMeRAFeU5LKwzOwi4GfZ\nOTLNqYR14ZdFXWcUj20OH2qTZScN4ZLcqU0e58Od0z3R623WllbjbNruNMj5\nKF+xOJu+5xbJVMkwEHhj0dEsuc217xpGeC5w+mGAhvC43lXRgmwnuYWqtMku\n6r4QQ5Vm3NdsRjQXu1RHBGfYnBeEMDH96OFTQr1TuBfPd6edl9x54YwIsWth\nwhMGcE0YB05u9Tth7yQuqOD+BB4xIpWI3e1UsnW36PplmrilnQYQgOf8iDtn\nYb/C\r\n=Eswp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/density":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/tab-scroller":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.740860e78.0_1590082077005_0.05351852960030978","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9258adddd63a307db301c776177e0ae8bd2401","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.5cea2610f.0.tgz","fileCount":37,"integrity":"sha512-+oROtm8vSj0YkSl9htpEQH0+PoPq08nfKBK1P8sfHnvwtwUCbGos4Js3WU4Or+tn9xVagR9KhTSUmdxqFP/dOw==","signatures":[{"sig":"MEUCIQCs5FwiRn6REOO57qZMwfZAdWjEpxCk9jSFjzmu0XfxFQIgeZsZ6rHOxCtYQ3fWs/ozMFNgZiZeYF36qvwJA1JTBOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqcCRA9TVsSAnZWagAADSkP/iKO6hIxd+pIngosXvQd\nXhFg47fMqL6C3XIxsqTbliuMDsKjQRodjL2AQUEjwzPP6JO3p2IMGrMNOBlJ\nCnBZRFw2Z1URLEKujn/YghOGCIV7IuxNFpD/QvtGEIP2e6H7wZsFDLl8YJvx\nbHSJkbFeDe2ig2MMkfbYeBSBx3J/hjp7J6is05SyDeSYmJgch4PoCbTjOS9v\nUiZEBYWjM+lbaDxfbFV1b84br7G+VEV/OF4Z6fvebbLgtm8VTCXCVez5bRuu\nXqEJ6jWAERrX6XZzpeQ3yaDMnMaDSkKEtkzQ26ka56JikQ9O0jQcZ7kKcdxs\nstL6huO5ncotyGAIZkT8k+SwL58GXzlnEOz0GjB3CYfPsnQjqXs4e5zjb0Wq\nyAQ260vG4u/+WEoPzSOj4Zr1GqX2AkSSluPBtdc4dKc63TnAg4BtGMf5TQN8\nvNxiakaK96Ah3I3hn1+5jiWx+jaVNu2xa24jbETVzTqPrd4T2zqa/AuiPHdY\naPNqLQJm3YMYIb9QPWZJcFdzkJmKAJrYe/ZpIDRfIuJOZJ0wopRt7tAf3M4v\nZVXZSCu6LQ9yG2efL0vMH5L2NZaw6MJCEmjMUhl2ZMcDp+snTIcaiYRO5toB\nR1mcdMEOeZUnM3khzful6QT9DlEVnFiW506pywMMwAW0XkH4H0tAPvwtaw6j\n2VZV\r\n=+DT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/density":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/tab-scroller":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.5cea2610f.0_1590082203827_0.038333994414198935","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c104e8e2a6e888816fb0061a5365c92c39dd99a2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.cf7747ef7.0.tgz","fileCount":37,"integrity":"sha512-kDd9aZeUwWMfV7SGcAz9Ne5dSc7FL4vDLf6ZmZZo3+Q5MLk4Yvh+nQjV4uN6+OI2FCbsaOCnlHmg6pq4uOYp3w==","signatures":[{"sig":"MEUCIQDhi/vfJTt22q3IqiGhi+FE6oxSPAM3nOLGqjoRgCRcTQIgRGarBIJnE54zKhcVruMvwcfHNNxaad/IRF6EU8c4n2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrq4CRA9TVsSAnZWagAAnHgQAIJBXcHXp9Jl4xbglEYy\nIyaEOrOiDSHZZjEUDu8SgQhf+NaROjbE+sS45oSPVKlAhc8lwDwwQQsnmfp6\n9ijDCsNTtN0k/qTL/oJHcfx3rjCkM1IsMNufGG0j6Ow+yKFQ/vHxJzxIqBiq\nMcMB8BWnCXV4vWYQVkhMZMbXeIPKD0kZzgzGkItgoci5Q15J+gnvR1tAU4By\nZkSFd2990rkETIj44eFzb7WVNWIzBalNDSujcLZ/F+5ymu8APBjpBID6Daa2\n+At8Hse6nkmNwUuRQuJbV10yQgJwW9mEzluaHHLAgYBOJB75fl9BuatXXOZ1\nh0oboi0XpHmesRlXdC3q1YJGDQXL1NCQ5VeB57m8NexcqNhgcA2UaiJJwovt\nvHtektNvmkd93VDirwb+bYTddTSRkj5Vl481hLnuvXojbd7v+MNQ9JKjh+DJ\ni9zqg9vb+w99Dl+5MgrGwW307q8/e2lV055ZNrsrK6YuFWZ9RB9ppneN2Qsi\nR+1BH9MtpAs4SbLdLlbEVnGl1hVM/k8HOJbBSR+DOahlBFzbgGABlB9E9W2p\n7/CEYqHStvElcf9l8z8/6lbbPrel5HFeOSBfoIUJg1ONuH/r2Sc49W0bh25k\nNWKeID4tMPy6GKUB7i4F+2JIwmN6wfhTQHB4faHwkb0x+8ol7PeHHJGRPP5L\nDmhS\r\n=LhXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/density":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/tab-scroller":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.cf7747ef7.0_1590082228995_0.037667493716044165","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/tab-bar","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9f7d6d05e81480d882cb6a3d55ccf456331db9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.862d0d7bc.0.tgz","fileCount":37,"integrity":"sha512-miw+B4cXqZcyEcYzIXjpWgPIf/iihujdgwacN1QIQEhZMlKAPNqPvU5hfsbKAO/1GX2mJKe8a2P9jxoTfjwqVA==","signatures":[{"sig":"MEUCIQCkrGaqnSiZ4UvgNil+zGa2sk5XBWLmFmvVgNpIOG9xQAIgNa9bn/dMsHiewSisxZmfTxy/a5HSQwxtQpcCZdaIvb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtQCRA9TVsSAnZWagAATr8P/0Nt4LPd2rx7hu3mk4lE\nYJgjQ55MGx6cshsO12LFWTPDP79QfVMz7MYVb9hpWsuCeKrPp9r/CpbZDSp8\nrMQ29cHolxCEjRpnOme25vywrPOja6QBq8DK6fFZXkIzo0PWbWxl5GjhaETL\nsPNk7dP3oqJkL6L6Bxd+Ronq5JJ1oaMwhGNuuxREkg3O8GkaNvhalsF8mkwZ\n9Y7sCOkhxHluBM32Btva02QJNPh3c0ORXI7G5t9+RYNY63E8NI5YV9H3vrvh\nx53j0ogfRT9F8HUoVq6u7BqD2Jo2tuTMi190T0GNN0Q1iDnOZZFUhyq2+OKa\nFNGQdj4KJTlaSW/plCLCWyq9Wp7GXUaQBZhjmicN+WJ4Nd3n6cifM74FObzK\nxMa/qmrLbzk+tQ5DnAMYLUT3clVQ7fcvdx10qN6iPXLRu0N3MEyeNWjy7Qat\nk7yx153gk6rLK8cMbzzeO94hpGx/bj0N0Bqm21ZEpE0P22s4WWw/6kMYY8NM\nJtP50BeHezHhPD0FAITi2wsS9dXvbFkCT1+jzQRkVTt9y0kY3XSr41k3xxr0\nDz3CzPrHfAzAW3/f7SsWP6GnmxqunPEpWnmt3L/2r/GqMXybxHevHeR3PKvX\nBvkKYO2Iuomxy3w5DkPAioMTXVvLtY0XO5nWiq0Cl09GxX1g02RmtQBCaKSf\nRtiV\r\n=E3Ns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/density":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/tab-scroller":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.862d0d7bc.0_1590082383644_0.7870035166561777","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/tab-bar","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2d8ab8966df0c7e6a5df3cae2b0ccb628b5a700","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.0008c8a91.0.tgz","fileCount":37,"integrity":"sha512-D/WLp89IDbRtpfZQ8T2METP8mavreIbIqiZRcKTTEL5eIHS6jjUCY0ong4vU6mAu2bmvmZWzF+aow0yAaej6YQ==","signatures":[{"sig":"MEUCIGYXDM4JImuZjQcgel2LW451KofnLLO/wk37QQMimZ2fAiEApTTkoyZDRt8r5n95uhuxGJusD7Gs7PwPPKrpRDHA3rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexte3CRA9TVsSAnZWagAAuTUQAJCHcHfRkY6+79tStdLR\nWm/3G7vvn6GVi3xZR2/eQsYVkajOxNOcNZ82/Z/cv98lw9FwtL8BUdoL/BDh\nQIjIr8GIoHV5cOrDgt+k+ra5dTqfjIuTGImFmOdjYkaFh/acC0AcmQPuYg54\nHlg1l7pGhYS4r7gRP2KhC7IXF4f4G2sxtaGlL0+2/vql0WoSgvHj8F3+xZrJ\nLWvti9NbcZECKl/Mvv91polRNR791gvA5RmweONB7lYYx16RELaYG7nAde46\nCOc+++JK4G1Mhq9WHtPQ3CJh23tH/ay6tWBYE9kp+fNTkV1pEltVT9rG9U5/\nz47d2H8G0vSEsRqOp/zaqvI65ol9Wd8bI20Ihpcg1+/N8q0pVVaz/5URzScK\nWDeM9etdZhd76SCVmZ9pdD0KxRJC8gMjM9lF7Yr2OvAI8/EFbJnmHgvpY2Is\nNQW3p78ynVzlI1AZHjS3galIKJodoZyortxFrrr3VT4VD7pQxv2PBZuHDby9\nppsohmWUyMuOYX7TPzuUAbjOtek9//pudqC/ns0ai7GE+acdGLr98X0QN1wi\noyZsZIP2yzyl3IhJOz8fV9hgCbhaLQU2iiAftuWaSrVWzudX/WegC312Gu6E\nQ4BjNJaPSUuqJSzFLZJppUnr8Z4zN5YuGTHsQde13WC67U2Oe4kimvfv2QT3\ntchD\r\n=SLlj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/density":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/tab-scroller":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.0008c8a91.0_1590089654435_0.0991342092088423","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/tab-bar","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74ed09a5b2d4e8c5c8c29700bc4a593053a2ce41","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.541638fa2.0.tgz","fileCount":37,"integrity":"sha512-efDlyxQD0gG8fAG1EhRAnmbFb8nQj3ESzVAc6EurbDbIL0GJUXkwkjhoMrF5Zr+wBDB8/zF+9PSVsenTvxQb5Q==","signatures":[{"sig":"MEUCIQCC5JRa54fNVsOUb7VsvLIxfWVGl1N75v9AnaV99pFCKwIgUScWu2nuAACniLMT6N9spJdNW+cJQGlzbMQUXfFnHAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexttBCRA9TVsSAnZWagAAqRQP/jHrT204/oZlpuetecUS\nVMae+xp0XMZQP04oseKl3z2hKyYOGqvEBge+LxUxi5kB+nZzNXCAmH+8Ln2O\nawe+sdP8yDSqTTrVC4ib2Ijlg1iYmtk9VkllpE8+44Srg1RLtcCRwSiwibyb\nSrKo8VO3U6iu/5E7SnWPjWgC7gRebWRjjyQsayvQ1r7jFpmoltES9kVm6d0x\nax4iIEYJPQDbX3NzuetiGT1p4GATYSqQsph2sex1cKptHSee4UywuaXvvo/n\nJ58zNGGPtKZxfMhqRwfoIX2X9BP9ATr07P2YWjJehUeCmB8jAsf9+w268aP7\nveiOTLNErUaW1tfu5EePjkM1TyoQeyvJTFDUwLXTuy2Dxod+HlDmsvs9bBsv\nnHY0hveGM+HxETeuUGmcLKOoXG/+2HO5/Ieze14gharR4X+GwUOn5QjqzVkY\nZ8F0ipLcJCsxLbTvZY4jQz+e9Wlu/ClQKx4kBOUesDcmMiFWzHdSJFP/Q6XX\nAYPcJzbmBY4vudsgXiPmAXn1RXtsr2TedsrDln+oDJopFOg6OdzCj7mujHsd\nCxK9usoKKzn9Hv6/FfhAh22WdiDojsKqYi5yaYowovs/RrPgbA6TdviLPbd2\nBDiQgFXFczsOp8rEBU2V8vz3YMpQj2QJH/+XSXgkYXeR0s5cRoqG5IUTT/YO\nKRhS\r\n=+q0M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/density":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/tab-scroller":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.541638fa2.0_1590090560975_0.3704859581890674","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/tab-bar","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6544314cb7d42b7a6b831d747da82b2c19485d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.6167cd075.0.tgz","fileCount":37,"integrity":"sha512-w6nSjgtz1tL1IC4XAotOGfta7DL77aNJmxyKw5nfAzgM8kWEIvIJRmRhneSMrPAALFY5Q7e0m9yx3135lzhgrA==","signatures":[{"sig":"MEYCIQD3Y0/QVwHVRn6/dfb9tdM1CAcF6gYQRZt8KFeM97NN5wIhAPUahXIgBwcyqhScKYhEuhn+NfpgFYvR8bscmpLkST0w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuL+CRA9TVsSAnZWagAAxEYP/jzjn9lp2jF5d4g6bPmV\nptdkuJqgfMvmZCkN2h7cwCaFkqb8S/9HHnnurgVHJqksjXdmIUpwB0iasc2R\nI9cHHVtHhWv15PQyGsmF8sDpUFWb+771RR7cWUcLvjKE6H4POZpd0heunPPN\nEN1BTUAvoulCQYd3JubwqZYpLIBBtzSTWyUM32U+FMzssGeEzblBZH6vrtrV\n+bwRQrV109nVMvlMcNsn44imcmtE98WxdUamzoJ79dGICKKQiIndvG2watsK\n2QxGqQkV/jqiDFoTsFKzcaDsNoNuSTaGwY1BFCPqFRAMXMfx78/U6frXCql4\n+OTzeus136y70TrgOqsKLPlBifSDfCipsHczviEd10zBEcUyunPVM+xVg4yh\nR/nbzfa8Q1Qt2R6FOPtnj2s7xmEriQ/2optM7tcG45VSJIr5wNS4ZjUS49bb\nduw0suJZKI4aKrOF8ouznVUmC5jgU8GcFhKslkpMNeIO3iyko+Hel8bT927M\nJkipMcs3YY+JS83daKQi7z6vpn6XjxbJvLxhsplxIwl6arex8Jia/+x2s1ug\nqdr/DR2F+jATVhKe4l2Eml6FIyr8wuvExM2Hru4yANRYGwLGyd7FbiCVlccB\nYy1JblPzZZYHXMfiJkL0DEeeQbJ/SDQTFE+yanZp/yuHv/goqJxOB5WSni+K\npSHZ\r\n=/XXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/density":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/tab-scroller":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.6167cd075.0_1590092541933_0.9589457627209652","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54dfe3f5d1e543a6e123082d93f22ac948d50824","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.863ac1b0f.0.tgz","fileCount":37,"integrity":"sha512-rpUGkiDeIG8ZZ8BZRhbPnuOH73RvLJsViL5fmUQzV1hFd+VltMzzFIwlpEKAAbKjdjTPB5M2Dep3tDPMH/KFuQ==","signatures":[{"sig":"MEUCIAJYAHv1frVq66J1h0yFZ/WTDt1NO9OrezYcT4JyW7seAiEAuPndPHaziW1dFpvysngIjwA6Qi7sgsCHrgtxrHxjR+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuwaCRA9TVsSAnZWagAA6v0P/3mZerCbXHXDGUHd0mvO\nWDaSIUyJ7oKLJmNJILcG8ii9UnZmG81G/+u0eJbMxcMOECjUu0AtXQWO3/gz\nXQF+iRxJJmpMmj9XMRnCTja614ehYKVNjK4Qa/5OEzz1LkFgeMSHo84HQzi7\nQvAEAxhviq24WcgoTvlPJR0PzA5V2g1eoDZ+fdXx24ywCRiWNr/LTS+cfaRu\nwAY7bgT2trm6TBZ5oBuFY9as0zkhb8nZetou7HRhtNdYk+yizb66MLdVgwEa\nDwCTmEI6dbMp8UMVJ9t4WNCQ0b9vMCREdT908ojlZuRT2sCksWU2PSjqmWpF\nulU3Jd7bpZItgH+QIrh18ZF2LSNYt9JhNhySjUqdrlP6Y7pBiE4UHsBwB9d0\nfJbOODqRhevqJAPFvJscu+E1KG/MS6CNgNCttd2TLJE6mHamL6I8W0OG1OGX\n9gWg/raew+4emJqMmIX3R4o+/Cvq5UaLPZ8yyzTK7D/e/bfeF8ACesNZcS0v\nYgDW7BopjGLTRmuJy+fRAnBrDUR0RThPG8zuEUdvgyeNRMEsybic8GR77m/X\nwTH8PqkG9dio5BXfwRje4OzQzk+MKaZTskoDhFOu0r4kGRJhKsA6ybr6f7bv\nsVVdPd+kHnAi8H/FKLK/qi2/EZ907nD9elBFSCezjYiGHlBVGM4q3RqNC7lu\nKP0N\r\n=W8B8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/density":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/tab-scroller":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.863ac1b0f.0_1590094874197_0.7401866606674028","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7902778b6a430ecf2083ba22a03aa77ca4e682","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d30a214ac.0.tgz","fileCount":37,"integrity":"sha512-ztNJ9O70aN/5hlXIkU0sTt7oNYaNacGbKD/xpFC536X6F4oWVe58ruJpCH1pnRLmvWl/1oP5K3z1bdqrjxdWgA==","signatures":[{"sig":"MEUCIQDWz+uIPpaYkr+7uXGoORWKi+SrJglnewUn1gHrWuMM+QIgZtc1p2iHcdNQwy9X6GqdOKeWJN6W90nQCjQVjpRlokE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexu0ICRA9TVsSAnZWagAAJkcQAJy6/UlAc3namWBpasHU\n09jFff6kHhIkSrZUm85u4Pyt5dBXdT1ZFNNearT8xBCENun8qZgjOo8NZvr3\n2BFCHdeffQLERqLKju8Evtq2+mP5L8OWk3m4eGeazKlgm+1GW0c9HGLN+gxp\nqQ/Jto/28Q8jqQghKKes3EfOVqgIu8KQ/QXM4WkzutymSbaAjn2yjlb2LZ/w\n1hzsiIx4hLUpgG38mk49+ArB0MV+SvQpHJrpYy5sa7yP4wWeojVs0jXpAjI5\nHcIzxEJiK4HjgVFsRitA0ZYp363qwiqGd7WqQrBg3+FuxIe6+gsPgn2KqGs4\nJ5fyjzppEXg2g0HZcwMCRuuRmwcdQcbsjDq8MJd7B+Ov0A8NBF9fiTO+Arp9\nCii5jDfVBMJgtERWXxy5DKsfLrLGZLn7d1VQx9W14o5XejoUFskb5eYarFXx\nxb6EOw34AzS/Bz01W7oIFTU/95Rai8wMQl6gbn6YLa2VMazMEsSKIqgzRJ2u\n0hsE4NVHmsbIqK/TR3kTz3X7nqkchf3IUj3LbC2whn3B3cSNsSlZKyqHlC83\nC86HbRt4HuIs+ze29inytKGuc+9qKIJExuHVszv44/xIvCKaAlutZS/e49Gz\nPgU6kbdacLSDn4+il+fe3EU3mzDzjx/SWRyAR6GZeAUg6yD5FwJ5HXokOo4r\nByA4\r\n=hZxd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/density":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/tab-scroller":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d30a214ac.0_1590095112069_0.9994111762450737","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9734717bf1e682a6de5c827b2df6d7ebcbdf0462","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.62abbc8d7.0.tgz","fileCount":37,"integrity":"sha512-uYEniDaPiewFcVul4sgzlbbjZ2G+8GYSYR5dzERxrX1Yk1JV9TTn+uP/gVii68QreaMZW2oeav+Gx/jt4L41MA==","signatures":[{"sig":"MEYCIQDSfkDn50MiuWspYew+nFDqAhedmTcv3kawp8MYjEvq5QIhAOf4g0Pq2c7wN7JzYBTs0xpKBpJSoy6Rpnv6tjBBT4Hw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvLPCRA9TVsSAnZWagAA9ZcP/1R6/Q+6T9kPWYybBkUk\nm3AjW41tFwBebXa2K7uCSwLT1lgaJbYkfgTzLKsKi07neaehOzJG+36p+/t/\neEagf2usHJuzMv3uEDF3yIwezeD0HLMh975M2zndgY9XtmsDzXTfCjW+74Ma\nHDGY+yPOm9RRRa0rfYBTkcWwsZ5UsDufGR0dWIeZeqDJPGVrFj2LQy6rje90\n8O65qRLWieMTd8lL9yV9zIhqmUMz61ofHETU6TKocjgnWDeTZhv4DfSlMBDA\noSWzH55+iK6tlbr6n0L8oktD57uL7k6hUepeRZnchkHMyfWd4/ALPPhdiSjO\nulgVYxe48UfqtyzDSq0dDlbp30o0RCkghG9gvnyZsbAJpmMN3rAEdB9TCuyH\n3XOgsi/wYiqWOLZi5kROkKXR6XQwzH1IGWFWdAnjbYRSwIwnwfbXQ/0ZZB2U\nJfm/Yx73xvl15SN75Jc7MhdVhxt9cv4CEfpOA6x97PKS2aByZhfwkSKGl431\nKLfR5b358qVAxQvZ2VarplMRASqFodshF+5b3hjS+BqVFOtnerqyVcH0N3m9\n1yO7HB4umvxy5IbB/vvOSPwdH/XmIdeLkDYSSdwzO687aj7yBdUK1i8gmf2D\n3CWB2YJiOgtH4j3VrT94+WxivrVbJ9wSs2SGZ8jz2alFPm7KEdUOg2EHHPcl\n/Raa\r\n=hWEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/density":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/tab-scroller":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.62abbc8d7.0_1590096591141_0.9447612217295773","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/tab-bar","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abfc62f34c5587caebaf80b9e4136cd2f61a7c67","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.49bf31d5c.0.tgz","fileCount":37,"integrity":"sha512-Zfv1LvWn2oyB0qNodlwZrahuwqtz5e/ytD9msWIwkVrcePtKQRRStnBEaTP1nfmb8X671xv3H54QB5CquVYvrQ==","signatures":[{"sig":"MEUCIQCxIsQ3OYaU6VF9/P3y7K1Ihm+wtbHcBFPq04K+qhrf2AIgSdB8T+aGibYhTmR/32z9GzeOI5irr9HOvKefxVsch70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOiCRA9TVsSAnZWagAAuksQAJoYVy5rTyvbFdd2KsTj\n3nq6QscgXhVtOo41U8TxiedLYSINgu+WAxZ0Mw/NaVA7YLlhnec2/iXFHUqx\nZdBXPKuCHl6NWWMtikBQl90tsfmONDtAb9/8rDqv4tVr4Ljl7od5eu8HKxKX\nBn8vcMeVN9j3hC5471VNqSc1bCevtHt1+LJcWcRmzBdiMNyCLt8RQke1abbq\nguhjCFr4U6tqUpYfBx0cktEnMGp2icr2k3Ld2YipuiiZmCtoHwIXFvuf8/XB\n5yoCaioitrWEo/86zMn+9AKdZ69/CMZTDGbmNJRkfuLKz0cx5bR3h30tmfox\n5Pf9rsaIQDhjxqlkyA70iFJ3tmv3I+t5mYWNwN3ft6RKM4c1gSJBDY9XE6ip\nlVns7/m06f8sFw0V10gEheelmnwpiHAC+DAG3dV67ARtspsXi8wrIFZzENI8\n9AJrcTyE5Rh/ANYIIQvvyuVw4Yb2r8AbENEwAQHXRDB96emQmYfiha5qfN/6\n5D3XbF3B9gVuu/dRJg6USaeeBEpZWo/tXbfRWoBZUNXEiAb2seuA/TM9K4hK\nwod91a+KuRafVUH2lMvcvU0Rd9pnfdW8kBuE9v2HweTiWtGCN7mRpqWXT725\nvQLchwaxrZ9g9FbXD+h5NHI+g8HzySQvCv5PuN/bSvfts8Ydt2Ieyi/QQ6g0\nMZTm\r\n=ctR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/density":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/tab-scroller":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.49bf31d5c.0_1590096802027_0.4909780712372711","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cc7d153c8c86bbcc22fd6eb513f1ff419cfa8fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8e17857d0.0.tgz","fileCount":37,"integrity":"sha512-F50GRD4Z8593RrUWk4KJmRbf5UzLYO3pM4CC/wA7zud+2NYIRzri+v1cKNkVo4hNbTclFhMjOzRUJqjlkIFgnQ==","signatures":[{"sig":"MEYCIQDOd79i2nTVVHl+70ljqgVdThkDVmuJ1g67az2yh1FuZQIhAO5q9Wbpz5O7MYdC8LtmLhK1XL0hzoYxlOUHEYvUphAO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvPQCRA9TVsSAnZWagAAjN4P/2n7CLp6iTI5il99jd43\n3YaoyxwhQmJzV9viu1hWJK9WKzlpdQGWKtCYqx0yzWxf2sgqavi1gmDezV/e\nlR2f6bQN6onEkCmbe63g2K2b81+/o7TcvTXZ8mNaZNwejqhUSonCjFH+fRGx\n1TpYtUQFtv7UU7kVGiGm6NMHuL/J9996+wFd6lwJnJlcDexQxacAWLbcGMiR\nupgnPcmFnUoOdkBRnfqbiu2tPxiR/BlivN16R7jpICjbZutRADFbj+w0i1lN\ntHHIsEYJuO4HtSpbcJQu7g5HKKfO6nFxR77fbJ83WR5W5OIy5PqBF82WUcj0\nnzTsbtRXMPTfY7cdHq/CoMfXHnq1HkSO1n/V8ZPNa+/wxt9HNc+Z5Mo+mCB8\nGaGQa+XVes1QeK0x6XLnn+EycN9qpW79BV2P1N7ZaOtTnEsiJ7IeFAK800wT\nEbub8uxGs+CnU/f3BlP8TXWtP6mICuU02Z8GSh0fzJ8uR6+0ajUsuD502rgP\nS0MkHICJf0zO4204taBSb4b815YjZwg40321OXVVlAKGiLlrKf0ipo44YLHb\nD5WuH51iGREgX1Apa5xm5uBR6v2wxsh02ewhO86kkvArFut3xkZo14MiGEHi\nneoHaRq0vv+gYAsgb0uudhiZaaG2pkYXyNKh8jaLyFkYguL6yfhj72vspNW4\nf4nP\r\n=PkN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/density":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/tab-scroller":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8e17857d0.0_1590096847791_0.7051978512360477","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/tab-bar","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebac2a5fbb489c9c20c2ba5e831313d89fb42bef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.c113fc942.0.tgz","fileCount":37,"integrity":"sha512-APE7MtnH2RkCWLT6IvucWMXvWqYBXBcfM19v7eeyfkU65pMuZVqiTdvom5tRzLHx6QlxoKiKMLSdAJNah1eOmA==","signatures":[{"sig":"MEUCIQCqHptyw0iq3U+ITkSJwtTcs5/PlT+2nJNU3ywbUws0VQIgGi81mlHQT6y8g80HimocxknyYMD67lWf+98kZAzdIv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwUTCRA9TVsSAnZWagAAgTIP/3cKHXXFu3qrBGd3W3+I\nDCM5GzP5CRf2sE3LqJBcjqFI3m+xaoiB8C7sRKTRJ2B9YSffupe1entaHnSr\nQRp81Jh5YffFCupVTyiZAj//U/3rfoWJKZyZywUNwZLHSjK4j//gdTMBxkS8\nEdtgi3wzvoeVqeQVEhgJi3hzlcDdfnSiiczNqvNPd3HiHUyGq0qcOivpSSQ1\nu7wfXVWHmcPN0gXJY3KaeW0m8MaO0QVF94o0FuywUFmO970JsySVzOunlurc\nz10X2QEEaRyEF8coTWBsiySDEa8AfygclaNaA+PgbP7XOVV/xRSY7cOtENDP\n5n3hPIufZ34LMuxucmnzMXE4E5GhgTDBz2JP9Q1YfFPFTdPkpSiGzyP6Qa/o\nn/I3Q0XiuX+ibcgA6owYFbtsIrpXBcDXmDKBad/b1zpmODjjKPzgSKDSl0Yq\nGXLBL9ZXEct0G4O67R7Atp3MwPB/zjmpbdMugRgjUSo0tgRpicu4rjEPdhOq\n1AJoavS21GSkMQtW81M5ValoGG0mabUZ3IGaZ8d0jWrrr2CrV+s0B+F9PT1s\nuv2WOLQXzm+c7m/asbeHFJFHhYjBeWcpuzmwcWgifP5t47pV+b8v5QFFQybM\nK+xLL4G+J2IZOGzY0RuWYZ2I6cVzS30435vseyEZH5Q3Uk/WjI7NpWRkeAWy\n8wP5\r\n=iafE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/density":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/tab-scroller":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.c113fc942.0_1590101267137_0.8538627897362239","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970d726c6d63902071550565e969a21e8bb00a36","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.912d9021d.0.tgz","fileCount":37,"integrity":"sha512-nNxXqCFp1e35l1RV8ULgZp9ZWh1ZS8ZiAzhNoqB+P535heEDqOecLaTFTlt4BOM9/8JmyUcGHqyXQsyz8dzYUA==","signatures":[{"sig":"MEYCIQCX6sCgNS3yka9/HQXO7gCE/G4GwAl8CKwz+Z52RtLtTAIhAK1n6lKq0XRi3FY20zz8fPjEBU2p1WFaEYlxY99WIc8u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWQQCRA9TVsSAnZWagAANk8P/AzmT0AFLXAIV3BaxQxB\nLyh0PQCSkFo0Evd68tqX2YqUPuvwkIejhRqTXumVWDaDd3P3XRpbBUKQp6nS\nXpOckxVhGWDbpY7X2XU7mIUM/cgylZzHFuFkHq2fl93+p5QgmgzPOZihBMG0\n1pI1IdLGbcOAUTm/wYUlwjAKuJB4Kw4Ey0Ac99eDBDCmao+sk1WZw9aF1TRn\njHg6Z6tYN909+HhUCWJn6qZrCS511ykNPYGR1DLuiYCTYbmq6yzukiB9D+CC\neG1uB3VtuHNZ8hO/PelyvOvd3TjvYrFXaGmQyIkUKe00CzHVySdpWjhcnZe7\nxgzq+lqvvZmz0DKb7bEUIY1gITesbkzGH/TFzbSeOwSRML55IcGzU9yaySj+\ndu+cfGPxksm5VDJUvdHs+kuOOx2Umw+Jqkvxd7Zjma1tejiwk+FwXkII0JTa\n2wM1qN7kl7ukiFaGJbbxGt8iogWhS+8JfLWyABvJTPfCcVBSVeekP+WlLPye\nU9UMmRyyc5sGiZY6pYkd1cPqEGuOoApgyPt9gWnhm0wJTHhASvZkShZIGuHH\n1KhCV0r21A0eKX1FvIUBRQ0D66OaUAb2vQzWdGWgtufJCuVVtxJZiwktlDjI\nUjGk5D+fLF13jnikcwCCIrw1tu6bNJ8wtd7jCHNf7HtpxMSpdHcllKosUS1F\nblyy\r\n=M5f9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/density":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/tab-scroller":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.912d9021d.0_1590518799706_0.5496933302313738","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/tab-bar","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37225ca4856315b5c042e968e058dccead26f98a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.68a2af131.0.tgz","fileCount":37,"integrity":"sha512-bi3c+cN2Or7VtpT75X3EVtYceLb3VeK/Mr8UwgL2GkvJt3zlW6KlxKHgOAHdT9oOj/nLBqQwR3+2JhFoc8KeVw==","signatures":[{"sig":"MEQCICLfxpz0TAGWFoKA8f4+935unT4XrBSDsFnpRNy5hKkwAiBF3iEmmr8NaMMuThoh2LyT+x0TGRiA+OaNt0yM3w3CaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWlJCRA9TVsSAnZWagAA+AIQAIAnPoWpID53dbAcaqi3\nedGXZ4WWP6Z7prPYWQESUTC2vCE83TaNSgxOznVnheEmnoCNy40UsEHGS+Ob\nFF0WJY7VZkc+2gggrz6mxwdsXyoMLku4vGcbYSWU9S9Lhl3tRonCPPwiNAdP\n3qeKxG+bDvPvypYdBcXjrMBLgtdC9TE53DobqwT8NRVJkX9uwcvQPHCypxk/\nm25KuFt0CLX2HBDFaLSRP84muK9Kz0O8hJpK1tH2A+lAPbI9K4a+SSrR4GCL\njE5MI20+D56NLwcJU3UNvhBTzoMW0BCfRORPlclGiZ5jWy8NQ9qcv/5CQLlz\nq+jgo5tLyY8EY/9pmMcCn/SSNRrDasPBwdC1uOgcbCIunEfQC5jHLlJ17XO1\nSe29rFLu5BcmdFgT+FT6bZmDzC67mk3FfTXad9nbKaaByOe9qva0HXabHYJW\nLerFO3BokRChXOwkuBt3ryRP6RRlMzMMDs7s1Fl6cQgs86JN+nqOkQzGpo+d\nMY/6fMtJgIaLeZD2Eb4QX7JlMz6kRbB4YPUFKgImbY1ukiHXJ2X0kPO0aweg\no390fCqeYyEyv5+u4PWzuvtXkcX2+KbcApXWY8Yisb/plpjO3pD4sGCVTPek\nbd84qwekiN5MZ8v0rpTM9HS9e+7FzP+I3uI3M8sJoSuv1KKsexuEqO9lYpno\nGj2R\r\n=QaJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/density":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/tab-scroller":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.68a2af131.0_1590520134278_0.2993845610887462","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/tab-bar","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd63b2427129efd8abee7f55548ec44dc1c7362","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.01de07011.0.tgz","fileCount":37,"integrity":"sha512-YVubc0glnsmGEXAcWLm6OjjndvFktHMtYCyvV8+5GAC042gMUpdPlG66BZesxctwajG6TERnu0EwfMLDO5eBWA==","signatures":[{"sig":"MEQCID9G9L6M26NaBBzVw4lTA/S3MdrbTcIWMfr82rxOK5lVAiBtJ+v/Q5qxaI89h5uvnkmeUE9f0dYzBJHg8vzDn5VZcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXPTCRA9TVsSAnZWagAAk/0P/1pf3VGHV9QCCEnmfiQg\nU3YFO65PUx2Nw0eoXZ3beKsK2rUl6wbGD/EyvoJkd2Z9dy0wC1Cw4kmx4DFt\nP7QoSe/K4pnlGn8RrPI4JqNsfQ8moyB68uK/T/1a7g2x/+O9Sb/QPnHcg6GL\nTpEew6zj4Q2Ebk7gcu3qBQzLmP3TOsY8tA0At5Cskk/LN7fIcKvIyDNqflac\ndAO61WPUaHB3t87kqGx3bFxdGissvv2mpYLJLSLpIt7CRldeINVCeo3qEJoT\n50yAFY/0d3QH0cA9pr+CvPz/exdaG0fH59cphqWbvVfVQFbdr0+m2yEYgqfk\nrL+YAO8Y0xvxU4k172n0QarVj8icuTJr8pk4muSsDpGI6omW/K1CgL2tDSbj\nNwegEo7DPZ5EKstSNTfGJqaH0+YYza2xdVztQKq1TgKG5utHqWTclJvvTvWy\nUEMyd+7yOOH2yHk1mhUxr38JrJqLAkqDnS2L25/qt/G39g/5+gy59/auLp4a\nOKTQX79PndCYMBDyimv/OjzZoY5UpS5cc+rRM0kolo22Bcixp9PYUIcKuOc+\nTfzVsVtmYAK7yFn3ms/mrjNGJTgDW4FsGQRuGT/NP1wEqeuYANvFQpEH0x+Y\ngd+nYXaEGFmFnZBcljSA0oyATDSGbu4RARx0skuvcwA6xDCjOyJaIKQVEc79\n3Ciz\r\n=pfZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/density":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/tab-scroller":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.01de07011.0_1590522834972_0.20240916542841725","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/tab-bar","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4c029e2221aa3412b395b5290748e8cfd45787","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.51d4535fe.0.tgz","fileCount":37,"integrity":"sha512-pwD07Y3sT2cYoc05rXlbtLL7c+9DhFhOzL2e5wu7oXwhVSP0xXZD0T3drYTWOFT3pGVGV8DDN96NP98a/wVARg==","signatures":[{"sig":"MEQCIDvU1A/a4fEOv3nnjRe+p6mkqlwzoaydT0Rw6Cw3uxSgAiA914MxHABmcyjmKGoTP7j6DzwloIPZw4DjVyPlmKTZ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvwCRA9TVsSAnZWagAAMpAP/2Jq8xcy5/74zitYyLu5\nG+mLMvQ9Qxr1nn2bqUBnMLrOK9tFKv0cw4ScXpgZW6WaxJVCjqf5JzZVY0cO\nXOYRfmBsHI1Bmu8grPATU34f4i5i7wpHEzPWDDHvZ2BFWLz96UUOY1nNoH8D\nXGlTX9ZYOVtbbjz2uyw+e0iclu1NrvtO2c3ltlNJ6/FdRKcd9ZBT8e0B9aA4\nBkvwonoTYXix3dV7wx158Fbukfo4lGQX8GH3EPQZZ04fOuN+YkklwvIRBi3H\njAA7Km4PybIyUIzCLch0bxVPewDe5jjiSFDYY0joZewlkNE/eXPu6iMLQcsc\nvG4y+5dDcoVnVKpVHg4ItTOK36imYLm1qLPjQ1u0CTlaXtLee3anJw8izXAc\n9GKJM8+aqj6beCwNveIoS6CtTSOmRwH4qzsfMb16meJi7iS0TBOkc102QGZj\nJZ7MjpOV9T+R4N9YpFjz4swOvvu5v8mjdA9XLUqW2uQeLPSLNAGK4QDRVYnF\nGnD4ve15pWha3CV7iPx/iUD/cS37ww7igxb6A0bY9AxKTCfbYwaz/K2TigCD\nIDYZcQt+6cGDssIoaJFKmCXFvQAvDg12VrBnlSCxiMy8FqjUHFpQkHo3Gg7b\n6+ROUR93Ye1hLvSDyDg6e6IMqibAu5IjzPypaPmzP1qqqqg10UkuNesuNXdE\nl0T0\r\n=2ZMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/density":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/tab-scroller":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.51d4535fe.0_1590529007814_0.8328573592728217","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e96767de20710e16cf2f226b47e553d2e49ccd4b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b86d826b7.0.tgz","fileCount":37,"integrity":"sha512-hdkIB51ceaZtRu7P9NwYKXvSCzW26Kb8VGn9aGzyCs5hL/EE1QEEXBqw/x+X1oTO0KEYOeh83QO2AU9LCKwy1Q==","signatures":[{"sig":"MEQCIQCyj3WeMAZQR2IMGaqmgKwUuj2uULUaihJM8DlpH5g7vgIfEU4TTyeLWRthP2oZmaITr411Zsl2TxBzH0x4/MhvcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTdCRA9TVsSAnZWagAA2EIQAIMyvWrai1UoVEvwMefj\nBLwOY0elM5zxthb5ccDwEUYdW7m+TAox9+M2ryolABCZA6iSgF40wUR4GLHU\nkkBylViuhsATyaanqdiK2nME1KnbQQaI0qmKJabS4OpM03luj9J9Rh/lfJqC\nUZzDC7Q5jve1pIN/eBugGNVDVfoz/ZHd6+0X66x9RqeHXVcPriffMgs0gOJ0\nIm5o3sRD+BfiHk2WBObrwozDg9KHGglB/KH8QA8kq841X2W+SBBf/bWtKOKW\nfpKoIej4G0FS1fYXTkVLGt+Dg9yaxXE0tfPwXF9DGkr7MSXBtThCLm5D1Z72\nnjoanCF6havcC6/ZfWZ9a+4kfC5oKPtSYRxX3Y/bVyEtGYKYIhlLEeYpSFSH\nE8gcjURjzt/UJRA3eKkUm3FxKVsaaRDJ9IshNfwRh6nk4Re0UeDvok66lU3g\nn4JLVc0Kpe8ilS1RmfCR3gxhcfddUY3rTmswr5Y3HGMbnM7Oc6U3eiGSmVgn\nlYisrNL6LYZiaJsanG/pcC/ReY3OEah75L0tRwSxGaAff5gNwVO6Uecl6b6k\nTP6qeyFbwQSieBUEDWFfzaZUpwM/cKzUV4SgELNr2asBb6haNvQtLy5JCEml\nNaj6KmSU227e+91lBNbP30EbfA37nNhbHM3g4QYdOYVSnGDYCbKgv1cy8sj8\nSmve\r\n=R4MH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/density":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/tab-scroller":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b86d826b7.0_1590531292990_0.9075168717643995","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb4cbd8133849db403d1c9fb5f98664b69854213","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d91794c7e.0.tgz","fileCount":37,"integrity":"sha512-mUhOSL36LEZUbGPD+WxYPAWOX92S5zBenj/qpBhe0RQv0/cKERBus/UPVAwuECy6mm61+O7NnihujXT+AM37XA==","signatures":[{"sig":"MEYCIQDD3sR19ASRx6A70WiyHJQTK2qSmK2OnaFQMzxZjFx6wwIhANZCzOKTNyCtHEcxzwsObz+Y6jjDHnDjz8otPQjz+q1s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezayPCRA9TVsSAnZWagAAXTkP/2Y6Bvq9XmqCYQw8qPRw\nsvpZhxUQH9VAOqru5t6oI3PcjO3WjNETP38mXC75QgduqcBPNG609e7pmOrc\ng+W3HJ349Hy10XoxURsGVVfp2/FSm2p1qXU6GazoPs1UpbHWmauUSqC+PiUc\nGlg9uZ4GFSiVyZPYOFVdmKSIaCS6yMPRIoK4xenmTEZCK35wA5iWhwJRa2Wm\noonu5GUodHm3TqU6GysWqJgpAILvWYe5lZUWdwB0vqkFaN5mg6DUO2e4hy1Y\nddje68t69JGhDET1E7r5upmwkbxHdDfTCjH9he3obcl0hGEs27OcmcHOon2s\njBNU2/oHaS2F61GM9PffUKvJgq70P6bdMU2UkuD++ZyaiEIZ/6Abj4h4z0G2\ngakQb2tjwe4eQi523pzcKhzuu4NEu/Ma7c3kHYcYj8Fl+7ofO3bPKqO/laaT\nBbWRYbh/QSWP4WuqaO1Eh7alQv+sY1VGoMzFXfL7S/pZqgV2uPNeb+g9oQNl\nC0HW464huIk+14yHy/HQnCst7ISOVnad1Abpxg4/Ekx6gRZfroEueykvmyt1\nnJIx6Hs/3HWBg4TNIQIQ3otoW4IJejFBT6p0N806ThNW8icMBA8S8hK6awsS\nTHEWfY7WGtpdj3soowbtMzb9DGUSzba0Ssy/0GypAGiNBNowy9O0OXZsaoGi\ny0Jv\r\n=0EsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/density":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/tab-scroller":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d91794c7e.0_1590537358383_0.427603433020618","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"800fc4a6ddd2308c8cb09cc1ba306767a88880c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8c6d7e076.0.tgz","fileCount":37,"integrity":"sha512-zDxo63lR+KLH3bX7+LigwR2ZzjMSJepgXLjy1zHth+OoVzzqX17F6LSMnXNAX4kPdznSrMyzIYiz9L3oeykymA==","signatures":[{"sig":"MEUCIQCGoAB/feh9hgv7K/Bg+IkA8qv4nHvMYOeQOld0ktWbmgIgS0GZ+Xc95YGz/aeOOKTJbi0pR1Zt0PfbHs9wyIcRATM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjzCRA9TVsSAnZWagAAptAP/Al/a2vyuri4bBpjcyNe\nAkGxdCVamHRCOeaotb4jm7ZHLXx0ZoT/LZkJT1AtJHDhgj+JDYqo4BXMM1Q5\n/oXuCwinG66AwE8V8854wohoZyB2UdzoMDfeG2qjeXFwpTzpVaV6ycSVRnfO\nyDpVDsGo2lynE9iinvAixsMs5gpWoUTZsKgUL12uUfl7AweS1KtecJNYXnXs\nCMPeOdUvA9NI6IIr5K5B3isTUEyWly55O/ThqgWJrRKDGhRtkiJuhUDneef+\nxjkiWhj0X076nkuJ/PlWf44IJm1es7EgHn09ODE4Eu7DXrsvpT0ViE2k8vfd\nhF7nAInuD0lmQuOMxzpskp22+kVRVKiNmjX3lCknPjfEhcq3bBF6h4f8qnt6\nSYwKVT6XLCwC4WAdDhTYYFjGuCLsONKoz1O+D5jkYgcsT59OTh86gviSApMl\np2s/VlOYS0JD8skR/XjLsus7PVljb+xgqJMgueqmqLvfG7RGfnExUfaLLMQL\nvy0424hhX3C4vePIQ/UAQbO3mOtt7WLO0WI5601sgek0Y1pblds7ZykfKLhZ\nTUF3STJO9hN8c716Gl24bDnjuuTl9tCutmuTKyCRS6+VSbwEClky9cwkIHCP\nC4eeDCby7vZ+iAz+piVIM44cswsxiQVPplI5Uts5iTPHxeQITAFuTv0L9NSt\n8MdS\r\n=FWSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/density":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/tab-scroller":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8c6d7e076.0_1590606067253_0.4971499428229973","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/tab-bar","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dba50dece6d66c3d6250d62b3f2fb50eef67254","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.5b5f62f93.0.tgz","fileCount":37,"integrity":"sha512-TQR/noW29ak0wLhqebJ6zWoN4HJjZCBNOSkovuw6d8g+6lRcgMOQ5TyRpgGdwyFLZWysfRfs+Ae0P/eHOaE8mQ==","signatures":[{"sig":"MEQCICPJKCGVDZ3xD7dEnfBxtkm9wUcnenpcuueFLe92BdK6AiAYvpLJPTHqCvB8LRFuYtcxXzvb4GkGa6AHU8qEKnSV8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzaCRA9TVsSAnZWagAA5zIP/3864npMrf1um3SjNb+S\nvQC/guBkjNx8sHOvawQTnmvuQ5DJ3DvJl1A1XLLwlseFmF8lykbTwA5OFEST\n2OIr4l1RSuCBfcHZe+RGw1go2SSZ0qzYpzxOC+1YABip6MOa5SCFKRlpaqDR\n/NrPPF1g66JiJiq3RdDTnDI+H8HZUbchkAhrBP89Bg8zwDb21Oxk3GAzgCqM\n1JE3uMsnLEEvG96KqjDyyhnesGn45ecFVJhQhks6M13a3qPVq2KCLJAUmFXv\n4kQ3g2RyuZL06cGDJS+Nl9OdSOqxWwtTxq9MAEsk9NTj7qwZKRcibktZPTzK\nSUPAZeCxstDCSPfOPoGX8Jf8NCZvTZNwfk1xZwejKJG733AE+k0iJd7eslXY\nnxqKUOALaPDgvCW7B713Jqr5J0fnq2ihsSral3SQZdSy9yFghve6eQZmtU0/\nuk9ZuDAQ+p1Lp6mCIYC+84103tr8PdEYwpBmZlD6kMRCvUHAdIqa1cWAiu23\nNkialy4ZFUCO2Qs6p35HvLMaYjBCWfYJOVz7I5InXZk0YRwc2lbWz93DQP3R\nJb++hYw0NA+TAVZexv7Nn+0Ez6d6Of6MCTze7OdyPFV4C2ARU6DIsySKk01O\nglZTa+ft+8ukObcmv+te8Szqgtz0KVO+hdXQqUuHR0R7Uqq/98lra10QEjfd\nXQrF\r\n=EyZ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/density":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/tab-scroller":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.5b5f62f93.0_1590607066063_0.9651843756271088","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8831e2123752b469035a35987cb5156da319d505","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d9972abb1.0.tgz","fileCount":37,"integrity":"sha512-R0btYjkofdHZOIwHNFBr7i/soKObvPXthYFOSCqMIlCCxnb1hjLYoQH6gY1ruDS/tS7bI0vV8oAkABozC2uE7Q==","signatures":[{"sig":"MEYCIQCQcre0aVZEUuEzsbS+zl1PCjjX++sHz3S3i6M6OcuaUQIhAJRcjwtQNATItZUhxr90FsARARRmIGbJKnzOkGO9dgwJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvpCRA9TVsSAnZWagAAn+oP/RUaiKkH0ZHgX1C7UKkf\nfj/lFMv7ninuAc6aD5+b5Bg0SqHZ0qKH+LdRN5ciMiSXkjHcYEuDpGLtC9T8\nXpbsYIkJY3DEOEIGGCozUAXDwpnGRapv6tZmnuwNJfglVKTXwA8aUOMa7o3p\nveh0rv1rssgTPry97f8OQ9T7skEAHUYLqEB63QOYPhriY9hhNBSh21axpSPB\n6I2Wc+rsipCQcc0eZSEFH2daPPqxrhgGf4MiJtaQGV4651Mu8ZroLT49RN0Q\ndkZZ/FvDMUxOqa51DYkm0ySo8QSNdkLnbPLugYzlNBJUAg2KBxzEXLUqYQp4\nhRXmksA5RbXjUGW1cjh9sHgFRTcDy7wyjQsEs03nwcyNrYBeG54qWhyUg7jE\nx3PsC5Q6EMkAlklxwjydzNlo7KhT2YOcNHzeeYhj3GOixh7ZnDbJ8YYlcKyE\nIz9Q4RLekPO1QJ21Nng9Xcdah5qWS+jqn+Gq/QRbS4uWMOUD6SkeKs51n2/q\nbvMQsmj7f+6kULEzvXztKF5se+StMFOFDTCylkcLZO+VRRtyq+dTjx3oJwYe\nLqhMf7jfU1/2b1XKjsUlqUf/tYkUrRdTSN5g+MEYei8S6nzvRgJjzd021JY+\nNQ4FfkSH6a6UxVbuaTXgo5LK/nh/+qyPn/UByOZLB4CsXb1QQf1F/6w/1/dp\n5eI7\r\n=++sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/density":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/tab-scroller":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d9972abb1.0_1590610921225_0.8515799395275885","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/tab-bar","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60fbc30a8f93f351d56ea90dac72e31a7dd0c585","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.6556eda2b.0.tgz","fileCount":37,"integrity":"sha512-w7lOURotjvC+Y5vScWZ8bfCZB08hqxuX54bQzUhFNlcrUWlYwg/2yhkXvw2PoafSvEWFAZ3XQY+dFJIgXJP4nQ==","signatures":[{"sig":"MEQCIAz/3CMiVn3C8su8dJuXXXGxYPD1LGE4zEy+FZKi9a5+AiArHq4llVmUGShtAjbkDytNK8RzqVn7kfxaeBs9xTP8vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs4WCRA9TVsSAnZWagAAMtkP/0z9h7ITN+QRxU70aVVJ\nNBKmwQrWZqnPacONHKjbhDcws9cx0e8/a5ZcYh0VY5eGQYkWz4ZXGD3cUt2u\nFvfW7sveV33eeZ8ISzJ2j0N2/hSfWG0PhVYbsIMtRbBKFkH+HPpx8zkFBEVT\nDZLqMZLGDhllFfZCZbn2M7SshY2ZcK4OGitk6FiLy5T7EHtTXRJOYG689jZN\nneRIdWS+9PLx/zHXMc5tmCr3frRjECwIY1yzJNHThG450V7QMA97X7HA0IIL\n+DFURTonI0MZ93kYr7rIv9tIWhrYiMz5/3VCJGllvFRWUEHJyBlnbYm1Op2l\nXK4VABT4z83HUvBxu2uMf3O2dKvRhg2snLMKMYUM77GPkXNTzPBYhMLDZUri\nL2EoZETfS6T+R7E82+aag7bZMv6sQ7auARq4W/3pEk06hWn+c06dX5xwRheG\npoljk0lg7F+Lp/wTppyBYTfROjgjUlEr+VouxKyIPo/5L8ad3rHBgHfpTh61\nnE0DGb3Ozbh1g3oCnbKNS+hHSEOjpjpSMlkUU9QBIKC3NTVJp7G2Zivx0i9+\n+3V2oBxnU25LRL1/w2sgsU+UxMxnDQK4OuH2n7N7z7m4wfp9RE+TY2BwAtmy\ngBfcsRG+CFVZKMnVTUsNWi/2+Ivu+WE+PznVT3AkI4UTKL+YBSYniAxYQngT\nuJs/\r\n=XyTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/density":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/tab-scroller":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.6556eda2b.0_1590611478252_0.7966136623229436","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/tab-bar","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff85fa67cf552964221186d826454f50d0fca7c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.32aa23641.0.tgz","fileCount":37,"integrity":"sha512-c2dEpJBLMEi+9refNWq2DtRysth0giq6K8xF9hx6F+7ADtrQsa7b8V90ctakR0zox2pKKNKFVzSv4vEn5Jc53w==","signatures":[{"sig":"MEUCIHNJtYH8vsAY7vheFB1jAWngfsX+4dYVel/NcBn8azBxAiEAmjBJ4hcU+/bchWZ23aDkET959jNoTbnkwU1sROPH4Vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt4ZCRA9TVsSAnZWagAABZsP/RX+2p8wJ1W6eG+ZC+56\nKUM0VAOQbX5quYB5a159WozkTzuoAqSpT2UCsllpXj8sZPg3xl3EGT+J/3Zg\neuuzcRzmwTID35ZrPdO/DfG4T7CnT4Y3qtYfyu0v6SBS6Mhly+ewGzIYxQLy\nit2+ygwd5Pj4UdDajfi4J3pwogRlXEnmDUwbLEiy/cWt6EjpUeEhhka+womC\nRIY/CmCFzHKIs1gBN3zrHxCqFPSDMBoYbH8Oy5P1my724PNSn5xA1EdziJCj\nZR+pgAPT75z/wYycBX3gVplTg/8BQXq21Z9Xf9XCFSQHcyFoWHXrQVQwaAIy\n6bTOQqrYEIUlJSqFArUO7Zvfs2TWcp7zFd3kCO+kelPvpPDqbdUiAnI/6CgJ\nUUHSxfyqdysRcdiS2K0xAt9ieJBRfiKgdyr8Q6jL8MOsSPlLwgQw2wlWav2z\nQZpIs08K8sfIFjo7KB2IfDlg9LIk6LyEAIRSYQfJ3UHf+YeoqSbfc2pagtUn\n9ZhgzrI0xXLyqqc5LMxjzaoXIEdat9mOq8OUjDh/Fv3TORxWaBEafn4TEjrO\nw60kIyVSp+rQ8W/tJOdhdVFbgGJco5G/civavYlWyIJkqXIhLXd1DL6hsSrv\nQ/i0qF4u2tGPl9YOxT0pHqwXltCx3jgDP1f98kKhGU84hbAEaOFdwOL8Nz9x\nQzLO\r\n=ctpV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/density":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/tab-scroller":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.32aa23641.0_1590615577189_0.5801675410272664","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/tab-bar","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb2c346a989b7bc3526808f7b6a64e6a24a72fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.654934dfa.0.tgz","fileCount":37,"integrity":"sha512-AEZLZ+9mxRDMpfOLs3rSu2I+MqWUQqvroCk96WbBspA6QfW/kYqqYA8OlTvWt6tN3QWaTSZHUsVLWLVkO1q+Dg==","signatures":[{"sig":"MEYCIQDHa17Q930ZYOT1rrNmioh1l8VbSr3eptksgESN5iW50QIhAPgA3a3Zfl6b+TYH6c6+EfLk2OHrVDuOQns3GtQ6M8hT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwf4CRA9TVsSAnZWagAAtoQP/0GUyno/ghpDbZrnG4aJ\nlKVCcw7Vtn3ETyMaOctf7W2v6JRZTRMn85G/JT1uy1fKzv1qXk/+41ovKbag\nmxZFTFD8h2YOAUyZM6jT7E9MRNe/h933keqHDoXi9epf6pr9ih2jl7rQL1x4\n532eWGT7oLCUH1Rkr54tkWb6IxNHSWWtii8JFXDbme27n5GDoT+YNbdZ1OzH\nId3OdLwKZMxYKTk020ZsL8oHO9RFV5xRjRo94KLVx77H1NHmEaDFLMNclZab\nsJpwdOxqkyhPA1tQl5eWzA+F8HGlPlj3yv0ILoTCD47G6TTeLRHO0TwpQots\nnrZS25dxk2YrI3gaRj9S7GRvLEyPdYTTDtlLf5Yw2YkC9Ic5ZjkiZ64eZ1eu\nYVDmHP6N4qkGJp0/ZFpNeyukEBcwK2YztyKF1GTzSxr7fFRpvnBssNuhhwwE\nISSjtbRETGX9TBmU8HR5+4wtDqa/3okcFVoNjb+72HSfPstmTptz1VX1rWNm\nOS4AvY5ln8WMKECkYmFBJwZlv7lRpZpfO315J1Nm/qX4wjy/+a+73WKL2RyY\noNDGtZmcK8TG5ZQLJFBe2J7B5LdiW6UPpmGjHbVqoUdz+XZLz9PAcgRXfiyd\nMwuA3sPBuapOPPgwxRH0gmAgdhHTpCztFHrsb5rq8kyWx7T6s1MfU//cCgxx\nxItv\r\n=G+dP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/density":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/tab-scroller":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.654934dfa.0_1590626295653_0.2170779025892262","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/tab-bar","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336f993a5c7267e1c7bbafeea9120bc92022bde4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.41910b8b8.0.tgz","fileCount":37,"integrity":"sha512-Q0bavxK49kgaORkKKLXHY0pVB+KJH7Z9YjkFdk5LPMaajjy3a+IiwwkhobNYrkpeSsI9Yfh211DBfxqqVSnIgg==","signatures":[{"sig":"MEYCIQDqtPtJJJCTHbxYP66mivk/aL+pJsI6McwMrQZZvKPl4gIhAMRpQG6gJwoR1hZWbV4hA4uqRSZpIFB6Os4QFg3Bk090","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwtHCRA9TVsSAnZWagAAD4UQAJbjhLlUnWNhrg25tcxz\ngRFRkMGK/NG1dZZ98t/srxaqwiiHz6nCO2oqpM9nKb5TJ1E/ziq6fqWYbjm0\ntWKSujmiteTH4WmJNA84LnRwde4Rhsoeno/tKkO4vXeO1b9dumnbNIruJ0q4\nQMsk/fbsf2BKIubOdF1ifZSmwehRxUBhpqsSzIKgSV1WHs1xnGpwyrWG9DVl\ntfywaEazIs4m21c008dAorVCAimTwhncJMTTwfLLJz9aGi30FuM98jT06Bai\necGHIHLgYVJ8tOELAFItnucryXyudAsbOVmSvXsFxitTtTBM7YCalQAmyTtv\n0oLE9mRo6K6jal5iDditTHBlcGvOl3+LoN9/NYR65PEUZLSV01uo9vIGavqU\nYKjvk/zYJLrVauwN+YBMMkP2Y/gsUvwxhB5dUt9wXLbooMbUe5TJx1sONXEJ\nEK+7KYbL7CVdp0nHCUOIMkQjwOtMmuyNmc/+x5x8niOLohO8Kvero9VlwKkO\nYP3/qX4kKTWKlHQusQ8XSNsZghUPZouWiGaceq/8uAcWmpImgwuh6IBymRa6\nu/UPSTPFyfpr4QA0bcIuLkeaVJoK8rWfBzBhy45GsRunowmDZfSpZA0KOKyJ\nkp+bXMblU+ty6KobF1hUFWMiabTq2k0h7lJ+gyHu1D6LxjMc82JiIBQY4c6A\nFgl4\r\n=hCHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/density":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/tab-scroller":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.41910b8b8.0_1590627143258_0.26050933128089593","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f8e92083710fe62d3a0763f55a84dfffdc2da0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d66d22bf9.0.tgz","fileCount":37,"integrity":"sha512-YE35H7pwxPHluvgkeC1e7VKamksbyhx/7wuqnS9rCWIf94Ip9eAqW+e3r5X7VvMcXZfIx/uOAzHkC7TOKJztXw==","signatures":[{"sig":"MEQCIEsMZO5UIk5kqSEZ3jDIlxEpv+hE4DE4/FDCrZkCQ9K9AiB2j3vrZs68J8WI4ZxA5lbtZ84D3wY9cheoDWvy9jWbrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdyCRA9TVsSAnZWagAAVawP/1qNccUaTrsMm+5GjIxO\nDVsdS6W12RmK93Y6tK+LHnCxmePeitYXI516CCxIz66KC13oe7MhjvYABtXM\nkEBMO5/r0T1hFsvr6Mzbx8fpgiTibtJa294RSi3ln1Hou1gscWxyDh/p+C3t\n2YGE9iQreD2vpjp+75sv0IB+WyeEkQotLgfRjIwUEbYoQS77gX4Yoq/5+wFa\nXIS7G4ocGSO2xmZ6EeoPqRk8FoAkS/r13w8WSduAtNazT1m3Exdu+qp346rT\nab4pccfPYXIc4s5VolH05LHvva2dNqW7nSUjv5h5kgrFBJOb6kS7L48iAcKt\n0jS/KcC++EeaxxrtlXxPcRxTDrJwJ2vDvsrVGvBZxv0WJfGft28hh4NGc1Bb\nNYGhagyekz8Gzv2XLzdeERbXoQb2610HvcGR1kQ9juCbUdg1gdHTcaSvGfYp\nKNYhUxzWWzcIMptCaiKmCQEiwGFkCXjS5povI4oLlpXWmxDZKz3noZbZMYoY\nmzkE3ZKeJ56Zb+p95aoyiPmjFE6745Ge+DLBuhuD1iVaNNPLstjvDMM63DK9\nniSp7reYaf7U0exi47jgWT+qzWcUR2daZI+tZpap3HXw5y+R+BCbnnVB1PF/\nDwggUrMUA9moMVntbcT4glpg/cmSpf171buMJqHbteodR+msAiK6a5p6oPwv\nshDp\r\n=VNvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/density":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/tab-scroller":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d66d22bf9.0_1590695794302_0.19055702676535713","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663a5dfa4ba5b3e1343aeaf5e42833ea3c1c5929","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8904f3cbe.0.tgz","fileCount":37,"integrity":"sha512-8Zk1mxQFz/JC8C0qdsgg+eebxdyw3P7JPZGa2MUmLECj8hGDDAyMjaNgod15WK8bAnpi77MYk7COO9tHT/EUvw==","signatures":[{"sig":"MEUCICy2T9jJwPbW01Di0GiWf1qWa67FmYs9DDDPdR6V3V1YAiEAgz4qEMEg7NiZtxDKF4x1Sp0ouWpeJdkTY2JVBdYlmso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T2VCRA9TVsSAnZWagAAhEkP/iclqcUT1KRG+af40Cie\nayuBG/bIfwP0AL1S7rCcn0pNLmO7PhqqyyrNAz0uL/Qpcf8eHd2f5MYKLWwp\n5BWDnpgxXCVEhV+JZJhmVdaEZRI6W0O+IE4JJyIwFg8JlkZ9NsdBzkSTOtOi\nbiTmpohccpIt1ICbESkCMkH4cyQ/77IFZ6DXUJr/X6MKtzWvnPqNxtMFRvxE\nBH5gPflNXI85GLcyr9SY29zP0gPk90zQ7jBA/vR2KTLxG/i1AAaRBqreu1OP\nceqSKVPaBN8EwSM517SSXWi9CPNXnK8CVhE8LEIgjZU0u3nDmCHqx1GBUupC\nOHIP2OIqXgn5S4qQb1R3PtDkJnxvch/RpHL44+9sf081nTAmnWogyC8QShKY\n9xJB5l+wuWlN10eK4KqZlcdn2u+ucAmQ1n8YNO+DvyX+hffAMB2aC5Q3tmOF\nSdsOlauk4N83PEbQWvOf6veuI9VvFXzRjPlaGxYNH3PpgUWTmbJUcviy9ceM\nK+DdmGm85GvbnGkXYrZdWq6zwFIf2t+88pNcAWrvv2RyfqsrpN9uA20q+NtV\nJ0oXk53zNMaCUlvmM2qNj1ZWtKl31Z5iVWBit/zKwazees60TORqCCpfhyoR\n7PJIDIVSDJ5uILUDSwpWMBz36JxDyeuZVMPpd0eQ/R4k9tZaeOI2WA+ERkHW\nAaFA\r\n=aP3B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/density":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/tab-scroller":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8904f3cbe.0_1590771093203_0.29060249175851127","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/tab-bar","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f44b63f1406113524a0afebc1738b5c2e2da9bf3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.51512a4ac.0.tgz","fileCount":37,"integrity":"sha512-5fxQt2w2F/bffcdabY0+XjvBoXKB/RnGlFXzKj5UW4QOUdVECPbGXVUDFF2SL0ZilVdjOzcV/NCUuh+SbDMTaQ==","signatures":[{"sig":"MEYCIQDzZgbt8l2D1PXljZbXkxdxDqquanRM9Gk9/QrW8KwM5gIhAI0V1os+xb/JNw6oaWGmAmQm7ClIVK/2KvmBjqNtJ7Qc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V+KCRA9TVsSAnZWagAA88QP+QAgRZ1NuJMjyz+7VQqA\nAhj5VqCywb9+CffLOM20bNypqu4PFwIqMQvr/N1KMjTTIc4SoV9dq05qFNj2\nypZRe8ruTac3rfPK89GOcFQmH1rjr3ZN3C9SHCuHliaQhcRdc3dqWccqC8q3\nhGacm7AJPsrVcxNC/nGVZ203fpDS9V6cE8uFBPHQpXDZlAcnn7y5X011xUDQ\n41ilKVdehhi7diZmlBZs/vrNxauW7KocurWLKPXr9b+OeT/Q1LIjINLdy/3o\noA7jhyRocm/K+Tvrl1F1dlCDNWhEjUjeqmqUcTOAgverSxufAlymI3feghbQ\nyPW8Kq43TldBVmA+TrxvZxnERrgfEM8Odv6L+WPHK/0lMBZVWq4TJbrEsb0B\nhNgR5H82UO2tCe2GhJjKyGHv0ZqtGBSAZ2T/l/ZlIYAeEl0K9xLMDVnAgOv8\nc9R/cMMGSCpgXBHfO8JmyojWVGwDYQVlEGEOm/dGHUEHxH8I7mcxOZH49BEa\ngZAIDdlfcf6Vkde0BQNJ+tmuLmp8VyEyPP7WixapmjOTFrXeMSE0//8Jpq8S\nFIC+kogFNKJpNJQ9Oez1AvO3niGkvlQyCGGf9Tgf2MGELFNyHcYRRRq/Q3Bk\nRFOY8MszNb3uRIes8NcnwwJFpF5V1C7sx1gwqQZA5ArAkSEzU6vsEw6CkwzX\nrP/p\r\n=h2nm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/density":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/tab-scroller":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.51512a4ac.0_1590779785908_0.45745132668945865","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/tab-bar","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0317146be1a85fff8ff71361d1451bbd5c18818","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.0743288fb.0.tgz","fileCount":37,"integrity":"sha512-DqrSQ+TtJ8zBn1OrsYa9+D/W1zU/rq7tBtRqm0QnG/lToaJy+bI18nWi01kACtsL/EEXsiRa8xUEVfgWGPbxoA==","signatures":[{"sig":"MEQCIDQGvYRnNFYYV9+XfF2HCllLakgVQFzkoGJ7tinNiwSvAiA6lCiUo6Pix5z3vQ/V7fUelHBB4VQPzZDVEBn/ILL6kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Ws4CRA9TVsSAnZWagAAztYP/3gHApXNQMCY7SWS8P3V\n7PIBiPN8E+VmjOo5MS/Xhg01b0lYDbp9KcZCpGhreH+TXotugDzIyp0ZvCEV\nStWgDY4LB+mwApyg2RDFovvijU8+ltKOja9P+qLa1TT+Umw8g7802gjZ5HTD\nxIJasaYIJ/y3sfYe3BHGjrR4DNuW15+mES3K7FwW3StYiyX9tJtRWJecPIn4\nXccAj05yjXGwzvDOc3WGRmg40Jm99bWBAG8rUOpH2M7GvFk2+V/1EOLQIgFP\nRgDtTKpxfSywfcedq/H8qxIMt2ax3e2M8DOBrI/gL5FeUNyfwcgdfnNlM8G4\nDivu3BXzqlTQaLoPKNIGYBoa/163N1MmKW9g8WQpC+pl23RXX9oeUoqAWE9S\nLPmdVwGJ2C1VLGd6LweSXJTR3khXqL7janh8irCi8rNzb8yr187cjLDntPH9\nnyuujnV9CPipGLXZIPbT/o4G3CDVBxcrBKSsbfGb9YrBVfVUtSNc/ZOUrReX\nYExgs0MMZy5+ISMEuaK4nuPSrBfiws3bCoeexIzeCj5NJKhkHXHuv36Un+up\n+B8GmbVoopM2lWU4wUI7NDJsPzHI3OzrLYLDyr+h/iJLa+EhQZvb65fSngJ5\ncTio9hHaZPXK8Yz/yx2vl/CO6fv3gow5fW0cj3PVMWClp8tn+b+XcFFquDsL\nfFKv\r\n=8iDr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/density":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/tab-scroller":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.0743288fb.0_1590782776439_0.5948132380384543","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/tab-bar","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92100c4a12858cb030ed90e7fc5cec8ce1cba053","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.06ef147b5.0.tgz","fileCount":37,"integrity":"sha512-vGj0kcfY6Ad94fzdjHTXUDz4wNXqkNMNfoYYWFOuRQSGeKduVd6Qi1mD1d2cDK0JkQrfLdxjtICGAZbJFhsxMg==","signatures":[{"sig":"MEUCIHqQNIe7LaJMXt5Bn+S8xZf7vHWR55HSf/woNL0pjiBLAiEAkboGS+4hqRT/7KUADTjtbZGu08oDw3bh5J5IXCVLEgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XOXCRA9TVsSAnZWagAA480QAJ24/v/VDyn46xu8o46g\nhFRB4biwoRGzgly1NOrtjFLikw3Tj9OMmRIXNyh//t2SQ8xSNF+ck9y/ZIYT\nBcjCjrESKEe5wacfGDH60WH5zE+HitiVs5ewbhfL6hfRSzcV9NxhIOemt8eS\nhX3rHJtZOiqhPLQYfpvkk/URNn0ZOGbuYPtKApMr2UB6aqt2IB1lac1n3zkY\nxH63n8IIVfht2cXhgtaYk4CtjRKP71K8lVv1tte4UJkWzN0mpbi6v/9XQbKT\nXl0lOfkYZ6WlbTsUyJufa17QLwX+BZK/r45VXrhrpRle58nGbSku9RLOp5U+\nQ2fx1YhW6z0wKWob6OM/mpmGYtV2byR/17ZGZ9F8OZBx48owieUzm30d3hyu\nbYsrQU8V0KABgBqfFLpWdqf5z3YZkveBQy0kUpkBL4KXkBJ3Ert5KXVBEGM8\nE9NC/agz+El30gmRCAD2YDIV//6OqYuNMhdQhFXart6mMPYokb/UWh1o0jW7\nlZ2X36BhnS85KbC8BOCILoGqbcnfjazO22wtBxF32BlAqyAAK321oTN2LdCX\nYMrfHtbm+aJUEfSbSZgIq8ZO6qFu7e1Oz5509ym0dsoGE9hFeFolxIk41erf\nxzs9Z7Gx7duAncohrHiAsZiykgn3cCIk6DrsrNWGGgel5paO6TLVBdWJABHO\nWV7z\r\n=Wa6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/density":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/tab-scroller":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.06ef147b5.0_1590784918575_0.12730576268466143","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f264d995440c69964ceeac8c210e2f2274f7aa8b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8073a20a9.0.tgz","fileCount":37,"integrity":"sha512-5zjVecdWxGveEulxDJDImEoHgm4LcopbffPL3twI5pBM0FaXQkA6EiSfzfwe8eC2fHXIiLgZiUGgCtCpDPx85Q==","signatures":[{"sig":"MEUCICpYSjJJDY4syPAH0qXUTgphafg4TvWdl4fw/k3yEqAcAiEAystGDqfcYo/upeRhxcqJINBM5YrGFBVY0M12fKWxbq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zo4CRA9TVsSAnZWagAAANMP/R9SuQvOHkrFS23NX09Q\n4zqdB237BWFanJj255AbWWjNOJaUPMM5zHPmuHW9BpDlU/UEnsN3h6xP8fgk\nyyLjqPgK/Xid55wRbmqTzkPl9vW22Mrz4PRn3p8PSza8L6NNd+MSMdmLS/R3\nSUOZCgP36f8iFUW6BFMxdPBnIAOwOYOPoqJ+kAginNgHAWrwSiaMSfj8NRag\n16hl7no0yfymZpygYGRmxgiBLaDBsOEPh4Q8tcSC9ZGhfsEE2xOavOfrJOEA\nWRVv6Hb3YarvRv0kYLemo1wY1xSw0h+R0xy/g2sxbS3Z6Sv7L1cY7mJW0sP0\nt5ZdOh4bHXw+ljrH30BaoAWhZXEgKOkpJKj4HRuvzl0oknFK8y2aArhO3rRM\nd+J84c+ADsmidxneHee7XJ44ln7fhb4v7mmOFeyMGzpt1SNclF9jIc9cGfba\nqi3RqL+i+loYtGgzNVkJWfmHGb4V/hkbyNCu48CrwZzjDuPlW0VqZPni/vVN\nbt/XwwRJP78qke0UjN2fz1Zbrr0hYZNl0XBFaM+w0QPJgrD0me0gNCaZvH2L\n5pj6eRnA0SMBfSFo8gTQK5XxIKF/nV6XUaYNsUTXTVVGJIIpj3jTBbetc/IL\noql/bVVdH67gEtuleZrmvz5ROKpU4HlJox+MWamDbt0+O4RZRJsa8sNtGcYR\nOONo\r\n=kD+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/density":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/tab-scroller":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8073a20a9.0_1590794808224_0.37519928108214784","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/tab-bar","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71bdeb38e1f6c07eca81499d3c94caa67c59e8c4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.72ff42330.0.tgz","fileCount":37,"integrity":"sha512-OdO6rK52NR2YR5uCqiSPt2Dg6bI7ZcEP3Az7kbRXZkEQcS3S5c+AIAyL5N3OSdiFbH/ZqBpoDvWkGJAy3PVhwA==","signatures":[{"sig":"MEUCIQC5wbsXrkFbuHI4uIXxCpyaLVB2zmvUrHGtMjzbE17plgIgMY5X1/4x/eKOVN4jZQ0zFvJcPGuWCl8Qe5qrP67iHrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TC5CRA9TVsSAnZWagAAJZEQAJkWlhR+IjR+AzSfQOQI\n6b+/B5co+K8c6cxM50RJHLRfvLWN6hpKW+vGoE8KltTEYR8570NUV3OE2Z1N\n4VJnE1jfo34CYygEHsx+of0Rcxgdf0CYmkkz7/PbesiuQmmP86FtETiDKqCl\nembjv9gYxL8oHZvTkHRrUwLvlcUL9DU0i+HBt8jZuoV2UeDRtNsCl8wlHUM4\nipLFfj6zetkL+akVMS6WwaykCcH5FkKgOa7CuYLPbMvv7tR75ck6Jt+nKihI\ngUeWpW2l4YZxZUzObWUrZ/pXq3CPhdBN3KZzCm5bL17IYfTlTL2FqJ4krv3p\nnhAhbM/jjBOPffWyJfQm4JG3qZxkp3sDz5A787kdEAtwdmUuEfHAm5gbwfqf\nbUxMAE7VROjRPXmrk+GxilwZy5h2YcN4gYUr83MP1hMiLUxAaA8RtHW4GPVo\n4cfT5w11zZu47U2ZVP/eSh05foz9m0EpmrPzdX53lL4ZTtlEKLrO4sdfNTtu\n0rfDcyBdaMZ/AvxkCkdO9AxthzCP2GAii3zuw8jNehaFTlbp5cs0gaAU2JfQ\ncZgh/vxhWLwUgEk6mObIiFdBDFknhLmVi6B4OARNNBh5m6qTDFsYiqN/bQJm\nYcA7UnGxj/zk3LpKjoU1znkKnk5ppRsIvHi8uHAsEgZmxbS4RF8yhSBJoo8V\nGKrU\r\n=Cey2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/density":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/tab-scroller":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.72ff42330.0_1591029944887_0.8185123642445378","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011fa271a04b60121669e0eae6196de9b1ac13f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.9ea52070f.0.tgz","fileCount":37,"integrity":"sha512-aSmUxyRou2sFEZTVKxBFZJRm6RC0avUstzfl+88AS0F3a0pS/80hUbuqhOM0f9h0s32A/SfjUt3PNbf060bcZQ==","signatures":[{"sig":"MEUCIQCTinuq7LHqijahsXToc16dcMp3RTTSwmn0TQTlX5aOfgIgLCHo9fjyFrcUfAA9Q/StEwBQN46b2+xj9ZlBl7f9Yg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1THOCRA9TVsSAnZWagAAYnQP/1G2L/++mihafQj+V52V\nFPZ2/xu58iZLK6AThIGELdQKX/uExsd/vpO7xocIj69DBjdR8Xso0KzWtkj7\nVeQe56H3qqv2dk2SaZSmC7rcxWJBVNvcJkQI9oRWrDGn64+cQnD7IRrQIHsC\nARnMrY1GLoAB8F7qVbZF77LuunaE5Hwy4smh+ii2y+ytgdkGj195Iui+CCcu\nN87VGfbvwV39mey9nMk3cvABcFu7PgJz6wF0F1A+z06PlRnX/i/P3HGOeBej\nrZvyFG25tJWI/K+ztzcS9Fu3DpTQFZpkclo4mj39Oz7GFFC+bPf+XeXKmu4O\nZ5Hn/jKiQjvVa3fxJardAIoLutt2YsMEOnIlQgb9T2bOXTW8Ov+MgjiL94gl\n6gNXrwTZgleMSZKnFJgjhYEt0uUvRMHQ38oRRmaZpZEQkw+3HzauAKpQcjrR\nZWyDGZskIRdG4bxEjk0DYbfXBYcWMWwXLHTHJsyfOXbN861MUcNVL5kxD5Nw\nx6ZLLOQhxo5HjE/Zt7X5gHIYxTJ/vE8Dh2xqzTERnyQ3+GxdB3hB16rMFgsS\nlrNX01d8WavOqHf4aowpnKeF1Y4NwyBXTFxprpBwl6rPC3KPENQq/9Lf7VSo\nB/wnyvB6++nbUCJuHUHVStonqvogEleCCzZwjkO8qre3T95W/SKc+/qVU917\n4vw0\r\n=NnIN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/density":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/tab-scroller":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.9ea52070f.0_1591030221521_0.14912062439561247","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4442bcd3e4ef366ce08f37ba8d14e4167adcdc3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d86ad3b60.0.tgz","fileCount":37,"integrity":"sha512-P67Q9sP5cvPbjc2nCq+iAu+IODsC2LOXuxz+tbHnmBXlf7Ia8NoT0A8qlgSqlB08bt8uJ4BYxU6QRJWkqQcu4A==","signatures":[{"sig":"MEUCIQCUVON7KNVVtgXLIQB6LmASf/h7oxxiOTCnOqrOmGf2UgIgRlaXKrZhnYAjkUYrH0U7Le52CX9JKSaGxIVA6d5UKQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T/GCRA9TVsSAnZWagAAz5EP/i1ZJtME5N0B3QQmG/sD\n5toLuPg53VSZ3GWP2+fRTbhrqdjyoPU7aLNtiIt4rBLrMJ/jKky15OymSZkO\nyjUcHztHEemNJ/+uwB3kMt5OMKZLnjLN0Vc8AMkc4NHflqgIzHICFkihdPWe\nka0t5vauVZRRMFqf6QF9VjtEOMxWDdqYldlXazQ2CywEJkKPHCcoWJIzS3hi\nsfeME/q07E5E7hur+YcJD0XYDVpG6pDHitLb9/FWZ1dlOH6NHzVwRDZUFUoK\n5lNI1fxeIiJEgPJy92wqbuTkGimPQ3LLXHhv6J3UacRtK1GYEQ7mk0UNbF8+\n01048EaVmEh6W5ehJ0SRrUryzCcEnGGsTEQqBXXt1ZHxjvqE6rtvbiQk152n\n+XOpJ3j7YycmpY98gl4hok2PWuHukQX8p0OCx8fC7bfHj1BU/ReJd5+JCQa9\nazw+2A1wSQWZ60e9nrBjVhcLVpp+MDVpK1SYku5ur12ETkVwgwJzrl+F/crn\nc3xKIl0boSsc4dOoOfd+brHM69KjPKttu5Q+Igz7D3KEb/t8lDVTU2EYqhOl\nGr8fLpfqEE9zz6dtRpYkDTy0C+Dv7eJPo7eRJid875oLGgXgFidUEeBY8EO4\nJXqbxz0KbvwoAKxayxefyarUOaVX1uvY3pr+nHzDjwjQ2e607cO9TyS7RiM+\ngsjT\r\n=1rdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/density":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/tab-scroller":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d86ad3b60.0_1591033798204_0.8622419904374354","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c48d8dc898207cbaf5ef95834871688e72315a29","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b9776b1d0.0.tgz","fileCount":37,"integrity":"sha512-y3GsjSTqFZa4ECpCkAkk/ZbPbtEAzZgPNbOuspzCfOZkfWReaV8SySD834AZ3ianbCzi8LxsGV5UlpRM2bj3lw==","signatures":[{"sig":"MEYCIQCgegHRB3kFbS9UPlGmScCjrr2UkKAFrlf0hiAR7H9xXAIhALhRoE2vfpuYRbQyx2gVFZbn639s3dchycUJCI7c9jUj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UiKCRA9TVsSAnZWagAAx5oP/Am7Qe/ayHjDMaBOoWEj\nxvDKE+m/XCwBot19lW8hdx2ZI1GnCR4XeVtBLSw4CVVdm/Z2GjQbOcufJk23\nyeuifhxJmukgOLeSlhjkBsOp77dlPBMO5yZOqRWsYCgSXlJKMB4A0TAh5CUn\nvl/+t/CUZP4CNSsia87gqtA8IDNDuCXbMN3qLzqSkXBO/U2POgyMYxrXJgL4\nzyKrpWLQ9N389GEQlfh3/zsSvTYfYLxAyrnNBqFIWbMx3b+17LP3rJHTix1r\nUlypDzg6Jp0Tf5STb2t5VjbKFPC3C+c7IhjY3aYRO0dKBVWs+DqPsJv8nrRi\nEqoClCukKgGGqMDjmjOKr2eamJIUFlwgqO3HSYs5mYgxF3xy6XzzJx6hM6Gc\nfE4Gl4W8LBeYpEkHx3MMRW5eCiNSkUvDbDisRhlp6eObv9jC2H2/ubLB3VV3\nVOuCTJnLxsad+Bes8hm0SqDvuMdv/8uU+ijJaDfosMXA0bbywjcmx00BA7lV\nOJT+185hd6IlYiq2nORs9KVO2zMWIPz89zMYxbQbQJ9079TjwkTxNk4ZClh4\nUsfHl4g9Ld1oG5ccRddbE++1iSf6cl18OgOrZay1SG9hHQUZqO36re1Uj9MC\nqEo/unVb1O5oK6PKVuEdrD0uBmTanv0xSwLe84jB6APzMQDbRd/8jctU04fn\nmzAP\r\n=Ns7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/density":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/tab-scroller":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b9776b1d0.0_1591036042224_0.039643399090555365","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf951e9f9c40de151112e55a2274169ee6ecaed","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ba6f7c294.0.tgz","fileCount":37,"integrity":"sha512-b7eoxCGGtnej2F0jKCp240m/GmtOVqKk9btsiWGJMph+YZq3BErtZAo2g2irJNBAS7fPvqEdGFeOisBwMOz3wQ==","signatures":[{"sig":"MEUCIQCXHsTTl4pAapKKRfArxbR90uf69rsaxu+gSH6AitnZrQIgCWELlT4L/y8T6jEqEEixf8CiUn4g1xq/VdVNBstfeaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oaNCRA9TVsSAnZWagAAVzwP/0sf+F1l7SkdnzTDv1lU\n+4jykgtjPzhUYUl2/Hs5AgzaWd1BJCq6CocrqEnaZW+e7RtmQ3WRFDDMvQdT\nwoi8k3FsYF7plTCxiPvHKJzwxh0o4ShAbjuQO5RPuwhrpIYVOVCX0D2i5inx\nPgbheSOZ9hPmmH/l/a3KpfiEFgEKOvf3msicZT/grrZXUxH87DgnfxFFUtG2\n/LY9j9iz9FBpIH3z/pbRYsiGnPI/Lr8I+yKqhxcRe7zSOihdYJS8UOvunWUY\n7PPF+DtZ9lNKOtr4Q9Ytp81NyQd+6BNnJlPXUiIZM27SkiC5g87EsRHirxyr\nrugf7UygKedZg84ArzmY3Mh3OZ50DofgTmVvTAckjLptXNrbGNcerxNBUxnq\nt3JB2fQNdux+2ACbdDDMFkhiUD9SwjDgv1+EoiVHi+wzP3rzvfPZcfyZwIAS\nvCJoSfpBk76NbqdpT6MCElc6Lx95YZ7L9+b9FjM6wC/yEZCMtlBLAxqfGdCQ\nZHqbgyFbGVcqQaN1OzFDmKyAdHdWeJzUDyJozf1Xk+ap0zdaZ9nHs8XiVl06\neJTYb0AmQDhD2QSO1hl5Yh2DKywSEE1iE9iSAEujuHaGrzUdmdSS/ckLsAPV\njmDZ2C8LoJI4ZCX+CljiJed2M+Vb4xrPvdhxqJGrlYJtB7qJJ4NdPwoTQRXV\nxuQP\r\n=f1EN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/density":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/tab-scroller":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ba6f7c294.0_1591117452923_0.8622588360130343","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/tab-bar","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1520ef01b034f78a3da7dcf6bc0e2c7bfbe36581","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.cf3b664ab.0.tgz","fileCount":37,"integrity":"sha512-fbdIxmCLtqhNTC38ubPL2Zspdbnb16U5/YLJvkN58sYC944eLRLvdo6SFawl0z2ptCqFHIsApk2pES7HegPRiQ==","signatures":[{"sig":"MEUCIFgbqyilw4Aau3sBrySYefiD4Aeb6fHbqI8uQXMKCCQJAiEAzveByIy6vEi1H67CzoO17jPRSzByO/THuGym7mIYGqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1plvCRA9TVsSAnZWagAAUO8P/Ru67IFIdUAaw1suMhWR\nNQNbtcq/iPvadGJNLb06Z7QJkaNS351L+HYxhdK0yFiXFujEHoc2vE8qnnfl\n0Nvpfi0mjl1t31FlHsMqobuAYQ6oprSndm9oeoCHQGPnmv0ehTOdjvqAamj0\nN3sgXsmdo22ViML5IBGRbreWYVoKX4t+5ouWqJ4DrdpLaxRGuoiqKF/NfyTL\nrmAryHyXZqkfAKY5MNwTz0BfMcbPArPrMmHr11PUNQ4by+IUXpyQv1IOeeMY\nF0YmI0a5lRaPBZxOiVoV23nzhC2v6sXsV15UKd59AKlO2hgPUzt2zzEGZx5X\nBq+Fe8zQXj6M7pNW8ig6krkMcavOPCWpv7QmKstbfgJ9x9ImSaQF+EwYUz/2\njpYTzJXlMfabBxx2e4fqwzlFcHGkPIscsA4G8iSbCMzAi+eK6Z8WkPsz9TmW\nKq/eyqFs7aSnyYqpf138YYlpmtEeaqbxXHcVOSinmPwQp4+rd3M+WhGCLl5R\nuYp0DPwLthzUazLEXI9iX7JB5Y9dx/lRiU18epJ1DlnaPjPxEqi6RJ5AK4YJ\nIIwvJVEbIScjZhWXyOaque9xcLCmYfuXiLde7ozG4CKRUSCazp2ypXE+cMdY\ndmf1t3slvktcKyX2iAAaTwOd7xgUSsB45VTS6bgEvsXqdcjDAb2PY8BYl/AY\nPYrn\r\n=d2M7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/density":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/tab-scroller":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.cf3b664ab.0_1591122287181_0.8157042998372865","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c69f253fb7b02b2f2a26533e5ca4f77a31ed659","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":37,"integrity":"sha512-ph5u7G7+twOD3Mq/BBkULq2rImyBRORKAugilcmGbvKsKtv9d6XAwnnprAxyEhD/y1pb4A2lMGdvFspijA+SBA==","signatures":[{"sig":"MEUCIQDxvKDqXjam3ywAHbJgdB/uj52DPTlE8tL+J8bB9PlZcAIgHcomgxLRraa7KLPkaA3x4DBLv04HEsbPk9VHjLsUFAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uaHCRA9TVsSAnZWagAA87MQAJc+sWQxQkm5Zi74xksf\nt/FIvy11rHVNj1a8Tbg6LlDrUtmdky6bc89+PrhRYaWTpRYAAZg1l/X5ijlK\nDtNUWQyBGf4qLWByHsO6ilAi48RYJM8uUdrPiMEmUTYd+yXbD3JPaXtgU7HM\nYF8rCpk/4NjpSxRLKq/5xCWlxqVfUvv1NrK2KxaBkxd1CUdLQ76t7CRf23bp\nid9BcuwBEHBup2XjEj3nLc4QydbjgzQqWdX8HY+aqZxNA+dl8nW1Z+B/0Gin\nHqFMHdOnpwBjBgDFGr7tGt6qRB03glV6aHXUE3CdCV3SAr6aeu7kftnlyt8C\nFFJ2u4sun4LfV8pB/KBZ8mYIzNC56ranivJfCioMLPBzEiUZ0Nv3Dj7QqqJU\n7dVssPYeX5FZe6EOfv4iODRgD3Nfyr+HqxqP3W74owQVMn5swFp3ccqDbDMX\nfpZavVET9Go8VhnyNgCmytZcHK79NkV4VaKQunOztJMI1NNM5Yt7nAlWErX9\nzP0lgSNIOHMW/dNkwhmtTYUgsgtuJMVa+SPdIzUJrW8HyODSSbCPVYb8jSi3\nJyVE+X0wmeg++iYZX646l/FigZPJwDorq8HtBiGSkvx8hJ6iGQDDhvJetnPj\nFqGh1OfeHhdJ6r6lEiVnXFS4aw99KU11rmfgR2YNuMUGjdPyJQMmaFVZDcz4\nxV0k\r\n=8x8O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/density":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/tab-scroller":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4ba3c9a31.0_1591142022979_0.7672706468172283","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/tab-bar","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04f8caef7bacf715e03923a291a511e6ffab34b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.388b042c7.0.tgz","fileCount":37,"integrity":"sha512-dCUi2Kjnmw6A6/H81YDIFIyfUuOAdz3PQlxM+bmkq597a6iPUMoedpWYJgXBxI42l17Lw4Fp8o6tJmirQ8B5XA==","signatures":[{"sig":"MEYCIQClTD/uJLBvt0/FBlY2ivRd6Q5GVeZQMtcU1gLfeJVLCAIhAIpmhVPReJyAU97PvS245sRGZ8by8t9e5Uh5J4ey1460","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16oYCRA9TVsSAnZWagAASk4P+wSB7a35sz/PmebMtqX2\nUqSxqPKSVnh1/rSdcbaQZ7rHdZRIXqImHSKcALD3VmUBP/XbOVHiVoetWgem\nXuwliTJ4Q7tHKjV/+GCBzuh8pZ4yo+m9tlJ0IbWVPdGXI+knnY/ZM03KA2ur\nkGTssEl1GcozP5szDfuwJ/A23Wq5buXpxdrc0m3qi1GXA1FCDvcNiziaTyKJ\nxWHm0yuY3CiydXuHUSzWt8Gu4cv2hydzy7XtNEK99nQuZ3e+EuTfd83+8Sms\nGdjAPwu0RZEyxiED5E732ZTPM7N7PfaWCqSatN3LLEu2ev0lyU2GthYp4HaG\n5s4bjSGR8TFSjodaMEVol/H8mENmaEaDwJB8aNYnFe4n8gEHdPvVbByM+SY5\nHDiW9p4Qp2RlXmjo2yBZWCfpnB9vvq4u/v4MjxD2+iBZkpjapjrsVWVWUqSV\neTlx3e7yL1HfPzueJmXFehBWys6S6LjoAOWisRVQjDrJokXq8umw1N2hD6ps\n4k5SCaD2RmE8OVAs80s5tLE0/fzI/O4WG1HBecUXsKNUX2uXQ71yXcxNf6wu\nF9FMuUz96+HT7KsegegF3a4BZGjEPACROa3ay/+SDJJexFc3//4jN+j5JKnm\n4NDU9JH6QaDIHEhqzWqyUY4m+X3/1k9f6WuBLSRNnU2g5S4glDtdPCA5j4iQ\nJONt\r\n=RO2m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/density":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/tab-scroller":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.388b042c7.0_1591192087472_0.6292213864993874","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99543ec2af645b2c2ad87c5c21be72d6ae103cda","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.cca1ca84d.0.tgz","fileCount":37,"integrity":"sha512-Vd9h2RwXFgIQ24kroKBJvNjLU/nsXpszAyhYuKJK518K13kiBwSpKIaVWaUvlCfIeoZC+dX1zq57X2AyE+hQlQ==","signatures":[{"sig":"MEUCIQCWoXwDGXGCoW0Q7KVxx2nOacEmkNm/TVXLB7jTj1YKxQIgW8l8+CeZC33ezARwgwrZcrrJmY/SoCCjlE5Dqi/1Wt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18oNCRA9TVsSAnZWagAAy2QP/0iewJqOJiPZxSFKaF+v\ngwZGOrgIQ/GrtPV6YaDynBpwAzex+zH7Di1IrQdzJBz+NviMOs+DEuAmqy6L\nv62yTSASfPOgmI8EK9dQJserg9W/uYATwPyvAwVbshmzNN/wyZckNm/xFBRj\nlx52Wa8hQ+3effJ1GtMnoPxmF6zUBhG5QZ2/br5XayNQUUAGeogTa/X2fm0W\nZFDb/T2gS2drxFhXsQdYAuQEKH6UsKxtI2Jn9Lv2JRl6DvksnDQJWRpP6JkK\n+qjEU6zlZNvrzhB/CN/dZMncKNaZ5mD5jca3Gpr7Dfss/TMAgeJ3eZxsLY9e\n1mQjJwOO4kHEQRJkMHdT8HxddzHswJxaZOKxQjiKUPx8z0kFElLkgU5mzgJW\nUFuiZLc6E4RYH030uWtyyHCeshXaKI02ugO695p7PGcLikC7eCuVJOQp8/Io\n+xhOBHUlB1B8eftH+tNrtrHiFhB4iSoMLyyMhhQzpPm2HH1rbjNN8zOGXwvP\nH+x5cCcBOo9RLNxHe1OIa5PQkVfVvYpgKMrFlJL/bOPkB6I9YcTJgirtXvM1\nDgutcVsa3g0d0TsoCfbZvGl/EnSasBTV95q3KH+D0G2M+LHbA4XnnjHmUW+Q\nE7RjhxCkvII2NrN+mJVAr5p+FslgJejK+OBGbkIKrRfX1YXeg9boxW7OVPcp\n2xfP\r\n=nJJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/density":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/tab-scroller":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.cca1ca84d.0_1591200268606_0.6453639522533026","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a72b75fce8172f6315f1c38f3f06e6de843965a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":37,"integrity":"sha512-5UR9Sg9wEI0wdcQmYNRFyvn5IkVRvm3uACHyTpUCG2opojprFQBlhUa+oz2/LoiFlAuQAoLUTTv+OXq8xmbyQA==","signatures":[{"sig":"MEQCIBLR8N7Ynp4hjJfGBp0It/RFUfzgAu7BNAAiEku6smQiAiAtlM7urUWs5/mjMfttF/ptehamdm8YVgySEQGwI/aCaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/MHCRA9TVsSAnZWagAAkNgQAJ767inYmPqA8xnYk2Df\nVOyZcJwhv3kG3w6hccByap1op1Lk58XBRQY3xMBpPd+bxXwqunwHyB3GNyTp\n2YBxNhdlTdrUluX9uPyhwtJOe2FQJAQ2SgZv5AYPE+u9JnhxejHIMPoGDFOm\n5ctNPY5nYIWnZ5yg6j3xUDhsaDZTmaPgqnlhgWQ9JRxgO2yBF1O9WuTjjO+g\ni0e6jrz5PgAyWA2t+XWSSoqTAbx01t9BhrCm6zY5FVx+HgywYei97nxrzYyK\n/N/7zv7IqzYUCP+TDtFD7op0/H2m/v+YuEDChmSeKb112rSovmfrxCLeYxxp\nDT6N8NPKCrZBsVw2d6C4GpTCdLetIMLZJ6PeUv/CTpy8HkBYbdSZbAmWkQuH\nOlV0s1bLdoQLGsk24+vL/B+SRs9P3e6h/hirg0EeGRv8Mu0DrwhHEHYgUdka\nyB90JvQ6U1F0jK8a7wzJeL9wnQGM7MydFu1CpzwMHffrSRkDE4G/mZivLAgj\nqqxn5YMp7OCRf2SWR0ZR0bEgTpZdU5ZKx7NS67F6sg45TRAaRt5g/jMBB55e\nNB1zafi/1klz5i6B3lbvc/ZK5gh0wNdg2uxP7n1utiI21zWtiRThslhIiXVb\nNnSlG1eHzaoxezVF/DafZuqN6roB5YvB8ipSN2w7gnq2kOaJLupjuE+BKlvH\nwqRZ\r\n=MB/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/density":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/tab-scroller":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.9b0b5f2e0.0_1591210758703_0.14814248778606087","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5079f9b4da0bd73095d7cdcf6439de23a8062fe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.0a7895f4d.0.tgz","fileCount":37,"integrity":"sha512-ZDlRTxpC+0rifIpaXtWGW9PG1ec2EOVaefs+t88MoRIwMtYvtuOhYCUulhZ3HOeVBr4Bbdz5gk88THvyoubhuA==","signatures":[{"sig":"MEUCIDHlCFy9EAgEmZwhIXwUNjE6vrlYHhRIJrOrhFTBmyltAiEAhn9h3IoCPwY2Vj3CrLAGbgcXroa5C3EKW0zuXZim9Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BG+CRA9TVsSAnZWagAA3UoP+gIpIrFqXdgwGM9GvK2/\n2cNomPpSSXiVX/tYtVo9cZsXaCxAIfFFwlE25fJls2J4N+lbeccZqB5hO+KT\ncY5S4F8gE2BkofS3/OozmTuj2ERjtFuLbth63nGeI8HDEvthI5Dfr/H7WN5g\nYY0XWUH0KE3GjonD0mXzkttlPxkEBqtrvyIyIn4aAVeypquNbWGwhub6Tc2R\nvxI4W1n5SLsocddCSyoAt7QezBZ7TA6hJTLOSJPJas9w75my4fFE3ZP56ZGh\nVuZICm120/cwPzL6MP7KCy5pX3/a7EVpX98MFWEFS0tTs3q3Y/faZYatXiht\nli32Rx2KXgAHGyaCZ3iTeK34Lf6A6g7xUTfJuFAqIrrK5IqomuHxSwMFbF5c\nmUa4zQ4h3R930ksDVKzl6lyCtoSVMzdFq7UjAnV5v+afielMGoaoQUUq8wYH\ni7FnOCK6XF/3L6Tf44nMkFviJ0cNwPnAu87wo2lqtfynon2zolIEFiQsUMEk\nsj/pOsDL8KQ/xL+7XS2Sf10mXmG7xZaUk+uWqlCfeBBREczIwzmHIFycozYZ\ncKe6fJpfacqaWagzXaLtvsQChzXkLc16GTqnvJbz7KTfRYttAwnsYs4uAH8p\nusmBN71qJMiLkAr+AFdftNGa4KrLUIBOLi38uYSSKrJrUIDJ7jiUeodniSJL\nGvbH\r\n=aBa0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/density":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/tab-scroller":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.0a7895f4d.0_1591218622536_0.616589601778404","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/tab-bar","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d0ee44748db20a7ad3a2269d647d74955378de","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.7461aad68.0.tgz","fileCount":37,"integrity":"sha512-1UK21i1fJ0S0F6mY5fZnmz1nGH2nGCS08kQX4NShJzunj0N8nLBNz+IojzCv7YMK0fzTpU/Q0AurBTX8ILclSA==","signatures":[{"sig":"MEUCIQDE7FVkUGNSvtyA5ngXnZMVbe/+vSY7RTZ9vNNVObvCAwIgKeVgqWO1bxVUlsX5XGDweCamHzxye3e6/qnvQUTPQLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCsCRA9TVsSAnZWagAAHHUP/j+QsDOjnPRYgTZXvMM8\n7e+00Fkx4Iy4ZoRbbXJnYr7z7ZmWnfYGHyE0abfMPoD4uioGmg67t2yWiNgv\n9DpPPzfG5raj3a0f55FQR/qYj5Kq3H7ewBiinbYfAhRh44UW7NpEM/iovZ+l\n1kEt8JcME/R477x2LK+tGMlWNHjDR1Zx9r4exX43+ekOdqHuYKzA25ibnU5V\nih8FcHQpHCJHqHYEmbgDRDOhiV1joGo0b6JFrr1bZVmL77oNZKPnYu4t94F4\nTyeGCXHewgV897ghvZjvA/M+Tc91wGK06Ws/QSlpafx/oce/YBDgoR1pzdKr\nli1NLE7cJ22JZSpFBFOCoPhltQqnTSNv41Yv9HkYrAlCXak1uOfP5F1iqsR4\n8BN7O6KIWJM4gz8bQUzZR4ucaW23ZZPEM+UhHfhrL7yKjLAj8uJvCLKhUEud\nInmNy2gjXDhL31R7lh9sLbOXcSrOMGlR4fePWJ8830riLcQIMqFrFk4fU29P\nVjUrvBx+woij69o0wuLDkDum943QvGqUOefIcSh+hpSKGLe0W6cCecHJFLwy\nDrl1rXcZwUmMss5OhnN97QkudOI1hZ3pKeiGccjRQsbkjKfoeS64p2Gg0uzP\nf/8/dU8jJ8OsmuZ5FQ9Gn8aEJ6rTkgSuyTUommLY4gHoma6GtiKRDOQLdi96\nDKVk\r\n=U0sI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/density":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/tab-scroller":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.7461aad68.0_1591222444018_0.5954794436848017","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f01ed9505a7311f8eb8099750693bd9d4eb9a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":37,"integrity":"sha512-uX2o4/P0zOdhvYjA/fkv2DzNFLluYDfuaZBmrfvaSuN4TAJqNGl4L/X3EpJIhg2zRK6MYEcAWaZJF1YNJPU35w==","signatures":[{"sig":"MEYCIQC/chlbS2oRPSq0LSVQqhdgrsdg6i0L1Waq7KFxA2MiJwIhALW4uCtemXp/rIVR+dEDUGgB0wpZB0tAFBLJbOcvmq6y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WSLCRA9TVsSAnZWagAAjMUP/2DyKdHEB3qu1ameK5X5\nGdbDsGkgov9/0Vwa8YPB1Z3vAXpOagSG16i4ZD+rGN0yLRSYoIGDOQUhOTxo\ngc2zyQUQUlir5reu/Mo1NhjrpWI0N/sNUWA4nZ747m2/97zP5GIfO3tOsEv8\nO+JIsQmg4hEqEAmeDF+cz1vdno2IpF7/KWdWJskQENfKmIdzE0PWEy3+Wvqt\nEelZ6aXsFWviL8Ev5u9EXmKuRHd6LIM+1hff+mjWBVm3wDBvoveQLB8EkYOQ\nFkqwVheRrW55C1jwB1/HkTlZ6ziDcxwnrJN9H8FUEaEgrS3tLyNYwhjKNAjZ\npDbml6fa6NMQxuLjSHkrUF05G6ENIj6dTvlqm0HGw2tNuPxNB81Fvc/sHn4I\nSBKOVIzWxwnkyk4o35/sH71i1QnQHlB0LaSroc9dK/FmGQACTw8taGDagRPj\njGLpmB6DG3x/uS8SwCefd7kK9T4ensULIvmFMOje13WqJO69RdUwOanmrzCj\nGa//GG3nW1Pr7bCnxXazXVV34/1NLOdZgp66dJ0YQ8pxa/p0s5Zyi+OSeKzH\n/ukWsLHvXYAjLNTQOtdFLrGOAbE+YR5vAlRJdtFq06XIzgusK82iSq5Fvb1v\n8UbhWUVKgavGxMrDZ8J0cpUyZYVPZKNqrug8kMkgGaw9o+DjktE3fAlR+wXP\nqwVR\r\n=jVAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/density":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/tab-scroller":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a0dc2b5c4.0_1591305352494_0.576082197866796","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/tab-bar","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9652e256bc741fa69cad273f0243f3f0f15a1e7f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.2b420c5b3.0.tgz","fileCount":37,"integrity":"sha512-4+gP8/OpSJUlP/VDQuY5ar7TZuIlIcpZ6MQL/NUfVbqbg7mgsaSZkDHe0JTUJtYwzY2GPMBQ4Ibr9YtI34rEww==","signatures":[{"sig":"MEUCIQDyPAWvDTSiHLRzgy7LLTwcGebrJsS2TJKz+7vNeY1tGgIgdB3thcalcK7InnVXrFPI8DMbAAFuyD+5Z+Hz7WEAkMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQ1CRA9TVsSAnZWagAAHJkP/1CqW5fZDk1pE2MIRL6j\ndKMi7QD8FoF2oOCgvx/LgIL/DtFTGxIi3sbURy6Lm0d7AeKLBANbjQKfy5T6\n0VcQYxXYDUIoJmFcUj4BxYOrRsv7AsIr9DcqdaQ6tmpgypDasGskutIqdDKb\niGOsfUr9Pzl4kXdSK1AgNLE4Buy8agyjSPpSPM1fLBI0OEf4Pdj7xiUUYe3x\nx7mW1ZQ2FUxivLWNwLSjvLOMId/XOJBJhuf/oeWjlW2CyGkp7FlwlTKXQ+vF\nxWbNGxw7f0D+le/huM910/Rld+oWtfaYKXeMXLF9VUbnPyY4ZNUI9tDce9fe\nJsUzn7GVWcUX146FCk2EbCin84acjRCIIyRrY0OzTIsYjScZoF+/TW04n0xv\nG2oDMDBS1PeE8PyGZDz/9LyGhrsqKV/YALmQaa1BwtJIrGWRUrvcft/ACnrU\ngcPLGjFXbQGaImy9evSG52pGqoZ0xMdaE6t21yFnmY+CD+aVhWPq/Wy5bqKK\n4RkF2B3knShNbcf3Gl4aEe9A+17Jb8SaCL2mTbjMz5y7R82JedTZOLfeidoG\nVe4rrEgg8RAxY8SnLjBHFuO2DZGauMvrX7Xr5UCI8+/y3be30t4OdjWqo3fH\n1InVW/Yz9d2DwRnBOO68iZ8qtknJsXimQgEo4mJwoYx9vyZbPBUR3FPU6jqe\n7Tpq\r\n=jjSs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/density":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/tab-scroller":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.2b420c5b3.0_1591632948851_0.6375698854774892","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"813c1ad2ea47ff47125616c81c62cae311930f2c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8fa22aacc.0.tgz","fileCount":37,"integrity":"sha512-jhm//ltMhDM2vbAbjZ5YLb/efEMBNWLgG6B+LR0NpJX9Xj/CLr8UjRSKmqAKADyTzs09+4FANiem6Jf0F+qUCQ==","signatures":[{"sig":"MEQCIAqEmsJdrOn3tAiryuUbbpv0QB+67L49ip2cucXykHbPAiA2eHevOguvZLj6OiwBfzFtBc6iWchYE8JLRtRjCSyf+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n4FCRA9TVsSAnZWagAAMFAP/RtCElCJ1AiUb6ir+dCa\n/zDgSRES8MEmtrYiU/tTt2U3ZPcXo7MkGZdw5QLqjAw6HPTi3ZRRow18GP3D\njgmEt/rdfIeCrauvyF62NePOgMc+wu5bYeoQGxtC8sPxyFJWsRh3PfatIJZU\nBdIdMZqFjHZhibd77O7lHG5PGypjHswRO90wo1T4qg2oZ73nztvmCARhczWz\nr4wc4jqSiqoUUsK9ot6FHo0I9tNXv7ejLp6znvOlj1/pxuJcg2nGqWRH9uWT\npvcsemm4WMIaMgvvbLb53SVpok6aLcYdkYqqwmFU+RVc10oh8ZVUx95qkzVs\nPU4tedC/pWfUfylPOhsNLuWeENN9DDe4J1ZSe9//e3uVvv160shJgJqGTILC\n6hGpWJbsOKjZnyxU7UaBXtPz8p5YW6EoaucwljjhA5gLzbGhvG0hCnqWDJkA\nEDQg04DVuoPxEi5FqrEWZizyJLurgKO2eCtnqPDjnvmQz3ZVZkokJpoHeqXx\nMzO20snXmCgbAY7bzdVTAzOSi5vp0wOsut5jzDLZ3sptFx5S2AitOw5m4rYc\nN8QDUWqIWvk9yQOzs/kPBIJ1RVckzap43uzp9eVZgnxJ4VLHLnCfG6LKpXRB\nXpZM7zrqCgGqARF9ty2VHz4PN8g96Av0iEj9aRqUlmfW4M5IJ8c9p841htA1\nCs4q\r\n=yLpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/density":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/tab-scroller":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8fa22aacc.0_1591639557409_0.4382246550104256","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/tab-bar","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c29c1355f627fffe635c6db133472c205d80a412","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":37,"integrity":"sha512-Xl7qE115FJ6HwbFFW35SROQ6dhzTZLLnKiHV3Rp+DZ2abT2wzLlIHNZPHEaTnyJh0IbmMnEZoBKTuX5g6F5Usw==","signatures":[{"sig":"MEUCIQCB2fRK3OXS8+fpfC5vhA4CTl/qTWTJ748fMqZ034DcPgIgPhd6yghbbCkMpcEwWimqCzhSqBPRdycNdqS0W2d0K38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3odRCRA9TVsSAnZWagAArJUP/RO+oWDw7ffYtZgnFXgx\nBQdVK7yhA7M8izl+hRDjBfb1uEj9c1KyvQlBVmrWnueuSMyDDd84qDS8g5YG\nMx3uyV0UXM3h13Ft110T6TsJVNxQ3mrzXHVApPLAsRVdYISjx0WHFnM5Cmnr\nBJwQ1uoCP56l1Xjhd8ZUaKeu0Snf1uil9Ng0EaOlPpFgby4vXfRSzsgCLsTJ\nkITA32djWE0Ca8hcgk79NXr1htCaRVyOeslhHX/UD0blBWR2kWulUzpTH1uq\ngt/n6kdagie/kMIC4ybCcXewspc8B4O23B6BGD8GaLN0iX/HDG8F0cCTE/Ha\n7RzYgHrMY4VzepCwzhHdofg7tZZylr9q7/I56AyUIhIyGzampvbaTE+MEkmN\nTW0GFfP0DyfbgCW9FVrlcBjpXrE4/wwZpnZUOFU9cLUePD04o3co71Dd8fQj\ndPVV2SAq5KAbpwtH3T6CCQ5Sa/LtB8kmliKFjKq5hjIikjOA5VRNkLSjrVuc\n80FX3CushvwKg5Zxq7CEEDIYaLcUU99KL4p54yITpZdydpqP66jG1P/8cc3l\nEp5NqIAmFRhCcieRFQRgVbXnHMKEvK+zo/JD1JWeaMGIpGiQY4lH2aL/kUss\nxLtFbNRH8iuIWwNmj7OgV4cZXimWm46dMqnqLlSkGVRA5SOrEYst8MYh0LMn\n76uY\r\n=gJUQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/density":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/tab-scroller":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.21c4e4ed8.0_1591641937409_0.743117793870788","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/tab-bar","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96e58b8084c5792b76f2c23f603e93a4fa6c470c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.dfde46516.0.tgz","fileCount":37,"integrity":"sha512-F1pHoGRwA3iALQxT4o4vwMAhoYhfEluh5pl0OI07GqO6lj4V8s2YVkydimEF5keaEadX4OiglcocUyWx7xVgPw==","signatures":[{"sig":"MEUCIHbnZs0rqpGrKaqdzLtiL7Vt0AEM9DcxZdo6A5lOVW6dAiEAn65z39mZ0+TuJ55Lze8oh3OI/iOy/NAA1KUDJqFYVwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTVCRA9TVsSAnZWagAAhxcP/0GPVVngsbOMxineQTL3\nozMpFHoM4joMWAsNJ7P3a3QVkxI2HY8HLDfDWjCVlDaBvebEjFMdVv29pP1B\nGI6JILcW/xAeDsga4oTvACBwSUP4ADD3ssVAz6ZTCKHWruXJo9JVYDaE188P\nV0IS27f57hYB312bxDwgmUTDeAi68tI3O3Zm87BLtWhPFNeGuifkiqu48XZo\nBNsRkQoLe8wLQjS5uJkcy97LIXTZUT9PHMpb/weCMwTkz/LXlDsFT5rRyGg2\nSZqQc5QmtECL2VZrqXo4Kg7+IM7B/A8bF2C3qLiWd0ZC+HX3ui844ugZTIEj\nzADQ3H+egaS7nFWxxpLKLvrDRNc/wjEZOCk4ghA1R6oVwi9hWVG2zX/m/DOl\nWZiq4B35kUYDy6nybMwPP7SSGl78qqVJrT4tlphRr/gfIhK39stSuqizbbwF\nS81MD4xhN0xKhUuoK2i9Ncdpr69pd7FBiYnPw2k9zbKsKCh9i2r/hyQGg+tn\nVCGRtZpMvIdC/e5QYQWDJiqg4KV4kOkDuJmwkfL9eYG19BCZbzrpQIdF3j5C\nHTB3JlTbqhEkSbrzmvexbl3Sz5pIKUXLNl4PrxpAA9PnygXNXIMS17K7WEMN\nAJMTMr0lDYbAle33dO9ONYPfg/dgBhn9kpk1mf0Uzek6QLjr+SyzLevYOk3L\nsIn5\r\n=MN4Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/density":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/tab-scroller":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.dfde46516.0_1591645397499_0.8741897080179444","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/tab-bar","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"742f06ed9470ce4ebfd778d5c85961d20258671c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.05cc5c206.0.tgz","fileCount":37,"integrity":"sha512-dDPTsOjGe2S/LOoNYjuC6ckBsLwq9U7Untun/coaUBfB4rD3d+qFbt8MgCAOFIOS/VDhuiXsUmKr3lAUwVcnSA==","signatures":[{"sig":"MEUCIQDVMG3KVujfzytaFcjm8I8k5TPn79vn3NE48zjM9dIuPQIgLTqPAkjngTENA7143JZMiH6oxxs956th3uPuFQhsvr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qaKCRA9TVsSAnZWagAAblsP/1QU2URhQT6JJDx7lC0N\nlItm6f1V4w1AL3q0hYOmx/5c0Ls1nwrAUthZV1We6DzX1gAPdvCIFa/gFeKI\nOj9pXX/QdIHq/aDSHPwcjTRkOXEpXHelNnk6KpQOAxcSF8MiI8T88avW7zKY\nGK6jcBgIqsBNH3iywzNF7yNjbIYKNVD5UdD+g1PnGIHFKviw1CtwbH+uTQV3\nhcR/vHh+aZRCdeTCKLK42KMyelY09+24sT+WhcdGojWVVE5SuYBIHlLYrlVH\nfoGdFFkZ1ssMz1c/z3sVbBvxAE2E8AW7qc6kH0FyDXl+l4/MJ2+u0zjzy7zb\nO1eueIvwrW4PCYAIcjIbuCnV/X9A8wNzm9L647XY//fxGhFBFUFstgDXzkTw\nz0NVqB4VcErnSG5gpnxjDb1Fyisn8WqK+nELzxVmSe71+vn46maowmloLag/\nSNS6qJ3dKRoaazDrmyPdOYxt8ktsb31fTQdVIvD5k/BDICQrLqTPzlNkUTud\ncr3UQJKaXKP0qLl9T72m0MIYu7hHseIckEY8c8uXFQVwSZKfyvUagDp3w+q0\nKnRXU34ojAXmrWRAQ+dumeZKSbi7i66nFaZTeJMT+aBGbAFyQRJbmMLnRIEt\n9LJ3P1uczW64SRkfcjYJcup6TKT3KvWJuydgwmzmL2Az8rYjdaVKRx1AORqO\nus1T\r\n=K1pj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/density":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/tab-scroller":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.05cc5c206.0_1591649930409_0.8589014659835918","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/tab-bar","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b3438acd3c7dbb08293b2d683a913f56cee306a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.3ee488f1c.0.tgz","fileCount":37,"integrity":"sha512-jOgEBkKBA1Gb/KGjYSTwlkQQB8fy8p6WwpJ6CCEE1B90qCl3qGsORKevUW187k9V/kjidNUecwDaOxbASlCqvg==","signatures":[{"sig":"MEYCIQC487NUqDvArHOSZY+rpK8juS8EB3zkxPn5pNZfLkGV7wIhAJOxSH3vGVQSfHALyucEZJh6y9kX/FmchjgqtgoDoaGY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36LaCRA9TVsSAnZWagAAzpEQAJ8Mbjj+8EpHDH/MR47v\nqnLY2VjdcpdgV6xvn0Ruew2IhdZrg2iaoOH6dy8Vr7JJvxG8vN8wQOd5XpSO\nQ3UK7kxtZsY7P/QE69A1ZNVmdw3UR9FpiklgZaCC0VsOk6+R66dXIzgFwGeS\n7VC0MIl4NImB4U8U4+OAfqbG3A51vtCObzGrhIOQIbCT8NljuwkCx/45CuXR\nxYxw8ZOH58bGgQZCU0DYkju+TiaGTpZ6DPuQLA0g0LG4VvLIy1JNlIiuYsQi\ngIwWWtGw0i7sMTwAyYG3t8Hnx45tszJASAHMZsT/SOR8+Kt6xAiwYVyH4lpn\nRFrMppDbXdWJyxcvGl0VtDoyeP9sGeTV04ooZX+flS6HkyiwBwXrg3bPCpPm\nNPURYXHm5ae6olpjyExcf1GEiFxFu2U3DOFTdaRycCtuJftA39tItitTcF7x\naOB0l+NEjnXNT97vLy1H5nfGVZt5qtMDNb3hUpCNc2KA6mAMKKaXEix6I1W7\nee+xFw9YpUQEKxdQHEN43SP73d7ew5V3tUO4NDoy8UYdzTwy+0Mno80MOaqC\n7u/OgVCYCFfnRHydPn//9LfpGSy58QmcCt7hnGJMqexRwW3yS9kWTuQ/erud\nwxZU6oe7pLqyApY1bKOVEfVnjsPFqDnTfQn1zmb5zOtbs0diR1O3m27MvVx+\ne0G5\r\n=rpa8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/density":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/tab-scroller":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.3ee488f1c.0_1591714521431_0.57446261304494","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/tab-bar","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d587cf8b13f2b30f41c51250e53da6f943ffdaab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.b83d720ee.0.tgz","fileCount":37,"integrity":"sha512-WzxlOhqtEy3lXX5c6ASNqRzddwbRrrR4oAfNhiOPKEYjB4QoOfgjCiP89LeQ/UUNfOaML8YRRiL7R4y7Z+WU2Q==","signatures":[{"sig":"MEUCIQCl+aeUIW020b3kDrsMwULhwjYiBRbW1idH2tePiYRAGQIgQyPIX2OiL1QwiGMPWGphHN6YD5BXyIJd2Llqsc6ZL/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38aBCRA9TVsSAnZWagAA9DMQAJL1rlgL/530kUUgf35O\nvkRcoOO8BTvhEyvUFImqAabe5qG9Oans4uWdnZHmWMNldAZlNqzrt2Qsoqp/\n/vfKsuzZYuKOu0bj79RVWntf//JCIPDLT750PQ4+qGjJvrayc0H8iKUD3pUn\novcTvqnpjCQ2/0HtTEiPuAkLpVSDJSHphhRhKXuVh+BVTgZUlJAxW5lW/4AC\nDKDenQPT/Twtj+9rHFsFecgmsGliTC0b7QzQrSd4xidiCPv4ouDYMychebb6\n3FzGA0/ZEEMWu/uMwJYH+zFrSxOMvjRdPDObX7Nyidj5afRB8PLm/fcHSmIS\nmSJ4lBkNMk9h48WO3RxUGrQPESuEWWHmEBtLmfWc0K+K1I/fEjM/LFAMGOMx\nlNA7dmWc6qAr2jtSr0RpHPR9q3sN4oZSkqr6S/M3ctALVn7oUp03MF1V0mBr\nYV06NKBaf/nOBjN1UWxWB6t4d58i8+oWXp6/CTVf82ee4OuWH1fG2v+fERfj\nv8yB4lMLzXra1Bkf9fg30pm0yHpZ6m73kOdM7LbQIoNh4iVAq+EKcS3NLsIl\nPMx2fVkBtf6ODHkCBYt8mMUTsrlA4rmYmO0Vm+o30I1mW//REuptcfiM0XIi\nrmfJ+0YjjX4JwOcfzb/gGmWI8qVHrhj1l1wAupmDxsbj/7kwOKBdpk/ZDxnZ\n4j7w\r\n=x6/g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/density":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/tab-scroller":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.b83d720ee.0_1591723648733_0.014446656402737457","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/tab-bar","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad38d8a83fac01feb671bd565d954bf559353f42","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.afb1c11a9.0.tgz","fileCount":37,"integrity":"sha512-/ZOWKvBVQSWemRoFqIonxq6lYMcrKI68Hx578inoATYGu9bF7F6BgrLnocC+eH3zd8jCWgE6xQb8vvelOOT92Q==","signatures":[{"sig":"MEUCIGi++4p5gEPyObi92CYMYdTEYaorUbkw4h05G/053/+qAiEA41C/4BF98bhOo6rcfBz26sQtjf9JhjgvopLAUhv5xpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5kCRA9TVsSAnZWagAAel8P/jy7iDmu9Yj8l7osWy+W\nqNm/XMbNLmccBjxHwRNWUQ7wm9vIXWJkrQXvvgQLGof+UQvTnPBEKRkR1cvF\nQrhM3sJukVp1IcsAwHlW73sSkLOrNamOQsXDbLYjnMtfWtZsPUkq7gCOLFmS\n1Uk89aRgmPLPqGk/PGOayXwDSYlwW1/fLiaWF3fvviIwZtAWsIbv822t6eWr\n6wnGvTEdXO2azmojTYjxMWXZ3k1xyfb97JyXJeMSTRMwM0Ptb4wHS1trZp6Z\ndd7teJQpJJBs1qKvtObkcEefXjh4vXhW+jLxtmvLRhZDC05lIl4Cw48zcsCv\nTACX6s2uS0vSxpNTLlRbmYXuKOajewGOxB5S+O1dWKmeNsb3nC0Qiz7lj+Q2\nqGEBrpryGumS2UmyAA10iW/Z2oQjl76hYzPB+n1NL58pW2aEqbM/0VMk108F\ndVwKOPYIyv2g/TEaQAeIkoASb/IiMefZL4cVJd6ms4lGwahBF7Kd/lh2X5MG\n1PdUc0jTyZoAr4vag/nAsflY58Qs1ufBaSPzZZN3wCpzi8m00KLQ8ZVcoR2+\nkhSMxbLXoLpa0SuT/hiMB3EmIn/hk0lfgPAW2tG3Ye6jOuhXFZOsq2q1NcD+\ngWvyAAZSp0bsV4H5f6wGf1b0R0tAoeqjh8eB2F7QbNzVWnqFz/QAIuFukJcA\nXMqt\r\n=/jbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/density":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/tab-scroller":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.afb1c11a9.0_1591733860430_0.10296906306482634","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/tab-bar","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c59be728033a214781b7495a88660eb2a4c6fde3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.39e6f71e2.0.tgz","fileCount":37,"integrity":"sha512-uo9yFynh9QZpkj46XZUH6twWA8ghfbPcP8LSLziQEZF63L0IdmhilO16++TbfX0MLdI/mp28hBqdKozhO9l0+Q==","signatures":[{"sig":"MEUCIAlfPkxssKAslWlHkOC1hxgB3ZpcIKHdMsdI1oUNhy7tAiEAohZxryK8uMhrm4AdrP60vm9hGUL7yXfxjhWGBiK9/SI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B4FCRA9TVsSAnZWagAAPmgP/1FrJHGmaKTIPObcRuIV\nUcCyOr3k1kPFIhfUQIrEMOsutJsyTe1Z7RG3fhsAI1bM0RIni72XWR5GsRO5\nQxb5YNg8O+JsOiT0oiApBKkquiXRdBfJfJvxuOpfjCKzP5TLfUH6ybCdIrE/\ni+NWKC9V2O1NVDKSPOsGTfEXQlKgh2cw3c/j2Nc+xjtANqIwDe2tdiUnu1lN\n7Xumdz+H/3IL+NYIMpiwLTyCMxcn11TQifwQljp6/CnVcamomfEgA8247M14\nBfxob4QjcVAHGAdRfjcKoSZD386pt92Rt7rWf12hhKWlIw7DaoMyF65DhsUr\nwDybYVECSy2RGouujMI3hv0iVRY6xEkmD+eIwcHV+43MyB+O/p2b7pVjTBc8\nXNttz2N4BBLzs7Wd8Fv4m1DynmkqFWE28bpXoMuj211985+kCYlY/OLvAkdx\nVPPzv0oD3Q1F8xMBdkNRFBVnI/LEgEjLUk/p98ZNhNXOnA1SHax0Wg8pYmXr\nZY3qEZIqVTr5DDulOymoOy1ToGHH+pJ+vODR4mNDYgBK/7UFQXHQvUH5GEwi\nnkwI0v8ErQZHsjQp2khRv2+Y5EneZMhPBp2Q3TIVcUTbSKcz0hFwLMegDLHO\n+6MPZRQlf6bX9g/j+HFiK9S9/AJfh2NrVzouLLrEp3MocY/RwCW0qdZIp5iG\nEi4s\r\n=2w/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/density":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/tab-scroller":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.39e6f71e2.0_1591746052922_0.7342430908610587","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"571280714e946964fce5091206f1faf20d00a512","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":37,"integrity":"sha512-KaLjxZsQau8SqJL4mY68+UpPjmYxr9vX4aF2Tt/pYPNTzsI/UkK3QmSH6D6UlIb99qIdDtHKZQu4Pqirb4T3JQ==","signatures":[{"sig":"MEQCIEl68YLp3i4rRqUO2N4meUAtU8mnrTgB61NrDm6bT0bRAiAvRdsA5BBKhkbKudIHgps34vhe3lw1u36TlaH8PewuYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m5CCRA9TVsSAnZWagAAeY4P/AuWXUZ1HJWntFZT6xdg\nEthZtOXRXy15EKm3kwUI9t24iwD6R3mdK0iO3jOPRKJ79v7sHy/NlKzFdhyZ\n67QROsny6sjBeH87eA69lcOPGsKXNDfzzuqpLIqa5DxKjvKWzuGmgvDhg8kc\nQN4wUYL/pwmCD2CmA5VCe0fCnpNuM7S9S+cA9YWIE9t5fTkpvFAts2dXnFb8\niY8Cghwp5ZURzUv+zZuUXp1gQaFFWunCPVWYsP43nQIX13QCj6ZJkhjqubMh\nOdtwegw6AxlfI1lW23EK6o/LKB1HVo6RsHAcE9fA8/f5RePgPd1NHK8jtHiV\nsyVJ8sKHfO+liXbmQFVDB90DLIjEg573KHmt3wVGkfabGiOYG6jwe2WtCSWu\nGMpc5br+XOJsQrtPa11FuTUmY6iSe5uHMnZux+B+nBsh/5x+eAzA76SJhkB2\n4ziexhCasfNayvuU+OkUKT/EHW+4c4bq3nLB05DxzOuH+EZNf/jFx/fvoYkj\npBwrwnG9zS8ksWXlSVe4o54tUsuwrjlgxxkE1AADfNEZNGWP6Hvla7jcsHVQ\nK8dUG7rSlzCYfFfkGFoakQAHce0doG3GcWIZrqQS5AWiH/pknKITAxgBUJt0\nMP8RO9TQ7acgT4l9QudjiXNXmgvKD9l57QmUxqDQOVCefCZ3F1uM7nlqvmN5\n0jL6\r\n=mPEj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/density":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/tab-scroller":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d4c66dc7d.0_1591897666480_0.36603720413338814","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0560a5756a9cdfd10a3915261b0121567bc7895c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.be4a19f9f.0.tgz","fileCount":37,"integrity":"sha512-u+IUreSkUKa9GG8z0Xw22WdkjRd0DThfB6SbGYo+ojh6iF+sVftatYW7Q+Q5KrpYMAKr2JdDzKDVbgvjiD/GrA==","signatures":[{"sig":"MEYCIQDNXb3iXR5ETwqvi56y4K9RiTtkPP17W8+1i5OcVQResAIhAMIIwr5fVupVr48Mu+TKHzOfUi4UEGDiK2AQGgE0OTHZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwgCRA9TVsSAnZWagAA0iIP/RykhqZDwmSa2LRG3EZ9\niPWokv09yUUKJ+sqspgdI6Aetj+xCaTJPzkzKschdtCVy+8PkHrSUYE38l7A\nr9lGTVPTSvoxIXnp7OBh3MyQujIWJuHXPLxhU6CrSiAPuKYaN6EFb2sDdpcF\nLaHhTxN/xpl6MGgXdiisvnt20Gy9fp1eg1lkdXPqePNkpisRvVW56BdSxGeo\nN+s3vZsYx9lSA/43mhdR+5NkgmTliONpOvD6HZcbkJa8ZiAqsBBi2PcP5bpR\nv8dMqsgsyQ5Fi/M8iRGtUPf/bvKSP8PHP3F0gTy2etKlEgxUC9Z+sms4wuIy\nyoEi1VakZq/p/mN8ZE/KWWXoaa2TIKZNHJNr5d7E+7tj1t2/wYX60bL9wy75\ns2cXlGSSE9C6XPokfyzkcFvKl26k1dJuJTmrY4o7uKclv8hQlvLpsZUEfG17\nZqA5k9ZF1P24GBHZvV91soVm0LJOSYPuiz70uruam4CVQZ9Afxy97ncOQsgF\nUDZSpXcGFKNccR1e3AeB/CbkYZ0mR5f8r5qMkQeMiJi3ITHPq/aV32gjwsI2\nb470qPE4TUm/k0LE/ZVcfP1IYH97eCVWLhVzKAgqVKxc5IOpIOK+gyN/sUUt\nnQfzYdtqls5j7rpJ4T+C8sUJ0nfffkK18blGwGX6qR2ns35RTq3r4tXLCxFn\n9iUD\r\n=Qo3f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/density":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/tab-scroller":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.be4a19f9f.0_1591942176465_0.7491843236044733","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ed4af5ce93988c5af6ea86bae343f47540f9a0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a6ac8f629.0.tgz","fileCount":37,"integrity":"sha512-bX+oFCXwSDM8Fyw9yMedz2MvXNDL+NJ/saATrlbrMWAxgowO7ZTJb1FL8414G5Z2upHqGNQWGuHR1C3H1e6e7w==","signatures":[{"sig":"MEUCIQDoWBXE2S27P4G1YzHxoGN2JkrVaZzHxdmmWp7srkDcEQIgepPOvXGSJrVG3+EjSao5Px+v/ucYHyYu1gi8KeZd4LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+jHCRA9TVsSAnZWagAAnVUP/RMNP+92Z8G6Ll7Afigl\nPThX+jkm1+QyJA5ahZcGnU77Llp/fVshmNhsNL44qyWursyrVfSa4mcuJR4b\nUPL/c9mk6FRw7fiZrmb5xZ2N/BjmW01MwXgkoyb7v++uiMM18dCpxpQ6HsMb\nmH0Tk2Xpm5zEI+hO0WPun4Uw0pyXotNa7T28WLjRowIdTaKFmjMGEGy44f5y\nvBEs90yyrc3Zo29iKG5zWLSuNzC+7QeVTK8+gL+03gmqC5m+7Ef3qHFWR9HL\nONJHRPcWW3Ia8eT/zbMDBz3qWMGsmHjcWj6FQSCzO1jy9ycw2qDH4kJlkWFH\nSub1CLZ+n8egI64XCeoHDZSMgVeNt12yNuXfP2O6RKcHkENhhKr+yzlwDFUb\nOmbs/k7vVgLMtr+Z3YKlKi9/asYc2PqzP53M2JU3T1qlHWsDPobcZKm5kYqz\nLCLdbNZhYcIeIRPOA25cBRm7ATp9KgJ5toq0aDnylhgPJ8CFma6laI+1i1hY\n8YJfaYt4yibtHyo7/LLGnMgBMalRfudGOH+dT0Q0ooUJ0oQ851e17p0JuUnW\nAUu2yRoKCFuo9q5ud66vpftsRsuLFpw/OyVQ1DwNXP0HlK++fLg89tigPpaP\ngzs9+3mDNTrtvqyREBjU3Xk6Sgwt5GXi0bTFCWsiazYFIvVyJ6MWsb6De983\n9kEq\r\n=KFKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/density":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/tab-scroller":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a6ac8f629.0_1592256711159_0.4110202985691094","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/tab-bar","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdb30838d651b5d2870a0860df86c0aeb833f49","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.9833dc287.0.tgz","fileCount":37,"integrity":"sha512-fuQsFpmcN9gX2b95hIY0jONPiC4IdK4be5fDZPIg8mYyjvHMR3lqb4FrXWUh1oVORqCovY4pHwQar05++cr1ig==","signatures":[{"sig":"MEUCIE3GdWos6OMVNFheIM+gQ97aNjZmsSkHBD4PHvg94Hz1AiEAxEWKIKHnVgyriytdvqWF5kipgHDb9HcuDBr4+6rznl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SKCCRA9TVsSAnZWagAAusIP/2GGKWFRuHKFTdq3B7Wq\n4BynWWf+XQ9No8/tHKmBwiSt3/UfU1A1D+Ssqtlk92S2M+og8RIzlmItw+8N\nadMgm3olVUV/O8wbp2JN370U1u1FGURq4DWGbM+uM6LGqErTNK2AXqgvOULK\nPtRKZtaD7ia14bc/S60MMXhPPUPD2sum3jAkuwVxYTdhgrEqkY/fFbZNTrgM\nw2v7npLzCmPAw8JzgC4m4+O7DVFXq4/4ykzssozpd0khC5IF+fcCDPVQg9gE\nPuvlym6rrVeQgrwiF0yohbujx4g7UfzLxf8HnzeufHq5yhtFsb4yqveWrR1t\nOhbz2h+peZe6KcHeDZlFLVgLFLvmDCNRa+qoC6Z3BpEtcZnBeEivy6bRIiDH\nSw5gb/MK6gnBnluGoIFLQBATgtaH72W01JOP5wM8XM5KbMoBeOnAJnM3FRNV\nY+LOeqz/pQ1U/d2qX81suKX06EGOtwlIQi4NnToAvI84gW3L2tnh4VpefyVo\nPqUfQc7JfsY+suTRL5ZeWxj/KhXolb9oIBhIVs204Nf395qccpnudeXxXvRQ\nxw0hcXieYZ+lXxyxePmKtf6GH5wiLNg5SDXnKUFMrbtiF1+h2dewgN3RfRm5\n95+HalFmsrl6xbK6QeM5wE1g0HetvNVOScWzQx+jmnntN+d+SARIgpHY8FBS\ne/ZF\r\n=9Gr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/density":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/tab-scroller":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.9833dc287.0_1592337026117_0.3048450325900516","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"338df22d02a22083b7e24e27bb0637e73b4d4621","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.3aa33998e.0.tgz","fileCount":37,"integrity":"sha512-bNEAB6IYTEKfLW4yTYlxE3M76x1ypAecj0M+iMus17+seYgsgz02BKjJfJyVUl9LjBr/YR/dlSeNcZOW9g9yuw==","signatures":[{"sig":"MEQCICX2YpfVcmvkDpc/HjmahoM8HaP/5PkZU9Az83IDjP8SAiBOEo29xq5QLzirVX5ys88AqOkEuMAEz+J2icApvFzMfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SoHCRA9TVsSAnZWagAAwZUP/R7gZx5L4FMqlJm/2EyA\nZkmZsauq9e1M9CROGVxyWJ076l+QndB8gcC627Mp+JseKLoP3YjdS98HZqAb\nhLo7Brx7FshGmaCRyNr/VdcWYMZNGUiPwscXWk+I9yJp8LLuRLy0PWwWoiS+\nKE02gUZoWDFFEVJf+2PleXa7zQ/kXdiNpBAAMH7tIASKvfFRih/Ld7o52Fff\nVJ1/XsoRlLsrveV3irI8Oxs8xbiKhkD1ZipDB5q3EklloeI1dBdltmVwumcx\n3uWmPm4FjdcHwm7nBGgXkoA1soZDibLH8XrHAiz6to6opbMwVAoWnjtKEqQ3\nVHjFfWWBzX2EiTmJyvvoq3BD1yRF6o6XlMWfjD7T8ofBzIfr27EaFJOYlQvd\nQUPsD/mTz5JYHmM8Bro9XvryNyYEOe0QsKoAsCRunZntsI+Oxz9HWvQ2mrLw\neuIwuzcOHlqEi+w2niFskKbOqOkbKiQ7JnN1LC0zFewJDY/txmon+4fDNu96\nhZdMx1TK8ddcrWmRy4HwutFMTp6GJXrjnpw9QNArvsC8ZYfFve524wGvWx3D\ndTxEUx+pIVbLjtq5TMzzvMD7mSa1h08aBbKxIuBOrgL7hWxXrQ+mzoxh5rGF\nWTLqGcpaKogCahA9rbLTNBqag2qGZb0zmDc+hNwxC/pGTubaGHK17o9M2gVM\nfPVk\r\n=GT/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/density":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/tab-scroller":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.3aa33998e.0_1592338950964_0.9544737086175716","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/tab-bar","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"611f6b28a70edca041b29a1a5dd6346ca312fe7f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.d2b54d183.0.tgz","fileCount":37,"integrity":"sha512-f0ic7bvIaB3Fxspy5YVZzeFIQG8ExzQd5Iy+9cqBy3oefkVRKqzp2NloMJSJJ5FR1wgmJNgrLB3vIULD7WAs4A==","signatures":[{"sig":"MEUCIBtWAfExpjFhinKf72T0N1jOVM93PbiCgWeDVWQm6JQnAiEA6Ve+yIvGM7S6e95HY2h5JOeYem0Pzp0SFcFQ8T3Rzg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sCACRA9TVsSAnZWagAAjUMQAIXw1vBNP94N0EQhD+VV\nP0XtqAoUsQzX8gqjoLTmXpgjdpXtL5rUSP7PtjMd1CC+5GjOWsnInfjmH2SD\n9sOdMvoGz/TJi4ZbU4YcJGZCRetDWLyb20fJZ8EkB3Ph120RpJ36nB5SLBYQ\nQQco5MQDpW1Lk4sx8HvYB/nealLkUMaiqkLwOm0w+FCCz4d6qb5+aKit6VOL\n/byi7nbW2U2ZPsQ570AhKP4gNj1+BagTogXtraTCBoWqLCGmArDSkd3xYy41\nwQZtxgsP4lMrnDb68RBqizMTmI7OBuj6adDoQ63LLJzbxvErzw5zv6BucT3f\nuEyBMdl418m7o+pr0xCcCEOlOOsphw6FwSQXAvAM1OKbGmR++qExvL/FbiYD\nddEhT+gHON1P9kbIWADbUbueuyKIifA7JQ92XD+akrdo6Lu/CRwBTuUV88mU\nM2atdRd9MZcoHNZPtFm6Vwa5Gt/ZIEnOb6d6t1swVQotVHzm9bvr1RJdppR6\njT16CfyHJ0DLiILwdir9kKDrPbcwBmt81z/XOtZzH12yMuxMEC6Yd1DvjwgC\nuApTr0dFSX/zkb4dQsEVw2JJXVQQnFRhIY+JHdQGWWCwOmdqSem0wpJkUYko\ngnds/tt3CoHTZaBIrE2q67RL5FYlm3tjgC34L98p/DIAQHysemslcsu12jP0\nPbMW\r\n=H5Hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/density":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/tab-scroller":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.d2b54d183.0_1592443008193_0.04807343487732818","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/tab-bar","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1df68139a7a9fc6b1ca220ddd55ad5838308eb2f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.f2a488e95.0.tgz","fileCount":37,"integrity":"sha512-5GoAXQEAg9HEZtg2kusJlCiEduU9bsivNzG8aXdvNpzBVmbt1fU8PK4azfAwpBleWTVFb/GU8XacBY6WQNMTzA==","signatures":[{"sig":"MEUCIHbMDAkuJWgtKpTO/ku64Vz2ExK1oZpCQ3kmeHbHogS7AiEA/fpB8AHR1YI+gSGJ/RzXvM1AB6j68RIxy8cjSFqLPzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64K4CRA9TVsSAnZWagAAeR0QAIQpfRRmspCCLDaaNMYS\nno1J2f9ZNEvvKfgYrgnaC8QrBvCclIUMFb+CniXNe76igrBrI0iQBqikxp4D\n4n39Ob4h8KJV2wYQurLZXW6B6lCBFVaD12tn5NOD6VLEYKSwOEhpOI7i7DS1\n3JOUOYVq2GzFca1J64JNmB4z2CFt44M3EGxW3v8muBlhl4mweQ9Ti3g/JUx4\nlYQZu8rpkaRM80mkp7sOw9o7SuKtwFNEKntlQXAr7aduZfj0HdCuCC7dZNuX\nzzVgMl2vrVbx0c36lKieAqiTLQ7vtlPVLIbzXE2syZEFPl9SSHC/8moOib3S\nRzfO2PWcbTFsa+EQhRey8teFUppnW0p4E4xETbaDybkQcWozwPfzKb0cN1yn\nwQnurgolP++iucWuXq/QjCaaYPuBdv1766WS8lEelmodpqn2OzeZsWbCop/j\nupYYfrDsmH9V2S0teF+P9FFTH05nRP+f3JL59+leYVnjUULQxNdeB1DbxALJ\nKCdZbtOnAwdQQiqvSKvX+XA1Y+qYFigqDgbg46P/aQJ8Hq/Fzny23Z+5NgHY\nTuJLNvr5BUQdqweWVyHsXLhcsf0E7xYWT+8NdYR2yShzjnu7/+xd3N1KGwFr\nErNpWmTFmukADx5KCRH/EXTzGV5gJGEjhTy/m3XCjEEDz41xTCvLxEA6UHEw\nJ9Ec\r\n=Hpff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/density":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/tab-scroller":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.f2a488e95.0_1592492727806_0.5355276320035363","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/tab-bar","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dd8e46c47ec24509aac84a465c4cc2a8e1d1356","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":37,"integrity":"sha512-ezACHUOf1dKK4cZmnu9B+eJ5GOgq4GtQ47I+/PR1lP5iem6a8AcFLJ/Pf0TdxxHwxezJGJzCnQJ2teybORuICQ==","signatures":[{"sig":"MEUCIQDr4XYH/14fTOq57x95HSc1WaK6Uvg4nJBHxflC2Gn5wwIgC9St8gE+ZGqxdY9eOzgRlNFajrZTMJ9Mbc/fV093oSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64WMCRA9TVsSAnZWagAAiqkQAJJZhMNCDIv+jYkBcvmf\n+vWbgxQ6/DFviWzyz8+kyEJkNn4drvI6uV0tDUTPoQ0N5T2AxpBpmQVU0uhI\n1cKWUX7i0X7H2f12+q4T0ovd75dFow/XhRfYwuLc+pLY5JhxDPuQBV89dHlF\nVnKVwxNKjsqAcDGh6cH1A9jxoQcnyICRwwslL9ufDOIm+hsyoDtkRDBu09s0\naKp6NXivcOQw29ZNCwYa2mRIRBTkpGyQLoWBBoAb/bqdQmLIOZ40mVKU0o3O\nRf8uDYUQ5P82ZfZlWZWT1WXA0Yoxo0aKa/IjMeDzYBV/VpupOsFGsMrRtik9\nfBjsCruLyjtC0urDNz8jKqDfJp45rFbTzriZoXvupr89OjJMkamJxSpxE6R0\nidMxavhZDg5LQR16ZtNj67saQ0WDDbN7WdTETXDOEMVAqqOFK7xueCZB1Mfp\n46r/XpGXkFdczVg/RC5esHDRq0umjSeC49EKSkm/3sE66lx8K6EWDdn4InPr\nOdT97fPTgQbNaFfEiZLLBw9tjuIfB7T0i5nr/PRq/9wInQn9O3KX4p4JB0gl\ne3jLpKEmuR90op1RDS2PQgoz3IoluwdZhui0J5e06o7HbCCLEdu3A4PLLNiB\n2Yv/CUGjuQZev++nfyUqU4pl1SIrm3+EkRJVO3BuCAkSjD45BR37rNbDl5mS\n3TtJ\r\n=/vtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/density":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/tab-scroller":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.bd8d1aafa.0_1592493452161_0.8320838224650782","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/tab-bar","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"685eefb4f759bc0b6c4f02358909e3f5d3630d8c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.1321eb968.0.tgz","fileCount":37,"integrity":"sha512-UHqbjJYb2fUsOSKuQLo/rYsKyjg2Yiri852xaGdlMnMosJlyclJMA2fpR09i4S1KpUkXQIcQpZqGFLcwf4kkIA==","signatures":[{"sig":"MEQCICuh98+he0m+8T+e76c2mjRc+KfieYamt7aW/y0KCXqjAiBrdLyWr01KlseXejtqYi+rFt7GWjOjE7GZPOAH/Cd2Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RB4CRA9TVsSAnZWagAAadUP/jci+BTit6CQCDw0Z2ye\n8GgAeaoB+6EoEZRTVRUZPFo1GeuLA5TOQGZfZW9/KwEU7fT5WyYlfeBjz/Id\nY6SevF5JOUEyFZMizUmfKn45HnKQXb4aE8L32c1rqBD2c5sZepB0ri6mQqpG\n+W7l1j50Kx0JobxWOx1Lj+IaiVJ5zclubs1bo2ghJnMFT44KQ63DGznAA11B\n+AiaDLfNLCu8GM2BanpLjhlFxnYW9hu638BI38CGugCBs0OXjTwjJntwe3ZN\nE6dQrts2bUnd0EcftuTHJwjaykHhZux/T+DbDYIgSudKB83hHH1Z6EPcsTkt\nSR/t2Rz3gKLuTMS3uCdvuHyk0su3kw9UX6M/Cg4rLuYy9NoGBi8Hkj2cW0Ym\ndxpNj+kdF/WoC3GJchqGAWOWO7gGkdyLz5dKx9cMfpqp1tnmRFB6U1YbHH0+\n2AlqlrOECBRe/CMdkTbq/3obimrnSZ0moh1JQe5I80f31Qx9JM0sW0XRbmmi\naYRHonl4Ok9/gqtG2yOatwlIwB74JQDKOOqeN2J+9ABeCJ6XRYkCEpqvnY3A\nYIMIXBSZtyX49ZS/gWv2OW4d2nJ6L8KT3B1kEko56+8epSaN3M8CS8Ly1Fle\nL73WHfQzEucSA4KBoqFORPkcotDGIJBkikI0s0IbkCFVazFBO9hK72zfKBKK\n5n3l\r\n=RZGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/density":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/tab-scroller":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.1321eb968.0_1592594552266_0.2904390332629154","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/tab-bar","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0348ca25eb24a37896d644db5b198b7ccef2926b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.db5cc0382.0.tgz","fileCount":37,"integrity":"sha512-uj6z9iQUFBPKbgx7Hc8cH/qMjxn0RCIj1Laub0IB8709vzsYMI+CUiRWPwfrl9U8DdLVZ5zRNXRtih9oLATr/w==","signatures":[{"sig":"MEUCIQDYRE/dI1OC+QQUjDaHcpanphZMHZ7k8AsLbSs95oeMzwIgbStcQeOrL+IgwU09q7aS3cim36+3ORQYKuKmm2Qb9Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RH9CRA9TVsSAnZWagAA7hMP/iYaprPHQnEaY/BzbYRg\nZ7FlrOs670jkOx9g+73Sxvg21gjGMe1Bh5ixJ7yMoBKR088YOIjTadraOlpB\nf7HrvruQeh6hqrBTDa1IZrAURBLr7uRUAzMyxPbzTGiTQqdEeQeCMuthZB2H\n74IOHiQ+p5gK+YrSNU9RSP72n89nZjTEEns6fBpI39+u+JPRjAhM7ewHUgEA\nKbBYAMiaBv2eG8kiyuh5MBz3jA0ZlSUU96DoISm6+QmyuQgdaGrjFr3eG01F\nyiLz1uFBAJ8Kc2+p2ZkG2YoOT7mFpvQjngat+auMQpDHBfBlYBuzQ2eGTdaK\nK1ANqI/uDcz1VHhmzwoj1eGlzy3pyRk1XUH2dhcYfqPqmqLgGFwljWgYYZ97\nzhBzT6wFZiFUm8UIZk+B4TgZxxPfsD0sNmlwfLzaS4NL9x13jT/MrVnNz4vx\nb/m9pI3xdFvGAtNP29137jcaNwvmLpNdjEllrk/NleXLmeaCTZW3NQyE2c42\nXdupYntvvm4GDyEFKSHEyHSZjxTlso6bqoMlfY2R5PaaWHPZMoUKqyfo/+1b\n04NFM0oayRNDQZxqQJ+3CksjLe6g90GMe51tXTccsgrRL0tH/W6NJ22oUBIo\nlTTezrfeqKll2eS5uW/3TMj8JZnKw5IroqGGFG5BmnmTKnpJoS0m8Rl3hOba\nlKME\r\n=Luu3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/density":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/tab-scroller":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.db5cc0382.0_1592594940964_0.7040007728996971","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/tab-bar","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08df6aad3dcbbaa1a2b0d17f81088e79331de985","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.6ac9bf031.0.tgz","fileCount":37,"integrity":"sha512-v48c+4pWYrdfMuyO1UjA3lXfeFD3h9/hxuwHjC0A4FjAAQfOtmdjDoIfHfCZc7mio8Z/jQ1tNsDjgcJaNs0Hkg==","signatures":[{"sig":"MEUCIQDF+/gp0d1SRQuoEAobDWHmCgGZk4yP5wD9IK94reUtCQIgPDj4EOp+2GLSnqh0bVM6wicavrNmWkMTynISoduN72E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RbJCRA9TVsSAnZWagAANu8P/3YU2ZX7qI6r+a7sXeJF\nwdaFbYlwXkCVFuQaoKFcnk7di9d1deB/qblmdycTv1P1PO2QCLGJAS6qGi9c\nYExuMsGr2GQitcOpa3fjvB3k6WetDY93SDJqi4Er9D1tWdD+7GDFIKdSk/DM\n/WainCi3cbCjE6v4O9tovW7xyXacBAHabGCeipSamkkPDEAx7Mr/ZfGYFU9x\nVXJSJt65HmN2q4bcY6fPrtEPzlMKv3vT6oEDo/qzX1AMy9Z2QpX9v6yh5lO2\nYuFgUQeadtJpFg2quknb/EDOGEXgOHE2WKypH6nPcr+5aBafENpSRWR6QKPE\nx+C+kOGQcKJWrrBVhT4NsCOUPCFHFNOxxKgd4/jKxQ1Z1iVQhUxXLgwKHmaT\n+v0S1B6RequpG+pIZP05U6ta93fGE82Lhekli4lk6EA1d2CMlSPeKV5vdRj4\nf4ucuNomcrR+ExgmbaxnDLQyoEmN1anh+AckLgICyR9dxBDb6ABo2AmktVRJ\n0exJQRKkl6LtyuhfluK0HeSAJdrEvdl9VNdebepImxcBbZCUXQ6X4TezY3IC\nIIn7lzrIzVKTYvTMFcX46GmHzVN+B04SKKg7yHctK/SSn6Dx9tT8w5Ck4IJs\nQNbytLxEkuUDnSJJzS4+fT5DUpcn3hhqiVegOOk7zgEZ036CJRB+LppCT7dm\nDSDb\r\n=jJg2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/density":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/tab-scroller":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.6ac9bf031.0_1592596169519_0.27248264342956485","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/tab-bar","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f95c8aa1326a7ad25291692440ee48e54c5dd0fd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.c21b5c367.0.tgz","fileCount":37,"integrity":"sha512-SsIE/ULlidRRCv+dCaP2+DXjv+vsmq/FYfeVVav3AsuVqxq7iIj4Z14ZfbVXa79BsEWhcZdZ2sPqFQwYZ4+rBQ==","signatures":[{"sig":"MEUCID89PfUK+FaU4LW3iydibv9Ivo57W8wT2TeYZ6n4aA8WAiEAsgp+AgqXycAxMWoKsP9xrrJC5j9WmvxDDOn1eBYiryw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RwnCRA9TVsSAnZWagAArkkP/jRe1VtxzQnPN0P53bwb\nUKdyB0PWKxoEv3MHN1WZaNhxapgXHFc12gZl+9FyQGCBCbcNc2eW+6W7LxeG\naSKL3o2oI6yyqlIesoS+nYfAMd1IP0+tSNRL3QZl0lHvZMDu4MDDhaGR3b9n\nzqky0kNYJ5HsRZlaIMhilTbhzDRsZtZmBRIvD1V9/fZrtOgfcHzKOKa4hn6h\nICnaN2T56mcMf73cjEyEvg2zb+TXEsC8gQECEYGP1vrppEwD83IG3F2F5zTn\ntFaV/KQsdZsEl9j4tkeLpO8W3Y+2kqBf/tmZi8opGTBEetBG7YJCURoGp/bu\nSjIwcAsjsG8j7MXRYgAXXJHMpJTbMKFIaXe36+ytWs0lGBRCRjJt3dXAwudd\ntQbokXbQdXihsUZVjSOrtM6CsTU9LkmqA8NrumXdxD1+hV5KVkjcBJxNkhlE\nLyM2Go0WAIyw2QwYX7oVxvp5hZY6yAETlyrttJBL7FpId8viw/XCgnbfbDoF\nNZhLar/jWlK0nqmba4P0C6l9D+OlOz9AsrgnGpLb1dHOaVdry+opqY5Bii5+\nq+4ParPAUY6p0+t2j+mNaFkuMFKIZZMjkjxU6oZVbhnJf61dYpxB5vyv3fl8\naMt3PcXax1WykHh4ceH4X9CTtBedTWXFket3wcTsQeZ4p89xWL+8j4rMooSj\nn1oj\r\n=g+DY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/density":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/tab-scroller":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.c21b5c367.0_1592597543257_0.730719995004399","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/tab-bar","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790fdf66521ab595086bb436e1a38894a1e28224","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":37,"integrity":"sha512-O86kWu7nCyMtXvlIW/8U5/6aNs43ZlhtEdUZRkpdigt3s2qAN3TAVsh6U0tccp0WkhfCfYDP8xT3WojnRG4fTw==","signatures":[{"sig":"MEQCIDz7C1sR1AgxI+xz2s8Y9OQ38haQ+8YE5Yy0Odv1uiuDAiAjouI6RYjd1M7Gc95xIGKltDnuOR4QyOI1aCh8jxeWnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R44CRA9TVsSAnZWagAAh9wP/j+mIYjcDTd2Pi7Rxfmv\nLCm6Qyk3qPKvJzpeOA+ctMnKT7TNgXdYs/TXPKhU84Q0IwZ3+TIDG0s79NwA\n/CumdJTSoM5y0hmQtci76CyD2y68OOLPWXm5vY78rT2k2sfq/ot6lMeiMpMD\nMoajuD/VoWW5aGaFM+V1MXL8noX/8fMir2GeMKgfSxuytHmQPKP0DdbzS4bX\nhGvBVGze0aq9qVeMO2IImzhS2talrwp6vFAyauXxU0nquIl+Le5dk60Lu1cP\n13U7oUFJsoGMK3q4mu53zZ34crePrpgQp4Mp53JIBeEuFBfkja7lC9nn9Y1o\nWTj+6aHt2kIuqpCSBRs0lpDi/3PG1Guk1sY+WtKJCwy5rjCg1tX591oGlgbK\njw8Xy3GJKL9iqGLfiAkI/OjAnV1Ef8vJyeUEkYuuY6s8BqZlN5xN9yPXU4Gd\n5dyTxkeW9h7OvCTsFXxMkz+sxyuuR92ieWStZJHH2ymguJdK3ETIq2oHx6SG\nywu66LMJA8veNcRdF0JRYRJwDOSQVq6GN4ja+I8D3UTUrERCfpNPKI6BVWW+\naed+ZsPON6rWw9p/rMtZJ45ok32q+ay2HY68A2SxgyVZ4NLOalmAdS4i9NZE\ns3rZ5zsf9dJInEt3kxsnD1QFcJWBS/qpQvCJvqvkB8eA7VuIsUtZC3tYzL0v\nllUl\r\n=4k1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/density":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/tab-scroller":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.bfdd7fd39.0_1592598071961_0.13302158138948017","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/tab-bar","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7b8dae92f3cca43edb4ed10edec3e5be9559ea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.10b505785.0.tgz","fileCount":37,"integrity":"sha512-oMTw/B0bRP/RkqkDI1LCUNJ4UQv5sILAdqyDE55Gf4PEIyOaToPDPWHiicfJAkyiiYl/RTThJ1zuBpaIQC8bTA==","signatures":[{"sig":"MEYCIQC4RBMjDek5xSN7SMIov4yF1vSI6CAHmPxmiQ4clTJFUgIhAKzqssqW25vMVyZlkfHIrz3OcLq14uk5mXhkBrc/x6oU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R6HCRA9TVsSAnZWagAAFbUP/2i29d/Jp/C++LJfkbOL\nFgEW5ojWb7uEseXYS9VWA5JV30vcr10B4V57r/I18FEPi5h1zhUX68fpWvEq\nfVsNx1p8If+Bsf7c6CAV2Sf2GVRUrSzKirk+bLhu12NazKIr6Kze6ld1oEzS\nmd1NdXbTTRHhBDK0MQKrRdYXZHaeelMDfL/SoYF6LQf/H+qbygiUrmprwoLf\nPY0NRtkXxIV9KVgq8rfqN9HR4rGsJTThckjwsQVZvpjefD3Ia8/HjTxFBHMm\nmAtCeKjZpFpWMSr/7L8w60vwHtfbmdTFfaVUixJXYwh0SMAMjaPnwdCVbfF4\nX3kGLqC2pEEnTLhtftOZpvx3bwucEOzJ3vIPIgl3F39ESr/7jn1q/VTSrNR/\nGDb7lJWqBqe1weIxScMoyoPLZk0VkrgbExe4fjJkJdq8Ya4IYI06Ht4FqExZ\nmsGUbBZnTUlVNa5E1aQlsw8ugAg+hpRpj1cYi8Jo/yBcqrVQi4rUWTNLoHQn\nkYUocr0QsOrrtd36FLwFFN8VvHpXEwD3QCyU8MYCw9HnZmqiazF9k8AE/lB+\nohZ82FqdfJgOzk93Pb7PQBaCJUlC3MS+YXI8kxXPIT34HdUZs/rhWKsKEYD7\n1jeASU5zsVG4EUrrWToHka5YHZVTMK3bwnFZZZJyc0Tr3uBd9pMARRZMII5U\nqCH9\r\n=9qud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/density":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/tab-scroller":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.10b505785.0_1592598151059_0.10026080909041912","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/tab-bar","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49757a2000f676009d38a63c6038aed3b1dd3b29","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.6483d3f44.0.tgz","fileCount":37,"integrity":"sha512-LJdkanYy1APoSD8ujsQge+dPCdYO57yqemjA6UraMs5IC48uTjSPxQDUl2tJ3tc4iGyV1NUEp4LGCqSqNNFocw==","signatures":[{"sig":"MEQCIDulW9uI6vw1OJC9mOTE5RN9+BSDeBxidfM249Js9JenAiB7OlG+280vbrh4SI03voHym0JlUtW0wjFeQo0FGIkc/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJYCRA9TVsSAnZWagAAMcAP/i6qCGj73SWWbnYot8kC\nQaOOuig+zqDBTVxcmWfdI0CNWtsucxBr6MiWUVs8p5dNl2LnqecH1vrI92p1\nOM27tuHVIZrEFcH54joEgXyxarKmMyCRa0yZm72lN/qAL0soNXWemGYgeOsS\nP7GOptQOGUGyuZiAkLcSDdKfviq4Ednj2VI76EP7nuGR8aLXTBRa7LL+lhgc\nIDRwnu8DJ5PYkFXQdAzhihvHu6O3bksdY4d4iEtT56hbMKYlNfuubOVSbSNm\ni0PlOmFgO4sZsG0pqfBNwIZbVrUllEW7xFEBMvyLwTC1R16hZ/pU9vZoZAmH\nSzuGt16cDqn882eeHVKZjYDgJsSyH1ok6YceZU0dsPS40URklcoF8x+pZbC/\nBmnyukoaOiIUqV4cWFIseMj6HawuSHGFU+/uc69oNagWRVXahXNXWOwg3aay\nDqezKyHekHEdDeGxo2eVMiN2c+qupNJZvYxirH+HCIIxzzM5l6uWNjT/Zwyu\nMTZN93wa/B7qbQ+l3ip9erxBU4p/mbZVw+hQRByjwvGP9U1gREmoHUkjHjkP\nqgkGAT8pD1yqoFZLBHvkm+Lrlg4yTS3ORa8lTkOz82klii+4w9dSdeK/O8gJ\nLOv9Mtq6gXrB1ttvIZrtFStIAAjjcURqmrYWIBBqZfaGQYZTrXmrqr4sXPxz\nRfR/\r\n=dsTP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/density":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/tab-scroller":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.6483d3f44.0_1592599127593_0.2639252408083763","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/tab-bar","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7479587fc9fc8b6cc8d19942dc184e8ce7041c3a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.30a74e921.0.tgz","fileCount":37,"integrity":"sha512-L3TsSv6McjrLaR0XRKHUuTNjQ4ZjJd0W6CvXOJmdgEoX9FFvpo8cQCgGJavY0eMjGn7tlig+Ysrdk3dtJHPXNQ==","signatures":[{"sig":"MEQCIBA/MQ1hIa9dhwrdUzDFwr0AAzzCtZpk/oiqPvCMjwJOAiBoQ6Ni8Fi3mP4EvhoqY9CBW96srBxvMQyvYbZZCevX8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLdCRA9TVsSAnZWagAApVUP/jUliVJjIN6wR5wyBe1Q\n4OOs5GxaMFid58uMQsvA9OGv4If5v1LXd/rvRdInO8wl1Ktj5PGX7MJUWbeI\nlL36ZaXIzrRqhqjN5nvrA1RHlKC5YcNNGmS5AMWBzQK4zTT192pAhNLpC49s\n+PNus4eNszV4LqZZldMXKONT2psQdsm4sJ+HcxqMq1uImD/LeaHSI5sDEt0e\n6P08AfJdojw8FKT3WfZTsHL9kdxX6PLJaRV+77oiViFgYHs9aam6egAHDgrk\nSCPSXbNDAP0wudsLADUHBEo+5+DZpH0+f2O3uR65gXwKJ0XNgY6YN9ClFqPo\nnOE6iwGHdv67HC7cUVUjzbLVXJVgNgM5oLwHsSeXjw4IOzM1iNRx5q5vUcRR\nKkRMm2LFeJkiqg1Zv5YbqGXApOmEAIbV4StapmRJTJO77E6wKbx4uMd+S8WO\nsWit0xjFDeqKmLPUD9ADenXdYC14v8ME7qiuVpo/TKkYNk/NS2lm1/zg0dfV\n5qDB5wsizqI3MyiKLd7AUye1uigtmUcTeJt0v4RESjv4CQLnwygqx2N1IiHu\nIG9V5LP3S4PaXX8Hqfw2gF38l+hfZV0DDRTRg7KY6cKCEvoa4o9a+AqJTJ5O\nJFgT7vl2MWkzQCRsjDuswJN0HG+bfZaCnNWdYetCn7W7kOK2pwh3PNE8aoT8\nRMBQ\r\n=9R9p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/density":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/tab-scroller":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.30a74e921.0_1592599260474_0.9312605078715723","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/tab-bar","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a7db738a1cf6d0bdead9577cb11f1013a954691","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.c20727498.0.tgz","fileCount":37,"integrity":"sha512-6N6dmkZKuc4B4xWodgJBf2QH0VfZID7BvhkNJjLKb1GKNUpcsGAG0+hJz9mtukW/10bejaFy8YySMJQR7q9flA==","signatures":[{"sig":"MEUCIGcMqPzaFOqwU4MM6lnrtn6dxxyai8jzlxklYISjl9kJAiEAtLtgc1ZOXufXW9iezvfTRA0W7ypVUSVst65vsn6/hTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SOHCRA9TVsSAnZWagAA9soQAIM1mqCNJiGVtqVxkCqq\nRbNu4NcJfa4ohfJQwwMzx+RKSzDSbK18ifNJ5p+fwEScoooCANYOAbci3FYN\nNov0wYqaoibLJzZ1nra0szK13IqztsK2pRjoxSuWExF7KsBIrf9yy1yrV76U\n7m1EhaOr6Oyv6+ZakRES+fVT5O+caVlacZGK1e+ejrYFPRWRUz3PzRcINYqc\nebarUxeEmCzjskrkFA98iPe9694NRPCxEiKwTvE7bRaAcEaw+sb5FFlrUaxZ\ncipdzmQ4+nKoh3ZXXq27f136xdLgYqb0e1ldI2x1Modfta7a6h3EI81Cv/ws\nRnafyVf86XiRd+jCe2aeuR9N5ByP7I4zKYs0VqN6meehw05wXlzhhu6kmRc0\npO0Mu56EJGddzZg38ZrY67sKpKcfjrveGbW9gCe+dSSHAY+V8EQ6sZa6Ow/1\nhzpIzUcil+xDbneKdFoLFFdPZe4zKN8bun4cPPO+kCJA6+LQhYFdr26Q4LvX\nlTQ4/QkxCeFczYfzK+U6qHYANw1EN/2eR/ZFmHpvJGIosLTYW4L7KJeQ1iGU\nIA5ORRbBA50u6JDUn7Ds+5gzYpRICqeepRvzSP+Nh61HI5+1+g6qXsF6+yen\nDHlyCHe12sAzwF8gih+XSnVRmgRsixqt2+0PJOTpwURYTToJ731r3Jox357L\n0a5u\r\n=HVNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/density":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/tab-scroller":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.c20727498.0_1592599431229_0.3632548734024792","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"721c537da0c7b89d98faff83e87ab113481e2c0a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4e360ae94.0.tgz","fileCount":37,"integrity":"sha512-GXtWa0NEaNggxrySV8YsWUqkau1jQuxQyYXEuZwU3/1gcnpuIlfmRuJrcLAHqBnjRqb7KxK/uinckOwaHM6Ipw==","signatures":[{"sig":"MEUCIQDLlpsJIUdiRzs62oEMcS4xqpuNh5m+bk/4fR8ZD4tP0gIgNW40iXZDo8dfee2bEqbUTXmH0wbSSQnPkP4wQeWPz/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdyCRA9TVsSAnZWagAAwC0P/221FW0hhcPqRq8rBRIN\n1mTHbOb3PnV9hoRiJXsYqYNaE6TIiu0yKk16OPtqQ2VSGvbTtsJU9tYMXNKr\ntS+T03rsNvbMd07q/Q38X3o/ha7SjnlLGGxE0v/VB7DUa3iF4H5SBzQAaROq\nbzUthCsdf2OIK+o7S1wO+GSiRPEJ4RWR3eNJIZCmp7/BzmzmVPtg9WQPHmJS\nPhpe5KMCUGxBR3ldB6UkppPhOq+/QXmQBewioTg4BWE0MZEZJieIvCDk+OlS\nUp5OrljRwtbL3KBMAvh5ZHmkY9wf+RLqrBKYkndbEVGADAUu8VMw7q0PIAyV\nQTrM6ihEthLSg7X8mHLIf4/IlB4t/gfWUUZQh383+oM0GpSy4Ism8yBuBazv\nkD7MLdcFBtEkAR84+n1dw8grfJjnyTfCM7BgokCaoScKxPx7qrshgahdWmMG\nYWSVgAi6KzOebxb0AukAMpVwR5CwhAqMQcqROhPThivRbO1c5+A4mflCJNvI\nZTnJUgydyVY09cGu+nuLE1NN9J5EB33QpYU0Uvq0ctPjhjoM0wJksQXi9w6H\nCXKfBZrBGLQD8w8hyLBQrRZYNjO9aQSjrgoDptGfBHBTx0kJMv7iUHXs4Ar/\nU6ZfIt1u0wamfiuZQ1EeZRhO7rPJbMkadDYTqI6qjvqi5zXsBOLmQGZC1fT5\n8MpV\r\n=SMK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/density":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/tab-scroller":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4e360ae94.0_1592600434283_0.26009546837065","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdf777468d925a30816f74ae8d804a0f529fec75","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8550fa53b.0.tgz","fileCount":37,"integrity":"sha512-JTQBNazSl7y2IQTR/aqL73e4JlbQeqY0zYSO0tE4XJ22u5OXBhyiQGZZfpWNJ73eGzv6JozHxpV64wAxOA+jow==","signatures":[{"sig":"MEYCIQDBSfGoQdhnBwPHSCUtsyn/3sGblz5qsAo4Ip0i1bjBswIhAM5VgYxC8Y9wLTyLchwpkehsWmU/GiZCaZePk1MrwylL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgDCRA9TVsSAnZWagAASFgQAJ77mKIqEQnqU20A7GYy\nfZUlBwXaR8l6oH8/5KmrASIdwTKipOubRQvsCgrCip0axc2kf7tRDJkiG6Kv\nCaLOAABJFiRiDUV2gKo0IxNx/HTGBF53byFKdZA9IJT7CBG+Z1Bfu4qZC/y2\nSeYQ8CF5X55/igujodqGVAPTU8c4wjDpFxqo+1qBcgOaxET0eheB07puS4Fn\n3ObrYYpdHb9ol7C5WYU2ZeiCKJoEodcPKwdZZprvX2ej9xhqoPCtLugIXik0\n32eiekSAvuHiVmbpwqxxACXEMpcy/FXVuZ8UxoZbu4IeVeHHH7TTiBxyzDzS\niCe3dnkOIUJicVTLsKkYNtDTa6JHXW5RXzsjHbnTaFheondqwWsaSijx7rgt\n+ZSW46K1s42mPUGEp1pbSGghf1aJ7KxA0oBrCC6w8U6tmTBrbTd1CnBoPkTf\nRSwlN9kHwl9Kv2BIHL97vLFz54Y9v6nQsm1dtYMAXK2Gt/7W7Gpw+7L2PxqS\niLxys4h70n7AlAM0HQQuSq2hUdLdYbs2shheQBt9qS2m3ct+U78elE44QrQA\nF+DGW/nkwRxON4mP4lr709hkswbHl/mhHDRkx1ZCEpOHzlPkXGDlNwh/gnb6\n6qxS+HjrMYLDr3CWKom1WwbdI8UKlbNIXx4IBfLo6NqVQnh6F/uF7xTj4E0N\n8Pqy\r\n=miy6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/density":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/tab-scroller":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8550fa53b.0_1592600579405_0.4759427349859877","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/tab-bar","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce368f1c69e5197a2ddaf8b8f029f19f5104baf4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.93ade142e.0.tgz","fileCount":37,"integrity":"sha512-xGsj3WZCZYZjnRb+5FYHxGH2UKbkpqxmy/z0u7Z8dGpWLDKdTVJuDCfejSqCE4D8M7KgLs6Sdvmv35+0AAm26w==","signatures":[{"sig":"MEUCIQD7eUKzlFHA7bOSdTeCMgm38YyeDbStsmZ0vvx33XloPgIgK/9hJ2Khdh4X0qs0uiiVywBNIXCq8aXB+3TRwiKFbk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ShJCRA9TVsSAnZWagAA790P/0J9TEqYfrEqRlnWH4Ng\nBak+ji3cEw8qHB3JhRmhxK4ds4ktBY/Xgm4cRSfV0x3/IJMTc/c6TrgPYz4J\n23Ntsvn67OgRKbIDk3rOV46vKpBHpf+iaeMRNn9AJ2oWai4/BQ0RYRWEpnox\nEom56H8Fm1x/oSgQbb8DNq7XIotl8+jPx7S43Xh8p/opkUl6UoAgJUkqnAZa\npoW93uLdrzDIPGF1THRzDfdcJGNp+91zSqF4raBzejUxC4TfIghHO2xSV9Cp\n1vG0sCQWFc51eim7z3i+Fh4Ml1ltqV3wjnDFCYMY0Ec6Kn+7Vah6fbs0MrwT\nCZEuq5QKzc09qltphBMSj+iWg565Cq06HTi+8ZyGjx6mVXJJhENlmzdPY5nO\nbh8Nxl73sYxu/BRH66pUkDdGWcjzvzbTFf5i03UERxDxPIB/HEENP92ETld0\nnga/fDfk1zoD6S00DOnVg0iDulhsSMTpjkUjPRsZj52fI9O10Q4fW8qJedqn\nQ4pMfrdv+8Mdua1Cge6UuuxcCqjYOMBsghOoFfnT9ghtSV+IYyiB5mVYaLfa\n97li4na3a/PnK3OGLKxoTw9yMYsRVe86c+3J9ouTd1l3Mj+OM4kzcHQB6Eq+\nfBdbp2lS65tzPNpk8JD/Ch00ldO6bLrHGUUlVX+CwiLqSXcgvq5FetDdkaFF\nK7hM\r\n=zi9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/density":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/tab-scroller":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.93ade142e.0_1592600649257_0.9838063327978286","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c12adfbcb092e08431fadfc63eea68031e3abd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a0032f5bb.0.tgz","fileCount":37,"integrity":"sha512-ddSR22wB9iNr+zz/wLBkaEPOr775SNs+JLjYmMwZR4i2eZUC2BTcssjt7h9BFnk+ZQ5ZEU6FZ+w7HEveWKPqgA==","signatures":[{"sig":"MEQCIE002cwpWr+YWlEsnBJO9ZwXShaYAY2vP6BneW8mwMRZAiBjUbzhIOjgT/ViH5PVlrrQMUwcWhNo07rZBznUmZMMdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4+CRA9TVsSAnZWagAAiPcP/0tMt9Bycvs8rLfAAwWc\nZ5OShnOcFjMIRBJ7YWyXjUtC3u/WS1pZzmRR2ad/iYAThhMsvmskmBU+7IOi\n8mCQ4hUV5SWujjo3NtLP8U7uuQktgFOnJSvUw/P8+WVP4zUZ5lJBXy5Tjlyj\nOcqPqiEvtgkBgIfNMsrA2vhiDk4GR/xFAMnNHGgs8sAnMbI1xn7e7Utmg09U\nMi81Xc3ZMgnucJvK5urcWhviSIHsflyvFDonV2prxvkvnGYJlzPIIVBERg8U\nPbTjSD2E+RpvKrumcruaNqHSGDGI9Vng85ROzr/RNrEydVr8OwmDCSyBVONq\nZj5ugIDUo5TgXbGs5XYg1O0bWV+ZcdWb06yk6TmO3pWAyyGLeG2Lvo8IBjor\ncC/1e77WQaFne7l8+6vnrd/QwrjgE3eyUFg4RQn6wxgDGszOiwbBxiIItteM\nfbYBy+DBZp+BZ1ZP8TT18XW6BDW5ctnppZjaMZ8oQ4PgOolHw4XjzZ4nPGB7\nenyA4Wbsc98WmkeiL/dbmlEQdUcgh76lSAjMe4ycwG+Tnxg6JhEhVVXWYEA2\nMfmxzSLa7V8nJmRdUKmetIj0paFLp+y88qtgypmK5kqNlvyrQsQHrtt/U1p8\n0RE66KL7Va3YSXrDF+0bLDfXMCXMhN/whD1MnpUhgzvrES8Hs8n/sOC4jrC3\nBlNn\r\n=4WQK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/density":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/tab-scroller":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a0032f5bb.0_1592602173772_0.48973682828930154","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/tab-bar","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c86533e0dbf45dd2a0d80e0eeb9ed9fba8dda01","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.3f342e721.0.tgz","fileCount":37,"integrity":"sha512-s0Malnkvum3GijiuuAUaqWpTTMgiVodCJkQttXBXzMWKfQQHpoLRmluzdJpYAguNFFiILvy2wrJpYtYn5aLPNg==","signatures":[{"sig":"MEYCIQDzHll6RWBj9rUEApLcUTMx8B8pQ6O0QNST+Txwebb6EAIhAIEXKIJwxtN613r/1yNku7AnXzRlgFtDoS9WNxwzizai","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S67CRA9TVsSAnZWagAADTwP+wYI1/Ml/XVCAJTSNnRC\n6zuwxZDx9VZsZfbBJ1jac1EcDOc848YngR6dAG1eztX93o2qOBcot2E8NfDs\nyCIL0DxAVQpGGrHsH7PeMw+ttqvUFKGeLPF2jHLdJzeKOZriVUevJ7r/JCtE\n1bwk0K304OxGvynYoQ6wqkA1h4eJmlw6h3klfIaflQb8FyOWFafSiPpKouGo\nhXTOBWUXY2q4lfmMUDFM+xQbLeFEMJiQ3ba70g84dRSHdEVjz4E7OpNzbFdj\nW9AJcQ189CkVmA2skVKXRDQ8ojd1ioOUa5kp8qH9vsl/CMQ7xsMzo4aD13hs\nsGMHULmZ8CrYIi8glifwI76VB/O/PEhzTh4LBLgxKRWpg4lnFvA3TR3HTCF4\nVOwarRrh131gSjgqGxC/c8HWHIGVhEtVbXTY3/EnX+BQzb8/Gwn8um46jqQk\n+DWKXdD3eeticsCDlBYXv8hpaezBoeAeaXO82fCCQZUmEThaIS7W+jpsDoAK\nlP8/ei2JR8KFDnANSFkBwdbDbYg1ytHw6araBaSnAXHRBZhHQ5SWniKj9wOg\nJ9qei7t62RjimlG2aI9uRyoXroocrYFp2kaAnmvXuKBlDyseq8+Pbqb1g1aA\nzY5M3Ryh5WXAtQKgAQK8L3YYTOGKnDnFteyoVnHN4au6dyLGlCOwTa/GQpb3\nLLAV\r\n=Ubhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/density":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/tab-scroller":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.3f342e721.0_1592602298913_0.8771501899408889","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b111b128dca2f8cc44d114fc374f3c633250041b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ff89457cc.0.tgz","fileCount":37,"integrity":"sha512-BOh6cVkRLmf5xToQ99/BaPDXVamjN7bxOHcYKf2/emtEka8YM5Uk8z01sRM0M1W2DR76+UiZ1rLugk+GBPE4Iw==","signatures":[{"sig":"MEUCIHjzq506q+cihiJmhzy3/GV+zgVscKMXcfX6onEd2Zz+AiEAlAfAzSPFo/g03E7VgPneCxCvD2Ge5qwUWa14bRgbQ5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7uCRA9TVsSAnZWagAARDYP/2aq5mYnrP/qpCHFYx54\nEGAb8S8IgWx6H9e8Jku6cuJexd9UBFSj8zrMIi/xxnzSfppXKWwLNTg7ajxQ\n16u0DYLJtFMSxfMZksnPfVg6Lr+GVJHQxpt0HVkUcpgpV7HjD1S+hlSd0yCJ\n/zXuJV8whVckeuUgLDXhYFZtkBbGgjb16Dt/X76tdS3EzHncn1D7HAKssLKR\nkddGTt+6pcvXQSKLojNLuFu70oKlVcdBTGLu/eQsGQJFCFDmZr3zNKdrm1Un\ngGZQdoqVMV0kOuZK+921RFVYV669Qgm7w9Xkyifp58gXbqF1Iqy5rlJCZajg\n08WNZ5Tv3N0FBkJvHORMbavrEFBFcmFJr948rIxMchoW0jiewGE1eAi8v6Tk\ndzkP71D+jWznvUOCPh/neQh6/DdNNbV446wFxMW/bB9rFBVkXa4U+unZvBmV\nQnIlSTh4djglz4iwx/LXtVFhLuiHujwEmKZ+ouaP19cW5xXQ7zPHVSANhz7P\nX7jYjKCFyi8fwnjCVyuznYeIbBgNR0sRlWIP1x6PUBRiZzUmplisby4GWfil\npx1XxJCUmYlUI1/JrgCkpTTgWlJ8Al3YHwDIASdtIRb6i1MkDEEHrpoTapes\n1dAnudJOSAZMgCaIHBc8R7S7aj+DTAl+iMqmoNWeJ7AgHBtu/fhWH/qMytru\n7Rmh\r\n=j25E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/density":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/tab-scroller":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ff89457cc.0_1592602349878_0.46585202983500107","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46de320c15cf86127124943d9f8dc5eecdfd491e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4a1855cf8.0.tgz","fileCount":37,"integrity":"sha512-nm5Dslx1CPyUzUPEl0wiKUVyaiRG0OiKC8Z5493YNjEJ0st3hvYdELpvk+IORUL6Tk0KWR7BIwtpEVz+vamelg==","signatures":[{"sig":"MEUCIQDCF2y1yLc3FAnWD3PFsTM3noBItP8EULmZLTHt6uCydAIgS3aB5u0D4OKFaK9GNrVkCcJui4bJKzV8q+3sD22tSgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S+RCRA9TVsSAnZWagAAxsEP/3CZ1oETTiia3X+PiltF\nrIeGfWb/zwqHHEsHBph3+xS4qKQduwTzNTVNDnGRajg/3bDZ/IERM1zQ50Do\nywZzw/hK0rMTu/DyxlDPXgwJmONH9lfuuUtIMXeOlKHDiSh/EwPcxAyw72vb\nySfQMOKahEp0nihKg+KshmI/xr6py/T4tPJI7SugNBQqZKEogNNyfU5Cn5oU\nns9ebDJiwhh9SmlGn72LYyH6QqN2SdWsCymsXWGQ3bBy9fT5TP4TvrOJ4FiF\nmXK9H/5RHS1Ak5uQyGWbEFnEBf2uOTy2mXCuRvEA8og9KhH1x4TxBCodlm2h\nxJbgLe225abixoHJSxBisn7lv/yetkUTVD/Gb+FDpdH+zgHE204ZzEdGzW+X\nm2+JCLyhN5Wz8zHKCEuZCcXPiSCYKt9XehLf9kyz8GzFXgxJfyPub2ryAh/H\nD7HE50vRLxSEpjXJ8TSJg2LXYfIyQHRn2KdYsoBU84hEDdTiQmuNNVBzlWdm\nGi6tWVDaWLnCF0zVJFN5ONjndtOD533c1eMG/ZYsknIAY/IjfT5N6zwPWfhi\nk1z68xlykPEnoKYLeFCS3qjycI85nxsdg0SuSnx7gxdhUMpKAlbT3YEI2ock\nFXyCGMj+SypKJEna1dZCbsguCD2Fh47A4vbtV/I/D4e7YfA96J9kEaLoqfvL\nVH9e\r\n=qSdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/density":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/tab-scroller":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4a1855cf8.0_1592602512467_0.17700746880122864","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3822bc5df5f57eb675882016f247d39ba508617a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.8602f1b4d.0.tgz","fileCount":37,"integrity":"sha512-LDCZ5ZmTn9JbC8lvWwy7/IZefxZDK+fr2K8KPvLdg7yRrlolcVRR/KS0ZDY7n+J+jjh9e04yvw2NV4iceYvcwA==","signatures":[{"sig":"MEUCIG2R0XHjVq12LBpBzzJ2hYQIQ76Ly3ZW9cY1gZkeocuyAiEAllDfQbSr07aSFaqLZu7DYbOdBPg8wmeJ/l4BJTiqQaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlqCRA9TVsSAnZWagAAfNsP/1V7FzNmhq4OrFiup3Pa\nnHKtDGLYyyfoI6siUnJHxO/AQCDG/dt53ZVoarFKZOAxeYk7ANz9nuJZhEuT\nxeG3A9EmYQGyE3OHNwBICFuNegGtjuwZW7FzsZlLWJLRQPcTA/Ejq3Bc5s11\narlJl0v1pP+WOMHaoqybmMOnDcb2ppsAQOp2o1XuKryYydRXnxgW3eONgG4k\n8G0iSKiv5hquDzMRYAwHb/SO6tZS0F8Vns0x0LXdZ2czUpVFsLhj8mgk0hSZ\nMitp5hMYXHprZO+Xz2nFDVyGD6irSvJ8kI0Em3YSee6AYJUZtkW67y3RtYdj\nMluImPx62dih/JUbFTGCKrcEzC32nCOllyQ8qY51rc8YiecfAo+YYkIbMm98\n/W8UWI+40Gx+11ioRLsA+SdDfKgpKo3wcwkD4PqKSTrspqiFOf2A27bjj7BJ\nYOQxAk5ogDLjkol7B7w6K0ryBYtAVTAksktHRLm9gnG1Zywsmif1zZ+8yFbI\nmi8e41RNvxPDvdKQUyLUFPKkTDb08cKrc67O9uT++U1Yu167xyHuUY36Qq/D\nCQeV7ZE9b9GQDnltMH5x+UbuEsxpuON0xTKW/3qYNuaXhYhkDM13koL02CY4\nAdHqCeYZbTUChM8u0olDkUrq/v9HDsRTCpF4MYKO7YNVzObSGRNazhIBoQ6N\nucV8\r\n=DSLG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/density":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/tab-scroller":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.8602f1b4d.0_1592846698244_0.6405197980018171","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/tab-bar","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf43040a04343f5c6b63b1853ab5c5e86a2d193a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.69f9f0982.0.tgz","fileCount":37,"integrity":"sha512-fBx83KimbiPyzNofcjgxkne2KeIQNfr36+PR9WqGkjJDV3VCzsIvRkhWsJUuHUEK2ZD+6J7+fHusxXjQ34s0WA==","signatures":[{"sig":"MEUCIFqJ0RdX/t/ddPMlTj7N6LYKhzw5xM9IlvKss3+58zH/AiEA8ijOOzvjOhscbUSmrrX2+3mb0kiv0WH15S7I12A1KGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+JCRA9TVsSAnZWagAAO3cP/35XRel+oE95ouRFCK32\nhWXPoVEyzNXfJ0uJwCsKTipOllbj1O2reRO7hyb5aCJ2qyrj3Na1cuEM9zUS\nO4lRgKcklAV57SA+JOLaTHTtMUpHUrLnO9PjvNRWjyW8ovZSF/z2WSBuuBVv\n4W2TDN0SqKewN6jrpJPqgb0kGcYuDxCxGNbGC4EF7Iw6Dv2f357cvPE0fmHB\nQFdZS4BTM3p8SodjM1WJmvitjz1OUqPAGIlq/B/MtGUFymSMbNeq9vlM4SFC\nJ2bJ6UoKgRmcVVbHcCM15vkC2nd4K8wngG2bk66EbYS4fsEQraHuYXyNNCEt\n0vioNhyV1y9aa3X2gKumxTJ8ry125yxfUmwfriN8FObeQlkR5dqNcBkKh9tu\ncWIzNttOQXQqzPqmxLeIUEXnjYztBH54b5Il8dT+Pwh48Jhv5136qGLpBIq7\nMLZo6FRMBdjNsucB8V7DuwroXP+3QrE612zJedqJRN0cI+c4jL/4qYSTNBpL\nUOnUxrITXGjvlTYD6sUPIDBW+So8BojjY4t5akZGx87jp1yZNG++BpkP+KW4\nv1xH67MT/tGFj1OZjvOHTrLBJIoCbic6whgLErTbJQ22k/es8raOs1RJv81W\nmQG5CZpgluPVrb2YEj6ebmAlHo8qDh2HWzcrlPI/kJC0/JfLuQTpswN8YwPj\nt4H4\r\n=VYFK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/density":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/tab-scroller":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.69f9f0982.0_1592860553437_0.5413739781137359","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/tab-bar","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dc8831c27b3c9aed8c5b1ab6de98d334df798b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.369a293f0.0.tgz","fileCount":37,"integrity":"sha512-BzC+vDyzA00nh8dvadqFMVbTvp9IM+BizDBHgtcO5RDIJUAH5ZJu/h2QTuwDig/m+isMdbnwjEtK5R0XosikKA==","signatures":[{"sig":"MEUCIQDBUCYU4qNRN4PSH27q0POdTzcy7QXdGfz9dVU2HmQvBwIgWJJtL4sb9YWFL9KFW+ol1TMfGHNF+6L30VeK905kSY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SA2CRA9TVsSAnZWagAA7IcP/Rxyty4KLCRNvBgq+Q+u\nj8MJpf4s1bOmS2izx48HuI9DfZaRvKOyS0b9NupFgQ8T4AgNSdlrAQ2YNgXX\nunSk3DVKMDHGrg1Brl6s4HhOchmGoRjcY/Zc/MWGJMvjFTyKzpiDIc/RTbMY\nFS+MvfbBZAyC146+UHR+KuNZ+HEt6cGWfHBG4SHjHgenv+1z6H7h3T3CHeak\ngFuz68kKsPtCg3WG7qlPyAZqh/wBPMg0FcyRnDfi1N3yg2wMXB5wWZgq0HIX\nYjDDqiKhelooZYPqBQ1yutyfbrZp8XwP8u++op+QANt5NSG6fyzH1ZNfn+kF\ngNcxSuMC+yEd9S8bMoK2kUetyVfAakVyfKLuPGIuZooRkiOSsU3xs/UeOtGO\nRdYaBgYyuGAaO83i5zb8BWz6vawFh32+DzikVRbGGMPRSdTzPycbzm5wB5bX\nH8HuQZly3p69x+84f6d+Y5gvvAFJoAV75OdxAcNRI7f6UHghCadT2RxHpV23\nLsZhU17hdBvqhIepz9ZdtMVEn8+PLKGKGgObnhmoE1CdmgvacDitHa8LxIHD\nSL98y0kJy1H29G7giLyGpMy+OpEhFc9RNaS58tchA52DR9nFroXo46X/kWqF\nbVrQ1kgH/+zWEmwhdUTv6PsjReANF6PSQ/LYv5Phglt8GTBWLakWioqFvL2q\nynNB\r\n=pWIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/density":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/tab-scroller":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.369a293f0.0_1592860725614_0.8107644145634318","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/tab-bar","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03cfeff6c97f00e8f21999a5ca2c8919353422a5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.f1432b5c6.0.tgz","fileCount":37,"integrity":"sha512-CcxeCV7+xg/oc5Cf3sPU66/JBvBRNxeuzD5a44/TmKjuGQS+nYFXlRpM5ZGlAqIX2OuudmP1FT05hWMNHYyS6Q==","signatures":[{"sig":"MEQCIH0IeBA1mTi1VxnqVhaxuxbXm5PmQOEBEcc6IFca3YsZAiA8dBy5d05YTw8hfWzBh9cnogfniHd8WntF/ilZDIulyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SH/CRA9TVsSAnZWagAAehUQAJpAIT8bFVGiJA+9cjye\nZdE7xPwN38Z8ZvFuEGq+tu6wmTPDG1Rg/FMj0FVIMJLL16l7H/WG5GSCICn3\nmb77uwTJJyLadqcR85A2dRXp5Ilqw3VbJoJYFIR6yIgjPw3oosTAQ9Esb/D6\nntxFiupa5tUEFa1PH412BPeBf6bxX64uT+rxpIJhSqxKF3/cNCfb5tFmcUzU\nLLY88SOQhhrm8bGHXQxEKBgRlPQ4UZvhb2UsgqEzd3EAOWd207WjwONxPd49\nQNiAayXzOxkSdg4CHHCR87/hVgtG459xCvoQ3gV9NpHWUjYV/MW7cBLV9u/M\n0PZ/uyDzU1LcbEjKvSPyfr97FCtXeTVtwTEd5sBJ5QKbnw3BQoK5Lm0H/EzH\nrlQ1Hbcs0yzOGwBxl3Q3remr0RImHJU+Ki8l4CpPP6vOCM0QD44c3dgpcS3U\neGHnlWmcWoyirhN98n9QduLOUOcjRJHEAyTXcwJaoWpuFZw2dyg/ZxEJGZ1k\nTTsEnsAFCMjcEckLYuPMMCQb7qbrARSCiAIFJ+Jit+RPNcRqj8/2xma06rcv\naLf5q1gAs6rKqwlnJDPE7CJBGP/8b9PH4muM3xSx2rUJgGIJ5KRCNIJYZ44A\n1s+hEkWCxHvsSyB1ebvUxZnEGm4qcHMlI4yLzklTkLfJ55vh2JgHuSomxD+N\nGm27\r\n=j2T3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/density":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/tab-scroller":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.f1432b5c6.0_1592861182809_0.47900283689798306","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/tab-bar","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"164ce19d38e13b3d5f85fcb2efef9bf22e96abad","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.4757a16b4.0.tgz","fileCount":37,"integrity":"sha512-kzX/r9MtX59k8RVXMMk4BtB50evfDEqgUJQyha+cgA/N69Xn4pFyGMPYOHakLeEngxsu2Bkvb6X1mxD6uvGHcQ==","signatures":[{"sig":"MEUCIFI5DtPFR5ygYNn+kkCOh4LrziC+cohbowVGCZgblfLnAiEAhjybYR0aCAs4rfvEKG5RTYFNQlxE0c0y5OHGYIX2R/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiiCRA9TVsSAnZWagAArwUP/2bYuqV8hT07P/aoLs04\nhx/N2/YkETYP/Ouf+3niUYvCY9X2KoAGNe2QYOgCR/zOcvLrd/spM5NOiVpk\nDoZ4H764+mWduAVZhsUZbvSckmx20v/wREIYLGJepMPKM/T+IGGR82SMcurQ\nLtGi/uEZeX6wVPJY3HBY2X9dXev3Tlj6cOmIdCTcjuvJtWsWWH2Nv4A/hVdo\n/XeeiyS9SoITiLpWzSVnafPxRV5vlmgV910StL5v/qdwrgDcDs1Gra+6KI9M\nNiVjvy0Cc1+7P6rE0wD8j9JLl3s4D2bEaIJHLkGEPuqQll5LsamQX56aMfq6\n+L0bXzlvYC/FFNtBqzcXjBGKyulvqouWb0tu29hhlwTZG7lZOXQ8OhD7ypz4\nL2Riyjhm4he0i8K7+IUO8v+mKgqkgX5u0+BB63bePb9PHReaT0hzEiQuIDwi\nclRdjFu3TD1KE5TlKz9HnM16EU6SkkwUSakTmXpZKKes+NQQurD+r/Xxzyfc\n/86mmosV7nr2HvkpU4MEL0/Webce6c770yeqsE+4s4MWXp6oBCHtoMf5X8Q6\nPEQfqLGPuxnj5oflue0VcxdkKoFDinXULx8FYF8YNGSRq5Mmh8r0FhE0OvFu\nRGlii6DnUnLa4G+VXKzlYwVFwfikBNV1oomQvMpJOnhgqZcjUAz4Yx4Uvasn\n0nal\r\n=0VRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/density":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/tab-scroller":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.4757a16b4.0_1592862881598_0.43992388367226165","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/tab-bar","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564e25738b2158312f4707b169f6ccc0bc785e3a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.f8f472762.0.tgz","fileCount":37,"integrity":"sha512-DrWQ5bBK3exXGca0sJwEsNtCVlVuD4Kd0Rypz3eBaT+cLti21kUgFDmx3X+VrZCF/lKu0IqFobG3HHzCFXli5w==","signatures":[{"sig":"MEQCIG4GEZ6aoTTXEdrfb4rmkCN8nuvdQI2ho5/HUmL1DkLFAiBacWrkRIwWP1NrLFXc6EyXceSlQtPymx9qxp9xRMCRVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SmNCRA9TVsSAnZWagAASm0P/i679jO4+DX6tosG4M/x\nCCzWM0zGTRpKxTHsG4uybNc42x8fJMU21UzKIJY6q48eouXeK5zhW77+xYZz\nbobsUDTWcCPayxql580gsk5dkeuN7UT/oH3VjKcqeokkVvBI+pGGxlFPNEGI\n/mIwy17vflkZBSpBlviRPtjQJGCpXBMtWWupJm1mblM0PdhQBNjJooSIUQ+z\nSY3PYrNI/qEfSaw2ENxjJvSuLbzpJRB82ebeSReo8z2OtoV7HdWScPnpem1W\ndA8bcXO0PnVBQKaQxUkmeuKBRD27kTmmyK/BryOOD0hIwxj893R/UH1ibWk6\nVvtgKbDS3lSSmEosQndJgM2/DQOCO7JeTVdmrDuALEzg7oxEJvLMVYhW+sLz\ng4FAwRVIgkuIRqs/8Pn1pNhhm2wS+rjxukTYfqQnDwDbhXRrxoOoebURQLZf\nfDLhgaksXX4YkYtgxIqivQLPGWZJF1l1QqmXEwRVCPVfMS2NDv2dN2etbiuL\nBEUNNuziQMwze6dYkI/zLg0GniuVMfhuO9R52pCj2/OLAs9QWnUt/7xTcG/l\nKzWkizGKoQZN0tD2aOx+kyXdukvqneAbCjs1QU8pMs0nELD11gZNtPihrToC\nH0hdksUWEsru8MKNFRALvaKvm5CPapyTv+tn6Hid59s+OhcmftI/kbLsbPZ5\ncvf8\r\n=ELu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/density":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/tab-scroller":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.f8f472762.0_1592863116855_0.7470262741575244","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/tab-bar","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632739bdffd54f630f3c08047a272f23d8b4976f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.7e4d55c34.0.tgz","fileCount":37,"integrity":"sha512-OutIu3If6cPl/uxemZJH21skIYMz/+szAlfTHADiDykUh+k04Jf/D95M56cKi6Umrpcc94ZO7ivbeVwEullGGw==","signatures":[{"sig":"MEUCIHxD3Z8GSewP1VO1lm5xeayawrBOz+znpZrk4EH2p765AiEAmQ+TiUOTwK2ZpsqWzG3nwz8U9yTGxaOLHp1w+9Ix6Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TEGCRA9TVsSAnZWagAAAW4QAIDied+2ohYl9G3xMvfd\nxb/fk/uLnpFmJo5J1ZwlIOXCMicZl+5yIs/38of88pWlMq0HQJnfH4pdWzMx\n4sC6FHPkNPgbYNND6CKgQECYZSeXc0c0ZObO1+7Ez+roRdPVfERKbp0Wdnjb\nmiLnpmzNcxxAkClngJO7bEYFwyLyCEUiwyZf85bBe/eZ6sqUcRtaSlRvIL9H\npY56lpmnv6gNDnOGUbMGj5cVsX19u6QJWmEo5kQM1UM0BZqdM+jubWi/gKtq\nCXUvdeNtnZmp7Dc4T4b0FISMW2gDDjaOC2ZoLx1hr+emmUU7sQi5ZPRSIwZR\nFMsw3es9TgUc+xpfPT2ObTSp3jPpVOFuGVA8Fvx5ThnUyuT1ql0OSfNZKaYt\nEYNVmImdUwFL868Pk7ZAoN0REWLVEplOku04fjb18h1PPdpK9J2TYGdLwD9b\niaCRbJ1roiOLrOv8pSZkoq/iS/mTRZWpo4xZrbAezxY05o+OTBr/D9e0yPwB\nBQeo6Hg/VyB/k1VTuhKx7YtaGgbcGOycBCXf0onUDJWI1n7jpjoxbmTR2EiC\nygKMBrQ4B/yBQAi+nKHC1YABtINtBFqDfDf/ZyD4XeVa1jt5sSGSwTvTFP+v\nXfpbcBkAWVSt+2h3n6NF6zpTUxUfV6ffWEXtze1Ut+RvTiCG0r7MDd9E9GvU\nH1ri\r\n=8wrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/density":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/tab-scroller":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.7e4d55c34.0_1592865030278_0.7572995322762726","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/tab-bar","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4056b9a08832e02efca1151beb3b53e77e38f0b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":37,"integrity":"sha512-cJ3B1BHNXqPxRT582CeEmdvmVbvl4WN81ba9PSMmHD/+gvqNz0LFtcxaIbu/hkVXGsEV/omluQjnnIlQ9/ZfCQ==","signatures":[{"sig":"MEUCIGybNIkm/A/nyYzq2mAzGizSMJtZu1d5cmgpzAPXARvIAiEAiZK0RguslBG2IuSRJQLk1DFyEwg+feg/GUj5da/IFNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hHJCRA9TVsSAnZWagAAgMoP/0TiL99N1aiW1nHhekTy\n2QfsPNPkyQQ3cSsOhbpuuKuL6EcpmCq0IuGeHt3TiizRV67GELIc2vLOJrw1\ndxMez0HQ1XSxeIyqJ6VA6t2GDUZc7hOIkdkp2z3csiAkWeCBTetJGtECe0i1\nYKX7DHKSLF7wr9rD924jIOKmZsDqv+TIvSkndL5KRkNLBBtAANxAg/Qnf3Lr\nW08Sn/odKFIwdm7gce63F+UKkKvp/eDkS6kFOxoJ/ed8QSc3lrtFCWOOQn/S\nUQaww2kswukK/39K7IAziDPgDC27mHAtna+cgkcehyKVeOQ46heN2FHIDIpm\nohOxDmeAQDwQ8sibbXGnE6BdWrnTAdTtkZi4Hp8U2C3vfqQjMDKG5OZfr2+k\n0JqLWKRBqurz1HMsn/TjJuQrtLt0n3fShxi57HDZ4UaMqW3N+YrTEmzWARWK\nkY1lpZntJ9stLU5Aywjf4N4xSYaZueFdv4dgYOEE2sQq6nMJxdBBx6SFMWn7\nfYP4OzDaGRyxtwdlw824qJ0tTpLqBvBUNfT/HZi+7QUjpzbi/4xGhMbN8bgX\nJ/H7qZN8YM+xJjbU0UkYcbAvxg/YB8EmoNVr5CeB3oUGDs6VpAmIHuMJ0Mvk\neYLPcbAFwvl/AosyeV4DWygkFqMEuhA7DLFfpMqUjGcITft6P8dzWH2uC+q5\ncIkz\r\n=paxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/density":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/tab-scroller":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.bd1dbc91f.0_1592922568816_0.7201864757802956","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/tab-bar","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d3a2426ae97b3b59046982a5cd8dbf839c8023","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.31523bc62.0.tgz","fileCount":37,"integrity":"sha512-bigxDjUmeXtm5UK9sJ69dYvIRzkh+Us2gtY9ZTuMD6jRsawZg64aaYCi7Xf6nIZxhPQc1j9flT3SIZpaKcwzXg==","signatures":[{"sig":"MEUCIF0EidvTJdvl/8r9inacyS8A9F4M7vnAX1F4p0HHy1c2AiEA2vtkRaymh/uyVyX17SFAlMpLDPQDpEiy1gqp5o/fJko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMjCRA9TVsSAnZWagAAgB4QAIRloL4cxTx011vYRT2B\n8HkXNGHfm9M9Qi9G9gURqV4EDodMTCSXzktc+Se23VHIBfWrk75ZsQdY5piV\nD81wMV5d2zBKcUSzP0x4lKee2L1MKvtp2aXnalgoCmsBJ9j9mUetsqTICe+N\nuhvgf5Wdb9ym6jDuaNNS7rAs3ERIRHoFOOuq3dOeOPBESz5DenwI5WC4uDTs\nObeiUhOuTTCmXFZM0zX00hPZC4OA1NGRjfCgXFAqt3TUzESFRdbDnftSfc6w\nUV3x2Zw730lVWnIlVM1gxpbsMz+Wds+ZNyD3NrBM7YisR1NWupRQa1kYQvnc\nNvUe5AENShrS5K5cTaQ26uh8ztHhjxjE6EYyB/KLGA253dCkfRS1ilQFs0r2\nKws2giNs0RE8pFV+XvAcrsmeBJ/zGzbtBoEJ8XLDHN/lXkIlK/TrF1yMvbOv\njcuKV5nBE/sLKd/G4QGEsf481SNe/KVLvFB7nc5jIpdV09OWcZ8mNi6scieU\n7YnfBEAeTOQdxD1x4qh28nVgwpj1974nfLlqEbhDsOhncIOD1Jnrzc6zL8yo\n8VrXf9UEJ7sxr53d0igpky2V5G6h4feGWBb3lyxPc+xKqP5VUThKl/3YgFIm\nAlIMsdOupZDzE20w/viOYzU9wZM3rftoojrIZ5Bt1aIUAh6w3dwq8WM6sj32\n2D5E\r\n=TQvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/density":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/tab-scroller":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.31523bc62.0_1592922914756_0.511072916220572","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/tab-bar","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d73fc3cf16bd19d93a9950a54d376c0ffe6964f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":37,"integrity":"sha512-5d4J5pC1EOYINLYEz8bpHMwFgFr0bTgJexL/wuYw7rPT3ADVC9T9+vAtWJoGgXet1w0MmSGncfKNytb3jmoeyA==","signatures":[{"sig":"MEUCIQDwV5NqqTJaWZwO0xTDnOJZMSAM+6HBCsLxhuznK9V5RQIgOSJmy7YRewpws/Xx8rW6c0imvctmxiJHowtREx1hxfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hUHCRA9TVsSAnZWagAAY48P/j1K54nEFzU56gL+rdSm\nbtiPrTOIgE7AIynSXLqP2VnmVGr0qchb2WQSdHfX8mhAJLDHXv37j4SK1kQi\n6lcAcft9xeqMx1eQQFWEBPXWJF4qkw1bFO280y/fqPRRS2EeFZ5qQKVj+z5q\n9YiRdQ7hua5XANMA6aFngmES9W2Dtb//dB8rkJW2dC8TdTQgSiFOhgBrqN9T\nft2QkApiFBW/Gvd7Y5qPbP0POOh394rw17ZSQvVJ7nhvj81bsWobHjvOue8X\nUZbgQeNqx+CziFeUjRDe1zs1FeUYWL1bF/5CYNQPdoVvS1Uyl48eHn98wzO8\nngQn5HY899Lq+2X1T/H8Lr/weHFp5uFd9frkAfF9zj4fvYuNL1Wbxiazfr+1\nup1s6/+k0DHyTgSnyvo2mdyiur+2uaMkcyDm576arI2te57A5BqgWOzRxSZo\nIs3HH6PWSPZvjtZrxUzlz1CzeO1cVOvOLKRT1WnhqRf/50/C3Rrbq7qoMsVW\n/MgK17EfoRhEFUud+6qhboyJ6T4R06Fq/DGuM91sOsrdML/IbqJIuNywOsYC\nx+OabBs8zpclMFp+A2MEu6LczDtXHPM7UYA+YHJ6wBanrVD6RQC0tnHcsE2T\ndZjD9B40j9TUHGUNTFahEcNP0XpcVeUDk6D97EqqZBTyPa/rgehuA1T/3fiV\nOMew\r\n=8FUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96a5767feee3e2fd2ff90ed98a721999f8cbcf5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/density":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/tab-scroller":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.a96b6d4d6.0_1592923399537_0.15966805531161832","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/tab-bar","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfba6f4f609bc3d5bf3b20624c9eb9ad44c1afa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.ef3a09533.0.tgz","fileCount":37,"integrity":"sha512-yQ2FupR7HN3v4GxLIPg+GQeEsSg25bwoXS5qp17J9eP3nZAAyabuHekr+vDBvHpIkUNMsL+8JR2S5VWVLwmKpw==","signatures":[{"sig":"MEUCIQDk5IozdlyPk2Tug+iwtaJT018O8ktw5yiW+O/ZwfS6uQIgIxm937B56vZOox8nlUbdcq2A2+GAVy5i20UkN4kN374=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZyCRA9TVsSAnZWagAAQcUP/3ExKyLuCtinZWFQKoWm\nnGSONzpTs7wkXkYMU2n9kJvAumsLOmFp9F+NcV0jiAVP0wafOi9P82ZmN0LG\nH4aK/9uOfLijHtM3qlQDdzp/F+A3UYIYYaTi8/xRFzHnhR/Ic/h/Hb4xSxtz\n7FLSrcazQhOMLwfJLs4HNbnYWnsF6avFXx4Gm4cQ20ixvyY+YiJ0KIBTgvKy\nLhgvf1ZfiaI4nbCxrrOCC7w8JtAvglOez2/O0Udv9sDZy3vA84FJVGlOPL20\nfBsBsHQTFs/DIRlHgLxJTiEwjQqfYxhTX0PQxVHn8pNTZI7JVSQBQzwG60Ov\nKmCDdf8IfJFUMqPcn91NwS94VvV9CRdV6xKzPFmLZvl8WriB5FInKYBhhuA0\nEug6EiURirPoJnn5tdLJn1973pZUTLVVTAGJzi3Hjo22SpY60l4y9DzESClv\nHDH4Ko00ixDuSP1FdaBLRZJkfCd3Z+ohhWm0K6v8y4d+qQnszImRjZ1wSxlz\nHmzP1mFRaJcM5M1fU0UxRuJEJpqSUuPJBKv7xStw+xhBgy5PQq4pcfJFmKPB\n3r2quFOAO7jjXoWpO5IPXJm0jfo01040TO8FJCsj/6dO6nA+RvzANrVIof5O\nft7Bdvzkm9Oh+YZq0PWLiXADcy+4kJEAbObzhdQxDVC9LK6iOqkVbKyUakoo\nNUYw\r\n=EKcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/density":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/tab-scroller":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.ef3a09533.0_1592923762017_0.34602939460167503","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/tab-bar","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aa1e8e21c511db42e1bffa3496bf85e019fb501","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.080965f39.0.tgz","fileCount":37,"integrity":"sha512-ULITBcDFkvheqgyhSrgCCGUA2zs3nUVK8nEWxcpYUGNz7l/UlIaOn4+QEesl0WNXvC8cBgtl8ajyueiW8MME8Q==","signatures":[{"sig":"MEYCIQCBDnYykyHQnotgthpMYteJwGovUh7XOiPv5CXHuo/C+wIhALhFS8Y78tDZN8PzZ6IlfNIJuMTvecbURabDXCkjesC+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h1TCRA9TVsSAnZWagAA3rkP/jrQOtNncyTBjgIsOlnj\nNz5yYnLCcugAvgJnpATa/uuar00WMJnL3qA8inkbqYL0WjYis+yQlNmtANkm\n75fe4Qht7GWl4GaCLHTFYZzN+bKTien3/92tIYT3VVmGZdDWVEEV+jSoc5KX\nYDI428mJ8e8VH3Riahhy0NFnAJxxqdEMwh3La4WW2ZwqGyPdfTaetYWMQIEW\nomBUreruaPp9VzobfhKhcE3sX9pcR3SK1+smNahRrFibTq+3JcE16WG8iCGz\n/swU5B+IYXZfWIJcWJqiLBI5AZcOEycuYlLMeyQ5wWnRxLVl7sa+qF+jhGJs\nMlOsU7tdZ+G2CwKBDbbYSFUNSr5etHBMlzutfiwt6b7mHb55NauQbpKvVllk\n40IvY84SSQL4tgPyveC/eUrU4/l+d/SqMCrgRXXZQr1iw4fxLo0yLCTnzdrZ\nobmi+dOeCkbIak36OKw4Lxfk2URvXG9HlPcbdi849R5YG+UOgNIDjxNK7ELy\nO5CMZg3diFvDW4ZOEiD4BZETBdycQYjJerzw0tcqTqcPjlqTQPAMV2TTkwie\nWlgu+52PE8CE1LGSZDUZMWWu2pwYgxwqulk+LgY6G20bmfx50QcZE0x3dPgL\nMWEc5EQ2zTdq7MomB4f5Tidg60zeeeo28A0Uf60ednVMe8Eqe2aI4Ixgwp/J\nQTw/\r\n=F7rA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/density":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/tab-scroller":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.080965f39.0_1592925523059_0.7121212399101846","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/tab-bar","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1bafe93cd024123c043c5cad8d3b7dd6275564","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.1bd67b65d.0.tgz","fileCount":37,"integrity":"sha512-BEUsycX1xGDppDjo96iAO1GnatBrBbkGJZefDInR9m/Zl0whCH7BAU266XWexFv/RodQBdwa0MQHMV55rWjVJw==","signatures":[{"sig":"MEUCIHdplhMaq1PPeGQD/b7GzCXz6vTvrg/JQuuhqzZ+wWMRAiEArua4Qs0GZWt/LTXmXg4hYo8KMZeqGC10dY213lJ6iRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8idLCRA9TVsSAnZWagAAtRkP/1hDdhAgUTBi24AtayBL\ne3NiC0yJYFqBhFZ5H+l8/J1J39m00Wz2W/M7WLEOWYZ9mfr1yZQVjJsRuEXi\nwILEQDE4SH9n+V7JRMmo1o9zxYI3rG0a58/idHqstE4NgPQhTS26Twf7jyiI\ndUySvjkcuBxM8VQu/0W1qfRZFo+hdN6YcCtJxfi8+GUxC8yDRoTzfnClFiJD\nxN4KH5MmPJOyzqXdJihJzqsMqgiszTAOUaTtPI21m38liBMnCQOr4WHUeMNl\n+cmE4stosdxbUbZLsf4TwD6hU52bSrkcW66ROc/QVhuEbB+0+Y7IG2n+2wF3\nodtbFERdV57tUMFnVpF+4F+h+4Kaw4p8489ZE12zru5X5KIC9HZ4ijx2NiSz\nR5jLPYVJ5zpek5I7B99UkpQ5zLPkAYRQWObRO8W2eMB14q2anZV/YeUe5KrT\nc3ncbI8IrvjtRWvVH9VJXinpr+FZWTJHeLBoCnwNlUiQxOic7FzNTjLR23qH\nfeiHKhRbUhSYBFO9QF7BJQj7cdFtP5x3DqkbgxrCA8JBvCoGC36WSwfCz1Ta\nX7SPe6O3k6F7ryuXYP7xh70ufqIGWvqbOapuloKBpvF/aR0ND8RJJuQuxm4k\nrtn/Wnq+YVTzFAYXYFEdK7r+SwfeDgoQNef3VyPzOjw3/88hPpQuz3hNFWB+\nb5S8\r\n=VpOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/density":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/tab-scroller":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.1bd67b65d.0_1592928075294_0.04861017686859692","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/tab-bar","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48788f62be6984f7b4d97ed44d0a616fccbc5f17","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.18ca31248.0.tgz","fileCount":37,"integrity":"sha512-lrsVlBz2FDh+tzEjRxM0RiWyejHa4ukeiZw6ZiLkAyK+hpM7E+PEI0+AkVtS0kEmrkZHhhPtplsAFUj3GXV+mg==","signatures":[{"sig":"MEUCIQDA2UOE+hVYTja7elwOSqf93G70yT2rFVdtBBQ6vOa84AIgaoBdMpxQaIjqCvC2zWmdCKRxvIRswthZyFP+61gF3Ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8klECRA9TVsSAnZWagAAyU4QAJfF5O4vER5QVi4AivYa\nNVJDn/gIiI7M+kBiWeLttJ+XMOBww2+58lQtBcHuF9FbO7K/qObMChwKmG5b\nGXxiPxk+r92+iHUFubb8T2VniPXDpXJPOG1gM6jTcapvKa0ltCY8O5QfSt1H\n/cEJ7LkivYTcmUW5M0e8KjMPANyYNGNNRTDwjNC2CYCcfm/TE09M4yHig2Xy\noD0DI3ZeE9+AUM/y0luk3vOa/LgFY7y9LzO7FePi9GZmve0VyHhOUQghN0X/\nsFNebIWE5deDpkilOQ0llFd17jBpbPr+bVMomv522cM1e0dzKDthkju+v1Fe\ncweu9qnWXh6iBDK/QHGdYuOreC0QPw+h5IEr8duzJIHkI9onYgj1/aIcrlit\naHCo31LEQHx55PIj2gKdXoyqz7uBFLZ1eKOEfKC5HGUjsHAlawYQJr1npOvJ\n3ISp+uviet47NAv0g8ZzuJu1S2fHCzQe3wRInDHSIGnOXHnRGZxbUCUZ2Zkv\nflaVviDQId/iPPx/uQ2XKcDHC/0YM9pqWqKbjnaIPlxxt7GiCmDefFN/veym\nJ/0LcuKTRdU3vlTxIh7khji8oR+aB0Adj8PvSqozXbQTS5AbwA4AQaxCQf2Z\nKTMSURZoUsgAyZGLNO8G9n3uZQYdhWrVx0o/shUHYxVlvQVE5ZwKCc5aq/XD\n0JYj\r\n=mV70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/density":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/tab-scroller":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.18ca31248.0_1592936772388_0.4604998477863642","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/tab-bar","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8063c1da4ac34dda0b0e9c639a5060da7c651a63","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.39cf00836.0.tgz","fileCount":37,"integrity":"sha512-m4yiIOk6/k+JNMQWbAkM9M3MU1uT+UZkrsHCg6j8OKPxInCRnhiaXCgFd8JONBTNDX7QqRpsBsFg8RZd9sNFDA==","signatures":[{"sig":"MEUCIG/1rfpx2Fj55c13R9HYp8jfFuW3LKIaIkE31kTjRnoAAiEAzJ+qgVSIKIc/RB91eEAIAQ8HjCrDXTqfvTNNolXMfng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6kCRA9TVsSAnZWagAArCQP/0KsYh+DsoVRGy1ZANOX\nPt7NcDAcVrUsc1DwFwx1jsPkpAjslfgeRdupqwcydq0F06gpyHDt7BNLpNoy\nRxWnSHq5tg8QQ8L7aQePvV2/ceb/i9ZqOe/Yg2Ic1u9Q0PEyIs17PJ74hwy2\n7UxaHkTAy6SwqCcpMOWdzga9vpWAjo2ZX8k5DLVRlUgSTlgGDFzRM3iv/LRx\nsjkmreT73XYXvlCX7pUFA20f/I1haEBQhC0Ln/zkRoRN+NG9wnWuKLAhaXoi\nd8I/V2Zcv3FaTZDimaaWLYtZFIZSpxn8EiIFIjREhhPPfKLsaPMKsw5Kiajw\nhsXrakHl2yRn/tbbuNSp6ZCZEeSxsm87ix4FPq1ek2FkQG98GqA5/LqIyyTV\nzOEjhpCj/KT9LINOx7n1nhjvZEkbKxgaHY6izLTJi457IElQiZnoHMFt3++F\nkfbJj8JCThlhE5AAtHfynSKAnwBY+JxRzqfSNmWDoXFrtOlSc49jNMquigFR\nTIPBr280CipWLF+WQI/ScODwxzz0nuxi0Ytjqy7tdWaQgyC/2OiG5IQHdyFa\njRECYBZmniritbtjIFQ+rdx1MxzP7PoS8Xq61y6fjQz6pWL0RZkTPIG6YuGD\nDs4hCMX7fp3Y+DLZlGIKzKl2/EctUbJZO10xw+DoZ/L/vkrgBEU9SYjHxaii\nMl/j\r\n=mJy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/density":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/tab-scroller":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.39cf00836.0_1592938147655_0.7013788361095068","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/tab-bar","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1243d41e28214936c1fdd7e7f8bf5aca906684","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.1bfda9e05.0.tgz","fileCount":37,"integrity":"sha512-iw9J4S9i76JmzVsJJq82dpbzU0cFHhU5PUp9GgPbB+48fZRRfZRbxlmrdZ5Yar5nnD2Q6S17CzsRPs6NogxChA==","signatures":[{"sig":"MEYCIQCPNq2QOw5BpYtxk3zfl6iFZINvv/jAeiTSMLHfO1yn2wIhAOjtgNzVFxusI5rUnHuqbI6h/UahAxq3oPVtnJstAtDZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lGSCRA9TVsSAnZWagAAcx4QAI3vFZglyFD2r+yB2w8s\nU2vSXicTHtOeJbF9It0t6RImapNdlm6o4dAQMzTc8Ntko6zrMLpQOU+Hrh60\n4OHC7FMupelnWQ1BsCHF9TcwNTBIbCZkhBnJsYMrKpV1hkV/eloLlK+NJ0Pb\nX1lEUgWh2JX5PTaTERVNmrq3XoOlaIaJK/JEXMg/bNsE8mxXNC/OuwT4JWoU\nie5gK2hIOCFEPIIZ7xU7qp38ZsDfM+0uxUXsHc1QfsPXJbdOiluOULMB4PEx\nnUHsJZGk0nCWCXKU/EWNNGW65VVFC7OPmMsnBFZTVs07SOnELbIUZAQ3figy\nhCw2PiWbG4ojnfhIE01Ulu5wQ53MTONfrnyoxlahR7gsN2dD0WS1u5WSupLE\nX8mq0CIX0fupUZnIbLF54j/3gY4uLgSeUr7FlbNU4EFvs5mudvjFGw7VXZJx\nqj5nWQdwuPXp7yUoIc+ic6uy1Hk3ttQgCFKVMU6noSHBJ/ARrtke8QJOn/8W\nk0cnQPEbpjeR68BIpfbHqXDEjvDVXlmDDVt47GnkM/wUCqJlUYEEr84RwkNn\nBuaiqSACnjwf0h3tUQvkX3VNf4WzTdyMLGxMwH/lfRey8fWqFuZSBdlxw1nG\nTOiq0tssgHeVpUTZv81LJZ2Eh8ISrsgTcBDhMed4Q6Q6T3zm9d0yYVKWW9YM\nfvN3\r\n=3ADA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/density":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/tab-scroller":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.1bfda9e05.0_1592938898128_0.9622461780545513","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/tab-bar","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee27f051edd2d1da22f7fb6c8c2192edee449fa1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0-canary.08731bd95.0.tgz","fileCount":37,"integrity":"sha512-prb9LF2ZDAtTc95aVRc3Mfv1LT47iTmLSHaKWKuAbNmHwOHFQfBrff0lA8nvRgb84s8FieFhJxve/H44abE2NA==","signatures":[{"sig":"MEYCIQDb9iB4awvgGh5fh5KQkbB/UQRuyTCkwwwprCDB65mxvwIhAPdhBo+ucrKiQ7hbYL+NRH0WrMut7OD+fqJlDkPuB4CD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lImCRA9TVsSAnZWagAA8eYQAJS8Vqi6CglQjPJLdXym\nUs9s8LAelMJpLUITrAm+kTe6SBZqOYDnod6zAmcTAXBTElITSeAaLCNHGC1/\nAWwF6808sl1Vd2V30GY+PdBRuXAe6CBtpdHagQyrtaUu/9wtcUkB5m1PDkIc\nRKQSEQE4DCEMgs5ElTlXSlM4dPqV235V8bQ8C9DCnVAmWI5LcXSZrTmJQZLr\n2WnlqnjCjqjCqnpJ3wn50/QwjFc0yVjIdtmDXiAHaSbz9x3UQfOn9YdXqd/8\n5j/bdKtzWjt0NmaK3/YUNNuid2iEzu9DypLX6bqb63lnT5zRfWB0L/Zcsfqf\n2JesGpq7L+nLdxaxtRtbEq9aT74AxmiPr2Cn5h6E3uzFBTGvGYFXDmXuWPOv\n9BmsPubm37tlNTDjWXCxs22+BkJ4hcutqUity3ma2fvUbXXW9a1oNzpJi/Oz\nwwypWO/e7begt5/0ZHNjof0m8qebRYMInA4Z+bh1VCF82BOvRghcRIDvoxWy\njObF9sbbc/uNY3gZlGmYovdRfJzZX7DRKR8SXZkU15707k4zMeVNmDUZOwbQ\nrqRmsV2F7RwzyJZs6DLnwmu1hSHgc2LPeVjRQqt80CMsDndeGMlDp1UaLkPu\ngna8A20hem/td/dMNVvXlZ8gN7jqP411Rrkz0CITKN77M7zDw94AoIlO2C8Y\nuRGZ\r\n=t603\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/density":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/tab-scroller":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0-canary.08731bd95.0_1592939046154_0.7023442601679617","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/tab-bar","version":"7.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f3ca8b6d8a8893905882f39d637f07662aa3316","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-7.0.0.tgz","fileCount":36,"integrity":"sha512-kwcUtmDHQRNxuNjYT4Jtf5b7Zb4ZXCJsvZllX4qMPUGBxEDEjBh1zm3l7Oc5Z0bkMSMND6rFWZQS7HOgqa6YHg==","signatures":[{"sig":"MEQCIHkM7cp+b1sHN+9IWSZyyHL4O+9WxTZWGbBw1n9qV5QtAiAXiRcDBUGZv2fqG1eiWPGVMndsbHnOHcbOQEvt4btg9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQJCRA9TVsSAnZWagAADKUP/j7W6pKXVRIh+RAKAwBr\nZJ2h+FYoir3oyhMKOPuCadZIioIGf8I6PkeNKYU/my+14UYx4f+YRpvXpAf9\nCjjJ2q3BK9t4GDobCn+S88OTtBO7UM23vccvWiFREyRPkZKVwBclhE6yT3EY\nIoZ4zr1lASt2W8v2rJ7nw/ALHTzLiuHK3vU1Wvhn/Hr4TqA8Bw9kVLm7z1CI\ni4aD7lb+9RCSSiF9WK0sytxOvOR673U8MTDb9Td7zCs0zJH+6OXTfWTIGSvc\nTQ+a3fiShs0hL3GDyIisOKPD9qGZjf5gV2jcp2Gg3QOM7Il4WSuvvQDs7HGR\n/pE7oFgtBQNhLVhuyw37MAbUBlMU2DeSS9DjSHQuHksHxGbjC+wGBM+Va9lU\npT1/9r6kXX0R/nQh3kAu8v5QQBxJZFGdcRvFmLyoZ09i+WbRl7kYpdneXD21\neJuFv6Zi4Y7WPIJkIXowCPvEAPcXbCmgEyYAsv3WAMZ/fBtSmlm2N3g/M8Hc\nnnfVQLu8MPEModtfnUFtddcW9b9aPw1Nq/4iJEhKyS6ljiEZxVFPiOs6w/ZW\nN3ZoL3oBfqr3vkFuPGpUTaeMimpOobVZSJB85PEwZJwourVJiE7rNZkhFebA\neTg8wcLfO1tMcoGlzxv5iecLpZvcaA7fNLIZTDVVL2RnWlzMo9lJQuyVsNCs\nMZNv\r\n=YjpO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^7.0.0","@material/base":"^7.0.0","@material/density":"^7.0.0","@material/animation":"^7.0.0","@material/tab-scroller":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_7.0.0_1592939528964_0.8969300795076476","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"031557aaae1e814114f7c4451f63162408da9c82","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a3212b209.0.tgz","fileCount":37,"integrity":"sha512-40HlZWweVzIYJN3de6oQG7YXE6vaFMjuHuBI1YzMlz67nEhFccaxi4aQEyjXki0k04dobRxNo5X6cccpX4aKhw==","signatures":[{"sig":"MEQCIFKdIWpMSM+n8PR0ppCl5AlgFU4a8SNU0lW/wgWcQo6eAiBvTbNtJsiP+Zr7DId0TwkjossGFK0QD2JF8voSv3u+Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQ/CRA9TVsSAnZWagAAWk0P/jC8/GMu5y5Dft9U+NqZ\n/1dT4Gv3GGcqmOpBqBmodQ2W6g16TnA2PbKwYaCNri/r8SorQnKA8wluwsnt\nGH2EvIoGAVAavzmSJmA1uWjGp4F2wL+uQrxpAuFKAJ6znAmlQ/6Vj1ITrYZU\nli5Sr2Kf+9rarzDr2GrLAnmGi7XS+yiVwy9nVZKrsTbdqXKUEqSXbKIF5/Og\nqDGTBzlMB9NkqODUEMWd9KyjLN4Fp4wyoVJ4q75Ht7Gisu4X8DKv4V41pz6F\nbObOQbxmCR+q2MfGXzRWzAXwJCX8CXECrOYZ3VYtUXupbggcL6peRhE/ZkkK\nbDf+dPSriEkxqgLpTzgSM0rJzuJzKjxsl9jSUkQ57xXTAXrFhzO8P8PGQI7b\nxjxTXf7ChYia2miH4ExZnTzHjsQKY3mqvDNaasteRZl8au7FJhg4WJu0m5bk\nARs/ZYSsibg4A3UmypbeE/FJPUsM7FWNLnKmDFIhLFwWLwVSIFRLkZCcmVQO\no5F18k5H4mPjYXGfQbaB5nRu+LPKXR5ETXQC9cqOJhnPQVlGt6jj98aoE8Cs\n603ba6E4pFacUlyVFZ1ip45fN/1h+Y960nkv/zDvo73kqkd/Ef3TOWs5jBJp\nHxrVu1WhmUcnHdk8hIRWxZYqlwCEXZpepdS/U5YrCGNXh+T4TgR9Jmr7pZ+d\nLCGW\r\n=NNEt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/density":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/tab-scroller":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a3212b209.0_1592939582701_0.4129274083210974","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/tab-bar","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"418fc51ddfe8f2cdec90cfa35aed54331a2cc448","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.15e81fe98.0.tgz","fileCount":37,"integrity":"sha512-9BOC9dA8lysWu257oJHRlbK+EtBEQrv0p/CCeXB//CQWNHEhgcW7PR/Kp5FoYiPxpWFBjwu9EMs9gICztHG8JA==","signatures":[{"sig":"MEUCIQDDmrPh4T1+3YWbtiq7XLPbr7J15ghRQrkKqMudCMY3AwIgRksQilSouT9ObavFuKYZG4WKRCVukJRFMwufPucScqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lshCRA9TVsSAnZWagAAHw8P/2Lk6BIBFbAhtJBCdIgs\ntZWlOOXL9RiKUIk5zca839o/NZ49eGFDFszWFf8jkbhfcbkB4DTbPlQqnGz5\nz6L4bO1Aheqr29vND4DyyqAwPlbrm8pS4teF519zjKrXXnCLu362X+D3m58k\nK/+zv9RCo7kQOL9PJShzAfZitLiT81kv9hKkKtbjtOY6mEPNxKwH8RAH2Peg\nkQ2Cu80nyI+c3SUB8iu6fmGbAv268MUDHySmeRZ0nUOjnww4HRy9zp4v0lfa\nEZT0oKtJVerHL+OlpAqJLubbzfRS67jpAir1ZLw9DIRPLOnbEx+6kjmmNkMg\n93vaKQnh0QTuoXMTd27HStG7G3belnqSMjB+OD2gmtdMzzvLHijytS2LrDCe\nhBsWfSpSw1gSyOlIWwc3YyHF/dBigFxATJzUBM0A2zcWpEuPrd9bbxtX3J8I\nUogoLMvGEOzvR5STZbvwmBxnTwA82BSQm2S9zZbJN6IIvpvdzK4Ik3bXZ//o\nmZWv1dZ1g4+SOXzwGVMIhwmk9u2TENKIgj2pgkl6Z6vW0b2AnnTm4Ni7xeNm\nf4dIU9ZBtbmjfR333Z27SUAzXBFX55buJkmSsi/DHIAIPU9eFIkB161Bpi1A\nneLZnEEFQKr/zCuXMISrkRaU9yT6u1rTLIBFW6IFc8SoDXuu+UeN7yRKmXVn\nLXbH\r\n=B0GU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/density":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/tab-scroller":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.15e81fe98.0_1592941344708_0.6276964828399354","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/tab-bar","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c9543f229c04f06832414ae78759e782c648c6a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.004c9d392.0.tgz","fileCount":37,"integrity":"sha512-1xZX9A9/XgjwcuEShGYk3NsKz27C4722/Nu8WjJ4NLHw7QY/Ud2zjV/mDfybEfkHEmpgFrOrcVpKEuXrSs/ccg==","signatures":[{"sig":"MEQCIHV0jmzF73R150n0b9lDriBvylS2y6JPLKCdaXxfHyDLAiBrFNArHI/nJ+fUtngEbZj8/5KeCKDi5p0G935dFVyT+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oi+CRA9TVsSAnZWagAA39wP/jDrz8pBXk04ekV9VSWV\neQBWKPtw/Mi1lTSO1/bARMTsryfT7PuetY5eH/YfxIDuo97S/7OJYJuSnyFS\n/ytdVe7i5L7ZRaRaZhVuCuV7GXR7KV1wjZETnVvwc2Shq/MyZLfdAePrggdf\ndqEg+XMBP8P7Qyse5PL5IAOaOzv/YkXLT8iStgzKZYTSCkekBlIJp5Rf7qTT\nS76OSdtAWlr6qhGMGgLG1MAMEDUY2B8IzvEu7M4RSYrjTOBe/vY3iBjPx/jF\nHf9z0yoS7hMzBldOmd1S9QVcU6yrGlESFVm8Rp5bYC8R5dLNTiZdNvKE23WG\nuxChWrIiMDt8OMEspgkozZOQXJgDCARlTUHPj8pV3DC7Dqic+VqfZsjKFVSF\nCMEiIk/UnbCpBeGKdk/dYjOpmAKd3Z3i1Z9lFzg0omMUzdaOoQyDNDFBIf0D\nrYLbIAh7DmOCfj/r0gagnA7fL8vo+wpzLKBOWpoD2sEGF5F/fv/pQIo0BMjI\nLaCvZcjBFWv3TYU4upFk73wTnAZd324opa5RtpoQYLc79k5m99KmqIPZCV0+\n5t1ufQy32OBoICa+OokBn2p9zmaBv1gFk2Tr8LmzhGUB9gJS26nk/9ql+IyZ\nwKUIRa7Iob1voSxZ1iXgPt4jsgf80yDZJYObgO87JQFiCCo/sfAk38vk5xvf\nTvMe\r\n=WAHt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/density":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/tab-scroller":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.004c9d392.0_1592953022339_0.1992422818293016","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/tab-bar","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fe5007e84d39dd429f3e8f123f9bd7fc417e4a7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.03bde00f5.0.tgz","fileCount":37,"integrity":"sha512-CmFWIJYBdq9rrrUaAxWB26tpm+3miF1WI3kFciY/hc9oI8hmX/Jg+j1GcXwwIf015lfhLOQAmlnH6BCCY/hpGg==","signatures":[{"sig":"MEYCIQCc85ELVi7JksnTx1a6sJRu2GNyYu0pFMSzmT/btYsEEwIhALMY452F/haoKq8QABwB/nx2psXFyIGT54Y0nWUAyubk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8wCRA9TVsSAnZWagAAobYP/2jZRj4kPp/KrmMpV0/M\ncYkEcBXIYk7/wZYhbUljLjQxnpS6NimR54PoEwU0L+InFkfVVnqCO3xiDIWw\nyzki1P3nrgZ/vxJaWqj9jcSdDxlTs0DBVwPKT6+w8SCs7U2PEx32f7/i2di3\n7bGwto7Vgq5mJd0YINb2F4jH52+3u5u9iTS2dbdOOT0C27dEP81oeveOJNn5\nDIQybO4FRzFbYx47EF7MKtcLBu9au4B89PnCKcdPMjWORnM+G/OCl3TncL3F\nPZT0+5DCHcoSukSyAq9OiPYnE7LLyCVvdZpaOG0a2s7EkIvAxqnVs/ofQWCH\nSac9fPh8/PnklvsbB8mPqNaULO2LvimlCWH081uRRBP0zlAJhVklAwzKn6sF\n3pn9pXFtceQDzVhLsgzbiuuJlKWgZKc8jF222xEoLLbvGS08G9AFSsD8qOwW\nxGWEkw46Hl8ACrCKm2zlu5yj56yJFCRNn+eZDVMrDQWMOhiZHOh7obrYy5zO\ngglhYz57KPAYnqPappMASagc7EiW5TXDeONih+PS2ozWm2/b8/5smSQ3xu/0\nEQSXNx32KTkwJe+Uty1LJDThcSDs5MpRazA2JqJiDCJfkB1vWN+KifcYCWH7\nVwW66Qf/qUHN2Cegkf8/T5PqjAc0b+hDrLZdLlkCqFEqof8KJKqol3gAzOqk\nCok+\r\n=pTm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/density":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/tab-scroller":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.03bde00f5.0_1592958768220_0.2369063162191012","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/tab-bar","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28eb861ebb669d4028622b9e898fb8c90e9c6e99","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.599b8c319.0.tgz","fileCount":37,"integrity":"sha512-AubgovFRsJLKSLGBkbRdTW8B5qsrteOKJRekaRA3Hp7yf8+hpnwCjsV/rXg+pmUuQkmxdCdsO/wWQ3Hy5kpS6g==","signatures":[{"sig":"MEYCIQCzeX10G9ux8PU9EqdbiMpRNqxaC3Lew7MjG/G2j+XMWAIhAO3UhgQY0haQWrQ929PJvzoWcPFCuz+ODQ0gZRvwZkv2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82oDCRA9TVsSAnZWagAAqHwP/ifeFkRWyEoIhqdrWUSY\nLJwoIrtOGII+OewILCLB/foxuva5+J36zgfU70v3MnQmOBPq8yz+qa7ZFXDl\n6F+5isCsau+O0Z89tzxWpGeORanWaKaYalEe0pKxB2LcgLz/zf3JAKqvj49/\nA3gjfBtMGs+xyAKChUsP3QLAEA6g+s63owAval/iXQyWymVoDsGi8b0F23a9\nvJLpcwtnuogZf3HpBGVFVqG7NrLCavQ676FWYHwOscm+UcVFXAjkx4BEu+jI\nH7hvPBLBToXDxe5UkZgNeF/I/f/fGZXkVsm4fE5N8hc8gJBh7iYv2W5FLytY\n8lnmsnmf0d+vLUe9TOFzMgGKTdI9+QcwTmMI4sRWi/L5LtsnWicyWJg9iqq7\nCrJpftqkGLUzD7a8iDPva+GjdlAJ1i/VXKaWzUz+JXo7RiX3ZZTVU7v7KBWB\nbsydfaBovjNefKPpeO4Gn/4E5ybsWVnh5P/i6zu+vEbk3T4UAieqqW8FmIS2\nZ6nkAhoqfjBajr3tAraPGVv9nLa7N4GdUciPTFIBC5E+8AweT5TCAt5T6ccJ\nSLsYQ2Pdcjy770ocMARQWmHNEYbMLM0wo65X3nLa6JapZBc+0cF4zMDc5eg7\nVTgF15izsZItjZBtKEvo7OR1zT5H3w83XwxaobNVNMoi4Np1qeYz6nY91SFh\nUSlj\r\n=5EGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/density":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/tab-scroller":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.599b8c319.0_1593010690514_0.48357844886016665","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/tab-bar","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18964690b063bcce83f81112c85b2ea3c031e3c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.87e3be418.0.tgz","fileCount":37,"integrity":"sha512-8wR9cfzQNpBiWI5Y04PVsTtfbPWmZycfS9UZoo6ucvLntINpgrr9gPQnuG+1DcGUS3twOHiz00tgicjHvHNxnw==","signatures":[{"sig":"MEYCIQCCgFtOmvvH0YfY1icM+sWtRtL/tlmtTXZTjW7vjd6pfAIhAOpDZHM6+cy2ATTPAquCd59xd1iEzzEFoUVYbUeBqXqy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85NTCRA9TVsSAnZWagAAeygP/iJQOZeM5TnO/wTqEuIC\nxabJlEmBRYu9WzirQ+9BYeyypOtz82wIGesDmU1naCb9mXLGJq5dx63/RCqx\n2blN8JnJklk7XHdqU1RcwOxr5mB3qgugpN5DbjL+FRz1xAuQnOqas1OT1XTh\nv4wY8GWrPErYhbxW1z+opdEReU2pSCGBUv+yHoOzVO1jOh2WYa0hNqF9SqBs\n8+bg30ijjaqgRJxcxj1K0wKd/09AijLBnFCKkwvukkXQiKNYv9GxRQMFSl04\ne8iGLVcuCQCGMoqCzF3/5FAWOGlGRCteQkfnrVDDkPVBzaKnKablxFE5Ug0u\ncqhI/zz9aFmYjhecpdxR5wahkfi3s6I7lJDSBdXTs8Vu3SGlmQwcbBOy9fxj\nBygiQNtU0gu3Jd9kB9PkU1hPAJCcvojs8Xgoab8BwsAng9UuXuPvkmnIpWk/\nZTaaMC73L46EmNbbfRA+MEd1RZ6J6hOldq/e+L9udXXK/RucErgfh35c9ZdJ\n96iP/7iTJ3bgK3f20FmU6aP/NsAG4PrBF/jdtOvLazbINC2iEilDkvxFITXg\nCJ+6LufDGNYLIdVfpeb2ZwfNHJNEIiX00GCwlUrxtsMXA5zI4osLRz1IUgIc\n07CGTnLWFhl1z1HIySBXJLIMlMfmmFYctIL7/7fDp5lowvkCOJCfyhgY0j74\ntOCv\r\n=Rj/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/density":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/tab-scroller":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.87e3be418.0_1593021267025_0.7330191111370123","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a1fbe4576d2f51cbf0592bfc785ffcc4d2e52ff","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.035cf2a6f.0.tgz","fileCount":37,"integrity":"sha512-tyJ6etETIooz+UUJGkBnBS7pyWsA5N2sxxrYhGdexMzNGOXwxmGKmG9wxE/1UKPIFsoWqrPs859ST6W1fYvNxA==","signatures":[{"sig":"MEYCIQDxv3/reG/cIGKvS3xbnQhjYq0K7NO95lJL/4HHUSVOkAIhAJWRFGIwWsfUORu1S88NQBwQQumja3NiiA6FGdwwLaU7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853yCRA9TVsSAnZWagAA6tcP/jyhinVDhCYXbPe4Sxpt\nhqmuqVvPcVyiK5Ah31EBKC1zregr5dHSB8aOPJYoY5FXdc7M3CtQ+dty4k8U\nPsGRQwlNw6Ug15cBRksXRCQxi5s5PAYKpKJtM2JvssKYDxATzgFq1ZdP1gYK\nZ+kyYXZ0KNOGk0am65+Iha5XyfJdEgiGe90BqKJ5pZc6YEF9GRQm8xGBeleF\nuMt81fj+lZO6LiJgQ58M2+P7T0iCZBx2G9zFdBZyO8zkUkAPE5OT02rTUpYd\n67ovjikrQm7fjKPEp1MfhNwKvwE8KOyLd6vuO88CuGjMqvBjXqY5hb0tWXx3\n7mPbi/mEUHGAw1VOlilfLTHzsrsnjNFIqPUTyegPxlM1VLQW9ao+QNHVd1I3\nCIsFTsFqAqG35jwyNhnMJumLEd8rCIHV/gi/1KFaiW0ZiyzAFeFAveSDI6nZ\nMUudByV/PC1LJvCm0sKjh2hr6dEVZ1X0yNy9UimXG1RjsxxAQsuc8u/25lau\nUc3o/+aaroiYJTPW812JwHmBNMP8v6mZEOIhX0ZRKnUwSRuM295YIQYEBAqT\ncM/JUgbqhVB1lQndbsGpB+ktt0qWb+S7h+aGmhaKJ/iaXQ+Qee9QJxFHygxo\ndV6IZePdExf1VX8qnvRyQMUIUp5Zb0aEEGggCgCXsoPZGLINePYw5TeCuP8U\nvbaq\r\n=pzIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/density":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/tab-scroller":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.035cf2a6f.0_1593023986074_0.13345795936782068","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e01f3f74cddf95e108d3b10b898821b4feae0ad","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2fed2c12f.0.tgz","fileCount":37,"integrity":"sha512-upNIrzayvx8l44Rd0mgXJhTmNXR2yaI2aIraT2E+4tCH7A5/l3VF7JuEGbs+1Cp9V0V6A057hFvLinFk5DHxpA==","signatures":[{"sig":"MEUCIGKhf02RSXTAWVr2eSxQBJhVtfm40oYw1Pm4S2StxpGBAiEAyJ6vCwtYBqC3bb0d6Z3zvxImznleTFvOkHwP6y09Eh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLtCRA9TVsSAnZWagAAcYMP/jSAA5Ma67vQsXJNaa1u\nSzd5mkFiUys5TCDdcQL0YuNsBEoSampEXz/rkJ+618rHdgdoflG38nlrCyC4\nTy+GsEBXCC8LFGc3ilhJJ+8mCDzYs+pZFqrH+OMkit7MHs2AkFyF/5rCOtRb\nuVmpfgdGJCB6rcl5qvpt+4naoapIJv3ZHm5KD9ejDDgjm/TGtgJenF3+bcgq\niY0v/dQCjUXC5a2mE604DYxua/91t6zLbuj4/i0bevY5tQBFAtSmNgLlqI9Y\nte+O4KkQH72UEGVU3I0ZgSW3BAl7X2+Vb3YxjuiNhnF7EhVeTgMTT1E+FH3g\nweXiBuE4OfLfPAkfBfL5XTact3ZGd44cGcnX0LJBLEjnbM5rwjIjvikr1UKn\nrNBfPNoKajKJEI/BRAVbk7e+F9xGILVPJ1EEnfLMA3z0Qjk08bFIOEsfSJdp\n59nwS9a3tkBJ4RubmqW1olWLTKFnEeU1f/tM+7TYdjVyvydIwhdEGGiuz90f\nPMO9qSkr7Zm+QTcBl5Sdyn0KQeXqT+NJwG9aQ3ztvLDNHGuKpKYV+tst5SR7\n/H1cai+ohbL2qFM5Wwj7PB47wf1p7+V1EcmUFtz93qLn8L5+kQMmL7+hnuVb\np/waBl3enMYR7GZWKv4YI3Rw5rx+8FBuIjMrSS2Lw3Vhgg3xXWPQqaZ1pu/a\nSvlM\r\n=p8UR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/density":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/tab-scroller":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2fed2c12f.0_1593115372873_0.21758035262785547","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/tab-bar","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e87c68a9509a7d9cbd0646f74fd087c46ff061c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.38197b443.0.tgz","fileCount":37,"integrity":"sha512-C99kUfPPraGSW6aYJhhS11yjB0eyjvgStkIyudUowUa3NT9lv/aM+5HGpobmOvszW/pkSH4go/5RnbkoUaYGBg==","signatures":[{"sig":"MEYCIQCIQGZFs4LuuFRI97FAhtbaJEBWJNSQHQ3YrzunI7mH3QIhAOXP80p+HkJtFFaEFg2XQ6YUaC+6R1nzz8BvLfpJPxnV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXhCRA9TVsSAnZWagAAhqwP/RG3BJ/UNlPlq4Z6VTfh\nJPPjvxcFXXkc49rszvrXw80eEiDpVJ+Clnwy3CfyxfextcuTzKk5Ght3Jdw9\nnn++ntKyZh3JY243NPvFVsu6zDA2VRCbY9YUABARUu1Tru5A1TECiia9mUfy\n9xvILW7diHB6lIoxei87zrG0mObxcAnfmNK0JYz7dsCtI4caJmxDB7M23JfP\n5+pESPKB6QwcAYHNdQVJVvFc5hYnlfHoAUpJehIrj53KQ/FeFwIXuIKOWUuV\nLRjW7ezm77SWpX6ThFa5kl8ZReVP7Uc3l/LdxglNSl1tb8HphiKf7NMUk+78\n9PWO1sbQv4Rul+Y3AdvLwjzNzMylN+pqdOCuVAV+itlU1a1gPi+9BoS82/xI\nu9OS7kCd39ezZbrtOW+iU1N6A4v+bfCxig50iiQnTZDqJpTRxNI8WWzn7qVm\nu+I5JwtPbV+oeQ7F5ympW3QdlNr3bdQFBBI6Kz0ZNznhexpIY1zDVncUz+EN\nmj5bVmXGCYEt5OC+izd3TqXhM24bVpr6yqyBAJcRQ7vepcWyrf2o5qusAPJm\no1Y6JXPM+PSHWkswXfcLPCEaFSc7BYpsg8sqe+Ip9jpRofqrGF6C85xx4a9e\nUlI6ZZR27+N0uU83bqAUyF/uSXnLERCCi/oD9gl0XdB1oXxnHADYHf148Wze\nxqoF\r\n=c3B8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/density":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/tab-scroller":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.38197b443.0_1593120225241_0.62170833398982","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebe4c2308bd8eb9df2a70297952b6dec35375b63","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.69a35e80c.0.tgz","fileCount":37,"integrity":"sha512-bJilJb1E6rcCRJJ/Y4RHfnaw8Bjf4UcW3nbd1PnDGVLbgaVGKK+f3JQuPN2FaDtDVZ8cWKnOlLL6CnN4SxaJ/A==","signatures":[{"sig":"MEYCIQCLcIyjdERRz9/MiA0ekfZ0dO+aVCj7NAbz+/Ke/cCBhgIhAOWVPbchR1Wk2GxeTWXNV9l3vx7PXFvJKCb3vDrAoD43","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLsCRA9TVsSAnZWagAAM/sP/jCWGTQ66i0in4qs9Ahs\n6LrHqExcDTcKE15FUa2HCdPCCpW4lvtxYslSq/W38AyS7G7+K4GlvX7ynXb5\njUJx7UVyAWPJT2kJxSWRB4EVGaM9OQohnH7zWxnadvEv3Cwt6OgL7X4weXEE\nGTehJJeMOqVVK/sLbrtV8bzydN3QWwu5lFX96lCaWiuDiFdZlb9XOvi7lzxS\n1GJoa70Cu9UIZSv7E5evRbxPkKE1uoLVLVcEpZw5EiTcNd+JgFiNY+V3Quts\nTYnzP4pZRIfxdeaGrqQtj+JHvcqtZx5uYUTiumPTf8ZkfE7AZB89nnInK9u1\nkdQCUubqbCwSeVMmF+bWU/+MpJrccfwxRJd2ZMx8AoH926/Yi3YvYn/jm16i\n7WmkKVTOCKxwc+6QOOm+VRmput90LgebDnxdayofRRny9aLgAXE/MJIej7rb\nhtD04xFZQwW5KeH2YpBxDEKTQ3yYb7Z9ygPA8lltzabHpGbRbqaVAzUWP9Fg\nMUp/Vgz+lJSsv4HPPQjtSE7rwc1BbTZu1OwpT6xOl9+GWnWeg5fZU/WKrZBB\nOOk8Qa58CIzm1+0GaLek6Gu2cETx6EyGJVS8P8LqsSXTaP7Bv40h0zLbUPgy\nznwnTutNdm2ipo6Nq0BVox31WhFyvlNVYwTyX14K+n+R22dAXv/h0oWw05On\n2SCG\r\n=+QxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/density":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/tab-scroller":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.69a35e80c.0_1593193195929_0.7383397874820601","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/tab-bar","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e0531afa8361a105876d5a1477df2184c36235","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.df7154fb3.0.tgz","fileCount":37,"integrity":"sha512-V/p7ioONdviySavcWvhwl0WPPkAcFDK3XRTqfdKJ2OhOG7GaHI+lJweV8ld93NIyTmvyRQLJa1bsjToN02H0OA==","signatures":[{"sig":"MEUCIQDcpqIaV+LG3xXtmUDvy7Os31nZ7gGeJb0DH7H74u/RWAIgAjct8nfd+sVG1sy53NZmiQMh8ldbon+TuQUXrEAQBCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jvcCRA9TVsSAnZWagAAOoUQAJYT4bzqObFpfly5h2Cy\nzNjDBym5dv83iUkaiT0FefZA0gxGwiusGpvsOAVpiG9+ZvMSFE4+uFESuyXX\n7vRkEkrV/EznBzyRl3JyOEPj1WYRmqmAgejPK8VDoBrTDMEP/iqkEAQf4Med\nZGS5M9weIgOVUZ2Qp0PhkDinrYUkLPIWGdM48uygf8UEhxWt8djVA3R6vDsC\nLR2CnSJoEE+y20wy3Km8YHAqAL5qvvZEvFQwoODhS8SnT+j8x2IKXHh63z7c\nbyzX+srRZzRnG1KWZJQtUL8fBwPF0EMuFdLDFE1Rad7NHPJRxzPVZOzhjDyB\nAeyDdTllaAhJRCEmfinKz21zb3uq/2vhfCpUgPYBxu3xMq5VcuBb7acpdBIG\npbaU/zBSAoU+ldPE1B/HJdCjwytoBNgCPwWQcDPV9xkN8pL3c3EHwCBkYCFm\nXfQmmib801sZpHS5dwGZ07S+P6Ci8zoInap6m49USBSUja+kTyY9xLv1SXXM\nRGnhzKRPONgGlyCxLcE+A7YIAmhrR4JVpkK3X9eQtaa85951/J3irVeol1dE\nFms7Q4+ZVmJjJd5DjBrJ7GlcNJdfPUcjKVWJQJHkXcSmrOiV6gXkdS9ny88h\nzKNGQ1BlCulmeSc0wgXb1x9GGt55xtvZ6sdxwcHsRmwBwre6mPe3xKSyttwk\nEm8S\r\n=8iD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/density":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/tab-scroller":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.df7154fb3.0_1593195484050_0.7791897277008204","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b37e082bedc2251a7d9cb40d8d279c4ff1caf2f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d5618602a.0.tgz","fileCount":37,"integrity":"sha512-xcntq/+2/mXdyuvCEc3WwTF+DJnZvMu9p0xymQIUehoXPuX4JW7DC9bNTfubRyGY1Pldkp51Em/HyK42w+mJZA==","signatures":[{"sig":"MEUCIFnpiMNlq03uB1cSuY12G/YKFlHeHGFbbdtvCq3enX9FAiEAop2ix+/KoHwNEHHr5mocel4Gos8BPQZIGpGv5hm3f+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1hCRA9TVsSAnZWagAAWqoP/36pNgSu9OFfk2CdY/Ea\nkbjwdKWIhFf3GtRR2mbmTvKHGtVPiDz43ojwQtg7r+DgH5Y652hcLeDcCOU8\ndOVDixgFNsoo05yOg63XV0WF8BUsJDHKsrTEesz9Uz05+0XcusI7AcWJxuMC\njuVDRV5Ih7R3m2XuL2XbNZHy/zhOzdpUrE1WNsPCNb8HHw43V7+XFzQP/9Mk\nK2NvPg80fdRHheDQn3MlxlK+zrgTKsxWZG8r7a0EeTDyPnYMiVslkFJ0y0BC\n8GvVeBwDtm6R6K3xKOMUXD9KA0azOHnpPoXex+cxwAaN4wkgAYJR8t9mC3rx\nPe8CyzV6Ow8R4xhOYS+FKmtDYKcirAdf+SyuVtWFzEquFNRDhrCdSH7vjsxv\n5IYvQZPYPx471VxOvcN8zWDS7VlIirEoJjoE3bawnEOx6o7TskyA1Vh5CD9e\nLDAjBaeVqQ3TnlilPn6XYm14+kn3xYBU0nhVRi1WApARu5aMEd+F+772B2sB\nxfD+S4lY+L/SMC3DAKmpPoV9vx+SDbT2QrIy2cllQA5IRdlpnSlNqln1EPIm\nziYa88bo23oHtXB/ZwI989LCtDc1SjU7e/TS+RTYCDF1uj+M+l5y6NedOsJS\nn9TVQsIDLdzWWsM9oNiqyErO9qlWI3yRyMJZvIxg7F1Dm097FnFITnbt1o6K\nVEuD\r\n=3ic+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/density":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/tab-scroller":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d5618602a.0_1593208161110_0.4872008286686529","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fec06d8425ad73b7575bed0ad5f4461610de38c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e590b376b.0.tgz","fileCount":37,"integrity":"sha512-2JEEIroxcOXDsjemrMbYIXzFM5BW7YElTdEs+AE+Zjay2VrlWGCsrTUojyX0of9ogHwe1KX9ZvUIYyEG2bNnTQ==","signatures":[{"sig":"MEUCIFepS17ewxcFSclhMwLhw/6JHNfnkfAnK8RKEuVGHxKiAiEAqQ/P6SO+D7OmjaIA/yhiGelduy9DycqtSJ649Nahtx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oO+CRA9TVsSAnZWagAAIUMP/iPCajEvlJJMq++2EkkF\nUDA2pRZdQ3lqfz8B4Grl+W+eC4yvp+K8tAt7tML4L0HRMt6owd75VV8+3YEC\nu+BqogVMfu7D12ZmVJQyaJXb618U7+VYcyFaajSJHO/+ADZdIsmmWIFOqnOa\njGiOc9u3UnKLIUyJEB4wEELEyCfMvaI98GitsE8XPANm3gwOr/UlHd8Isan/\n9Br0fomx6RCDukoTB2i+ucHFtD9PG5KwzbzvXq1pfhlNU9r4l+DGZVkr+n3n\ndRmG91iR4rh2UvnmWicKawaC6/kTAakGPfmwH964/P/Z1H1X8EW/0Y4KqezF\n75cYLsZeq6kNqjKuEb9HHYC77XkwCSvlJO6c+HPkqx36xrD8wrs6AvI0TLm8\nDVl/HnErk+r9/wcLsW2NG7yMuEYVJwVC7zZV2zPqQBWJCrJOjmHl2ArENRyi\niIE8gGLSLnBa4y/YSSE2246QPAsGvKl3cnQPAibqZiK0FRtArLEu5iYvGhXo\nKz4MneUxFPj+37NuUcXmgsNUoq6DnL8IHHmYRlnKADCaEkK/7yRxTRxxOjqO\neD9QjC8iphbPhEYQ0YxTy8M4M14wloep6ejarIWdz2qRGngM1LSRJa1pc9Nh\n+7b8eobjn16Pc27Jz7kpcqnBpNgV3xsz+o7Vunw6XtXkDVX5AXeP1aj9xHQY\nK/0G\r\n=MosT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/density":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/tab-scroller":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e590b376b.0_1593213886379_0.7526883393305555","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9029d09d6062253cc22a275009788cb0c7da3833","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":37,"integrity":"sha512-MdPOgh1TnZRWkXnxX2HxNodgt+Gq820JwT0a0GTxhvevBfoOaGBGg3U8fxWXaO8JVXDN18Ejy1rxvChfmTQ+vA==","signatures":[{"sig":"MEUCIQDLGw10BBHNTFYO8+Sa3AOOSIONfljIRAEa017tc2qcowIgTEWD2ilsQm7RW1pLRum5r5Qh08XryRyEaHmmRwZRQmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHuCRA9TVsSAnZWagAAIA4P/Apgaf5rNVDtO6Erf+wp\nq6aBlNHR8WMsIFk9X6JT3FcCBA2/uCPY8UK2sHEvck+o5Xip6wRJDqBs1hQw\nXRJl41mi7LUNC6LmgqmZocBt/SocDLo3qtcSRu6Of+NNixG2sXoUjtlr0Qbf\n5iTG7w70NAP5B2NhL9SFbP5T7jEjLAxFoBJqg2YOPyPZjLd1o8WUKOAmI5FR\n41sf969zC5+oiH3RfBGeNX+CPhSse0CVw48OHU/bUi+075vQ48nJBgF81lBX\npe6pth5kWcCcktIUKZA+a0nxHGWR3n66JYAp0zaqtOzm3TRw/XMFN2+9RL+l\n4DyBGm3CAGIpgy4BKl+t7440bRiZhYgWc7AWJEsRcmFNtix+2c9U7ZEbOGyM\nfKkwzEGMnmLGtt3h5xsQYvAXV+BunlsQTdyLq2yK3O1fDYjet47gc2UOVvbl\nbqdammETdpT59xYgfxyPzQuaegF5f0qDi5v66am74Szv9fzffN9gkeKUMx3A\nusvrRsvgIALt7S+fYSn2bwtEA5loAG7w2AABhGGruYAYQt0aqk5HCdnEyYoy\nzh1mRKX3HoFO5VKNGOvRsozYZ71msigVFKXqwLt9x+7eCiu3Y6UVSXVAJLpr\ndJnNcYSqTeJ+oXtvyOWG/UrcsJ5ht53oFJmBE2fkXIFremyNucy9OVdw3GSF\nyAKz\r\n=Hyhn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/density":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/tab-scroller":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.0c9d6bd2d.0_1593450990524_0.3504598541647983","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba08677717b7ac6c5541f96fd0f134bb50dc5ed","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c1fec4246.0.tgz","fileCount":37,"integrity":"sha512-xtWFkmfY60fuCkdHGTXiDb6cXPGtuCW58MLx1tOlgafdIM9OxQ1xVXmojtYtzHC/5niK+a+4DstPwAkoYkWGQg==","signatures":[{"sig":"MEUCIQChKB9oLI6bkjahzVg2QarQnMn+GYioTv4+FdiGvPGNvwIgD/H5/53Z7/Ib13k4UDwpm3fFiBk0Kg8rMbxGvVUHOuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iWPCRA9TVsSAnZWagAA62IP/Azjfi0z0j48L5gnCBNQ\ntvLwrgj00WyjQ5Bm7btcfkYY0JhAiFFPEKJC5pr4VU/tS3v1Tb6tIIdVAn1V\nXdOYrozLg4OaEpw9gCUc1ez7s185xg/C2Y+TeuoJXDRk90dUevb+3eXNtlj4\nJCfnu9Bl8uuTfNZ7FQHNJ+zj//a4rMyabkMQLkf9dyp9aNWxilqfbbXNeThG\nNUP/4mSiO6iXZ2SaOhz+3MDkj/mCFKAWQQuHQdu+fUdBjZl+Gn0ZgDXxstj/\n/JH2DLQlZicgEpssyDuXXMe+EJ46EgcNvZl6nXa7E3V6ZTbfZdAGRKtuww9Z\nT2bfakzJ5ts89/AH+oq0oyh+XbFVRmxnsD94lvCXdASQx3wFSODZgcQZSsyS\nNE0wOWDd1UpwHmtCJX1WsXALZ0kZxhScGRajM5NXgsp4NqpQVWuyH0T5ME47\nOP/GTfrb3EAVNrEZGqSI/uGMXocvIUvOhTpUVp2TM1IqM9rMkt5tuzqD/6Vz\nXTs9w9WYebE8g7DjJ8MlmhWJYA3dXPQvQKsViVWpJOpYtBJ/gu0yRlx0B826\nmQ4DcFdOQu0DjvcZgdGm8DoKCIrObQk01t/q8Z6o8i0yJicj9Z8XPYkAUQXF\nXl+vH5/JpsDeE/22JDFjuQWIRLSgEekzUV89X9bSe46KpGgaTKn1xLOD1BMJ\nBpP6\r\n=D96e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/density":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/tab-scroller":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c1fec4246.0_1593451919245_0.05578875951413442","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e213eb6e6c896750a558bc4af9f03d12f5fbe5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c678a9d34.0.tgz","fileCount":37,"integrity":"sha512-ndwzcgeAfUB6dPqdYoVOvuOgxrnKawHiqxpXsB4gpFEJ0kwquLi5Yj0lUu7z/3vM8pVfdUqxFZCYR9y0MMgTQA==","signatures":[{"sig":"MEUCID3rmcqrb9Z7oDNiptUVhzTFouyOHGhXWGsU82iMn9VWAiEAg+SnebVWwA/cSYgFsdnQgvEXF3IaimupeH4yk0o4OlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iqPCRA9TVsSAnZWagAAT/sP/1j+eF+fD5Z9NhglOC3H\n58BJv8NU4qXVw6emh2fBR86SzwV7dyZKsQqg5mGPNTCVojPxCVzI1Ot1+ZzR\nDt6u8diOFMZ12orWU05lSGK9zV7hU1B995+dCZgWlzdFj/IdKqLoF3zeXb4B\nKutbaL0kzQfsj7kJTBJh6Tu2h3WphUnc155BwnT5zV83XiYli+z2Ev6ZhpOe\n3CJYclSGH6o34QdYDOqKES3vxu1dF1piziUFnAUzHluem5G5Y3pBuVRDY/tL\nLLxDw96mnKTW6Qlir6d5teetE2GDH2EO0o5eTV/7EQcNeUTxW/E68cdAezwN\nHMSE+MY+1/Lx1RN4TMO8LLbcpC+BrVP4bSQkHoSIi3HW5MmBnNYEtl0znOMI\ncED0ZyeCRh4YS+qf6/4C9OxeMx32HDiWbMmXfZNAvhRSSAkMeDg4Y5JMm7ja\nqQQOB4dDQpI3gVeG0PrlznsZgzZwvSw0uKtDI/60oc++fYSP15UJvgKmgAD5\n/+RR+ya/rxzjoPSmJ24oxJ64pO8AB9DW2bl+OwBu9cEaOVMso0eUx4diGQvF\nZoT9qg7O1RbETqUCJgOAs980uJx2deOM2fRLOEQhCPeLNdl6IUgRCyhXaJRq\nhpInpYUaJF3Ja/B1HWdrFmYY3nde3BVHFhRFdfOnagYPt0tbFhN46JWftmZK\n0ttW\r\n=XB0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/density":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/tab-scroller":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c678a9d34.0_1593453199104_0.0719451721484583","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58845485665f1aa0b6ef6da19aed81647f7ff276","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.521afaf6e.0.tgz","fileCount":37,"integrity":"sha512-EIyQ2AYK3z0i574sU5BoRpslwYqBfglZRsR4gAUWReKUL5X3Bn0Zi/1tJvkcFb/xrmO5r869xSoIpts/ulhGYA==","signatures":[{"sig":"MEUCIQCoebHkoCYSTOzUB0/ExYj/5enVXhSnFpDs1Et0Tk7uIAIgUs5zgAS+aNtkmdFrCNJfFWDBr+Wxx7KmuGRFxcbEdJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1UcCRA9TVsSAnZWagAAJXwP/0IY/Sn/+uSXGIJyZzTI\n3Qa9w8IuJRY07aa6LsIfzM28MqWhupFvaU5OMgE2f+I+ih8+YF+5jY+bt/mX\neD0Jv/EBEHyyPsZrSA//CXf1xV/PLR5JAfd19GBchDtrZykH9y8jsjbPczo5\nO5LAJ/e/+Rwa+vRD9/zNd2FfWgWPyXT4imowcRns6W7ZhNlBTOkjEJ3MKb6v\nyI9r9Y25W+CuQhOoycoLMhY8qIEnjtgovFyL0DJTEf1ZuDG73yVvoilLOJ3C\nkNcXFHXMisHe4IECcwp9IZUBrj5Ke9scIrJpiNndVGibzhFAoLxz3TPgsUrm\n0j0xJZNQqLIlnDdgWQpJG7Ldn0mtElFhdN8/DprM/EXmYJq+hRgOZ2Q5smhN\n+VKrN1RjvQ31MkLfA9ND+kfbE7dMrhMlikf8c+meQVzExc8ojNELHvoyzGF7\ndtJpYCn+ZXeoNweUXwEaDIG9giwbM7TlE+fUf/HUkMPboGyesOT0OxRelnim\nRHksjZ04P1K5JkJVIFe72okqqipnHkuOye7doHKjKaiMv1umrS+mFjtLWihO\nnaOL9N6z+cyRE1hMACVd8BApV7Sk7ZJZtt7T4fXIIdSOtGW2sTQzovtg6Cft\nv6VC3jJjq9dlLjlHf1qGROduIAN0Pb7N/uocWLXgVbjAhQwMvYcI30QWBJMb\nxUkO\r\n=mdJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/density":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/tab-scroller":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.521afaf6e.0_1593529628069_0.8592833288848134","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24521a94ba855949e985930de98cb5892e1211e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a2ad48839.0.tgz","fileCount":37,"integrity":"sha512-jbpCbeG/DZcONexMnNojT34ICVxoaGtCjqZH0VaE9mPA2FQAhrRgyzWtuJYgTZ663J2naMgCSAvEn8lKH1IjuA==","signatures":[{"sig":"MEUCIDiQ+N0FSVnPIJQi3vSU/+zRYtYPDSMXrnk1ykpcEdleAiEAmw8iiS9aZDztreXkuP7zhCB3jxAG6MU9SZm3Dz02RqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49iCRA9TVsSAnZWagAAYUkP/RG5vn6VgS6CL5aenqYh\nb7b3IUrwsirifMpqlKpifS0zVaFo65MxZS2vt1xyvyO/hHN+y8Bj64vAyjnl\nfgtGTVOTNygwwQzX3EjO/kGY+EZjR06ftUo9VJg3ocr/EMYxSsRmshXYvPLO\nDloCnp95vbsVYoLFTe8Hcme36QRd9Fpdv6vlgwB19QgBDKXZ+s6DWiggRTg8\n8E0GG3m4Fw+bBldN+a/+uDGLlA6H6+9p+lLrzVGftBu6aYo6/xwAZyC4OEP5\nrU4RJavufxk0RiD2nxsqxT7+Lt1M7qgCx3k1dZG9Ux57JuLZZNdY0DUO9XjW\nnfafdK8vx923RL3azOmaVLcLg64kOfA4eqPd6kQK5smlLYVDzrqJedBubnbh\n9tEhLHXWPoHZMSfuC4xhS586lM2fr6P+mPG+LvZZlXbp5dmUtm4dG6c8cPsZ\nwiB02muVDlbS1Xolh/YcubsWwftIZRVDQBQMZC9xMOC2ihMQ5Nac6RUNI2LO\nbgDNWJ5kNUYLP8ZhSkQXQLRDOdgMFKD1/xJzE5H3Q0ov42z824SuGeasTN/x\nZFEkTD2foaSnh4YbSszTXjvebHBBBTt0Qg3IiICfRc8mmz0X/fJamwxA5Zkk\nbVdZ5DPTzccwwS81bKSvijY8OZnoj0nq7AnVUmLOxW3l4UqJyvbrWMZTerKr\nxGMK\r\n=98NN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/density":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/tab-scroller":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a2ad48839.0_1593544546311_0.2708734919249096","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6851dfcc9734d06f1f151350f97adebaa914e39","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ec2385881.0.tgz","fileCount":37,"integrity":"sha512-r+feAt4KFKYZmx+fXJQyzKKRiPmb/LvByMSXj8cmdyTldRZLCXfKIWUp2EQcM7GwL58J8f6e9FIEtOZhPz72Ug==","signatures":[{"sig":"MEUCIQDs8ZBAE1fPxYyEyUJ26YJWKzpIcmcsQj9Cbk1B7SuRpQIgUd3pE/Ap34lSnQc9LBoLkYcBVCiclpnEIVPD6PdvCeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MqCRA9TVsSAnZWagAAGxEP/RTbdxNTDnYyCM1cq9aI\nyqRGQWMikv3DHEhh8w02zMr6M1qnpbQTm0cse9Qqyc/3YWMKWHGGYlKBHyWq\npBx8dAy6LJQYjO6ab85dD0SVA37cP792fzwbk/3C/ZrFHnquWGLbfaWc2U6l\nTsK3eo/1Z6B19W7mXFBNJykIbg9Q2UxnPwFarrUfhzU+RnrAnLH9ORX8foQ1\n0PRMopOsaz3vqkPH7fQlwY2Cz/5X2namKkRUNF6CegklzmftuCt75L9znCI8\nfqUA1pXFvyhlzJta64b7WWMCReh9M3d4/4Kiid/WEbOGN+NEWER8hRiVuT1s\nWSzFntn6vhHVcAJ6Z4wUchyImhjxy+CDGfiQvxZ/ai20JMQ0NrJRUdU4Em6l\nb5OEG34T/YSCxkOCAJDA+ux7N8iA1NMyb1ftPhKkxEV7RLaD5k4XRktWZtN3\nqtlgJHku+UuedOQCY9P2l0gq8q8PsD7yr8mcfi97AtOzxJTORoYvMkEsLHgD\nJNmMOEqi/VhYP398uXuwdNOCpOyIryix/z+CpU+PGIzh8p3JQrxNAbpUT3R/\n2J5nZSXrlVwe3dLyTshcooNCGd7AWRa5Ka1iY5/hrbd937KKXt+FL6p+xfe+\nX48J6A8NmfHhlbz77xkefD+sDSL7s6SWjM8Cq0Nml9rgCOerZl2uqn9aPAvx\nO2bN\r\n=b6Xf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/density":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/tab-scroller":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ec2385881.0_1593553705745_0.2330757590657977","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a6bbb299d3410bb1e7a6c383cbb3b92d1f39ec0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.610c26c4a.0.tgz","fileCount":37,"integrity":"sha512-cHKA7UPR3lIfHKdz/qKL8blegjVYsodu0p98Q2FWUIWeVkMP9+H/mYIQ8pVZzUumLtPUlgCDCY+FGRTFsF4Csw==","signatures":[{"sig":"MEYCIQCXfwvGrdfQcaZaAHgktpRPOTQfj5FamuoXQm9/Zo7uuQIhAO52ka2Fk/GGxQWP7myh1jh/GzVHAKkQhDTpJweBLNAE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KRkCRA9TVsSAnZWagAAYBUP/06I41UwMQuCd7VSg8XG\nZNmKqjDRZ1mKHSdTePhcDMykKqFJ3iBJ8H6hQLC71H83NILN2YSA8nGoNn8J\nu9hFVhO1+3Wd9x4/oJ05hoaXlDIN5AEyzJk0PmgXA6TYnySxeWrUpQzi6qoc\nH0CyTB7tSgH4yQ3VlShQEuVr038uP8EfnIgQ/Y2Jhb5JghEsgqCh/Fo1ebnm\nwfI9JXHFMsB6oSsKfUSk9zSc7mWg2EVltLtcKhnWOgpIGgff4n4lF04EBfXe\neZlEma5jNyHIzlBLRChjndKxKufPLrVch4lfhWcwmN35+3wAx2M3mu05I9dX\nUQojgOig76SmJ7bpa6kzSi2D4tE7Wx8fQLFd15bT2/1CeHkRwBs+Y0dolEUC\n5GR12dmW+c9Y76fCRL9fNl8p1mjb9WPwMLXUJEBQnfJUWTisxOyYKmiADhhl\nC4AUcmeBkJ8gIoeYdZtnMTEGdue0jGAlke2axcyVoqdc/5aU1+aMjOi8TJct\n1aonpYVM+zonN/W0erXiPyDdba0tPqBJaca72Hckaqp1f1zkgeI6NBl4JLAn\nwZ/41fauAxNhZX7FE1Ckz2DK1jHoiGMjtbBiXKZeP7UPSRiF49noOL4bHP8Z\n4M6csEmrRvkZlKaiCy24hXe+Dahp2Fqlyd4u3P4UpiQYGXxePR7GZB8WWR5P\nLAvA\r\n=nNR9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/density":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/tab-scroller":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.610c26c4a.0_1593615460248_0.9460744259902167","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b22de71bf3308d79cc3961b002ffdc995ca48637","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":37,"integrity":"sha512-jJ3SvMHhpZaKRkSeZf+LwaV81wK1ZRo0aiypEsAp4LJoy6h4BYkA6X+kFTCeuJBuCm+fbd37oO3LNS4/7o9vIQ==","signatures":[{"sig":"MEYCIQDfCeHh1ohK9ofmWDSUVEuP3e9r2mWMWwpXdmtaBlqnYwIhAJsQZ9a4/HIQIzPiRyUiDlfjWuktli05csVgX/DgJg2T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPWCRA9TVsSAnZWagAAJCwP+QHRS7s5rbePprUFaOY6\nQlUcduT8tRLo/QrOYvtkHmxtXhRTELJhxvD/8HiBYKfK2ztbT1bDTjlfzukX\neMe/S/WvlT215pkW3JTxFJ4EUBQ544ovmtNH75TR1U90Op6XDsII8nTg9dKI\nsSQT/B7TRqy0jh2fjZ+av1mZqlaEeyyqPqj/LSwRWmtgdDrJpSmpq/X+tj61\n4Z0TJ2dk6MCmUXCy/OAnBTrAzv5fvl11Y7hiRYc3rHyVEGqV7bSyBTlwT9vW\nxvEIRnvCsnUsxixGdb8y1zBQsxeh4mrnNCunC99pESxRYVhy+wrR/qWhkGkx\n5EwctgGsrAiHG1/fB0+9VGUSGBQnC002uBNMoBYNmgjzXOG2+rrx3DMycEx8\nh9KFPXE3FCySYeliE1/G/hPu9IpiXwYgll+C58UxC6L6urIQfOjAGW9/VFnv\ntA0iJRc8On4GdATnC5TtuHk+mli/M037Ihirx3MY0hfBntQwgqbdA/QgY8fp\nhFfztxXUypw3iceMjLTEAdyJqE4asU8dYMJyitAdL0LoYypnyjGUVrtTRXd5\nFOlQOk/9mFaOdwWnbTH1zikVwtpbEyIBfrbg5cbYDXq8Ou+2zu7du9LoDF9C\n8YLVJWKcCK6CBqvefV2ZRkJGiITOlJ7yV+W/ZgIhOz6JNGl7qWshiO4BfnYt\nWev6\r\n=GbaC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/density":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/tab-scroller":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e2ea4a99e.0_1593631702220_0.26044464255646216","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15dc55be11dbfe9d42d5a924e5ebe0e122fd430","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a78ceb112.0.tgz","fileCount":37,"integrity":"sha512-OrrieVHPPdBPm7Nsc2rdjLWIH5S1+immZxDe3zmn8eX0kw+EZf1HucFUwPWYFVTj1bFQfAk+P5AOHbrpu0UeAA==","signatures":[{"sig":"MEYCIQDn5UsKmAtsvfZX2m2zX1FLuKAaI+yhvKaOsy4XDzeAxgIhAKAPZGadDzqVaLfoX+wpBePAvJUuBuMS/MXfr1VUJx5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OacCRA9TVsSAnZWagAAy3kP/R9hGKZDyQ0qRhu0ZdWy\nAH9X08qZIlLFl/mbiGtwHrdSeYI4BRpWvmhNxOKoPL2vfunAXeYtLxv+STiw\npBRxM+bYrVtEN7PAVS12R3N4SsQ4UXcJN+ZF4SdTxDkAGnE/HlJbxYGHlADk\n5eVHZcR2uWDbc3vY3MVLE0uh0RIASPMglUi/+JZTmjWMJx6qm/DFmTF6V3Ww\nmWLokqGHPxCFpFnfVVhWONiKnRjvXT/OCNgLnO1+GtbFLJCFGqR07DX5x5er\nSaKHzJFGl4IcSwNCQRfAzGV4yPcgIWfOTE8H8vRqHQ26ifYltlwuQ1zJ3RKS\nfuCO3shLhda0x0A4BIDTdEtR84GquRuuM9xfx/l6UhgItRFS+5FyvcKJ9eXM\npzhICH8/marDzh+k22PcEnYi7+m8hQKahdfPDhdevc5eWMj3IpdTlHmGklu7\nG3EzadoC+mshcs3P5jDPAob0BVnTDGkeUwz3MnPudd1cA4751XKfGpzb7EHi\nu0Jfp8iBun7AU9kZzs3AKk+Ibe6gbVDFnJpPSbuNIP7a0TlGetjMzKgux8AR\n95U26F1OAdZfpi9TxYATG4rBLfy/xedb5B6RrjFy8F4RD1gk9ROhbYLFSwGG\ndq4x/vEEiIt7Z99zBnbohTwntwwbXBgXkVcpsaog9cengmIRASvo5K6WrvVq\ncXMg\r\n=G3V0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/density":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/tab-scroller":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a78ceb112.0_1593632412127_0.7288489783941206","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589f95e6e4b4394330e3b45daba103c8a685a409","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b0c456d33.0.tgz","fileCount":37,"integrity":"sha512-OznQzQh3kthEWJV6e7VB0s7ZU/mXq3YxaZOCgqbOBqPFlhbIJxpTjWxag6R7cXivGY6NO0hPAC/E4L8N7fVgrw==","signatures":[{"sig":"MEYCIQDqAGrFUa5l5+hTz0M/Ss2oyfgWjYltb1aoCGep9iSXBwIhAL2KuoWpTRS+4FTJdjWppt6A8y5Qst6eZTO8fAofXtGg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jpCRA9TVsSAnZWagAAtQMP/Rmii2Nxiz/s7Ao6pNM0\nHOYwZRe1fbL2tRyHipsmYsljPyPl9PQCutgdDa9mROixXQmDoMaM8JckZGmo\n3XQfMF80FTDqTqxNmch+cmzKQJnJh9MkR3dj4l7P95mGoL95bYQj4e8dPNP/\nsSw+hXjp9yeCF6EGWccsi2Nhsb3qPgYGZv2j4njriGIhdYcu3iWNbT6/1P3u\ncRSs62HbriB7bnegGK6t2MpH9wXmW8SkW0HN7NrbSlcQZk0iVbBCs58V+118\ndCklgKFei8/Xv32TTkmmx6b/RCYUdscf/0+sEwUpv+zh54NJPJP1/jt4s+ff\nET+8Vugw+lmuzYQgxMnwDna4LzgZVkk7LXeqCY6LUeOWLkHQqC8ZVuTUVylP\ndyQs5XLownZS15UzbPzwMo1QOEiHNfB8k7PWbMXaUV3bc7d1W+MgTe+1qtwv\nBfQGnZE83iHr4ZF4xcOoO1OPsePUmeE/pdUXypGbUUaTYQdHzJSXq+OM/s3j\n6vH0yvjMH4yNGKGbF4nBRp2QgGO4KOlTwoaJ2ItMBImtsx8UhfvPHgrhOphY\nbeHRYPQvKZ1ctkQr3FppCwNAu1d3YXtxJf5l1vAZJ4magsZaBZQgHi4vBLrL\nhLDpHP8O9oQ7i6D/f90zFNqGw/thsZpodnaBKbLL74ETPgi7FR+asepuwVdP\nbQfR\r\n=8eol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/density":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/tab-scroller":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b0c456d33.0_1594075368701_0.3010048957159246","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61493df72042af4cd1fe7e1d97648c6c2b86ddc0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2e5711e04.0.tgz","fileCount":37,"integrity":"sha512-Des5ALxzJpqmc+NLULXcL5/rvFHD2tY+PScyCC6WujufdmLbv0NrKKl4mQLhQJi2pR0SW9Dt1DXbjDbbEJjqMA==","signatures":[{"sig":"MEUCIQCsCVc+LuoTDshmU3Vf6DZFT5ngEZ1Ul3r1CbioVg+5oQIgCTqWlm8pZBCS25wSLUwLSyF7nzDhU2JyrC2y0UF1hW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkgCRA9TVsSAnZWagAAPp4P/0U2monTk6BoC7ozmVZu\nR0XQV3yL22awGsUB/BzcbAQI65iKFkXCWCptGAlPcpdzMfIgckCIoceFKPo4\nlEpPq16ARqaPTtVAede0c1ab1DB3eWax815Gm+5Dy5q6+9nYKUa58ow845TJ\nJ7MkiubBtl5aAq5aYNUomupMAuiWETSKn4qyscGKYtCcJt6XlQdNxHVbefGx\n01xw3geokNXLHXYodXtMMmAziwH1YJXcHlJrjz2hDJtz1bHn/19bmvnOR8u9\nQGmYzywchSUnwCIWplOUx9jgoxEQIRQfq8Oyv+r12Hmqz7M5ntEbBY1UnTW8\nCBk6um7jMpTgw2CDlvhoFZ0VLaA8/8OS5LqwmMcVZG/Rb2DsuXbFJzfVLJHA\npBbzSZWjMzXS6heKfg0gLpxQrrTzgEa6BZfb1JpBSV4ZdNLYnT7IQh9o+S+c\nWgOdPikp9CqdWQAnGb7wttCUM593VNtOwhkG+WhCqK+Rc0bq4Knk+qI/79qY\nUguuoNU+x12SvOZb1ADaM5f52SHezRXNyUEXtxHMAZIgS70eVWhHh4JFjg6O\nN1RiZNujPDii4sZPU4ayCFbNE2ZbuZUEtMJ8K0oakMfvAF04WgxKYzdB/jUS\nuVeSn/pj3SRPMlEo2pnVxkZwIPUkX0N6X5MuL49X4C+MhWAI6C9dPllb43++\nYVmS\r\n=lYra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/density":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/tab-scroller":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2e5711e04.0_1594226975853_0.206694745888085","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/tab-bar","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"087bc23e4a1b4952c8a8a862cb0319fe5c034182","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.811fc5d24.0.tgz","fileCount":37,"integrity":"sha512-TJ4w3Ha1g2BHDIgN1TgOK7Cbxnl88DURlnIl6mvmMQVWa7ErVQ3Xw1EDCOUMrlfB3/fsri+14G8rmKliqDZi1A==","signatures":[{"sig":"MEUCIQDiA6brNXY6HoOow2TRSm6AFSqMsh0w17mKI3faCAfLMAIgKZKRCy62wS3s/VrhGq2AamVbC7vfmdm8YTMGP48sPH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf+bCRA9TVsSAnZWagAAmYsP/jwk2Di3KIfld0sX1iZi\nk/sdYiVyOCHQKqYmGxDiwh/V3Sd5crIfpTHdlX6Bzthe5PD+49Q++X9dNAl9\nErG369TTEilE/TzxESz/pPqqM4iUOJpkqFf2lV4WJicjpHkDzTQXdiO7P1pS\npklhFfjJ1lJ7cpSC/bw1UDkdpZFj++3liVNRlsI9GeVoLHqRVYzw+AT29iFj\nuiq4zXT071bDZ/+ObVKuAxtDrwaXUPqp7QPqv8yRtBv3I/DyYMZUnS4PX8mX\nXMd3mtp6Bkzi+NgZjZ+BedkYCPA/lXb3DsxCg6uPeNAR9fmN3gBHMbHV3Ecg\ncLsfXjIsK0YgLzEqnYqpaBB46UCyUKhr19eBQThI0GfXNgqyTGt3kZY2lQTv\nIU79ajI9HIOYOApHlC5tHZ+PkKl1sy6c4USkQmpTDw1LnFXqMzu1HL+FB1lk\nLquWcjF4tjh6tfz5Qil0GVUFtyVAcjVmpI5YbTogD5qXGznz7HYH8G/IX6Gc\nhdR03/3Owx552JQkH4iz8ELnP96CHa/EiJ7tdagmOslx7+rISSA4NU2pQ4zJ\n9ZgNsXFQoBCnXTURY1jWtJtjAzGUpUI4ynZ+bU4ZLnoBYSgISXFxml4NNUoB\nGxevRLfBtZckWuUPvZP/Df75ScsnWUfdSYsAbKWosrtbG6Q7NQengRw3FC1/\nqnkP\r\n=wNS9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/density":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/tab-scroller":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.811fc5d24.0_1594228635326_0.5027058300265508","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/tab-bar","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85f7ed457b288e4067e9997289023361d0914b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.6ed717ddd.0.tgz","fileCount":37,"integrity":"sha512-KyWDOtmA8eyGInwXtG4T3HQVuvaJF7goptz8PaHTxP5O6lD6NdJXbtzhLJk0B/LZcfyW1hIXqb5YAGH0iPUUfA==","signatures":[{"sig":"MEUCIQDCJl7p5btOOQH/lWDLVHsLHBVc0giEPP5oFZO4nP30gAIgCOoAYkb6K7nHxN53HUwNSA8E+h2VB+qJIP+0w2gl0i4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiJSCRA9TVsSAnZWagAAXxAP/00C1hEdWFVwco+t28UI\n5ti+KmIrEZehdaj6lcb8X+UvLSIgAikwCSaahcSEwgQIIusDq0kEX/KNyIAF\nOiSu5qzBmsAVZ0N0gXNV43M0MepcHPliP8RDF1hCeBaRDBtYuHlh7lDR3bfa\nkaPaWJjNvDHJ0asIBThU4kPG/U37zQNsB5r5OyCwqzftq996raLcSEjJVIP3\ngrIOSBGiRwm4BlmyKbl0V6icAC9RjjrJC0xsLS7vI6nu8avmLyArys9ZHlYp\nUUcUw9xX7Y5GhMTmOO7PXvVaNLCDPCdx043Vd7GJ1TeJOPeoRovoQ47ajFm4\nw7sC73mGkeC9nvH27yyfVxZsfTE5Dum7io7ZMxYxGphrRdMZprMmYeiLpg25\nAezmiYtOKxuEgJnOg3SVCqMzE0Xo6vO0b2XvWCAEdYU5qVfQ9FU8L0AgT+h2\ntMFJbcYKRDThtUmIAwTtBYdrJxC/31S/cpu+MBdmxaEgDK//ZL2MZ7OTV4uK\nHixEHeI3OSM2/EyoAv4EiqlhMoY6gkc7oT7q3WIioGUAIt4jkJyPqkX3pv6l\nirS5cwcZ5dfbjJeFbuZtw916RVFS3g2C9KQ1uA9IDhhcOj8mObF5BBzAjf/J\nw98g/OFqk6q0zpCAYZ2M+7hVzcVM8KXiMdSdjPW9hxNeaDbB4CEGryaBfp7y\nSI8Z\r\n=TISi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/density":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/tab-scroller":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.6ed717ddd.0_1594237521818_0.06216715125154293","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"944ee173dda84172e4247e927b1d15b912140246","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d850de590.0.tgz","fileCount":37,"integrity":"sha512-9jlBhK/rUNAwUTn6Av7WpR07UJAML2HdmLJ/ZyE1HBmjUK7cojqCc7yUAPZmZHMcWxuPUbpa9iDXHADZKHZ6Pw==","signatures":[{"sig":"MEYCIQDo9s8PRkphzYGF9AoWZg+//aeRSfsqH9UQ+iCWFqSIswIhALksBYclYB2Pabbv2iU4766hjR66zdzCxHyEUSA6Znw3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yyCRA9TVsSAnZWagAAgXcQAJuCYNNBQN92Hsjx2stt\nMiS9kVZYSTvqZo09KvOOqnjiinIktuEXPy0GnxsybsZCBHlb0DkbcboaWALf\n2DONMgW0qTlFOLgk5glZ9AVDNACovf7gmSNZDReGc9lIrHNLt704KJaarYXT\n/t0S8dm2aRd4w5JcM3aOmazdJYA18RWsZODhISLyGxJiFYW2dTtEmqFU+LnB\ne79+xQ7kcWCyj2cyRdp9PT2WxDr2A8hCa8AnyhfWXMuKsQZjDMrFQ/GexGaJ\nZu0jRnW0/q2Eo5EEAdok5/MCCf5DF901Pfdi1sHs+g5PPJ8bqQMIH2Sd0N41\n7V0GihirykcUDt5ObvNfc494szPwypPt1En41VrbjnYOa8ipNl+mMZYovHYY\n+Ov8591owOPJkBY+7K1UF6m7cji+Y76zgak9cyHhM2ZA3NW/nLEAApzQp8pk\nbycjeShJoZ9mwFg3lbrJ2LX54d7KxxCWZtNCzoA5PFKBEKGHTntmDKCAuWI6\nXkSOHkLUWc8zqXk8xoLOwBgS6dkU385FSwHxrmACdnqCkJv9lKfNoVLLjbod\nRWF3Vcs/MbNQLWi4Ac8HpbVyE7OAXpCB1VOfURPehaVh5jEIX88c+x5I307Q\niN/tzr841oVj0xDz+xiPt71vGbLxQzUn6XoWvsNmdCn6t177IDibqciC2+yW\nnBUQ\r\n=94wK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/density":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/tab-scroller":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d850de590.0_1594318002076_0.7759868775683025","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c29994b9a5540f223ba73212a3d3976c809bc374","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e07a70841.0.tgz","fileCount":37,"integrity":"sha512-fLXwq82iwtc3azy3CgJ49TkVvjttrqjFEA43axOZSBWDydLkpaBkxWMUptqfNIgnNxD7Ndp9S6O64UHhutax8g==","signatures":[{"sig":"MEYCIQCds+9Gu4QBWmOVBGcRmWVUVMEgj6HHZji0D6lDpIFgIQIhAIuaEMHixJIuTT+AbbleAQfI8FvJUrbFcHa8Ynipq8Xb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OuCRA9TVsSAnZWagAAM2MP/0py5fMASl4H2vP+oa/L\nIIcy0SvIwZM6Td+vOMVPq0+iWW5d+edRAl21sKCDw1vk8Q3UVnN3fejBeY8t\nmKU1B5rr+E/22x5fd22XT0UpV6jywT+ZeNuuU6giDE7lP5hUKvPOEy3P4M5X\naOQjps3cO1Nh6G9CW6Mho3qgKZ83xxuK/s5BtgXFHdkEC1VQE05kZKH310qk\nizbrvFJCA1xVlad7ByrmhFpLd4bFxJGhVWzIVXWcNrpb+fzzNsRKxnAEtNfL\n3FZpLZ5FpViTCcN3z4xVaG2t3vgpTIsqPsfQCIDI5WPmzvO+WwJBntxhvJW9\nIQj4rj/zCqkxh5yrbc8+Qxp54m2+WtaxAbPBPi5qAOuwexSDP4uiOwkBgtku\n0jAg6fK8b5tIQMDk21GwqRWnLS3ByK3eHfXoZHHe14jzxMuXFWSZaMZXS6aj\n0qxql21hmbb/2TS8ljVG2ePx45Iq5fKhBFbYoPxPKewRomc9rIRPuVps4bTq\nVhN0vtpHwkW/QLgBOvtfkSl4puXbPeCiKhlORLdKHw3pe8R8zGPDdRnpjpBP\nZuRllu+PxVcRnGXrWMgF/Tkn4qVnDcbnMcpO0xqXsyFDfB7hZtUWja/lEhNn\nKU+z2iGTk8GMDqMkbuaxhQW4WTHQe+ehgJADlixoJEHtGLyaD46AlTAxSrXS\nNNsX\r\n=MKA2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/density":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/tab-scroller":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e07a70841.0_1594319790257_0.3285205339691717","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc1d906f19ca8b42925793f5b29a3b8724ba200f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.37947ed6c.0.tgz","fileCount":37,"integrity":"sha512-7Gtuo77bmxWZggzve/NDD02KxMNB990pfPQXesTY8kVeO96BRgYu+guhRDob6WKmQA01C+zMZnxe+ZkKRKgJbw==","signatures":[{"sig":"MEYCIQClQRPqDBzuObWxlJEPYG/m03KBkYTsHAMEKitldZ8jIwIhAKV9+5xBlD0xa07YAC64RQKE/sUh9kOXUXrZ9W/ekiDw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4AVCRA9TVsSAnZWagAAxpIQAJrlZwushL6Co/3RAJBl\n6DhnGkxXBsord47mtT3s7dXimL9Dl2j0RzWrYEwNyv2HimXcMYl+zNDVcjiu\nfoUDChNjBr48sSVr0PBuWPyocx66zPsmsSkCDExD2Pg9gQEngcUosUeJr8+j\nPnxLemqTmLIksv/nvdFG18o0CELEcj45VtT9zK2i9B8JUpl9ZF3KPElXZMXl\nB5KbHHDAh6ufaDwn9s1BQKr7OvcYXd3jS7Q8zs8TZXjm2N8qCb9oB5hkUZUo\nR/GEp6JXezJwcvRgMzRsgMlQ10wqCfbi05QRd2K+P1ZuekwesyU03T+PQuuH\nMrBnSMQrg6coeB9k7xRblkHDr+pSy8DNi9+jQXPRppSLYbE9BeWUW+UEK4iC\nFDE7a8mr6i7Zp7IzWs6DFdIT6+JrvWxG5kfCtP1RcU4cuQVQ/My/XumxYw7l\n8pknhrJpIzLD/v03JIkr58JK1b1WjBb8tPsME3jDuy62fktEPVPogVQJd6XL\nhSlRhRxyDq8FeY/Mid2ya7CP5F+2+D+wfMSA6mXtuwiNP+7s6BdhpJTreMXx\nZ82goFutCLUc2nTt5PgtjIfSQ25Q4aB4LhptYCZ4q7uHx5PRzS8sZxHGYSi2\nXrFWeSUbGzjA6YloRs2FsFcLl2C8IkzJ4WpBPc1z4hx6JIwA9QwCzNIX35nG\n2vfs\r\n=IW44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/density":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/tab-scroller":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.37947ed6c.0_1594327060613_0.7659058416026425","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e384d290dc1fca9c3aae2567e6e1c785f3524f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5d443afec.0.tgz","fileCount":37,"integrity":"sha512-5EL7n7qdWiLwIWbxW2e97N9uT6xQc/ofyuhv5RaSERDilVQfeI4EqY7OV7JxwG+s93KFFQQbxZfU+tRKC9sZ1g==","signatures":[{"sig":"MEQCIC9J2vKFWy5zr7JUpMzkEo4iBxb8PUoIW0dY8Zt4yYIpAiBybpy9zAPvpo9JHPfjNCF648/Wk8ZjV4TFACH+M/E3+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OpCRA9TVsSAnZWagAAY3EP/RTKwzZr12GljdFHbPey\nG/I9oeprB1QnYVqxu6SCRBPb1lFQCF6eyjvt+Fct7MRMEUYli7ZTDVS/trZj\npUKhJHvbmJhMRjI6iCk7/5tK+EOAuBHVaRhoky2RdPhhF75MVONM9eY/UVJt\nvsUtGMAyUaKaWG+ml+AxpQyddAmVl+JYrqc45QB2qd0j+7FBbP65E7cDdlqI\n97DCBgHDSaULjYUtpS/44vM7L8L8YtuDmf6so2EmJoopbWOvrsBLRLLXkRR9\nXA4LxBfQtYTUgN7TUUx3s+C6lX989EPM90oEftFzXWNtyXIutuxYlz5WyNsy\noa4EjT6DUlf+VvogUg6E72fxUZmESLKeFLR7Kn8QT1axKe7DaJIFXJylfMmt\nQo4dHb5kw7X/DeMPhYkaOh3mHuSGKFQyW/hiPAz8MVUdERV7SMRevdgnVx5E\nBL8UQHyrfmfn8FpWsiUgrR1A+HWSo0qoQiHcMJMc8zkvudTRD1mSTulrSY5+\n4qmcOPOaJdUkXReqBLSUbKpAjFyVJZmdMS0tYgjB40Ct2DrT10HmFv2J1R4F\nauF5uiDlruxny7xmpDCmtz4p34qB27X0nuwspUPqRW6xTRWio05rixXd4U6f\nfrvnVGxtOss72OTyK2S9yp0XwWbun3Qa62QfEO5e9y9/QN5eqc9zfsfImNoV\n7+9d\r\n=iUY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/density":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/tab-scroller":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5d443afec.0_1594327977538_0.1463690675515441","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/tab-bar","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea7b8d1ed6f3b5ae4a86e74db15a57d33dce2e0e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.9ac1ed914.0.tgz","fileCount":37,"integrity":"sha512-GB/Bv90h/m8FEI04HxfauQkWoWQV4G6UzVzcD0ikMbo/E6jslCkuxB5XKWtztX0A+IKqV9mrKcdfdbsiHknChg==","signatures":[{"sig":"MEYCIQDK5zVdqJy8uIaPLshen+x0Pg97OOf3FGk1zgKXFZx5ggIhAPK/nmM9fn8055tW5jP2wUpQCJsP0MxpyHMX/f+/9OLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4p0CRA9TVsSAnZWagAA6AQP/jCOssfVu5n+N/eFpMZz\nItaRBcFGwFuKm64tdaEOWuTPrLz1FmcNc9ZfKWei4+lIaAqmq2wU5Ck/SXmh\nGYmByPfECvpLEfEUhtPXzjPGHQ9UI9kU9ErJR+O9VSnJytPOlDm222MCWxfA\n2Y3Yz6C9kvbs8uJwpb6lImeRSxAOn+H2SzDxMLHOmJOlFKDad5f71S0VZJLg\nkJ34h+Lv2Gq+uoYPEmQ8SjNytQcCpV9yTg+Vsgu3lEfqKSEdOVqSyYBle26Q\n1WtolCGBZrpj1WexAzzXqPiiodpt0wqNMQhIOlwqey/dZ6vEi8PpCkT9Jmpu\nj3MHnE6FFDHOUwfX4sTPzQGL/zw917NUBg01wXsscBcburzAqZBBKuJrJzJe\nw1wqtXDjuBq3JA3gg5YeodcJjzGKtmqstvUVuhdW+Rmr+etHoDQRBgWgsRxq\nlXHnYMUOTQsx7IkbddCyjCJMqmyQN1DIK5mb+wEeuedfD1VUpQ7HqiXWoqXs\npJ4fWMjArhcGyIh0z73ay7YYvUmoqVbUU6FqEKZwDf3Jkf9MSJqnoksiq9Ho\n5fYo3VYP+/urlLUR3EQHjgpL0ILqpFB+cEk3YuJWUPVJiey9Xbi3/Ezm0Gn2\nMAFwf9jRBoEOb1xwoAuzvu3Q6GEpcvsJnues7PEK5ogC9f24+3NE/95kI0fC\nRoKE\r\n=4srq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/density":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/tab-scroller":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.9ac1ed914.0_1594329716009_0.7621321598131634","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/tab-bar","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbb1e2e3e39076ad1c03acd1800b59a0a3155cb6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.1e7cb6198.0.tgz","fileCount":37,"integrity":"sha512-2FerUFCVujGAMTgTXFsZnJj7FIYJsjJLlDxCEap+CGspAdptNjzvTiUyfBmKSjq/RNZYDxSCCqdbe9X8TDqvbQ==","signatures":[{"sig":"MEQCIAUnLsCzUgQvZexNeYPHjVXNWj/JrwbC8CsWM2ry/mmfAiAUXRER9bja3cQlrdrRxWd+6GyE1E8DR3X7YC2VVtA0MQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5aaCRA9TVsSAnZWagAATDsQAIiMijRXY5h+DhYleiDo\nEmuPT0/zuSF7QcBVNW6yPXMNNDB9q6N9X1Ge23ySqAKdgVcwIEeZHON9G8Ee\nE5rVh5b6a5saDAtH6ETA7+CXj2+/m6+KXOc2qoCoHn/ctYMo8xaAJgDtKyby\nHgwJ+hiqI/nGRhOyZqbqHOBaxxix3g90iYIrEL/mGSda/Z5ynO4jJIn3Xfb/\ntatXq4wQDirEgqdksNKSiTlVCQo59s+YTRxLFOCttv+G5d71JTdHMxizeCR2\nuVFgyNTgOJy+jLlS5VuMB7rlrHGWIvHcGK72qEyju0ICi3x2OfA599fM5URR\nkUtOsXj+6Wtp51AQ+qqaUJBS7i1wTZCRB5N8gq+Hfm/8+ygwlg7wYN9+ahgk\nzBtbwgc5vqDwfQZx/+m/UzM7Z8mQY5MXp0tv9egUDQEfzT8zK0OG7Pketmiy\n807hiwZZG9oxaLe4meqTq/mn4KFAPbVE0M2SSbI5qdCMbQeFjOJELv4/Jyld\nKbe0Zk/l2vhKOXQGNGwCK338MXGouTH+/Y3ajg9c+3JCZqXZlgZ9B89pnUYd\nd699Uk7TtIfOyvqH8BAAUeuZUnPMmaEeViF3BKejPJ7VB5x9oexfeadgJ9u3\nrJtA5U0ovkGemFzn8402yDDEBe2lwKP3YbS5Hcay6V3Vz6ZhZLYxU/ClvVJN\nQ9L0\r\n=E1n1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/density":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/tab-scroller":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.1e7cb6198.0_1594332825577_0.08055157600080065","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/tab-bar","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34839d3b2ed66bc172c89bc1425e435199cead53","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.843f636c0.0.tgz","fileCount":37,"integrity":"sha512-plZQBhPZRcgYLPMCUnGh/ngOSZYf+dywX7RdbyDS3PGEN0hJyInbluEq0Ljx/QHrw5xrlUNHtEuvlWEhwKhcEg==","signatures":[{"sig":"MEUCIQC5Zi9RQ3+KUpORXB6BvlfkMkFhANbQypz3TWall6+UbQIgM8BCGkJ7X1V2VSvd57mTrVOxmzAYzLOZalDpgLh9shU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjgCRA9TVsSAnZWagAAIZEP/2IIdHjkj2qorNCAo7Id\nYvkUqOLn0B9Jh9B8UMOLN2xs/HpXo+QhnMrtBJlo5wQeIsX3adCIxFqHxITQ\nhEKTO11Kw9IGBmbi7RUNYcSzFAqtNXK9QpfxV19rvoGQpptLh1Dqs/ImvlNG\ns5mmVYwO/5aM7pl1Cs4ymgSwM3Jc7miYnDClgK4ZovN3QJPuOF6gzyFY0KcI\nZf7rdOeZ6p4yU34UA62gEFDomNLRm3spAmdcLYoJbaWHgFdt80o/Pz5Jbd+i\n4Te2qcAE8Rh8LZamsqVDV0RW/eqKc2U4x3FuT+OdJ6NxA5csZKBuAity/CYy\nU6l5FQqW+bGsREHKpedfCSX3wFdVZAJ6JXx3T5HjFf3JFlggmUv7t3fVmsGY\nOr+ak2nIwhoMKYe2/MOYFRW1wbPb7sJP4oTZdaTR7L8n40CGh2t2MaInGlgy\nf8/QQTCdt8ySnpHANCR4Py9Q+DDa9K9z5M0S7U07L2XWQAS0gcbnKveZVQ0A\nez3lzkfGmTgtsLq0HNOCteF9LePrcndmnagZ3udj+XwVJijBB1Ky4wUOngKs\nJMucYEisrfTb3sVCidpJPE9LwEmedpRKSVsqV8rfsbyV6S+GRM4egKnj9Y1o\nsCyAbeKumcU7SEOwqTHqrXOKS08SDpv5mnlhMOIFWT3DJDoQ1i5DzE6PlTEw\n7K1t\r\n=yhAh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/density":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/tab-scroller":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.843f636c0.0_1594403039973_0.7416483733251331","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c80b182a5a0af04afcf22cfc1254b3bb7d6451b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b2edaeead.0.tgz","fileCount":37,"integrity":"sha512-UudJoVI75KmjKj5QNehIIVNH6h9g7F8MN4wnkQCafbdAAT9uqGQWGQrX+X1GFBGWyJMGBBO018OvTjPuyjN4Dg==","signatures":[{"sig":"MEUCIQCSiwp9JXfLRdAqoOitP+oC5SIaM+MZGJk35DCRzxY9FwIgC9wIfsg5zLjnR1ibj4gEQH0jTn/j76p+XSLX7MlH1Ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6dCRA9TVsSAnZWagAAp/AQAIkmg4ASrMnH8XJnr0Ws\n1HatQCAyMs1wpO1f4Dyx4ViuVVLrVHj0yqzLKWPXTJdBC3ShVTW216OvBmfp\niOVgL660FhgJK+wH6ETXmo+PbBoU7P9NcHPNDuvDzR4wI9+W215BAol6jUhR\nl6WCQS/qg9l+8aKPgdsEV+0Ek5S+yrNS0GEZxY9O1hJSTEUih3vjJhRDhRUu\nFMTf4Eo0zcO+gTzdZ/JlHOP8sT+H0c4YrXuRM/lm9uQSzP3aIQ5+vSyjf8Od\nZZ+r2hZLzgPIRjgsq7zF4eQI5VbKkuO62A9x4OtXAsV+dHxLj6IzBUvNySbT\nFBKW4lacT1+NGTFi092Ao9qUZEfD2hAAP8sGA6rCPxJtsgFJDiIQAMlqW+31\ni4KYWNSFdlP9jYQIHOw967pxQnB/kgvmJUY/hdSTkgD42f0HhDO+EzPeg6xC\nBDc4wcGc9I7d1Om3lNC/yXGUkBFBhUYyBO/5F7tDllaSWZrf/qtTyZhJ332P\nGnaRXDhhOm34cS2/+39u+MRIyt1sjLfVnD78V5ujpgdk5IXdaZtl2N3fKkPA\nFdYT5zX+p+5EGc6zO/lyjNOelTkeG+10qccLvXHeLDn6/cgf5NlYpsmT/p9s\nu8rt3ZiPorOKfWmN67QMKkp+963fH9p8a1JoAqEIEcad8ZqXs8ZQyizlBMf0\nrXSS\r\n=bGqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/density":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/tab-scroller":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b2edaeead.0_1594404509057_0.21553761390101234","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"473e0d4726904ecf6dd54fc8428c424ce742d0e3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5dac1f624.0.tgz","fileCount":37,"integrity":"sha512-mtOiNbhTIPBpkuZ+vyXWFxIP0uqVqRNw//DkydMQdfW7ccSqVXw708PytLabqO9XWkIDu54i7/DxkG2rOI7OHw==","signatures":[{"sig":"MEYCIQCHKDBPRp3veui1GwUdn5+2hjm2Hl1VSigltxxZjSeZFwIhAOKXAMLjT1Uj8xDaoLrmv+gaMAkQazdwHB4uWXAsdNOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI1VCRA9TVsSAnZWagAAQ1gQAIG+4y6OLH/I05PBNTLe\nxXFAD59doJs4aKS87XqhAptFQOy1hlIC0tBmFpyn1RhPWIcaWRwMRi/TTSnP\n/IBwTmx6/znjZe706Hpu+g4kOLBRC4Ulezr+z1/7/2cVqPZMMtX0t/TePrxI\ngJaMHFgM/VwUhXK68Bl4WqR6OcUENu7hR1C1tjTgk5H5+JfilYmcFA9QqoRB\nzP/4mWd6dY7N4uk3CLEHfZfk8iVJ4QwXpC+Gk8aOIkJNbwKI65BNndPtEZCG\nXq8U/JGKXLTkCiSWWWNo7MMUCBtbC9eUlVlSJKB0Xz8myRL4Yaj/k3H7p15f\nT0wq+/KkBJ2hZyc/XLUqJl8gV3l/cVrqo0eWTzlNJ8OBOE7n0AK2j0i0eUOk\n/Jm7OmePnBC4oXuDcFdQPG+4TQoWPNI3LSAH6Vq9Ss5FVV/T6SEENHTKVQ5S\ny8M0Qk4So0l4gBhJT/wwaEf8aEZaXIPY8aDDIxRk5WsHPwbXk0uCZEGrxSW+\ncMIzJ6HcEXJltER/cSDDs7agSEL0fpX/mmZxUZkvzdoBjpqTXNp0zrA6hxBz\n0hlsaJXwGncLsRP+BZOjzsudDm5B6mt85gMCtXfhwWUQUAel6jbCflaGseRU\nU9lQnxs3EuRusrn2r19paf2nS3G23IzGbmidUNYNwVJCcpRJsAF8/tnpU/y5\nUVvD\r\n=Xu5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/density":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/tab-scroller":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5dac1f624.0_1594658132915_0.961081047281847","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"085de315a1f2c2813b512e1019f727b79b9d2b68","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4497acef8.0.tgz","fileCount":37,"integrity":"sha512-Rnx8Fx4MDT4maKzXzO+JmUcNaToLc71YnfpCbmfrrvqRylKFDBS11unhQqDGLhcvk4CcrSow0igDAoPcLqLMkA==","signatures":[{"sig":"MEUCIQCheetXb+CWnqj8mVEkZgROBTXX8RI1n04u0zrNY+2PggIgThbOL2FRmuIrRr6HU5R3a1K6VG4XeDozrfglJJxj+zQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9pCRA9TVsSAnZWagAAxJgQAJOI7hZARuFNbezakPrB\nwvx4b5jgR7Ym0twDSFZJbm9Avgr2uNAB7BayrCy2AOMBVFJXTr4wZo17uxoq\nTwr4ISwJCe1Xzo3Cp65uX9TgVLMTqjDDynPz5qTWPu3V0OwuAtUBz212Tj7E\nraxfhgDugR/ttnW5xcbNQPrGc1f4GX2OtO2c03TjOgY7oQLIRKBu3pvaz7zg\n+d41sXX1yhix4gCqGe0dblxSk0WDZnbvq0ZYN01uZDUHx/v2ckXtxF8d2jsh\nFYZFSFK8geByOZ0QEMTqwB3z+VJZ/LpaNvF+qVf+V2odrnDgRvVXgP+LPfdX\nlJN1Jzm+wBB50vXPY/+2OxTvFziVozxioiVUNjr5rLXX6RH/4Mj+kT3zpUT7\nhb5yEcaPDQgXKA0ZiSkIIHI8phDHXmK9oE1dg1zudh20Xwj2r4bRXtkIlTpH\n8RZU3r9BK6LbPCAROoMMZFHmcDT1NssIvjnIgH7/gy+A0Ei8TWBgEa4840RE\nppx2TXM3vZc5Y3VAuGwpfGKt9bSsCGbnyjJqr6tZtADNsV3KIjv85Hx2u0Ta\nkvaImJZr8qFQEEkABSqEJNs5R07QY1D3Mj7i6/4fsDAk38vU4zOQPgNeZdJx\nadcJqPf6W7hHGrWjYGbpMcMnSgtw97xyX9pcF1bAKGbGqI5CAyWhY3fjZtYJ\nH04Y\r\n=XN+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/density":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/tab-scroller":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4497acef8.0_1594736489245_0.3392412333969168","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a97cc6e5249099ae364d092551ede98996113a0e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e6e23019d.0.tgz","fileCount":37,"integrity":"sha512-WyMmUK++4kqtil4IVem0oDEmkTckh5tvhXIgozbYRwwBLq+BvqFSSlqikFCxTDENuczfVDB7eFNZA91Ank097g==","signatures":[{"sig":"MEQCIF8PUQ7Jw6rV8gK9IE2eqIGWxPsY0771765VNtX8OMeDAiBznmkynTeee5FwzF1sCiclU6NqBooBgwJqboQ1eKK97A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhGMCRA9TVsSAnZWagAApukP/AwuIFTrfRzGPteUiXmm\nfYvW8Mjrl30C4IhuN7DDU85/voghnkGPZANpVYT+YgTMdA44PdhQIEjOzKUR\n7V2Uyf1/RGb1a9IAPaYnYhnHSVhOI+1U2p8hq5G75G+Ibby3dJ6W54o2Wvg4\ngl4oeZNB1giGiXdyDVBjMTq5tWhNNqmh451bdBGTTkxWyz2V3WCx/AVPnqx5\n8evgCfrh+UiBU2zTxvUMvjJGoKO7B1j9YAly5+4ECQE1wMbdjfqdQeP6k8wB\nXk8dDLi8qGjjIZNmDfZKGo3Vh9RJApMjGHnOmNPULeYRV4qpKSuypYAOv4UX\nSoR16JG1yVD8XmzikjcxLYDypgHXtcevlSnP3ZSFMCoh9zPujv+wJBCrEI4U\nWZv9wDTu3HZyp5KLpakkurjtHtethAxQ86USKBVz8l3gUiJdEZhiIlPFvubS\nvBYtnD4lRfyI4Ep3srLb3Uc9PlLlDbi5xwJzpeJALrQiRiHxKv4CIfQBqvtm\nHMxH2iqiaIb6JbsyiBrUID8q7JuXQO/CxyI30L+JWe+VKxNI3d9YwryJpjNw\nufCd8Gn2pU/n3tjjvRE/d1e/Ux/63X/utsCbvvLHgQjEvZJt7kISvM3P6+lN\nDzbFselwyFY/0ybxIyVaRYmcQJMdmyzwFbxuj9kA/gH/LUHGPBhqG5WQg7MS\nHwCx\r\n=rNy4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/density":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/tab-scroller":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e6e23019d.0_1594757516211_0.16005319017561837","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c92eafe019b7666ce19061fb5c3d2ba353a5d59","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d548d7a92.0.tgz","fileCount":37,"integrity":"sha512-rh5HZ/2HO88d8930bK0CZyXpiA/9uvcsAwFbjTNhy/TdCerf/dUNpJ7mO3PHDddtZ1DBdG9ZMJNRkNBjUjy2zg==","signatures":[{"sig":"MEQCIHsVtHKdSrhzR27hTrpqZguZ1Ctm5Iyde4NRIiB3FdQQAiB6Fk7OyRUHbMhzWsd6+YWDLK7tt7tphYlDqXcXqxjbDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiArCRA9TVsSAnZWagAA6tkP/25EKLula6iSwjGeP1gZ\netqxNqrFEGDSr1CwWw/WZ2cDG8pbgzcpetAqcKAluFBHyw59+Wy+X44LlbHR\n6mahwq5le2WFE4Fjw78ux7jrayQ9qJQOXHCjKqw7mK8YZwUFelyHRAwnnq8w\nPcZwwTR178BM33pKkFDf/5/pF2CSKOoDd7EU66aWHZyu4oc+xFTB6ujm9mXj\nfjlI8niDuGi4U9hM3ltZUFovZS4OMfWtYYGZXSdIa5QFeaX+6IcYav+eS+VP\ncxMU+F203BK0s8WC7A7Q/E2jZe2/PLXCb+pB/7AZsnCOovt1iVoVxy67IZEg\nUY5WuSIA1zOj2vrgeZkYjvJVc0zyOvTeawWqHmYUS5sK4TpLyHSn/khh0C2x\nU/5ekVyfR4NwXgPO6p9NfzuIrEQV5+uFr2TS1PPFI+qU6Pbo+KpDTmke8O+h\nCcILB9CPB835GMZqHpgBTepSl9ffwN5x0vA7ifcJaWfs5DybOZ9RDCbP3VdO\nlg+A7pGP2eQWP7UAbEK24e2PMqOxK2eYAQ0AWAA/VkxshkKBCtyolxzSOuXx\nNzxPIJQDJZEVZ154uqK/QJMUS7bRwdAXXWQ0qi2lyBkKVTJaAbD/qFgDbCpA\nlCEhua85p9vFZ55S4qaeXAidbLb0zD5p3ijmAArsX20QISKBqaRUyeIN31+t\nRG2H\r\n=bcRR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/density":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/tab-scroller":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d548d7a92.0_1594761258804_0.6504835005773895","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/tab-bar","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea22f20de055a5c532ae772fbb9ec61904a26805","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.58ce529cc.0.tgz","fileCount":37,"integrity":"sha512-QYx3SYjPqI2MbLOW5gAhoxizA6M8NVBsidItWasgEaCyXPQDT34CGu1WjaBdfrOwmek1BJvx3Wplz9SaxrsmOA==","signatures":[{"sig":"MEQCICndCJr2kptpAXG2KxmGL5MbNTfj581K9pCdY3DrIk3wAiBrv95XuQHfy3C+u3MTAKJn0PjLC0hgloIn7XNFACoFMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCjCRA9TVsSAnZWagAAVqAP/1X0fO1jPCmk1ODGMCK2\nIf7B/s5fs1YRttK5JJxfnhjoa6eWYFOSwqJT2n6IrC0sHyQrpjy8vIQKneSS\nmuVasX6GTK6ok8VgwcaWw69O80xJVO4qYi65sVxygh4Uu+XWXnTALA4XaOHB\nZvPinoaYMhcICS9g6j6D73p1+Qkiz6g01uNUBdQBtvDmB2JgUNLRHJqBdGIM\nK3HsyqI4hwIqCEWSIsTFjoyHr8+3kYCB3mCCnlNfbaA9ACNokvKgR8hvOoQN\nqQ0+yvV/pVDkyA675XqJNEzyesolOjvGuQRbaDj9e8C8PIyxAsWMZeWW7Yar\nVdIJKtIu3h8FLybzIHilxzvPEhEEnS6HwyN/nwm2Gomkvscg9H6RGqWttcDc\nThoX8A80MpkJ4XsqmvtZi1jR7SJlSKRdNXAMvqE8cQte5nG95wlLia6Y4H/v\ngFmK5QECLlQspmD7bFagv/VtwKH3WZZwqNzhkU1m0+4CuRaTHaFlhWnJKUa3\ni9CGXsRdYI5P+DYZXTY6zDEAa7cVd9nx85kSXwydLqPWqwpo/49g3gPuCmvS\ngvDdxA5fKFg1m+DA4v2dqiAqmjzfW206S3Obf69ysbtkbIdugugeyHJpAm3h\nd5P1I7Rrc3n3krWD3D8d6bqAucYepkVMfrGihVy6/Qnd4UndXjMDF66ttrOO\nnDkq\r\n=duur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/density":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/tab-scroller":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.58ce529cc.0_1594761378904_0.43622376829311804","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07373178f3981aaca4658e618baeff21cb5efc84","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a0f1202dc.0.tgz","fileCount":37,"integrity":"sha512-4MT25IM5nETVIFfrchGZxm3H84MbkAYF9PLAjBhS+NG7He/w5+kIVBiQLPY2HTbvkBKbDEUuafDiKgh6HF2nlg==","signatures":[{"sig":"MEUCIQC3SxqRRe90gAVzu72QhNVayDFSiSSd8YemvyoauoVebgIgRMcm1dhMpTBNGp45/E+od59hg+1e5wi7oz+Lw3zhIZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiU4CRA9TVsSAnZWagAADIwP/Am1LhQZutSnpYMcjBFi\ni9yOrmhKinRECrfBR+6NBD3TTGvyD9z/ECr9Hz1W69svzkdFHWAcGeHQFhqD\nAXrGpN64Wk6V0Yz8tAzX+lUM1z9tUcrxfX0TSwHqiwNK44ODuA24B6aklrjM\n9OpWndHZTCLuPxkwfJW09hQka1E5x/LDA0v1MtgR02zmLC/Ow+/8c+jRbDxj\nsfb6CigtSgA3QD1KiyWeFHdpKYtN577HV0bBxnImQHWMrcmrXQE6wDt25SsA\n3uW1frdffC/jyqXkLRJgJ6DvGCF3c0ycGZJ0VLCXsxi7jOIjvr43dlnVbozS\nQL/ueV///2yrPvm1P3zcn2e9ZWnDkA3IOSJdmXb3X4/x2+hWH3k4chprstQy\n6jRd6+HYpwZnlqLag/63sk402tYZnSX9Pz09o0x+cTeUb7VHLNuB5QWNSwYb\nUxR/JUaY4CPt6Nsz4laBREXSzrK+JwjP4udW5TH5zoz/1yvdRVsFenaDbLuQ\nEHAXzbjmlualOVwNNE2wIrZsBCbmcW0w/A6/VMSm0mEKZJ4ATyE5HkKd9lo6\nmP6zbAo/McUJcCc0BYy2JVcxntGThE+rWaxdeSq/5NDlMONSM/LflKfU3BO9\nlWNonEk+rx36SG3i4LNjLsUBNoI4zTaI0W+FqvUKVRMBzDjFynnBwQyLpLa9\n+ECR\r\n=dTBB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/density":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/tab-scroller":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a0f1202dc.0_1594762552003_0.1420601460470321","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc2147f709955b33576556afd704e00119668ca3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ad4df58c1.0.tgz","fileCount":37,"integrity":"sha512-81u2I+ckyilq/lTnXp5IanOmmxkB8Q9+HeH+eFpSrTnXiv85tMoGHKTHNVzIkItBXw6ecEoLHFXviaZy/eYeog==","signatures":[{"sig":"MEUCIB0eCEnFmYFOUU4jOacu6cX3GFwiTrxZz0putRSwZpRyAiEAu+Ea5x4Vvd1u2P6JVe/8ODx1Jh1XmByGbndJ1Pel3aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkl9CRA9TVsSAnZWagAAulAP/27IRSg8EaxISygzMAUF\nZ7yZ53RmV3+A6XK7JjONfa/5ucMJb6bPT8MnMNZ1/gsgRS65Vw9w6uN7uwVg\n6O8SCveZNeQpo2uXdcAUwxckWBABZdT0DK9hrxduUEQfAM2lQvOj3oztUs32\nzZRDb3R0KQSShfd4/Otk1L/08HBuAyb+b5RzaLN8EZJgINl94O1KxbxA50ex\n12wVZffndmFrvBqoLhNhAbUaSljOrOUpNR/aOe44uiR717rSrygJ6zGOnfM0\nQZ1HrMw467Fcw+joZI+Onunc/daCnwVpuwN0gOyvbskMf4Hp7BsWpBvsLivB\n+MqWXH0w8b43YbIHCnl2hBzqy4E74usw4LB5iDjv4mymiIZxMkGxnAtOtW4p\nCDJCRSmjZifzp+Fj98yIJXkuTvVgiXH8RJohZMmxJNRVUET3x3v/ZCAFbiQa\n0tXg9G3uILzChWgxvHimSazlVhk2NpVF2i/C+XQgntonQKh+6kFHmEc9050P\n98EXGiZRSDdajONP1kOziRFR8VL4a47Ykos0imIznwbYnOIzCpNtFC/GY2V7\n9sRHweimu64/HIo0GrGSiDkIG4lGXdBTb2lXd5a3JyHp0OvXww43EJ80At/k\n0L68thRDUawqgNUjFMmMXTRpH5rVr0Ns0Cm8Auy+q1lBQTTrcRMupr5j/sUS\nV2hW\r\n=gAf5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/density":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/tab-scroller":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ad4df58c1.0_1594771837217_0.9975575620152692","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/tab-bar","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41abaf467f04034fd6012a58db22e697271c74bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.01db89053.0.tgz","fileCount":37,"integrity":"sha512-e0ShpT4c50cZ1kbpO2wDuAELIYYKqupeUmHsSoXTJE2L9kEQajkaFEtE1wxhwgfjSByYVqXW7G5mkyXkMvi88Q==","signatures":[{"sig":"MEUCIFM6vpo1psTJN8n8gfL9KWtDcHYI0GdiI/EqgrYzxSgHAiEA+eaQGe7SyErKM5SNGxW9AuTVNzHAHDWoyV5JhS91CYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMZCRA9TVsSAnZWagAAdWoQAIGBX56slKwrySEQT5Yz\nYf9b5einp2JND4MNr9Pv05fTgGp+xFCmTEIk9J9oPsEr9OOE44sC4O7FGCbj\nPajozuzrqQ6Aqr3SOyrQS98ISinSBdlFQS4Xhk6qOlHX7de5tjpVKsz5yX3k\nbwwPuy/tXJb/W50ptVlYeRXt6LnrDv+X3W01os2tE620kuVaN47Ni/43OwGV\n/KT4ikKAoprlUeNhSCDu+RHzKhqEfeM/180Lx39OZI/cMKsWVqOKUWMYtKU1\n0m7cpSh7PK0gOUTz3d9cIy95KziHyM0lU0xN6M3FQAlxOXQJn5BjpctxNaE9\n38V3rBWMuo1+3thMTm4rh1en+jQigH7gkgy12D+w9+r1261HCyEHFk2lRn6i\nWiFUCTVYcleVs7yp+f16j3m7ezpRNlFxo0D3A7xO0LPwgTaqVcdiYaI8V50B\nj5ERh+Z1CRuFLhNdsRGWkXrOQ52ZaQG+Qj+haB8lwu5zKn473/WZJ80Ov+fQ\nwLifL6yG3g6m0Zd1mJ9rVm8cky7NwvYR1QpVfAj9AMjRW85UGsVz+oypCQGH\nFwnMeWOoRAsbZGeRfeK78sHd3PvDP1Ua8D3DSMw85Z7jx5LGxh6KFH+eOdqv\nLqLIt8fm76lrOIX7C07pmEqhId4H3FuFoZIgYBPXAU7M6wO7mAJgAEzIe4bx\nMirs\r\n=ygbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/density":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/tab-scroller":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.01db89053.0_1594917656563_0.8935614426930896","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b7425a90468f8d6843dab56a9dc377daeaf8a8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":37,"integrity":"sha512-pFynQ2SY1coZNicRc3ejY/6Rrp79Bq/nmIDBHCW/hEEZcMQvjIiZt3vxn2mQzLOCNI7GAwDZ+PvPzT/N0lJ7ZA==","signatures":[{"sig":"MEUCIDY8PuhMVRORIcHoOdf1SWh/Ei9pE6mAXVrhEw0KddkjAiEAoAPbLyp8+go2cBiK2tX1Tv/fKrE7i3MCbpYgp/CPV7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6/CRA9TVsSAnZWagAAHh4P/ROHcwXZlmzzkXet/JQC\nFyo8LYcWtQl/3ZZhDCR4ic8Q1KbmK09Vnpd4JsdUEKWP7XcM/I3sWQslNYLp\nlIsyT592XzHvRLHvYXVm9BtAwa5Ggrur4vC8MiZ29jyRoedELluXYejT5cU5\nfrbCShDnXk13LpnW/wweu1aYKhoLvCg9ygx3eQOrDbN8VJneF8MOy/yKabPz\nyjCAqbGl+8Dhwi4GbPlrHVx8SkoSKEuRzBJC+MkzjxM72qmhAujVCti6+TcR\nzbmnwBubvzvnKBgSToUsvzhtFtoWoo4W5vezFPjZpoKT4z8GZ/GJdy1eBxgL\njUWYSB1ShmUtaB3Uty/j5LwheSudG3zk2Ide9ZDt0Fkc1NJ02Pc92BFnIsil\nZ1YXydwuNuAR2L7NmUdcB95S1+EANzVjE0XBFgO9mQ0TX6V8BumGpMK9ZENv\nfX2LAHa5K+L6Sc3PZms0nS4/zSd9+kdL6HELQn5E2uf1N2oe4214Sx6o6eSw\n0qQFjXEATrP0R61aXiPt6F2ajaZFTwiuKg6XckoSAoNnQeCKrQrGQfe3JVfW\nA18zpiA0gnwDBweDSCqbeJZZ1fz6WcXvizokdFJtiX/hFabhBXPJrI+tTTZx\nTBMEhS75uWDar4+O83eXa34J5J0qL9ucYIhjkE1WSinbIYkkk/avQfu9q/4u\n91yU\r\n=Quc6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/density":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/tab-scroller":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fb5a4cdeb.0_1595272894695_0.9911986368072077","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb9f3b40dae359c19cba24cca23f1376c99b9708","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.8df0f517c.0.tgz","fileCount":37,"integrity":"sha512-Mraenq5hI4foRfIcVLa4U/DHgSSlgRjrv/K0Wh7Zh93IFfeAwM3Kbx+GBquiZnXuA2apu8i7DqaYV3qghCfawQ==","signatures":[{"sig":"MEQCIBQnZoXaL9AHgmDnEZEDE7VCtNz1MWQQnaxXcckoGobNAiBUU5Bia/0jy7MjnHqD4IOzBVJabzon+xu9sRz6/EaWow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi9GCRA9TVsSAnZWagAAO6YP/RN2bScW6FrBx7j3/R3D\n4LyESyjnCQkfj8E0k/Ew9yPSajk8oLRQrj0U4R/yVHDNESG6zSjgeX45+S86\nD4JLdxPWw7Ulc7xdqYK4/Kg/W8qgdDD4SpIgmQBTtmKWcRin4BUubzsTRh7F\naJn1Z1TirMWBTW/9rOYo6pcJxfTEglM34Uj0cTjsaCxAwHtWeW2PAnOBdT18\nSbvKr2gKSlWr9tm6JPgq0GszRzaWttQq8Mjj0DWZMBvwbOXZV8gKUKMMLrLh\nqFCShxaS0OD7U7q5+g/cWwAYy64VJ0jhYMZMjaAeNIDQdzPBUi7IDJpBqF67\nyw27zGTzbyUAazYErWT/2oANoAfHRdfXyXARysgcCAgzyKe56HuBXRnsOpJt\n7EYCsM/ract1bK1HU1cq5+uW4pEo43V+K6qHlVCxejxOTcW4qib1yQkEZ3VF\nBJTXGDJMjDCo8JxJmPbl1mvYggThEfjpuJ7o/WpyeNw0k/V/4MVE+0uoRN5Q\nJT1qBuczH9WCB7kDu0+5X68pGW2oSPph095p7mipuqPFCVGTdkzhPI4fTUfO\nZ9l8vDPrQmpFDjtQPe2H/tYdCehH3hx5MujdkdjtCPyPuOM2lvEBBJEo0BQi\nzTTy6b9QeS/D8vB7GQcBkO16aHLPlVJ3FzPLxIIVyym/Dn+BtRoKDY/S0FOu\nesnQ\r\n=oG07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/density":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/tab-scroller":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.8df0f517c.0_1595289413697_0.6136325407497139","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b46d613f9f32bcf255a9b2b048f527848af2a1ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":37,"integrity":"sha512-KYe3m4HgvpLfa/Ub0oFApQHrGRe04iDSG2kXmNG1kDgnhtA6B4sqoCWg6sVNGosl7+E31Tcm77ZCZvboQrVQTQ==","signatures":[{"sig":"MEUCIBqVrItwfownwHiOKURvqH64xkknXEHuNkCl1sWhHdfrAiEAozO6RnNLFo8BqtFFx7wCIBCJhr5OcyOIoQywzqdLwwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjwNCRA9TVsSAnZWagAAL2YP/0hphFBn1dhmqhlBUqw3\nXIMcUN/kp1XHKfKSqIwHNt/Lr4RKP304A16v8TVVFtjRUoFJQcEV5Ypi6rW4\nGbVRG+zGfzVQVq2kWSHaW9SrBOC0SXrWvxJ3F3B2FD4te1/DM9LE4CGlD7TB\n3g1nxy+tswm4k1K+l+qxh3wHnxMlcbvng+AURLDNO9qZI9N/Ro1uHmgWoZpF\nRHgNPwNPg3qFnKXP/OXrq6Gr7e4hGBk3yhMQiTxbsEuPpkexWC5hxLdp2uxl\nySgfr6iY4AgeWMdTCCux7ekUMiuQosfatL/WsiKta2Fq4gBsISEcoerz+KF4\nPV4Iws3fdF4atNQQF90nsBYxanP5JKPtl7SW4SRiC4RTYKznEC97h1GPaoD8\nZAPwAqPIQXfTcvEkqstu3aL4Lop2HxEtQFqoySigKuGUWYFCwnG8b7LHTsAE\nyuVYPMPPj96qnEdEUNe2bse+Jm5c/RE3pjR6yYUU2CF2kkc8oXWtQ0p6PH8g\nnOa4Y1r8IQtVa1jgOB5Uqhk7W8xaJfOIEihXvgcOCni7W/jRpL/0ESNLkadt\nmlN/Jvcv4wZD44SA5XDAjeDDROhm/VCNlKYWHY5MuJJjYhcOM/MaXNG5yVih\nAFCFV0Sq0WAd78ajbg3KZ7ZPpKo+EH1CQCt+kF2kkdi0uVNUuUgGJAeEOrwh\n3hrQ\r\n=WkoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/density":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/tab-scroller":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.abcdbcfeb.0_1595292685272_0.7583755766902442","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/tab-bar","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e99ddc4d5e13e3450479b1f26f77b7da2f2c07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.7bd5075de.0.tgz","fileCount":37,"integrity":"sha512-QjtGoxiLADoPkzW+aUZOGiPQZIQ1HHNunOBadvd72FZZqtP+MocFA07sklDYRYFLOqts2xzYsWMkanbyAr8D4A==","signatures":[{"sig":"MEQCIDAgq2gnEJcyyzi4mUSahIbmkHwftnwF41VEjPXNwIVEAiBz5XN3oEto5BFVis1nzhsDTPlKwl0oHxT4LMrE+RuxPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzh/CRA9TVsSAnZWagAABC8P/iDcKsNQBgEQjbitayb1\n6Em24SKdWlovQboQQBPOptndbKgsCRj2Lhuj+xtGe0WVjE4bfAiQcbHDHESZ\nnhn8aVotoQrH4LEi+QJQeVfveyZNGfrorRXR5Uv9TpCoAT0eKBszP9ROFxtI\nd0PG/gifk05icJJiMazGKkjAYwkGKgRzMrTshGillev5mxzNvtP4+xzwqU7X\nZIB1SgiPmRgWbkGd8eaSsh1hHDAHNCICTVbwJVYDtbYScn456W86LhVQaqx3\nsdVDEUdR0hyId6c6/BPvrPZ2iJ5/jDq+A10x1e6TsRhZzE5LR8nbwNax0Zpp\n1pUjsrF/zMOLefjKgmvXGe/5q+BP0bIRaQJVzm5qP8/gm0bBvxWpxSVvRESZ\nIzFW+on8aUc9SX5UNNHjI9p1qEdcTajzJYlhi0Djv6a4zZ1H0a9nSgPjSvXt\nUjdoT3/RjmwgvOTr44oDgMuqUkYKrb1A/nKgPr/SN6Kb9z0i2rS34u/FldYO\nSs0n4N95E9Z6yKX+6By4ZaNsi6jS0sE1LUDOVQIajEuNVOgdwnhX6PsXY2gd\nCRxUEBLyZI56t93FTi8F8Tl1YzqFBvMYcesWzrxRMacN2nowODfm06njS+qj\nssXKNx71g+smJ8yzceNnT4Zf4SwM5V8biSJIbdNe9CdZ20dWSyNAdz5Di5oK\n+jX2\r\n=4Ap/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/density":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/tab-scroller":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.7bd5075de.0_1595357311271_0.13693627895139437","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/tab-bar","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47b1ae238c6c8932e3d9700aff8e76cea922799","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.405a29a20.0.tgz","fileCount":37,"integrity":"sha512-/vV9LOgUxLRK+sXhkUor4Kkey2+yBtD0/HoHgiToBTkOvxhirX9bEFfs+9kv09cdlsFTboMTDIGecSOY+XLMJw==","signatures":[{"sig":"MEYCIQCORFfCogsxzisjb9QNgFqXTdPr58EUA7djzEIBzfOLBAIhAMhHagPTZjwGpe8GJC8fc7A62A5r+OqMciimUgHJIbOF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLymCRA9TVsSAnZWagAA3LgQAJ3JKLLoSZaKPk6cDk1Z\nZ6aa3+sA4pppTpnUyQ2Fk9srcOsp+z9ldeS74wMgN2l04ha95Q6gojHzbAyT\nbV6eECiCNcCMnKwUouWn1qWKECL24rbHBMeGP5oTRO/JN97beVfEePt+APVB\ne+aonXOZH2iaX10LqMgVNgN3OHskTOy2o7eAdwdovqs1vgLSqtYsriuWFJNA\nfsE7d0YMm5nxgxErC1Wc2fIH9AMWYeEd9rEvwqO8YeiUdRPHcOB+vhNpv/I0\nU04+RFyi0XVKvnmwXr+vgpVMuESxNQHZOXDYMCebl3d+f/ayvlqFpMo2hZTa\nS4sb+HLBgGoc3dKfeZiBqa7LAJYD8PQDVAT5Uuzu6fbxgefDKsxRc3lDU0hK\nd4oCzLZrnq+a8AzIvBarrO++mgCWu+SyHtE6Ej4Xg4d6mr8wjebH4kkSg3YO\n1EY/pMzJe0hqXrraac+ctlcI/Su2STBBPbUvCDHdRUk111pxh2mfsnK7gzym\nPQpqDnj45+Aym3iItImZKGPMOkpUyyPZl32hPhJdLtpM5rj222hMy7EayV2C\ng8RL6uEnTSE0Kc4to8JAY7aH0Pb57s7Rw99ywCclGAEtCtR9lMFBNk56gvJQ\n1KiUxIUm+acCVI7Kl1AX9EpNP/wvZDN8Lq4SGNZzl75XO/l1WmehFLQhrZKa\n6PJ3\r\n=efOj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/density":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/tab-scroller":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.405a29a20.0_1595456678550_0.17445689246907747","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af9440d68ac1f8c67a40ccd6832ff45fa6351bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f3693ac4c.0.tgz","fileCount":37,"integrity":"sha512-WyDx/3Anvyrrg/CVIVdi8FhQD7q1jTEa7UqQ4qdyyd3uUFEFeO+osAqZ1XATo88Kc4z7QwUH3Uob+KzESlshew==","signatures":[{"sig":"MEQCIFvIH6nhE5XNxuAMI8N6OANDfkY14kCLbhNgsNBDyyEkAiBx2Gbm+Z/CFwrLTooQPQo25R0oAHLANa7HduXv/ZlDQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL8ZCRA9TVsSAnZWagAAyVIP/15ayzNsfqIYo59AnwIE\ndqAoI0MKFZ6ksHh4yjgryySOvZvS3i/+71m3oTGvIFetTCKxUuQQ2kn9fYO5\nyacZdbzXdVvSiTG2v6oBCkj3YMe0xXPzYAw2qQTXLYRCWzuOtKA5HZxj4r5t\nC6eQBfpMDYxZ/jzEYLLbJOue/zacLFDog5FtLvVoG6kBaNp++nW9W+Hu6iXx\n1Lw2XkHj1yEIM+EhEeGKteRVoaQAXVBU3j1ARTnkFzlzPG49ki/DoC2jRoBu\nPon+9nDg1+ECGTqNFQo14vQivaegxeWsUnDeA9ZgqmLFXbdzbteBZsCjqgsc\nlwVO49hyM95/65+dYdDIrdNGtSUvXh1ihMGUVWd6MCbyidBr31TnU3Ln+ZcH\nLYMC90imbLW9I8GT9I2ZNKfMkkF679r5QW2Nqm9SuD8w2aVwYuJ03iFI3SAq\ntGeS4LaShIf05kIWiPblurx8gKIVPAgjyxmtAi0+OEfVsZTsSRpzvoiHQgZq\nOzm7+Go0rXjWPZMIWk+a0Ulf2VmCyfZu25Q5RDjhXlXiH0SowLiFiadi7SrO\nB0aPkoLeMDS2O4BjfMs5zlbNkxcpJ1hG6SimA5xxX0GecJtyKJI6h1I1hMzh\nn6aZhtr4665O4DsRUKGvmq2fV6pcmzYgVCuNj9Rc+hyKX7w6ViTZ5rqs7QFC\nKI91\r\n=yj3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/density":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/tab-scroller":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f3693ac4c.0_1595457305154_0.6239446138619629","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/tab-bar","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b7c4419105facfee822fc5fec96a7bb6536218","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.12a109680.0.tgz","fileCount":37,"integrity":"sha512-bpbANjlmE4DtE5X3ELfs5A0XTm1bbPMgS9r2hncxjctCTV9GOeiVQ0eZnWdl+y1rEMXEO4gYCx+MPBK2dbdtYw==","signatures":[{"sig":"MEUCIQCUKrCiCWLMf9zK+UuVQlMuOaVu0T5flgcXumW1ZV4sVAIgKO5SOXOXaBafK3iHEN8MReEZu5teT8YX/ipHklZsZ+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMYRCRA9TVsSAnZWagAAKZ4P/RFpgaytSn6KcFvEJ9lo\n5A179GUBdU5vgDP6glA+qw+2lcNiAKnRsjPMaei+ZJJ9mUFzsL8TQsJ/MvtF\ndnCDCvqhPi+XOyvjNvdoBxBsgM4n8ujlio9ts28s3D85cDHAF8EIZemGRAtM\ni3z/BewCBv2pP2Ya/kzcVLjrQL5iWsAW0HHVxABb8QpzGaHdAKsqVHN+f4uG\nWEhgameM4jw4N3mm58VkxXYIGnlaavMptwvAo41tKWmmoCnXcmoXixr08NGb\n4GTU6dckgHFdqroxpfVDVDGzsLq+ggVI6FCFVZDKfHybuWEto4whw65rYxSA\nmmiXSq4zEEQdPlJ827qJPAxOlCmWcTJdXXxzNQin/9+ZVK7idO8Gj1Y44WOz\nz6U4zu0j0CiHnRY9bCLFCIYqLs+WiZ0tTYSxrTsSyvGFWWgewxsimqt1sv1V\nujY3E+7VGurLq10Yw5E+d3JSaou4Ck97phKdIFtTA+WtgyvUf7Ox7PtjVON8\nUFxxEXx+WMuzptFTCpgol9z/FX/1vfURNfpjzYRCPtzomGXDQ3rFGDMruAUj\n5zlxMlWM1r5gn0Vk5a4F0ZQHzx01MrT0MjZjTsdsclanZXx9CrnVSne1AuGg\nry/z2q0MoLNIDJo4wqjESLTCSEqtqB0YKhyVR8TSi6hSGn+bunqJ4KXzFer3\nSwOJ\r\n=EgcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/density":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/tab-scroller":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.12a109680.0_1595459089485_0.44365756194683303","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"969db0155e379f7d5fed273e31841c9ec544d638","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.bbd06696e.0.tgz","fileCount":37,"integrity":"sha512-mHlq/XKJ1uVgQ1Enisnf92Ds/yRR3vogWE3ymYeTVYkYvEXVA9S22srgH00YjW49heTOpJiL/69JiSSd+NnESA==","signatures":[{"sig":"MEYCIQCTjTp1Ssg+ahGbi1qiCeBjlcVoW/p4kYFUuEHLYsKs7AIhAIHqlqJgTwcR9wcCgzYUdCExDU8wE1G9WY4POdeq1GWv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGlCRA9TVsSAnZWagAALMMP/21AKWEnH1N5OYR6nZBa\nu7jNL3oKzY3RGzWdfxyx1WuKClUkRioMRYms9lDpSmtFDqDsQ1mzupQGU3x7\nEnC3cU/rE5EYzfDd4BKXVP7p0trZb4qla03SX84uhvyzkhWejlcufbcsXCjp\ngE3IDJtAwalzTM6iFEj4W4PK5SlrcnF0PzQqZHBGAeYU6+YD3YFc4aVlH1dh\nTNPF5Wvlbirkevgn/5PRfvIGWReOcXKc30dKoE6FfM8dX8auZ5gMGZ1KlJLc\nVQLHOBosRx/jPSF0T+WYlSFC0yI6CdyqrXqNtOzucupZbWWRBfG0Rd5pOGIJ\nGwfsQvR5lu8wpB/OUX/LnH2kG5+lJfMzlAObJPlW3ULGLKIrTKEwyTmNULRC\n6LtRa4CjPbKIli4tof9G4uTmWgduwVTEd5+6RBPbQrkYbtzAqcXFxA4l3Uq2\nraMHhvO8K4ouvGBBTopjlVUdLeXwIKeV9trs1VktczHWu49UC3hRtGCzvLKK\nUG3B+OZk8YbWQ7QhJgL6yGljWk0rkpeO2e0DI4m6k1H/xHaR70radqsBMGkU\nEPWAtmCDk35P8rzTik8Q0Cu45fku4voanFwpP89c61CBf/0HuSh2GArN300A\nK1EhrR/1QtqaiaP1Et/gmhu2er29g7mwOyM7Q4CgmFRj6UdoA2Dfjd/3fd53\n7s84\r\n=Ke9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/density":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/tab-scroller":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.bbd06696e.0_1595462053391_0.9223637312756634","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2555b51a2e1253ab2ac3e05209e8d530b67222c0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4951e7651.0.tgz","fileCount":37,"integrity":"sha512-l04sSrHddrosN+GgX20AdezsLO+rKeOZgWDZERmsFoWxkeI6Hwcc8jHYvntsxyVN247boCqrOVAIOV/izM/JlA==","signatures":[{"sig":"MEQCIAS4DwjX82fOFa+gOtvLZ8mKkwCq19ips0aufDD4SuH2AiAhDnXriiefWa7i4UvvUM2ItJC5xcgdhYnNkJvF38CMrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGO0KCRA9TVsSAnZWagAAOSwP/3ZjlNHGsXuyQIM7f8Gd\naR4RjHz3yLPtUOlnQ0Hdeih8byYZiwanqdg0haE2eEo3EZTf8CAkv4XgTgWe\n/Xd7Yk31FDhML92bs/BeVlmC6XQnhWN4AdDDjeYeM6rJmawzKPXos9COua47\n5V76H05OHIAO2B+QDoXwPz+alsi+IEqcpPxoB8IewmYWUhUZlkUYjJMai3Gi\nSqbxttR5x5Tic7Fonh9YIqy5pFcje6f3FnKf1bl/sMSRO1Z/ImNQGgLAnZ92\nrygfTrjEoitxekwFbLrFGWYtzSJAL/A/fkuGT1zbe/Zd/37RTTdeZNcYOyEy\nbaO5AfCwuaXDiEbSBVoNxeGaA2wDwPnwDPZr8ieKnduZsZ1hgTPf/WV/8TxN\nYHNbs2TAFFIhUdVkTqSPtYKTb3GTuW3GOeDeKrkcMw7oMjocEMby+KnDRZn3\nCqXdaS+jN0r+j4FVuy+IimlxUPcFVL/C0zgBL7n+nC4IZ6l4AL3Y4U6WNBA3\nPXxqPkATQydzb7sWaqkB6WOUNXnO4rs9yhHSy0E9RYDXvc8iLKz1jEw6h6zv\neAm6oJ90dZv50kr+HJx4vYVnZWTc6Izd6Tt/rEDvxDa+O8OFpbZ7Jh+MJm2z\nNLjzdRNckV+FEgDc9iljSkgvGW3xDXtV7W6G4hB3LajwwS1hqdWIQo8tzA2a\nrZ9D\r\n=rXZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/density":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/tab-scroller":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4951e7651.0_1595469066136_0.7912930180178805","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/tab-bar","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e64c748e66349e6ba7f4ce6be4eb9efd021b17a3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.75deebbef.0.tgz","fileCount":37,"integrity":"sha512-a7fmh+mUA8HiAJDrg8G4K5qRuc6+E+CP/LFuxDYO5XApWBk2QWBSwRHJzH+Fg8Eem/gw2907F50Q8vyK1TxOaw==","signatures":[{"sig":"MEQCIBrlNBzUapLDKupvptu9Qt1oa0wfYzjagrefjpW96HxzAiA/SbErF/zd9pcIqoZrRrE3HgHtQ+ybc3JmwzpVQSoKOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1zCRA9TVsSAnZWagAAR5YP/jsaVW/WrMLELwYjoC0K\nLokaXI8mopJaWzKZ2XHFAC9vaLsMbIzG8DXz46obu8Atv9utWN0gUThry3jV\nfQZrn8IFq0+BxQ8YIIExnJRXMxVXcHeo2pqAWPSlYCHrmw2hWnY/hWfAmMay\nqrp2DB7iSaD5qfUPdSHFYp68JAoyJEsl3B42JZgR67GePXQufoSAQnZGpZeM\nY9DCXethJNt5xuxmSIEoU9I8slhdNISuPELYaV1sZj91SuYw/k/e6l27uBz4\nfqzWbQ+Q1fDQ/tvIXlPp9cU7KsarMhkLj+4mv/V4+EMzHFI31+t3wogSf350\nGG1o/KIG/BhvRVQPgFvuCOdJPkn0LkGSd74jzBQUc9Q1cOk6w/tk8+AslaSS\noDi4QSYK0qKqJmf71IzlkfcsN8EToLbTzEeIbEKyRu08fPyJzru9nnROJLhz\ndkzulz8uwUBnWvHSuZcCOw9oa5wC8ij6SM6yGBsO2jiMNs/afRuORaLKgb2h\nEkW2sBC1nT31eTNrQUnPoIljOIIuAXDrUky78E7WYOXtbNQTAXfOS3I9biT2\nk4G+qMe30dQCXxPRLb07YIO/EyB7Za2KMsFLCuL7+nkJI8FqgWTTaL3j61kr\nKq2M0Ux5KVCYqDQsh2HTYRMAZGCEBFk21ca676bSosBbmYLvh7SwBMznQ/cZ\nEkIR\r\n=0y8A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/density":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/tab-scroller":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.75deebbef.0_1595526515393_0.33069623982058416","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/tab-bar","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d55999a7edab0e580ad45b3784e9d34f6b36f2c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.95aff33ee.0.tgz","fileCount":37,"integrity":"sha512-pTd/PvrIvnJONSTjdjJK9+hEWFxc4Vnh/Z40HYTl2fNo8eXSu9IfeINFko7g8pnC+l8CGjXK5ROELi1kH0g4Iw==","signatures":[{"sig":"MEUCIDRkSz41wX+XbBAZx45zLsZaS1lbkupGMFop0WhDI1c9AiEA3CPUbpdJkQruczKqs+SD+Et+8dBzov9I9yYqUz7m9vY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGduMCRA9TVsSAnZWagAACb4QAIbll4Ws+/4Wdyfj0iQ/\nooIhoLCeM0Io7mRoWPYkIHFVKjG6WV6gExngGcv+8Gvcd/DanRGR2sd+1w2O\nIcWxwco15BN8Wa7reIsqQLcqXsi4FT8z5BZBr55LwnsUAtP79r09LkeyWCej\nisybq0SLgsnPN8j5hiPkS74sAv77/5BzHiW7l3PV0thu0ngDvlulOmo9JCUD\n5YmLA818fL3XJ9LBgBhSKvj39dtLNtQgRK3zGKGSdx9ENH2V3v1IITl3ltNv\ndc3zzU8ZvyzI4/YaoDdOZSz/Qv2rjJRRPptuF+iSFm/9RdF7T7EgMjk2sQGa\nFzPkvBCE4+Wqn920GlmeIjaZj+OaoqhUBzn1I1Pa9dfNe3wB6rxYO6DePkCx\nmW+TWwW4XHcyiS1xPoVVHAGFUmlnqiYR1abKHpsyyIIGRw+FRokNrg3iGiSe\nGuYaQcIK6zcrxQDwniICneK9yZ8lftdRxbY/54MVXa3NutnkSdDiSIt6tVGe\nuHKUw0x+IYMnqlGF+A/KiEopmoRs2JxwU1OqG7eM4BMPGdeps69s+ycQSU6h\nyLa1aEK3klbnQQe5c3QMaGVwOUP7jVqkPYUu3G9BqFv3lhAjcoerb6NzncUn\nUN1p/P/HsBsGcnwKXtSmMqIrpGQiOZy9Y3U5V9nPk9vchP3MabgohIcAnzML\nSwhp\r\n=YVcC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/density":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/tab-scroller":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.95aff33ee.0_1595530123556_0.6597590750367812","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/tab-bar","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da2254f511275a485dd2b31c0314e6e6e910a774","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.9d9f47473.0.tgz","fileCount":37,"integrity":"sha512-lehOoqxi+WxnIk4/P7W757Gu9YE9vzsw889LwuniHwRmjRtarZdYPg0Z3ojQVQ2lam5q+tuQysCn9hyS2MMYSw==","signatures":[{"sig":"MEYCIQCt48pK9gNbBlYxMbRTC4ZLDqdqFcAhl/vWelnvfhjWFAIhAN/5GISz4zkDrXV9Izoozua3gHFtfveNelXZRjhULxqI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGexICRA9TVsSAnZWagAA5yIP/ijO+B+/cQMvOZ+dh2nI\nltrcaDW9rRJVNXHjauCuoyqyTBK+Bs/o5sX1sgRpQXF7JqSYozJLYaDHQ+R4\nBQXJLsUjsK9Loa0f9aCHP/n8IoMHAhWOVcoHy0BkW7cYSTMJO95OPdDT2NPD\nZfANH48003I2i4K+JHdnnIKa/uVReBThZ4czHYnGnlbg7jn+dqxSP+VUeX1t\nIvRUUjUbClhDsE8vNVN2MLMiZyy2ayjDqlxYfweeJzKd2amgzuMrhzhbsEiP\nXHmKftPsSswhXdjp7SAuGdn2ARojBKoRqyDbXkijVNJfKlIHGjJjW+8kwlXe\nUeCZbnkNzjQbN2dcEodtxtRgmGYKb6i6KGfdEN7Q0ifUp25+uL+8Bpm2jbbj\nBmmobHelYvTckFi8XvWoja7FQ6x/4j0LySUvHhJScvAgdVSm3tASnPl4ODrU\nOsPbDP3uysKRMaZqCCnL9dOLGab4Kq8mrucWwliRsfYzSkO9NoXy59OmuVtd\nzL2T9OUCrXHjXt6feVEvWLgG8nTv8GEG2L74lhkGFssKFI3C/dqDWca6nPi3\n/Q3XP/aNTPHQTDRRCNFmdhh1kSibHkSDoI1OKcKfTzOgoZMx0XNFIEnoufjf\ny4YsUQr6fmF00Kfk8eBYU5Xw7GQX8cc6uHZD1zxApSF2jCVU3l/OaMKt76eY\nFFP+\r\n=obsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/density":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/tab-scroller":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.9d9f47473.0_1595534407413_0.7613296864358468","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/tab-bar","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fc3b5f97f7f95d9a077bec8a157a8b3b2ce0d4d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.00dfbf6be.0.tgz","fileCount":37,"integrity":"sha512-09rGTgygUS59DaoE1pyBYBtjrQ+n24DpQNYZuV5bcyg/TTAlHLMBUxKfbmD4Q9YBXsh5o8r5ByhBxnkQjncxCA==","signatures":[{"sig":"MEQCIGqv3Zdrt2zWZ5fY1zqaSXQQh233rRn8Oi8jUeNAkdvmAiB4rEEnhfBLjZ2xQD6azHdncvuH06BNv+DGdDMO+Nj3kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfqWCRA9TVsSAnZWagAAwR0QAJ/c3zPsvAZOgnkmvTb/\n46IxPugrZyh6fN5cTIvQtCP9kLb2BwDkn/L8QR5vghmxa9uDohzq+w8vB/CD\nHehUnuYpwJbyqhDTq4G5YmlEwJPlMKJxNQLHE9bK4T7y+qhIaiyLMljdeV3i\n1iIZ9Bd5hv9SOCRSGsf1XZ3MogFv9Z83OfmVmMMXCDfR21cZ0mfN3JmqQEoz\nGYxgKEZmD7cFJvKiqVdSfL6SYBoZtD6ypu9zY4lPhvm46tstUKFCATXNgC6j\nQjjLxTZsbHfrnk9nk+quAyA7SiIksJU1nFE2P+qSnC0cX5Yso88uPTzcAsn6\neiCB1TYdXa1z+l/goScLYTUci/1nBWSBPvuuHNqLO0DpcwN8WaD0DVRgRCyR\nBabgGVmaQiVhN/bviT++C1fD1GrPIJyi6xkbacc5/gB59FhobMscmnZxxKtP\n2ljsbs76/MX1d+8w3UHA7+4IAvOK6GITHHT7EgjEhrq9umghO1nxwW9FKyXr\nWN8y/n8ZxSEEiK7xGZP4j+s3iKkVyLezE+RAGvv/bWxuo55VNn0ahPYG9Wj4\nIHry6GFXJtAO1A5BjRHcW8Np6N35cDHoLkzI8phaEWuIlo/BBqWiSue6xc3/\nZV8LZYQ3qeNetnlm19TEdQ2/puRYt98Ygg1wHkh/hR9vA4moiNNP/7nH4F9j\nPS77\r\n=WE+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/density":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/tab-scroller":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.00dfbf6be.0_1595538070180_0.1575570500451191","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"885f3a708f809538ca34a5ab86386597e1155c5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b87e522d2.0.tgz","fileCount":37,"integrity":"sha512-M0mfSbYF+lHG9u1Tz20wENpVnEY9Oq3ZRU4zA4tEuH75BdkYXEVOoWuobf+A2ybeX/po6ef2tc8CgOD/rUwRpg==","signatures":[{"sig":"MEQCIDE19DFrKdUsja1xjyUgWO1WUsonUF+Zag71/VQAwH84AiBmv2gIfI+lqv13dGFCFo4F4a+2gmzPYEKTlqJRPB8fDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAtCRA9TVsSAnZWagAABRAP/iBga+znkQCr47qOzqbw\n+VBUQ1ztDoLiZRE4Uox8EVJ7dPp2OWgmmowHoL9YH+6iRHxiUGVdS4cDFuN3\nvyRvKkW4BS5jCNQQY9Em351/0EUPTGTt6u0c7/SIsbDn+zHja8398LkNWdlu\n3PM7hWRKF0Ta1XU5lZ8+XN9Nt0BcexNv3aUHAjHGG+Jt37Td9yllBla1IMy3\nEmlyAh6f8dzS1aE/wU2/5B6AhAhuxVhGIxgd11HDLt0E0JKzn5BsmX0VqMJa\n9QGoKe8ehrcQluaebsJXI4Xj8hVi9lUbW9SQwD3tWO8A6II4Kl3LBL9UzeD2\nqg9KtnZv9/GWiOYu/GpKRMXWHdNELwZHrPrRhg052LHqa6+TqNzC/HWcdlFx\nXkBahhKRcwdr9wlsVIiCE4vR5VuZlbbZ/rFSkAwF8xQlcfIqJaiyaGZ4QEOt\nXzwzg/1rYDDRedWKmhAKlQaYxrElYTszTZmhWdxGYyjnZDE5zJNjbrekhHac\nwVo2Xn7DShurPtjrEykezicM59xPANM0xYS+HK+tEO7C5UfFeOTUCAwRU545\nSoyH3twERCjJHHqctF03FNYHc0DgUENUyYom8KKrpdzTk0BY0A2sqnm210V9\nb6RMdc/OSAcO+LGyhw7UAZPFmGCOUgG1I3+BYnauZr7rE2KT4Hc3kV4ede/X\ng9hI\r\n=qPlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/density":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/tab-scroller":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b87e522d2.0_1595539501271_0.6705356265307847","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"116c55405f686227ead2dd65bba35080c9f388b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5b3e150e5.0.tgz","fileCount":37,"integrity":"sha512-Nqx3mWHoNwJrSSThGs3MdeeDfmTxBAZlqEtBx9kqpMetjEakWu1saB94WYIcTRQUTUG+vE6pYO+SQuPryFe6vw==","signatures":[{"sig":"MEUCIQDdaNuRamrjdYCfiFAjptfRbrXP0rhxnadz87P0bXZtPQIgHMc/YiULXPx8h+qLNs9be172Ke1j7YE46BV5lKEbD2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjh+CRA9TVsSAnZWagAARCoP/jmHucwrm5u7MReuA95v\nD1dmpFc+BxlHROUrS9pGa69Zp6lK4jA3/rhmSGYohiutXIdsuPz/khs8Qeq1\nQjXAugUM1D64jfuAcEZNwTmW4Pov8EL8SQ7CqqoETVZX9JRNMjXAeYiWxOIX\nu5WnkYRLFzn2X0fNs4ABOrGm+83eA04Y0g7MmWyfv+6nO/uZeig3Lw77f9tR\n6xI1ej22hFDGh+BFr7odh9y3KOMIdl9IYS/nbQOwZGCKTXkVruaSI4ODiJfo\n+e0ZOCQB3sNOYmOYjm2VVaSC4/hliFJ19SJ8qI5SbaHmC/2OpHVt8q0ZRE6t\nZAqj5vhqgE1Il2FjWK4zBAm7lbeNX1Ivmo3clWtbaB8jSIQ7rpBwvVJsDAXu\nil+6ihJinC3u6eb3HggIjVwhf7SEDbWCevmY67kEbbvjrMDh7DaCtiRcEp0u\nLRg5ZlIGdjo/6BLkqpW0y69goT6s4b5lVPtmbSHviXOoYQ3p/gSteTpctPwd\nAT3QR11muNtFrKTCe+2+85784ov6pVyDKxKftvMp6cnEbW6XyBAATfGByMhS\nSdr2mx9kiwHLCILE18ZN3ZEkYxfNjz1AE9d/vkPrgBZHUiJxVLjUbR2dcd7i\nO4uvRjuevzfg+uh3rHwsr4mFGw16BhRFrcYW5kipghUxrwmaXkZh0lNYy9cA\nXD6z\r\n=owx6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/density":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/tab-scroller":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5b3e150e5.0_1595553917995_0.3612308739978063","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d27098b711031a208f51e00f51c8f63da6e7333","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f0ae11786.0.tgz","fileCount":37,"integrity":"sha512-exAOFlJgZRUl9g/vdv9n11T8SXp5WYcSIOARmkWcne6gt/6f4J00ORQEwcxxnPzHIwsjYB2GEOE+RrMmfDO54g==","signatures":[{"sig":"MEUCIQDhNUhdR9q+f6Cojwwn3dZppzQIY0JuanGZpcPR85bEsAIgeve3ucuvHgQE+2xFIPW2+TxwiONKCZUbPOke+UDXAP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0eCRA9TVsSAnZWagAA0G4QAIzyR4BUwvmhIXazZn3Z\nJlEc2us1V0M6gKMRhBOOfWDVt0DC/pTzIfC1ScCm+Fjmunp13tVeLEBwxyO9\n88VzQwxhj/hI9SGQPaZQFd2/N2UUnREYq5HAh9tSW+JXFRs0/TpkIoFUZesB\nttJwwVCwXsnb5l8WA42+1QQ1BNEoVK6x6u60Dtzs25b7CnTr+wOhRRXxhGKX\nOGqkgqF7uOl/2AcisB/0LNo3PC8ZBSPIS7k7FxhoB37iZvRPNoNcILFJ1hV8\n4gsZr5Yzqrw13fMpov1LvJvNHqtujeQc08FjhrlTvCiqTnPqPDaE7C1lujfu\nFNFWV0v2BEhoA4jsHJfSzlEuxkmMwt4HxTzX4h0PFjDqugu1bNMbr4OzaV2l\nZXCucy8qgU1JsN/1j+r+QHPJ4w8lu/iW0EOVcEDrQWi+4z3Qc40EP1ej9ooP\nqck4edKPRoZkHFtszw2XwFTWWS9I8ix6l1QcSdbQP98X4xbOpdXOOVIKhFcu\nYgB1oLOCQp+76tykqJ+F7hR4iAoALX0m8VXei6FYZwukZO3gDgx+58w8JluI\nx1pvhFmtlobOwIewrmiXfnmAo3PcJaND4eroPVeV0YeV+DlJDC9fuQf80XGX\nZV6PaAh/9sygYOd1bw4jGGmQjxZYvBudj6FSCkTyfUHdsJOwGbzVmHZh2APy\n87Hu\r\n=5Fu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/density":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/tab-scroller":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f0ae11786.0_1595555101707_0.21179324756170637","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3abce080638898c7eebb4799855e5bcf387c661a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":37,"integrity":"sha512-UACWcHlmHqdSbUKjf52l2dfhQP3Lc+qXchL1H4D1OSFrcueEy7r6/H+iRJpCo4B7kKX2Dnw9OPxyTluxFARvCw==","signatures":[{"sig":"MEYCIQDIJOFQSrj4LhgjlwqPZRBlwLSu9rJX8id+nR2QELwYjwIhAN21kb3qoIfQpW4xuJoOaznyd1eeeLSB7xrmhqZTj95w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNxCRA9TVsSAnZWagAADh0P/1DW9qyqEc2AsNQ6nWED\n/lA4TxdZJt7Q6ssuncawv3jJodHZvZDEAIZnWSbByvDP8e8SltR0GZOYvJTV\nCk5V4R2MzO1ono9WbBhe4DGuUmGiMkCZwpEO5WYeOpFpw/2KTpctveg2OJau\neIGTS5TT+7kituQjbFO7wl8LDj2FaeloNfnsBvx4M+k5IMrpducNreXHEpm4\nkV0MB8VdeqCLe5AjjoAs6anEIXdKE6JmHOd4L2BDr0f2AgmTQLTAPiMYDLoO\nQyPwXfk9pcMUH6yLRZKsX5qu5XU1Zr62yJ9506nNdXA5zmuXoxN/e0kExRH6\nvEqKD40JK6lO3MYMPxn3y+7Kihp4aoIcNN7CeYrpRgcO1+SmfziAMurOe+HD\nFQ2aRb70bnR361kA7IJkz0MLpFlFjndkNFUzW/q3Rv4DC1/dkP67T2zt++zn\nFLRUGa008dZfzQU1qcoRUh+qycnbnxvZU4hFy9Hxl/KRrErjyWdsmc3F+X4V\nQaG3YDZORDV98RFIpGP7DC6c7Y384HLJ6RdijUgJLsCO/8171COUgL8G8mCm\nzUquwCTgRgq4bkLnD2Bz74SzaRsBPyElABuHJ7b/IE2Ujr4xBMYM5TbsTUSW\nvkoDwjMaGMLu2gpQ/ZBdoK1OSjk9+4byrxJS9ouVMgxz5qXjsVi76Nw7aJhj\n9914\r\n=A+8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/density":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/tab-scroller":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fb4ee66c0.0_1595556721243_0.8196430318811825","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7b17b78d2a306d9ab1f027fbe3940505a9f163c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5511e0aeb.0.tgz","fileCount":37,"integrity":"sha512-AclpXsmBHjULwgm87/xellJrelUGtyjwT+DSBNe45qRqGT2gvUoMzBrdEG0SHJguGIx9R3qpej35HL/0EyfQgA==","signatures":[{"sig":"MEQCIGbrSWR+NOwvauWQTxDsRRPLqE1EICUX2ubYIOn7WZBmAiAi/FHVXG4hKCl/pt8glSHDxPchhIhdwM3KoQZ56UnROw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMkCRA9TVsSAnZWagAAM2UP/39hw3ppzYi0OQbg5HqM\nDf0p+sm4oUdt7jOtaiheWgBNV5mdif76dcyAcxPhm2AMlTlsDyI+6hDm5ZSx\nMaN55uEjQ5iuxeNK/uNf3938zkI0FEageRCkzGhnq3gT/oPOHx6evX/p7/JV\nqhbqlIeC7SVaaCrVhHv6L1pnYrsw98QIUlsiueEBFWtR4pHVnzoCgCjXSlFu\ntGHjiaYKTPzvYyxt0nw54BvXzl5gxMaK5UZkkImTQl8OsHO2IiUsxOPY+f2l\n3U0KaqrSJg2GiZks/O/f/2WTyXPJTinrRBqVZ5u2UaEXrjxpgjWH9q6xwPY6\nwI07P+IEq+HQLEMEXioodlRJwCwY+UOiegh7M6cSy1jOXqh3lWakxDVHvGIa\nkWzIak+Gr7iMVc+u/Lc84rMCQAcvFZcglbvLPINBzT3quvJwCMHoVRqukabV\n9fbeuWJM9k2unzIIujeOgK4V84feu/EtQsQfeysY6+d2wHeWtUNOyEtE0w1/\nYDWB+KfFzRtrNTAWiN1qZ2fAJOCPMzuNIm4+FCjWMvVrJTNU+uDjsB+j4a8c\nBEMPwEThd8M5ImD4oa93NGZmbbad605MYwynsmAnXHkmuanQ9GLKjb2gj625\n9WBf5xjrTcf0zsF+w8K0A9kChMMbwcu5HisiNJ08uDRysbDy7+WnHCwbNKxH\n4LL2\r\n=X9vw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/density":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/tab-scroller":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5511e0aeb.0_1595609892337_0.9448980217015193","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/tab-bar","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f74693d251a3d69d4e5082cbc63e1f298c0b63be","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.8388a9bf6.0.tgz","fileCount":37,"integrity":"sha512-LCgbQNq/TVz9ri1+iLn6V9IMD7RsxHgjKlgy4cPMWOEXiXa2aa0H3lgqmDYQUUkR0orCJxeFkVpA3GuI7AzxBw==","signatures":[{"sig":"MEQCIEnnz4RC5zp/Y3EHnvTYZWViCPiAhfwjsA3zNZrZvOv4AiA35g8KLc7ocW6pI7Sgw6CvQ8vDBiwX8Lsuvxyplmg5rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EvCRA9TVsSAnZWagAAkjsP/RANtYz5d1J7pX9mR5Aj\n0HCHVy8HPsCYUrs9Y8GqGxcAVAOWTIZ922AzFLL5j+3mnh5qcPj4I6Ab3dvC\nJDRnz5GCX/6eCb0GpFQrnuEurehknPG4GalHRJKn/8Z9t8PcEB3DyLlZPYCI\nNpBVSq/wAvNelLWB6lbvVd/EEpbVvy1JjCAct0UDyNLMVRcWRrk6t7H6LNCJ\ndrLg5z2js9Ee4LqD4Hzc0V6qUbWlFM+Vo+4WdQ6QvuEdqPLsEltJxwpA85HH\nRT4p6sOOWEZ4qByL4V1CRcoTQ3Me2KHfZ7qN2U4/3hU4ndgdXd2vQzvJkkam\n8U1fIrRksQrabK0ZhpZEwizwMQQA8zECR0awGbCkL59ANK8X3QomVf7r0g6X\nMSdcrIcol6vprflCCKoawcKqd9zVUk4iNviUZTBguGVPqY9cdHaVorLh+42b\n9IQS5sWSEsSBro1Z+efx2BVcXoQICrrDcHLE+GCWcu0+5oL2SxmyL0M/7Zd2\n6kg2yG9vWSsu+7go+0WzdcIRxaeKosuMleQ/Ts647qUdrMrn3MT+OhTH4H9g\nMs47+m6hgUi/99XsCPoKm33vRk+WffB0uSkp6RRYA20jUrHJ46mSkPFMb5zk\n0aa3DEWXImVzps/0blcrvNIcsJKWrwQ7rzqqeSS4cV6zX6U0uzZ+nRDvsNFm\nFi/K\r\n=vEgR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/density":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/tab-scroller":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.8388a9bf6.0_1595621679011_0.8228037003099149","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00df74de43531a16999c3835af326a9e3c8835a7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ac405eae1.0.tgz","fileCount":37,"integrity":"sha512-MYCrT0FxypXshdLV9bU+MFwMyw3UOUgStEQKcaD4NNCnNRe9oBlPVrc18KaYY0a5g8VsdbOMX1pMUjEWdTCiPg==","signatures":[{"sig":"MEYCIQCOShv0rF3snsijE5OKcFBBsQw+4Q0iB7dCggasPqXoiwIhAMc//D6mPgc5qMQU5HEGbizMjm8JYbpMGyLX6z6d6Oov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu3aCRA9TVsSAnZWagAAbVUP/1rEJO7LvxeYXkXmWWti\ns0UklAwWXf27WXJUkV/IdKouXboyORqzaLycdM5C6t+G0O4SOrAgr1r1zuxv\nxMnA0aQH2F/MKtQpvg3uWF+jfneEoavST2X2DA0X1CwDRlvmeNLp4jB2LfF+\ng50352UhgYPQso2VDCFvF3Uq9+tZ6P8PGRZc6OrE/M/8FLu80uXZjfzHOo5A\nvpHbG1IbU1AtWqqie8aYj//Fm+a8R07+uIJN3cy/3M96LV2dyj+57AbhEdPz\nppC4WVayRwHPz0eckC5I/edAOfzERaOErEes1o8MMmzkslI5o09egsiLbsxY\nCYA1vXnX7PpoKHq7Py+2Pr6EevVDdQyLyQmDNY/GlAqkPUG0Hq4+I7mNObd6\nFDDDKyQPeqwSRPELn/NBANKi5ubtTMsGw+O2iA11IWY3snsQaSJw9zA+pq/I\nE29htQvpiy4XiKauAzTlZVouTWyry0A0kf8d64fhD8wxd2roeUKZLD9I+L5e\n1kZZ9k6uTlN9+A2v3o3Iic6eQ4eJfNukCeEZPleHlGMdAYD5k94FEjoi3Mpb\n62yQWxn8QVqUWehNtICTqqLWrFqIXYeJPdj3h+wMmZ/LMcjKDnM33ubxyEIj\nXha7dwe8ug8P42VxAim51HoZTupmCrp9InwzBvT4f2wIhBaL827C2UuTiYw9\nhctL\r\n=mdXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/density":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/tab-scroller":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ac405eae1.0_1595862489612_0.5111607395850957","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f4ebd939e63cf93aec86577688a1e2cabf02ae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.75553837c.0.tgz","fileCount":37,"integrity":"sha512-fvta0N2lqiU3xEx/JcSo4eWE+7uiEpsYLyYMIxBziO64T81D1gJZJ8lE8p0WdgjP/d3cBI/Jv/Z0s8ixhXyYiw==","signatures":[{"sig":"MEUCIDX51F5s3yBxTDZ0LVMdLJULRlf+487CvOJ83kPPvvtDAiEA8wrTb7nkG2Dr050z8LAVpcuyL+NCjSLtkOw8QMDd2aU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8xCRA9TVsSAnZWagAAzjUP/0JePXTVvg0L1RkhQFUp\nx6dPZUSFmYo+V1/q5aXle/+UFf6sYfBNwz71zaR55NjT4Kz21VEpRnGH9cw2\ne4bnPgkmDlNx/MwfO4GFaukndHZWJL/vR1w/l0r5bbvv9rmibk8V9jLawLnw\nev1xtA4cf2MxbfPXSImUG7D4FwPU7GLWngdNFehwQWE3MhuJ6IVpz28Nh6L/\nSPJQCcBKpxR0Htycrb3Gze93qpJW/MJtMXDio/IYfBEpyewpeP70kpZUwr/s\n0dnR+p+6a2LBKyxSaGED8DPUCoPUKn/8JcpB4PyLWsLGbXazOIis5tUN2/tb\nHri0xPImpX55mCpK+Hkfp74j9YPLTjHXhNnL8xrJx/GeLl4OBYzjQDoFtmwV\nt+0VonPo0+GlgpR7x4xjJKL13xVH4szlOPG2Ac3bXVQf6tHMc79NXh8Ac9Pv\nbYnRcPNNQQY0PM78R9zGv961/4KBAFnBjlzzroqhQxBh4iWt7NX6wtOEV9m9\ng1+SNl+VnGQ/pBAh83Emms8UJ8cTVyIZEmaZfZxiPAH3G6IJsnhAOCZ6LfX7\n9KYvovnXg/4+aoJ50cimm15PZZfFiCCmGMeTigM/o0yzPZTH6WJSgd4sQCiU\nesHopDGrT1c32R2xtL8orGhqRGwn0SqeERFWeC0JjC7GrlpfWd3bPvKlwEav\nAGf9\r\n=V0Iy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/density":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/tab-scroller":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.75553837c.0_1595862833221_0.32640284121888685","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519868eb933cd51ec711c0e466287c1cb7991511","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":37,"integrity":"sha512-nq19hJRvdr6WwDCAlQ1f4N8Mv9CAxZUHsVakLU4Rdd2o1aTMXgKuZ4gGyBb1ABW3dD02+iYShrAOrzK8zaKOkA==","signatures":[{"sig":"MEUCIQCNknHbiQbBitAnTKzs6DQqvQB8Qttp7qWH3hI8FyRFcgIgCGSbYH6TLscv4VysXECRbQhQk+vni7jf0USDmgdx7Bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUvCRA9TVsSAnZWagAAasUP/2AcLUlCvAgfcBro6tZq\n9ut6sqLAw+oen87p+zOOoaWQabMnwMysV5ozinec8sxKlZ2/Yyxe5Z/E9tpV\nSlgBVWEg9Dp2x3BkiCtRx6mbc74GO1tjNJLwjzTvEZWZFzaybqJZUePuo+sB\njCaraoFVl9/rMiSwYjsQVzpOTbYlRF/M2YHzQ2drLgBjcJjv6569n8dbNbHt\nI0OkAtNXSxO+neAI8kf7zBOr2k2QGGGiGrjoCF1DBb7UpJE88cFRiX1U+hlA\npyO/R8Xkf7H9BL1pfjBnBXGkdE/NrmnBcQTOPsssV2VS5cEMzOTn1KTvPMKC\n93A7gSQBhYLCHt91zJdIbRtMw0BLElv6mi46x8jhGNiZnmbgD704yM28fB7K\nQpWMj2kpgNfj8/fAsJEhHgKaLhjQEmGLPAvBld4eE3wf0nuAaC2teLh0fqz2\nmjG7/QcQR5swm7NuYiTQCeJ+AL9exbPecCK6dzBD1s2Xpz1Vr7VZR+CevInT\nL86yN/ncacY9b8ZRaykLPOx9+/twCTk3E4MjD1hOdmWvLq+CerTk/TF3SGu7\nG+SDQPT7/4ULoPJg6Cm0e5s3XR0PzFM9NgTAXJ6HMYeJdiOmDGQkfFYebVQr\n3S80Y8X0iuBdnXfeF9W9RBhXCbfNWcIS//iBSXOEr/3HqYgUDdXHyIBRxmsJ\nOkOZ\r\n=Yu0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/density":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/tab-scroller":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b96fbfc7a.0_1595864366757_0.5770641565850048","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/tab-bar","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eda83600c79f0f0d5acd7094acfd6d25b7b5e7c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.61f1a8d85.0.tgz","fileCount":37,"integrity":"sha512-VQMw17S1QJCRpCIKs1WNV941lDZxbiJ5FTOz9oIBNpoJD97qDb9QI+Rz19qQmViXDZJzZQOu8UcQq50ezrdjvg==","signatures":[{"sig":"MEYCIQD+ioltuq1iNzLKJPCsTIGv+7gVuxbcrSZJ1KyCbZLIbgIhAM30HU9pM1zyD2A4KOHv25zeXxySs/wblGPp+83FfRRe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvdlCRA9TVsSAnZWagAAshsP/Aj7phmX0hVO0kgiTcpg\nucrCJyn/5/a4odGoGQLo5hAoiQlB7NWK6x/gF1c0kQ+afxZH1TPOJb6fdnZT\n+KY1AVI2BhXxzGuseWfMz6019cJLNCRHhRAv6yFZyPu8PWOIa+wby5/C1iEx\n9XOkGpaGp9kKvOGVReeAK0iucfQru/AsrRd1nwWJ+EdKduVArtiUmr7FZIqS\nprMBA/StpY/SlkQkzIN5l0L0CJqIYHMCpvEk6vkpj3EGXS7wvVbbuDCb419h\n8uBI3/3oVfXyxktihMUx+ROeUEYn2l9fXSPUoeDxdPJLMqB2oCKZ/ZS0Tita\nDpCbKrPlR/OvhCUy6SKjt5fhxpgx8esph8Qd2w0StMx6QP8MNrEMCd97DoX1\n3wy49oRfWfsfLAYF0pnqDgylelSH8DCEDx/Yyuql8rr0DbEBKnJf4z0GkAyL\nl7jnRnK8nITgnT1GWY2kHusn13ww4FgQCqopg1qwPa6TbF0RIQd8Su+N8fWN\nvdYDfituFvZwZz1sYkQRekEyofxIeAFfTOx4XOJUx2uNKAgvYvNqzoQ3jt70\nDWhbZzLKID+Wrm7gud25AjVTnGva11c1kW20yLykN4hTu+Droqb46un/Bjqa\n9moJZk9+C4xvTxhRHvxoyNXonCqZKAbg6kws9h+jKmCVYTz/P0kfak3uExx1\nu+dm\r\n=xgsa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/density":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/tab-scroller":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.61f1a8d85.0_1595864932731_0.8233383681906612","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/tab-bar","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a83dd537265a43cf8e5650040d87f9395e684934","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.81dc33377.0.tgz","fileCount":37,"integrity":"sha512-CkTOP+bQ8u6r4cy1XppNgjKbAAv2ogXUW/LkreRPWO/HUyUCdEzJOB5jubS6B/2gx02bCmPMA2xHx8iKEcrXSg==","signatures":[{"sig":"MEYCIQCK4b6muIn4nGMQBIv15q3lF2B+iuBoYRmESevrQ1uOewIhAPP1j+lwV/Uj9G8zxfVHVoTnVT9xtBglPx8grrmMyIsT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvolCRA9TVsSAnZWagAANWwP/2k6oINpJcaol/CWt011\nUieZy8M2/XJTmCCR6OaxsoLTjd0hU+Siyt5JMfBAm1qoqvshGhKGl0zcOogY\nCo6KZI6r18pPVbsCQMsMWl+ciUq1pqp+M7bplw+DpuO5LuwvIycfsrIBd3Ee\nZnpq9p3kEbieMT4ZMBDdKRSRsjSa0EPYnCxvzvfEu/3dX9ClxV3i5GtMEDKe\nkhRv3w/Hlw7ok1HSEyaBGvKfTxrf4ACOEWqP2eK5JyijrbOf3l1g0Q/zjmXT\njwcdOlsv84mQrZCYUFYTqhIGEEKSYob1ZsP8pTdPAJUv8xKY29/wxIFWmqwE\nvRAGR+/FJy3SZbSDe+NXgddwq5jDHWYGoS34IDqNBz7jzLsuhQ93HN2goluA\nzEVLWQKO9JKuEyhJb3Tya2HbL3oepfJZOI3tviKxj2hJklv/59cMRLo4zv6C\nGqRmrNrmRaI/4zblk7OYgBe260P9D7mepGhUDej2RC1T6Pc3amxmYheM+SuG\nR7hItmPkZTrQ6sRXD1GUtPcwvBe1OdxPc4oRbaZpSxJgVk2dtJj23rirZHF0\n47a5lRg++gDsVPTcLdivoZNOrQcQ0IvhA+RKbLOXisN44ZmZOzlf9qNbqses\non8/f/zT/weolJplGRR4KSSsG/pExCxbRHcba5l8OviZjI1EaYTuCTI18mGH\n03FN\r\n=dWZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/density":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/tab-scroller":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.81dc33377.0_1595865637579_0.8230740942424581","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"567f1ffebd6513172e19ee5496e6d1c263aa1dfd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ffd9ede58.0.tgz","fileCount":37,"integrity":"sha512-YFT0uHUJ9xORGFEFTOcbDpPPAkGzmhsr4mbHBZwIQ1fOuzt885PAatd+yUGnpkFqgrfVGEca9yVgvub7/2zXkw==","signatures":[{"sig":"MEUCIQDH5KzZnh9LuMasKGNyNAFv0PKNQr9RWp/Ftk2TKRCI9AIgYIG60YFLrGuF1IyigS1/Nt44XB67v7TzwIgq0SgSwx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwH6CRA9TVsSAnZWagAAEAoP/Red0OptXjUgRvExT89d\nD9dd7xc1OWKYSawSEzG5FfAvt9sKGt8MIsGluwSg60puQMcTXfx9B9g3ME8e\n1ewFq14obE9R5DNZ2mkQbsZxexqKMcZQhoZNDVD2tDnCud8FUjmIIqoxWPqp\nfZd34VwqtBHlnE73y3TmVlO4tSWfyfMdn5kNCAMbPS9OK5Jw506yd34pLEa7\nJink1Bs4LF4tjM7Uwmu9D1XIfRg1u/u4Q1j5PZSSYc3Qg02zN7sEypmpN/rp\nukTRof9fn6MAw1YmigflN7R2szxx0N9VUvuFSNGTaxip4zPX1dVOCVyAbj1P\nmUZDv2nB5lXTw9wCnl/B74fo8t00ZOSpHRYFVIIwHDj7qIlztPKUI/eheOcT\ndghjO4DgB1LjGxxRMjITkJrCcdA+23bWgm26WZyVDctzBnjWgkDhM4ehrqbO\n9muI98oDoo10DEwWtNO3ZEXPTuLFGFEsSmdDndb7VMXi/wTizoQTOXSJTI6D\nvnPR4jnGwJ9kHU7YPrCza78hjsXGh/WliKm0VMGIXy81EahavDCWPR9Qld2O\nX2Q3tQVCMGkA0qaBNd7UmmRMl1lSo+ZE9qUH5LOFFg8bC2ElUF88JxZAvgOr\nGTWCzev4H0ar8b0fFmQQClKEKU3JTq//jy65z+mvCCoZWZ0BFeNgWRVvXOIf\nPlBJ\r\n=0yIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/density":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/tab-scroller":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ffd9ede58.0_1595867642428_0.35350965635168397","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/tab-bar","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a5c8d05f39b582d6c763256357f45541e732d13","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.52dc55acf.0.tgz","fileCount":37,"integrity":"sha512-ISMYjk9oUseL/0PCxti4tqYABY+wfHd4G821xdAHBnM1k44z4OB9DIaVlBhjuEUwM4jhaaCJnbWX0pt3MyCxSQ==","signatures":[{"sig":"MEYCIQDZzn/jBE6iD3HEAKR+9XaCWMvQTc05m1Ka0vH15dZ07gIhANGs6a5POPI0Xc2dpI9tmzphSy78Eiq7Ll6knK9kW20+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpgCRA9TVsSAnZWagAAAYQP/2iLVCic6AJmTTM9ZDtR\nuPgX8RTE4sWA2wgzv4nF6BOtjnL1H5zBhstH+QS48XhFp2MuVW30kue9JDjh\njAlW84ZCCye9NHPw63p2A0/GgRM+fGlt6yn+6VEhob3xwM03BtZXrptigoMI\nj5ojsOEzwz7whV57vOQ6nymFc0+0LXuhCvrwkaP9kPIpgshYJvONRgCzU9KR\nN6xYXLKNZUjgel0TpCiWYSqAq5MmXwmKaWU8DuwIZZNcnfclo7lUcJ6gUf88\n+KEojfkYH216Oky6BxsNLc7YuV3008RBhW5DDLhh2OolfZj8WXzS9z5yP+kw\nDCF3IygbiL/xqc1opYbl2tgukd+DNwIN9//RVPiVmB3EPhQvcBzzBJpuNa9i\nRVBrzZz5Y5bN8OS9rlvT4p9XxMbkSTAe8sBpTNhg2SqR4eJOzoTvVFbru9zE\ncN1u3HXmtI8qtUakXcdlocfTwFSD+wXdDkYnfK4IuPOIZtZux2vbAV4NZjl9\nnyziGp3YrMP/8h7TPD+h0LWxie0dp6HYLI1dF7ZHxsJl4r9YRqdKp+Cs9W+b\n+owsinv5fNZdaANKRJAC5shlQUZo55RS4ybsBQ0/g7N2p9J/ebQBZCHBJ6Kz\nrVEJNTfbzRJOJVBvDUXXGkDR/HJppAzgeQFq9OlZX0BS2eBT+Wj/wX0H6AJY\nc4sQ\r\n=RF+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/density":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/tab-scroller":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.52dc55acf.0_1595869791723_0.4553795580827895","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8672de95d28557605348e263ac6a886488e32ce3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d4274ff05.0.tgz","fileCount":37,"integrity":"sha512-AtJRFfzTOMjxiEIm1GU8FOt+N5r4jJQtcpSfW4r9Ul7EgXB7XKjm79kAnJhbZbe9fjeGmO46BERY9iqbRmiM2g==","signatures":[{"sig":"MEUCIDqteeXAOPa6V1aL7msWR/NXIiHhIzsVEqNN0p13lcogAiEA9CytPOaAyIWhBz99zUtfyDHlXV4mypThcBHHI6TlOM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzCUCRA9TVsSAnZWagAAGq0QAJ+hZNhx2WYqWopDSU4p\nEMGS+CLRvUL6Tp6CuEERTCV7S+zbRoLIhAxzdOU1qoKTWULaplFoPPcdAePW\n31r4aLCKi7pt1XhDMStfqvL1uM81u/dPRFINC2JTXqkEFKcFI1u6De79smxu\nJcDwPVikKadc4AUmBhS5Wy7g0W9jGh+RKmS+TIrI3KfmDApLXLalYn79t3kr\nIveCKWkX8Wo9DQIMQlOwvVdGHhywjYugbyTf8Lyl/vX88zXFK9YH0UDozMM/\na31uhjwsRrgqigj95dKA6+8nf/YOjVCwwdwxQS599hZpSY4Gv15z7sZJ0uQ8\nkEFeKoq8FQE0zrETNpYEncKp7dmRePJq0HvXqmXW/u/4EGEUZV2cGa+4lEm6\nw/jBMMFn8nsVlqkDhKPcb/ULzf45SkVxTBQ0vsdGV4ze0nyM39FG4eHBSq8f\nk7w4zmni9HnEs/ODBoZCQYASibJU+URm6QQ97BKAHxGwKInhG1zEyDtI9Vnj\nm7pNP9/wqisHmrlwpOzFiKhBubzmRtn9bW/oL0lrLYUvF2On+LjwsRyxnwCw\nbn1ByOSxzYQfrc2bPelVmsSQ6P5EIh/rYAaSH+3l0vNPekjoptZkgXmbw0kJ\nmK1Rwg5uGf/ZE51UdlWHsv2bgA8OfrdfhW/7itg/Qmb8GNVgYSBSoWb9nx+9\ny3vv\r\n=pQgG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/density":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/tab-scroller":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d4274ff05.0_1595879571774_0.5109639497777627","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2d826a691d94497ada3c3d5d4d494ce4e166d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b82d0696d.0.tgz","fileCount":37,"integrity":"sha512-dyQ7tLAyMPv42Y+GhkshEmtgsaapquiWuRWRMPhwOhI0YWzlEIrarG6nYOeYCqJ+VR8ZqERo5wHUzaUdaJBMZA==","signatures":[{"sig":"MEQCIEvPMiNsyImsvA7POuBKXz5uh2i7QFqo1+0O3qP7bL26AiA6ILnXAOIZWh7yBitI+xAONymxu4p2yJ7RF5989eH6Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIiCRA9TVsSAnZWagAAaJEP/RUvthyfdqxNRCboeBxj\nZ44E7BPHi6mDk0Ol8FP+xe8tg9q+kCknBGFZyk6uXn8GZ8uSP/xmJ6DiFQMn\nijAEC0i4TgnRmbJ1w4iff7MEIeQ+Y43TJbDNg/V7rnE65u9lElEiEa5pQ4rk\nlIm9JDnqLu++qLZhSmSgIQJLrB6XKxBKQZNA78Ps6h94yBlXjxyn0/rWy6PB\nSAjP1aNRZ9kLFfZFwQKqNPmJCJ2PS5ifCtsTVua+DxYRDGxzpdozfz+w0nGi\nZwJdjzYwsvXdZiQ2W373zSYKc3tVvP17L+eObCN/AoJRfvimyzQt5Rg/vBmi\nnKE2O1k/daG0szPPQ2EZuz886U4CKqVVPS7pyMWU3H0DkuX4RObbDqENAsdx\nCLJ+/mP2xFk5yrZOO6HU3DtPrZFc/yaCeWv6wVJ1zFybkVHqN8VcI/Rhz/1P\na/0MhhhBdwtH6zqeBNRjOaneDIGscAuSgS01hoCX2yz5JZd29I3nKfg/k1R5\ne1bF0ushCOGLuM/4v3priaZNtq8rVLirE31DPG4nXKYacDXMJi4XwK/8R+Z7\nk0pVy4BvehGkXCEQMQYybFZdhDuAkyppsNIhFE2xYPLuQVLtCG2YYsjDeXMe\niKQ7uZkv+/7pcJdzsx24VD+8S9ZR5VDngoiBeIpxQWyRc676p/et5wgQxXCg\nIKJ5\r\n=53pL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/density":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/tab-scroller":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b82d0696d.0_1595879969557_0.3577562088873538","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a0de7a349e3aaec73ddd75bc20a2988f1379068","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c2852000d.0.tgz","fileCount":37,"integrity":"sha512-HvIAY13qe6JMH5U09dLiOTws0fp1neEs15rqiH3yFxjLut5tcilNMmauSuWXGccwi32ZhGI7l3i8yxkBddOgnw==","signatures":[{"sig":"MEUCIGX3zu5bixIpkLoS4L2kQBQiLIa3iiJAwaBt5HUddCmWAiEAurU8UUCwHeLVaaeVIL+3u8t9hk8HEZdpZDmUxvyT+Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0BSCRA9TVsSAnZWagAA34sP/Ag2+g6ZwPq4N7f48/qz\n3xt9ooO92SYVqHPBpbWVvdQ95j50886GnwIDhsMpz3j2oyBq8Ih1WppqgaQ7\nof3h3OFF1oRXrK5dDSh03XX9jD6vMXh2M1hwgmpeTCCGmCHMn5Cl0aqevF0O\n3c2+s3Nw8rSq5kAQbNkxDaN0dx+WgjdTHytoHebO0/KpdIsbzaIU+dicefqo\nVsYNGdKmwdDCQ/XwB4na5YmakGJWpjY5kfJNh+jsM3gVHXL9+b5RGzSoTiQt\n2IGXH7QjC7y5WA8koqFUny74zeBF2nUSiwjzQUelFyVCzGGv+u9vWgKLHL9O\n9T77n5fbkzdEPOGIbNJBOU4CoOS2exGPOlqzrVf8YY5BJ7fatGxhBRx441mI\nnT50Oyusl1youyDWDvUZ4CFnv4s1qXS0F0xDlfgeCpQPY09Hk8Ips5oy1Q69\nGFcDcEm/M9zVvkSPG634tNtt36NcshJaFtWpUuEmcgqjKZKPUfJC7lvJ0Wfp\n4GA0biBrIDttNx4P4qcaGfQB+GHR+XLpHyK7zp62Zh6HfJYoWCzxqjcBkvoK\nYBajh1sPmsyEgUOaUJ548opv8W66juVAtgwTfHnbDoTcMAr0xcKBB20gGDa7\n/bL19IxHICKtC6gtvmTl8jTwQ31evQ0ZLpNB3cq3bccBiwt7nrbE1x6PVRcS\n8bec\r\n=gU9y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/density":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/tab-scroller":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c2852000d.0_1595883601586_0.04505751481429088","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf4647559c759b1b66d27719bd5d018851b86cdb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f86f83f54.0.tgz","fileCount":37,"integrity":"sha512-1rFi14+Z+hdgzmWguzvHhUUMqZGQkJ7KDrKRz3fe+l515XaUzMsGa4Mk8Lo5HIzj5A9Pnhr23xi8bn+HS7dP6g==","signatures":[{"sig":"MEYCIQD7lQLIWsmcwyI3ynXVkbgniv/6bf3Thl4+xZMq5L78BAIhAPEIN1m/urkWhoi8GIryEfCMMaYEu6e0noxUVxF8eDTf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH01NCRA9TVsSAnZWagAA4REP/ikZ2QAsIIQvN0lyxxWU\nOnf7Hffrfv3jiTPHc73r+g5MVOtJt6W3pyWgphm2Aabqw134ShU4WS+Emqfm\nzHn/KMP7YFVLctFJTICmxrOBfThMDQNU8Mi7dHZg2eisTHHgSzNgvDBFJKBV\nVe7T2CwFOgVf2DkFMum3Fc8KRntirey5xRHHsZIKEn2QGNgEDLI6YW94BGoc\nGVISBcz2H90OHZ8IeQ7AP/lTYd/8XSCfpPfg6T0UG6kI33FjEnRvvtZJo+id\nLmO6/x7W6owO+P55GDU53LLAok6x1QigerysfPaOfjxVbOS2e21h/kd+HbD+\nRrM0avB4vX9/we08ENUIKduxml1We54v3tkykpQIfwCvRKpFhdcO0I8Rru/w\n5dLvmAvN97h4r2i/Q/E8B++cajR60XAKlx6Vzy0v0TEF8YT4apOQHgW9BeUr\nZecUpeNhJhKbhd7fmrdCsoTM3Smc0NEXGNl+bnnEfSgj+iHuRwCWlO34Txws\nOjmt1EEbt7LrC75bsygzOv1SifvzNprcXVp5hN1Yg1ogEfrcOuVT9ybORHZs\nRm9+zAJyYpZT+533+6Y0qTnpu3hlHEcaY3UdqLO3xsImGjl8MV2r13xU12Pa\n+O4S/RpI0mph+xZotEaKlyR6jKCSCPndAPdJz6ZV3rY7qvs2uIuEY9XuDfUP\n26ul\r\n=tYLG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/density":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/tab-scroller":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f86f83f54.0_1595886925235_0.5377967212952881","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35eaca2e227d5f98c45f6955da37ebe1eff8f37a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.41eb1684c.0.tgz","fileCount":37,"integrity":"sha512-z92Sxhmse9y/DI6lhI+L4xYx+vvW1i2ivheEHju4/fejJ70g01WtGzvJztX8zHtC231A+Py5dHeJfRzVo9zMMQ==","signatures":[{"sig":"MEQCID2FREVhVMyAInO0hJBlmTo/K0e3d+XmBHbNAJaUsQ3yAiADaEGXd0Pgn4NPXOEnlSOaKanxDATSjU18JFyQn6NnBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGW+CRA9TVsSAnZWagAAHJoP/3yLyeCqLWAnameq6Q8d\nm+q1LxEd1GOJe+XWubddpAeONpD0aMbioKLbgygruMaBdnTLeG4Apo2Gn0Qi\n54ErqquaXZEL3lDpvzDsLY2z6LIrvfmJJwIveyDE98aLEmXaTvSlROK95eam\nuyGiZ/JzeBDGHJzVlwoo2XcZOf+j1ICJPROtuvkZys6/OzcX4p8MCUEcAbeG\nIHWhGc9bsxbXBeZ85bdK8g36/v0L/W8q1JsCNxYzEVEZ9sMarfoB8cKLQyS5\nT0Mwg82MH/osEDNUKMmxekqKG2HLK49QMAbB8GlNHzYzvJQ/QG2h0zVqY9Ae\n5V9+dHaY5XV3mmFxzNy32V3vKjs95/weLhhvmYOe17W3b05xq++5/0Ou4Ovn\nbdcOF+LXSe5Drzy/iN29DDAtYl1CVO0pn8e5WhcgW7ewmCunNHZAtEC1ujNI\nBq9sHCFCJspIZdF9arI8G6oVlpb28d9nUp7JRW4qBJk3TOFxZ6ssn3fw1s1h\nwACc8z9m4TapffGr6ODHUOvtjj8KB5vPk3xq20eFLo1QLS86KWHJPBG9ujep\nrqyxm9keoa98pSZHL9L3KtDpQYukWxDhvNt6dcbiXR+53PjNF8cAiZS49sym\nJLVO4uzIIu+0e1qo4JVl555O3k5oDNtBwNie959m3eZRmqAGmOp5BWE2BaW1\ngcn8\r\n=E1HV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/density":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/tab-scroller":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.41eb1684c.0_1595958718013_0.5090788722616464","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/tab-bar","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de5cbfc6de76c73b0b343de21ba48886c871616","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.9e2f6c450.0.tgz","fileCount":37,"integrity":"sha512-PYbIwIR6fTobhisF0FuVOQJAjndWfP7wfhJmPpBzpYPEZPiCBWIKVgpzrkAp8OwApHCYUkWfbVUeJSpKvhzDPw==","signatures":[{"sig":"MEYCIQCFna8dKGcCFD+5j1lax8xg9qpKmnR2Yiu8JtMny8cc4QIhAMZW/mq80XvOBKzwrSWdAGfquv4wGl5+9z6M4MEDMaVw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlpCRA9TVsSAnZWagAAjMMP/iq3mvCq/Mi9A13E/Ik3\ncsCZU0cmAHvDqGOc8JaVfQS3q24/Kv6COz7ZlDYNS0NGSYKHvy/0sJZvGMJe\nmngWaTk3Qno95jETgsdBM9IDGlAujDIdx2YkIQCo4NRHBPBxD1QPT0dpUB4U\ncDvKgzlYhKAWUsNXBTAiipxSdSc4EdLuNvkAl6ISnx1bxNvYKs9hrHEu7nOy\nuVUvxWazKpDDvoUFEpSHgkb8OsIMg5TgNXd/K2gHapXtmnSLjj7NeypF+2VE\n5MjufwMS1JKiIera3Kt/My7szS3myHXmDMOntbrL0hCNlvXt90qaAf3TZt4R\nCzywxu3ZQmW5Y/mroEUXObdCEeA2aAccjzS8cJiJndjqLTIIIYkx0Mmdku6v\nJSzEBOXJ1jF8aj6rpYwUH3CrzDyj0ajOFi/MKoWOo9pedRGH5VnqguekJ9p+\nD65sLENrf1zssXIzMwyeqyfuGJEb19nzF0c1Z/AU7DIe6jC9cqDangT51KMd\nAK3aAkhbdV74YoplhnsIi5Gt+yeyBGUGLQs28zjssWG11ZzakERn9ZPRB6Xh\nHzOvhmgrKpPQQhk7t+awCKAhyJcQrJjc2wAyOqY+V+wd2RVI32Mn3XMVxEPn\niIbvX4ndOGudYmdbeIM9fN6FqwIG/bxADacGSBeXmwIRTi2WtSSFAtRE8dB5\naQu6\r\n=s+qQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/density":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/tab-scroller":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.9e2f6c450.0_1595976040836_0.9072843751503581","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d6f76ad0a3ce634f0cd31957ddfc0457355d2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e6950b55a.0.tgz","fileCount":37,"integrity":"sha512-NyyADQ0+Q0/PzNWf0fwrZ1KkwYyG7fj8Dn97icv1sYR+Yj/bURncjoWC9zb1H1hVWlUXDAjQlievUFmQJohcrw==","signatures":[{"sig":"MEUCIH6+azMSf9NsqmXrcUAHxd5js6zD4rE4SzTTWPYsVGvHAiEAqzEtpucq8aHfXO9lKpR67YS4GMM46VatZ6+EBvB5Kq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKyYCRA9TVsSAnZWagAAoBYP+wSn0TMp+UjM/fVCa4Y1\nEnH7KirrHANU3OBeIIPW/Zw2OUtraaaZOBHSAF1ajFZGlX8gw7jElB7VZyHq\nK7SR+Jep+Xydlbs4IgFH91eLi77r0D4tCpU9nrXnyJIJsFnMoUw3uDLI7ojr\nhjGAhQ5D5jgNhj9p4Pj0LJ+Bw5GaN4LwbmavGjTJenXuzvlx0JvQz6fV0KDg\n9XOPrQQdBvQQuuCUJeJxsRT3C4A2Gl314XbpxQlhlxnK/A3q29obLtsWTtk6\ny8KyiysqyacZnk2/surrAb6CY1ZBmXans94LNNOhO7SQD8dfFMYl5aL3+sGX\nqaZRz2sGJTsDYbmBjwa6IgrMktklsPNe5goQGGU5bbgh+fSPSV2EiPTlcotb\ndxaldtMV+kkrI1m7bvflOIKNvlfiv9opOgX0+YhFPwaFq3y5f8lN380j0hpf\ncPMTFIOAsjiZBi8wB/1EqpkWlNUct1eecgCBxHrl75or1IMtZKfcPDLLh95o\n9sNQoYQYkHNmRJETis7GKLUTBsNwd2AqCnBgIR39jFfcrhjSfXnh1gZNaFf/\nLLNq5VSvD9f6B7gohNR7ZAA/k8WyMWJv5TZ3UwPsEWk/giA91nJR8vT/vaCD\nd0kPNghD/mUC7P374rBSc/G1wDpt8surYP/sPPIF9aBxonIOPhZRvyqlSKlI\nYT8f\r\n=VOVd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/density":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/tab-scroller":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e6950b55a.0_1595976856269_0.568054658235166","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b8a865619018b2774c36d015e5466d2d2b857f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5e51ee38e.0.tgz","fileCount":37,"integrity":"sha512-MBQAuIbaIHR2pqWKmdiC2vyWccaLC5WuDlVOOeRFa1Ruc+VGgibU0WGJuklQJsm2DpmHDP/bVpCmtWiq24RIIQ==","signatures":[{"sig":"MEYCIQD3Fjzrv4cS4sqGA+41lfBENOVcub6a6zrKcpOsLW8DYAIhAOEKTdtQnF0ypSdm3ipoT5tED+VJ9vE5XbLIqlaylXr1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILIBCRA9TVsSAnZWagAArKwP/0a6wPpePgX7BmnY+YQ0\nayedDA1O+BbTyf1ls3A4eLvW+gagSK5x+EOnE3WS8YnhFSmtytIRwVC0c5he\nRQ6ciYgUVZO/JekN8G6jNlYew1WcF/pYCfX4cF7jwMVt4yn1vILz2CylX0sN\nd+ZjmMXoCtFST+YfDxRD8RbQPV4qTzjZGvDQ8qc98QPXAZR7lv8tdFRq5sHR\nyakkhQFaFS2KUOSIPqMS2ig0TPkebxsa0lZPl7hRaOHIOUuuZbA/KjtcUTrH\nof6/oRwy+uNvCpbdoLp79uMY2wL/xuzwy2NHP0AiRXySl6o7VqUMUMMEpDTp\nZ86Bubdw8/fwAfMq+wwXS/nWvVGpbpRW1hfEZOIhngMq0IDQ3cGDsV9yOf0b\nV3z+I9E0qRC4vPqLe0EuVSrrrlm+j9Rh7pc9tS5srFBfBNqPYSlWYzPWiLob\nGx/7kAJbUqksVKpS4hEUA1fsltSR1btgqtIII8oMpSiuu4GzlLPFFgdAGAaB\nGPG998uQZew6QnhccuZDUqEjje7a6D/5br4ROBi7a+D8kDg7mVSuQXMDuTeR\nXqtmyxc42fqadCm4Ultldbv2iF15I1cdFYQIGuiQ+TcVSTd5XqR6EM5ibYeb\nHWphOtx7F2jJjkU/3Ly2EG97awzaOWSSr7j5DRBCTguVgCs1jtUcnPW1ydBb\n3Bwx\r\n=+4Iy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/density":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/tab-scroller":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5e51ee38e.0_1595978241300_0.23706604269723286","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baa3a951b5bb8d62b1dc848d33d9a612fc44dca4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a3898ffcf.0.tgz","fileCount":37,"integrity":"sha512-3mNU9BqaPi1cODD7IrnJ2B0ypDTwYqQdc6tXr1W0s/tZn4xxBUXtvUzHZ61u15MVP4lN4mHeRi7BQ3wQR6sR9Q==","signatures":[{"sig":"MEUCIAG/T5GFhcT4eJGa3uioKnPm04VPtAVE6v83TLwv98nWAiEA2BoAzIcp6lxaSgrZsZeJgdo9yO0K/3MavA8Ta4MyL1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTcCRA9TVsSAnZWagAASdQP/3rhsHKaa+aRo/4D+dxG\nJUKFz4+cz6cyiFLcg7Lhmv8dWkEn5/S55+rLcaATw5W4ITMiRprp4coXFQok\nkTVZzxbs97tRfo5up25miDW5+lnb0+Mv/5XxKNTWZ5AakkKT9jKzcGQSmKCK\n3bLL2BuaoqbOxKTozXUg9WWssKp+3iam8aSd6sGvoWrXlwRFVtbXhjYlNEKl\nTVMXWhQ6Lcd1/2Zt7RJ7wHtDIUR04iUxhl8toBNlI2kZZzLUWuWLUyJK89Rh\nsDXTLOcnjBA5pwXDU5a6i0A58rBJwv5Ve/gexafBcRd3YWHlefXNUxEaunqy\naIZSvtucOMp04At/a0yud42v/P4r/7CeQ/+kCFD7mqtz0swRZbbU6qWdJ3GB\nCI2HQ+dmLIma4wshVlsLQA6bI0Hmj/UawXPE065t56oMQykSAR5/phB0oisE\nD7bSZ/aFLPyD4gjPsOgGeuzccLsZp9Q9bQxOaB5bawpG48HElCaudnXiiZbY\nIIy/Qv+oUckUEhGgiIRl8xH7pRXmGz0k4gNUPMprQVw6jYl0Q9JkeSBqnNS3\n2FP+RDvOzL0gn5Q0TrxW/qbTZM6dN4eASzmvU4O+kuPPTqpnV/mWkUMSf0Hf\nA9nCWYJs2MxwmhoLaFOJv6lFEET/0VWn3ODOanDykmDfXZgWM7F02wssuRBf\nNqxa\r\n=H5DL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/density":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/tab-scroller":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a3898ffcf.0_1595983068171_0.035517780537460686","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/tab-bar","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c36da891215b8c51ea5c537c72502d20da891f0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":37,"integrity":"sha512-C6dpV2b0JjfPcM3KRKnEXmTiHm0rn5jlFWjU3lSGrqjM1WXpEFANn6S4HvcZKGbYzwe8yr8FnXbwWfSsbzb9Xw==","signatures":[{"sig":"MEYCIQCBgaps8mJztburcysvP7OiFxOUzfhZWMDYfiBUleDJQwIhAIQ3GxV9sFypbx9FCO1xAd58RXFnHcABC5c0cI+4fuiZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMffCRA9TVsSAnZWagAAbnkP/RAbQDOp93qDG/31oqpY\nST+ZoF1YSgfmDmjbfgOIveLs/kUCRQPHPpg4pOQPEmfoisMkRz7GFtbYha0a\neQfzxeMpCFxcXycKL+eaA+VpNEYEPWXBsZMViizWUATRC/SDl4swjDUlte4+\nnx7ZEXTmzd+at1MlOPqfCZxXj9STaF1u7h7HRMZNouXMF+6y0/9eaEesqlAK\ntbsXAZbBi7aziglLS6VLem6JFKWidpGKFkgxfAQ2ZetkxDtX8ujW/6QbS+V/\nSwTjGxnGTv9eKC8MLRNKb3u6YmWI3A2twVlDZaraAGVzNbVC/jRnzEFL+rKb\n4+29yZ6vaWH4G7LsqMwNWZmlSj/OE9jji4yQnuXgFl0VquVAuQaBC5Tgr43q\nEpht2mVHCFUZcPWiqxRzxwpFtVBRC3H2T8PbOsewoYB/H6QqsOVrwTM9i+z8\nQlzUhxiURANAhR+m1MN4vcMR4B+84paERmWEoKizzi20s/KkCzuGhO4zeBD2\nA466s8r8/iDMjUrTnMAtHaSrxWPbM3RT/aNITSnHy5QWByTq5+8JgLrU4IPQ\nT2YpR5UC0k8mSibA1wlOUac8fjoQbbj4Io7f+6LXfFvDD0LUD0SlmRS+rjOf\neAjH1XngYVuY5Hxs8ScxFZ46BjmfzMdygAoUUzTEtR2OWl/CtgK0LOynfbJ+\npJly\r\n=gouw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/density":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/tab-scroller":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.bc5cc6c96.0_1595983839050_0.0549253121647737","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/tab-bar","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14529dc34947357ab1020bc05a08c129fbcec0b6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.9bdeaf928.0.tgz","fileCount":37,"integrity":"sha512-lCjTzIO//66w2Zn9eZvX1RnYUD1YvNcZOFyW/+F6HeUrOTcwmNh/qAbJZjd6pM4YG8/cArV8V12gEaqQZ1qdkQ==","signatures":[{"sig":"MEUCIQCTx5TpGCEp5iCmlIfc8MbSwZHeiNbKxGrTDyz01SJ2ZAIgURUK5iARP3GrG0x6lSiZ3RZ+f/2EuFjxmvoIW3mPM1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM9GCRA9TVsSAnZWagAA2WsP/1geg3R9flh849tTDkdx\nQ1Z1z/cDbvcMLY5gfjCPVfXDsJgeTIk05SFRKbkVVBCxoh8tm0jRsjDTULgS\n5EASBItrkr47+beOWl/EDGToekxAp1WwysXkl3WQoz7293uOn7Pdafy+L40Y\n2rlpJZ2WuGYeQdqcXpDADfsBR2qXY7Vr6vXDsiujTb7+woZLfsomamFTtA5C\nHkyJZmHhSPWrDuGa7XsbwLFzkB3ZGUC3GKriE2kHghRLI/N0kysRf1HHYzql\ngSf5AQGUv0jigD6f3MwbELrFLHwiWx4/vYlkZkrIOr/UXPbEjgS/kPDpZpQz\nZQvkRor9a/moRnO6eSJ8sxgtRdQe3HYpW8OUR1Bia+Qaye6jvATYkK+rfzXZ\nQAvNJg9SuQFLQ5VdFo+oAJ/uNqQ5mJ4D7oRuIfPiKwZRobf0j2jk1L4L2PdQ\npfw35fxT4ehaGpL29xfylAc5gMR/dS5U2IrBd12Wu3WYLyNxVNa6TOBAx81D\ngH8NR2R3oMIzGqUXUslsQqdo0JHPOBKX5dlG3iauCb3htutEZOBBSpwUemlq\nUyPuLS3l6eEnF+/uTQx1nzImJuwWnykjYrZC/NAfzFB3jltvt2i13r+G+gwG\nT/koAurGrYeLYPnfaObH+yTUy/sMRAtj87Itcq75H6tIPTCJHsoqvIs3qqmM\nuFHT\r\n=VC++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/density":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/tab-scroller":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.9bdeaf928.0_1595985734451_0.25560140246724306","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19b4fc6e06add2314c30c73adc94a494ec660c02","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":37,"integrity":"sha512-DI4ogGxtngZTyyuCt3/w3ZnuLgOZSxsPwIB1JWhVDsByXDYhiASacVMxD3m2q2OqglG9QJTB3FN7j5i36yrhSw==","signatures":[{"sig":"MEUCIDoQm347KIQ1PKNcA7KZ6qqKoSXg9J5utWNh3OKh16gnAiEAy4j+sziOW/jnkWlMbHCyQn9JhCzcwLmVPrk+SN//Crk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKfCRA9TVsSAnZWagAADkYP/AjKXfJduPrUH5tOhEFW\nZoDV4QFumN3C/9MNTOGNzKZWG8Rz/Fqs9Bo2whhxSvyl+R1XaBsp8ytiOFE4\n7dz8/ogeIIBc8juyRev5Ty48ZSGCSYMuXGV/D3uoJ8OtgJgk5F22oIcE+/fE\nWnIOu+pKen5XcFRpqWJMLHNGittWNMamdEhwCdMmYbVXbljKlQ1sTkhqLPTd\nrbynCjauQl/qsTO29j1MrlXHvVsTnayj0pV4veVXuelGWR68U6MQqBhOE4Qr\no9AL4uxNsu2HaLM5JEs4PIkxTBul1PGAz+c7XqacQX54exYzYjpuo2RrFC8W\nhmA9Q+/kZ0Hu504MWguxoB37UXKMbJpBEhDixzMoUutG+z5PVo3b2xWDlGKs\niSrwZvuDZj/rBhEQ8AuzDYOWLwAOyOFWDUkVtmjaVNNMRDlL7zGr/J/rQlWT\ndRREkwHNpfhKHQ9jFKDthGaSRHCNs3744qvJEdHltXzni/JpyvJoq30qt+j6\npet1G97YZCvIUXgPy85tzJlvkJwuVPAiRH2jb1PpRRWk183zG7n+QizSxhQW\nM6Zsfz5NtyEFwzRTYdIkT9LI7h9mxKMWzF3JZBH5rwBIpgYQIhW6VkHVqqQS\n5o6pAelfq/JIkVaMfhykW+gFFEFVV/j5n85VBjr55H/DWrPhaC5vDVTjooA5\nuSXt\r\n=WaAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/density":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/tab-scroller":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fde2c1f9d.0_1595986591381_0.28121091805582754","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"581d03c7cf7771ade939aee37c666e2d88a621b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.6b3876d5d.0.tgz","fileCount":37,"integrity":"sha512-uE6R2hUShnZ6PzFPuCSXJ9ESiHTdfZ5FOMFSSIIv71TF251W4bWYl4EEZ6WlfVixRi2QU/FtIAQakDSu6qBFrw==","signatures":[{"sig":"MEYCIQChRG/pxEHhg1dZrtmN29MKTWNEWD2XaZGe2s+z7+38nwIhAN5o8ZvLduNbWJeT3yyoE+8RF2wkZLFLN8leuE9SJNnB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINN+CRA9TVsSAnZWagAAy5sP/2jhOKu3qqQ6xaNecghW\nBkdXpEB9k4kMA+FbTvVKvcGxttxjzS4DWbtbZXy3mOBWRaF3EcBvMnEcxi+a\nH57A8RZqrPu4HiG09mMXUKR88PmlvTbG/dNQy+vepsBoBtfyq7D6ackQQl6f\n6JvDL75hcorx38BJ5VRPmhe3Blemf21UuaD7u4PhtS8q/F+9l27EaAncRzDb\n8qG5pBHl1VSuzMnbT8DQnQpldFl1wrmgT/c8s18ICDli8RUiW11Sb8FLdXRM\nei3TyycSZOJoJeo2jcZ1yq/1q+dkpXLaYdpVf89t9D0SsXcYslBoVaOixA7a\n+X4JDmsXMxTrgqzV+7OLQ9yLlWGTWirGr5K1kUAaZ6PyU9/1bUSE+FSdfQL9\nVLaRTcOn+9qtae44Olj6dQaTJzGbXJL8PrZY2vmYUHXyUBkSP5vL5x1M4fmp\nxBQ4hKWdd9lQh5vgPG7r8PePcDby1KGf6dapJnxijj9WX+pbUKzkTQSc7X8p\n97IdzNQqQYdqEzYRW/1aHktQWa7Z+dJNtWECxv0mmA8eBOEjFhB42NTghivY\nYw9zuECN+sxdS5h5H/YkB0YLJtvMaYKZZXbhxxGqu1HkXYjDqdn88ZhTsdC1\niuInroUIX2u/S16fSK239wV+UUWniHbJMmjZnsUmN4WighW4A/oqEDoZSHjK\noE4s\r\n=V54t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/density":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/tab-scroller":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.6b3876d5d.0_1595986814170_0.9030587494029436","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/tab-bar","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"752562f2cf357f0b600750fcd3cb30f9836aca8b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.30ce17873.0.tgz","fileCount":37,"integrity":"sha512-FhH6/lxTVy53+cWRkm8AAIjMUEvzeuaejZK8BzQrYfO2m7uz6Lu9gUQVEBJ7wk1oCHCAbuAWTLUArwzSKdB/hQ==","signatures":[{"sig":"MEUCIQC/gzMXTHgujbdd2QJ52yWagCVZuVZ7YuUFJF/xrjL2ZgIgNO2dem8n5emlOQ2cPRy0gIvFysdq8DJIY4U+Y6HleIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7wCRA9TVsSAnZWagAAj/cQAI6YcEouV0bBjvMAR/Ag\n4BkC/oDGK5y6S4I7d6GWL/f7UohCMlpA/nyIc9NAkpGm8B67vU+SxCtpoDC/\nP2zKxmfSKSPzlPy9mkMXp3xofxGEGvMmaxh7lpplDL5PQXMuXg84pRtxZ1tl\nDsZPuhhT4cHP2Bv50s8/DOUlvKJL8vPFpB/zhgAz20WPgEkrqxEJ+MspwdNQ\nUKO5ouTzkK0JntT3zA9+l1CJTihg5OSiXXCrHaEQ08EDe7AGrfjwfpL/7KOm\nGMWmwXYC9ODDd50ZOKkwTn90I9XAZIbggTrBrgOcywMcamU6PhSWSHvVTuKZ\nZZwJCfd5HWNxc2mgK2INLjE+3Sl1LRUSukLCrf7zbQQ8izGyKaUN9LXgUe3l\nefmjB0c8nsfPDtADLxiOCzsK78qPndrI8KS59YbQ3C9cS3VZGcAKm5A4AUU7\n3dTYzITLX6vD7WZL2d73GGpkbC331RbGJ82MDbo8R/vO3H5uDzLeISjHM4eb\nN+bSHMCpQSkBhfHujdmi6OTo41oxBx2L/ehxt/nJ7goiM76BcwZ1IZjEx4l7\n83E/rNFmnqUWDY3b5e8Fm2FbbJRH2yHqYLdzTp/CLIVCxhbpBwZPuZhiVS55\nvz0ZA1V+1qR/fPQCkuQCexRrRKizZHHHIX3rqlieBRUCaZOLa2DaZ71e7MXI\no3s8\r\n=NuqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/density":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/tab-scroller":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.30ce17873.0_1596042991714_0.5897974187274053","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ac09a00750f7b9515811103fe81e41f2ed27d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":37,"integrity":"sha512-xvxT/e1SJv7YzamxT0HlbKTrL4ZF5IV+5i4xppA21P46N+o4UJWw4axOKn/OcFJzSZZBTeMB2yItCN4LLBUCUA==","signatures":[{"sig":"MEYCIQCExLZ2wm3rVaNKrBXjkeJF2V8L9RMhF+pTi8UC4eiKkQIhAJaiXVV7xu1hysqUdH98qjlyWhZWCYNDDHhPwsqvU6mf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb90CRA9TVsSAnZWagAA71gP/2FVlk8YOLLrXjGekd42\nRqBPVFBjL9jeMWqQCuf9Ialajc38FJA0Tp7Hbu3aHUjalMzgP/O+ntuIjai3\nIWARpZD+nW2YFRO3RpiiJxscznIhSOj9Nc1sugjyegvaq+JMnwie0NptiLPg\nY4ss72G3BoC8Gjt4UVXp6nVxRAX7BCqqjXdluzEQQco/7DdvUiq3RCM6QNfz\nZbvqLfLmuxG0QOYHuCUmcG3pUgvRX8tjZMKrE1zOhh1IYYGdNnDrtugAAo6K\nGHiJrayLa5+aAF2BGld/uPsQ4TMOpUX4h6Ewl1bak1hAPk5kew2RzHMf9cjo\nJjZkRIauDAK7mIq/ipgnre1W5mMuv/tv1jReykIFhSIcKD1hVr2vMcQ/3r25\n2EUjCxMk7YLgcRHQ1fB3GEU10Bwc39lWWII84GDRO/o3v/6a13iJJxMqHmcE\nxonhhKXC2zhUxCv8HpNl9lxizHSso2YD6z94y/QtXaHCG9wWeqVj9C1ZD5WV\nFl3On7uNNPtptr8jklgE2y88A98NqSEIzYtFljnSrjxrrDZ76DA1SiC/1MYD\nAPWZLYYms3txd75O+SpnDdNL2UDl/9K0BqxerUs79YT61qvWYTav5kkPZA8b\nKG/Ju/m7UAC5JeBIa8BsX0uEZ1HS2W/sYXHe/0OibCCWCsOSqEen1/S3KrZI\nN4Vi\r\n=ST3J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/density":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/tab-scroller":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f6bb43bf0.0_1596047219838_0.8543055406772573","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/tab-bar","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf07e62d61f52098f6287329b9d577d2cf118c79","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.6af75f6ab.0.tgz","fileCount":37,"integrity":"sha512-RCkjM6sbMWkVh0eS8T0KuI3/mYDymbNIiGws4vszPOQTtjB2LYKonFFXEM3rjrryxGb2udbZwxcBtDdgkossgA==","signatures":[{"sig":"MEUCIQCM2H6GRkaro+od0OjAvO9ze0DcZY4vobjZALBdJ0va8AIgZnfiz6hfBKnScetNGaerXpkXDk+BpFUoMO+MDVlCgvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4rCRA9TVsSAnZWagAAZawP/1OeDipgD0MBNvxOqgj9\nnkcC8LZbB96dC6wzTi667QI3VjVgKEMSw+1l/d7tNMsXX1+y3EnsUuLhjcNg\nviqblfIq9da3raPlm4/QwyHcuP/kApyqirVKliX0KThV7Ao7aXZrrlnwCeRG\ntTHVZEPzYM11Et1Eri7ZZ51qSYVsOu8wRuOTuWTtbCMq6fkFt1w30NSq5kaT\noj91Iribzi1xdXDaogSEU9uBmI/aclpprB5uRTKtNe9yzBd1/c27qErSj0N3\nVHgBLGNEzVWDVnbDCuJe1R0nFnB2r7LKRSq1Mn57MucxDjku67MbMyvelpVR\noXTOcV8nKcLi4DHx2GZEruOYubIAH0qiMFW3Sdmt5epI+CdWlp7jdafC21jm\nQ70QutaIy1lagNfwajnj1CWp7gBYENjVFxK3Zu2inG70NMzJWmu0mMh2tq3L\nW6SXpdEPowm2guDxafMdIkfPxyEAepzVHthRau/TOxx7Zdbl4g8uochHYVAD\nz+zbahHA8dKFsb3CMqeKYPsgaAXmPzydZUkDXynrw2eB2ycdX4P35gyIEeXh\n37J45jp3kdjYyWffd4OCPg2RiFxkW/1GVXXFntKRZvuZBnghIvPWbO3GK0Kq\n/kDHSXdnX15M0oM5m8a+l1QWBpgCjmlXzhYBX/ra/hxYxYa1vmW2797XD1C0\nPPuv\r\n=M+lx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/density":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/tab-scroller":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.6af75f6ab.0_1596067371037_0.9399345006538256","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/tab-bar","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f64ebee876395692c6560e07281cbca2e29154f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.42d7a65aa.0.tgz","fileCount":37,"integrity":"sha512-DTBDUFoRY3YO9iZEiico+4NE/eknKnKmoP5lCjVHWGYPwnECnBaF7xo1uYuxd1bYThZHF7Jr8wUsqEVNqck+lg==","signatures":[{"sig":"MEUCIQCvnUeZOKKqSJkw2pHFa2Y5nKLNp+o/hANM5/26WarEpQIgbazXscWfvcle1E4f6KucfkqO3A147H/1iBQhvBIirAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhBZCRA9TVsSAnZWagAAfzIQAIiO6qgviBt99BBGOeVf\nrVQL+L4c20AjPtjnn07Laskmq86ajhlHg0lbosB3V3V5j8nM0sG9sfvRWlL7\ns4+bssU5NBDrNVnBF7tQeAeeJ4TRTq0UjJTxg+75vXae55svKYmBCP9tuDvc\nleHg0oDps1PGHbV3yEMBQzVVlqm73FqcimbBTalzICR9O0Wb4F501qbmncql\niaRjojTIMmE6VFtsuLHjQ7xRTvLoDlnTKB2I633NDu/8rNFcR3NZjY0aWfrd\nwfjrIlRJY47QY91DOlDZkQZ7CE6GfGydVCmPHZrgINDr+qtl9+5drt9EgU2q\nx9MlApGJlJRFQIAxtPU2+bOriw0j8TN2oOGjXdBdsiYD6iiBRtybh4jbOt5j\n8nz2D6zcjW3LrQ0FnobuAZCVpR3OXRrpuX4I16kDnplsORNsJESbN7bBhcyc\nue2ZrupoXqAfU4snT3ZvJBZGv6b45al9NKAnFM9EsDkrf4t+oa4cYQ0nZ/wu\nUFuPXYdFjiQ5CV/cuDzr4QPTt+IUb8DjeyndS9wSTOq4nhp+0eIUnu23e4jP\n58R3Yvhk7Gf/H3XI/OCx3VLy01FheFlf9IYZQQ+lS5LbpTVRFRaMBQenrT+1\nsmiRMNwG6Ba8gRiwC8bUPMb9COCNhwidWEySB874Y4zhTFGn7VbxgaWWRFIN\nteLR\r\n=4SQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/density":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/tab-scroller":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.42d7a65aa.0_1596067928922_0.55978019844998","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/tab-bar","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c38bc9e5da83e6154bbd491cffb9640131bb304","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.85abdabb7.0.tgz","fileCount":37,"integrity":"sha512-OCnY6GVHs4q188msOGC5LncDDW8/DHYYhSTFSezCt/9WSX4Pxb+W4wLRDwCRTbedCGTn8xFZGGHq8zMce/GDCA==","signatures":[{"sig":"MEUCIQCJvpUQi6XY5WDcLF++JIhsQLBo5SmtLgA15B/URTEXiQIgNifmw2uv9gs1cl0xNZtYEBarc+FovqZqz6HeQhMhM4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFoCRA9TVsSAnZWagAARRsQAIT6zmkFBx41eu9HZdxL\n1mSYkhdBAcQOguhVeuDRk7VrTXEPui/nX2RjXKVVgi4t8yI7ayH5ISwc/02g\nhGdPPxeXkuXOpsZhXP7L8ttF9GD7XVvWIET/10rXtsMhzbxRjOyr4B+U4SQy\nwpdGjXptqSYLEJvIz4900T4IwOAQ3djT8BXYssBFgMYUEWF7SxpkjjEx16Ne\nKHimaUqk+VKkC+H9gPY6G9rSAfSuvaAu8e+JYr86NOmYWl1B6khxp3t1Fd0s\n3jYX9Jx3YciqSJAtpyxVNzDGPoCxDFwc2wnhV1zBdPzUaRPGm/tLF9WI5gkT\nsNfujGaNEMtTEEMrS1N3bTlGrZx2vbx5YzVlxugjaPzVwenxnXik2apadbC6\ncipuYBNDFySPs63AYqvTentwvpDQRz5VB12c2KYs7mSkIIqdDt5hZHUpyCcy\nbGd6fdVqxFZUGa8flEuttgrU8JxagKTQ8E6MetnfLwUC5UmNHqDHzjjGCwAx\nU0uh+W40gmMtJ9VEeTklJWL52fHH5JuOw0lGci0uAgoC42gE01xuTjCBz2OV\nV8MpKqTCgJCgsH1gtGeR/aoNxgS8UNH10LEKtkTHbMCMwt2o2SZh9b00153D\nyKbaTL0I20mkwGnVwgJ3EiconMO4rR6BQEH4aelftcQ+M82kgPrLP3/Gamnx\nrRSh\r\n=AG5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/density":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/tab-scroller":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.85abdabb7.0_1596068199962_0.6450045076992204","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/tab-bar","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82bd609932ae1f32e79f743f140ad20410f73566","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.49fb20ca3.0.tgz","fileCount":37,"integrity":"sha512-P6J5HrNOuWVwaQD3Vk++QD7pyHcqKENdROttKNizEBdB7Ke6WHxnimTTAnq4z8sgZ3ia1x3HIZ3PUsRJUArvqQ==","signatures":[{"sig":"MEUCICpFFHskIjhmhq7gjIRrXCO69BgYV0ZtjXkjabYsM/WCAiEA773I/BV2KNRBr5VuR0LhImbBbFXnW82jg6zBKH2QnYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJgCRA9TVsSAnZWagAAN9IP/3FNXfWJQK78i2SzrXP0\nbIBu6YH7TVdjAivuj+X+LOVuNGE+h/Hgc6qLbkZ79LupAhLgsiZazvz9Mvol\ntc6AubPApziKXnpcFoF0JLKSWrg5KSabWjJXlNJBqCzUH5gmQo2/W71NE+L2\nMUkRPPiRXWbzF0YFqRYpxkwA1dU5X6tbBOCNf84AFcQZbgDPlKddMtai4/6C\n7hrtUYdmF8Vjx4L9lxrYWjkaZ2vfRhL+h/oYjO46IFScWytxegl9bf7OFt5c\n/tunhPNd6I5YnMawsmmNsy+yCC3qghNX/gBVFw+wfn9D5cFN12WmT4uj0WAt\nJzEKWb3waKtAjYl0RZWau28kRKKD51AlwhiRpCqjrkKzynp0QzGymYyc7wZK\njkA2B5iruasuyTpUULafJg5eAbptp7VxrzLu73MNvMdhVgZSzGs9t5G56QaB\n6XAENGF3eDW0ZpUK7hmGb8EtMRCHwRVQS+5raNQ8uyVI3Ho+aYwT39HOjjQl\n2FxWw0m3YTwraWTYil0KlDeEns5YmYZBOpW3By3W6bNpaiSWRLneT8d/M8us\nVyoRfEwd4oYrx0jNTHw3Vw9oa7GjSn6YitTSCXUdQpxGKS+/YVJmGcxw+Kl+\ntdEPeskPk9ogUbH/uOwks48jruFOB+YypYANsTxs/So8IhCHU24whVzw1WEP\nAXsj\r\n=Ftsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/density":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/tab-scroller":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.49fb20ca3.0_1596072543926_0.6455639992525619","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06305700a4f3d1217f1cc4605b18a59720f33f54","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.962d4abbb.0.tgz","fileCount":37,"integrity":"sha512-S8yWcPXL/LUNZtrrkZRShnna5W0N8U6hvedxaIaF+DPWhqThbAz5dmY/k+TbEaV9YEPd5/ucTWSs15Hs5+y5mg==","signatures":[{"sig":"MEUCICLdXj2tUpb4YLYplye5CTZbanfjIwN/Pwn1z/baERs8AiEA6NVTgOLy6bMx5gdKoQi8wvUmdw6bwsELr2slihtj9p4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvE4CRA9TVsSAnZWagAAUj4P/3BpSj4/3WJd4q1Q6591\nSbfSCurW5KCY9nLssBISVvVrvUGY48F5VkW9Ymurq/wjUACuZwLSITXxBOqZ\nh8flyiLfBJOeEzHEaRd45g/vS4/EKchLpvuysKUc2DXivt2eoV16b20KNPVf\nJEQaQ1m44xqJYOS69nao9VMkcrI85bt7EU1/kIb/XWQlceSI8KS3Rr8tFZpW\nr5IjbK8kt06iMqb+prJ1BODWXlyJ2vAnTUGpO5bsLO1UiGNVDH5hcN6httD+\nQG6jJK+HyIDuwW7NiyqXgJXQ5f6u6CxpqjLJioDKJpOodUh6UaT1Qg3YElEl\nEm4BYwETHI29q/dgSEDHmeiK+8spquq3ACWMFFsYfMv7WqjSSUtnSe8TAphP\nSrdxDjGsc72Y8UGbJhpSTcv4pewkftLX38fGG32ElhdxZsOgvV9qBtaMaESd\n3q5HCexjojkclKGi0jzAm8yV1sy+KBacRtka5YGR2KFOmA9al/5gB3IOMXyt\nckOMP4tcEwvCGobAWXb44IfTgJh8DQBCjrKxtnkdkFbYpCcDxaMq9yoyWm1d\nqqcq6mffil0C7P6IOnUB4iZR22YqL5ie2uhVAIJK+HM14fvV+GSvw84ZD9Y3\n+XZytp6CnIsMsKH9UHCb7488Ymx6iIRIpoUxwbSj7+p3ay+RncqG39Y5Ts2y\nTwQF\r\n=GST9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/density":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/tab-scroller":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.962d4abbb.0_1596125495936_0.4123973898430169","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd307af0a376abb5761eff2f8f1c4f95d0a2eb9c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2fcee40cb.0.tgz","fileCount":37,"integrity":"sha512-HkdeH8J8cB7uPnkpjavl6iuy5CPAtoErCuzaoMFT4RylFGzVsTMay8GR0tdJEbkP9DnnqrOfNN9AhVzQt12qZA==","signatures":[{"sig":"MEUCIQDDhk9ausOi6avXrKX1YqQY0wvffjBnXPGGooYcvKWyGAIgJ8qWlQu5aFA1cMrMQ5ehpqCNDm7TdLTHUdmSG4V+XnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHoCRA9TVsSAnZWagAAXr4QAIDZhCtqJ9WIfeuLOeV/\njNK5EBTKkn0WYYPEjymsjvMulD/BPzXWxOaIONeM7OcTwYZb5VU33Y661wJd\n6BIuLzHGf1ojjE70zorrqtljPkuRKRd1VawItuHryEDsvooqcpc86HCuW68q\n1bmBzAhKgbFE0xJ0Z9tErMwlTPSXvLZ4/TT7fvPUvASE/w5Abl3g/CJL6ez4\nnvfx86gN3GMtigMLbvMO+Qt/F3x1uVPU79PRuUeBpxL/D40KV4Vi3zvN1ZLD\nn/+hpJsK9fpnzgzUnb5VXXlVcWG8pxRj1OHo8uDKoKROJIwAV4QMiH7LDq7C\nVX+JXhsKfP3Sy4PFDoHXmq6Ir+PpxMCg81h1xBpBaY8zeqp4ykINCheVwCQB\nrKIuUydwRaF/EeWN7YS3DsYLIUWlBf63d35rHAKZWGt84iFhOyabGTzd5Hxs\nfinF6ZN9nMG3Th4+70A/psWVDpWgmHugvw77lJMD74Yo+LbOW13l6MjF5oBc\nztxl8vUgn7OHzrD8X0NwFBgdvxJBDroY3pyObhmJi1viIrHnSfqQTaC/if5d\nRnkeNloE4Zz4/cRjPxR1AR7DQAo0I3+lMmziaOd/HXicvEFuZIZVAPzfqQ6H\nbAFykM8PAvRIGl60ruwrIyhEF3TQNVzmINzoYARXO2EiYhdE4jmdxsgZvEav\nRuM4\r\n=GGKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/density":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/tab-scroller":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2fcee40cb.0_1596129767933_0.46786742880367016","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d3a4a170156c23d3b7fce009f4db2b22f255117","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.bd5987f5a.0.tgz","fileCount":37,"integrity":"sha512-nGHroDJi3cEH9adbPYm3gfsswyTv3yZsdihhY01Y5YXxn84Ez842mYUoDQIxG3ettT98PQdW5XvESaGiISYONQ==","signatures":[{"sig":"MEUCIQDU8Z4ZyV0fU3Q9KugiwitirldTmGjVs7nOCsaOoXyeZQIgPDSm/lmee3uaGbbZtniyPSbOcHfeoq/+ni9PkRqnRnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwe9CRA9TVsSAnZWagAAWwEQAJISiZbGo8LfGjCsB+Lg\ngnzu7TOeYXEIvkzrCeGrpbWKxoX9fP+2PCd5BXLnxucKdkSUgU4/9nMFvTFs\n87xZMxZ6GPCyKGaDXfpmS0WJ2NtPLaMco1uh5F/cBApmpNfSS6wepJEJzyBc\naFx6xoiJhQ6Cyj5yE+mZu+kkKh0YX0PcHb2Qg8veJJSlTQoMdJpk/2FJdx/g\nPNY9lclAoViwKEwodPGsIY0I7UcxOUmM76zgh7qbfhW/eAIEWjeK366/UMRH\nTOfCism6qqOsYv0719I0wRrknkenJ4F3gCV8+m82DlUA7MNiMZXhK3qDbJH2\novu4FPNV9P9CHoYYah9znTbaacJ2KzZ3fXw1/VGFkhd71nnWHJ7O4Jb/9RBS\nrBarxvTm/Dsz5SsHo29Fsu/8VuFLFtxRU1zu/us0vk0XblxjBoeFu+iv2OdK\nBPK/t//aQMQ9ZgqTyt1TNGoce7zhOIU0yVEpNjhlBa4R5h/7AhkQxBRcLJT4\n8CKpaArrEEEH0neXPrlzPv5229qlYhpMMi53vTfinG8NKkHen/gCfuTTJPJO\nD6Xr34ObUSR5e7bopPXmrvJWguOdEUHYQydcEUyLpb05YYhU4CcUxQkwu7R+\nl5cNu9anGj8cpn27lWgGoNvs5aJTFy569ZeIpayqxXjVKZOHF4WFV4BtIvtD\nuMWk\r\n=v9QU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/density":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/tab-scroller":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.bd5987f5a.0_1596131260660_0.85810170169957","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bef5fca0ea1b1895e199061fd585d0c687271405","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.005e86a9b.0.tgz","fileCount":37,"integrity":"sha512-a6cP2lHWaa9/IY6avu3A354Flte2E/B4KLy8vxL8IemAIGA/47UkjPHWWBfAUYOaq4HA9bcH8ytmGlqbkDR1/g==","signatures":[{"sig":"MEUCIGO0/sEikebLk72eUjUU0J244wZmBH7UBABUA6usAGgaAiEAsqxgijl0mnhRtQ2l5QexExO+ZiT+kdSlxHU67SMcAbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwr8CRA9TVsSAnZWagAANqAP/2COcFMDgfNaR4XdWOIB\nY6Wd5OZdI8U59OMUqOSwcpWOYAa00lWn3gqyxcxiLi8ZYDBmB1+AwH0uuPT9\nUSBzzFIrEt21nAplD9uEdpxn7UjbFNFAp8XxZGvpCm1JDP/EUgdW0CqFG13g\nzXu2O/2SldXqGoZ+LqDBa3ndi1DuUbEGbpZ5XQ+NBtDZ5fGSgW3RqMekmfEJ\nw8YdakrOREEfQae3RcY2y5eUEkUCEzd21mbFpM0269JjCXLm9mVjozV7x75d\nhofluA96zN7yz+OVXYiuyp8pyiM4tLY6POzB2lWIgQgpm/fie+uDwWjc2jGB\ng/XdvblClyUfaKhmWrlHXc3IinJ3H3FNt25wUhYdrlmYosyhfo+yEIhmcZWs\nHLif8Ni6Zmo6kkrymSToMyl0LmkN2GIcqZXC4kPwmY9kC9ODOOwU2hBFp09V\nftFIL7qF4rn1DKoWS2MTNLWJ1J/My/VI+9UYll6pyXl9vhL3KJ8Z+Pw/1+04\nKn4lwOCL5rzd2lcdWvBaUpkiIuNCMgm0VfhwRD6XROKz0ZJDOnGxBi7/zCWH\n4Wm77OroJhFdOeu5CzS5d6VETiFjzSk7z8ETVZycrRbK/v6LBQDKLSMPihbA\nU2ecv3PBVwmYJo8EY3w3g/WTRbnEjxnHuNnrTRHWk2+J4dIDa8cjQJw5ny5z\nbONr\r\n=UOKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/density":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/tab-scroller":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.005e86a9b.0_1596132092287_0.32984109475670587","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8e473dc363acd84ffc89da6b7269206a3c176d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e309c7c68.0.tgz","fileCount":37,"integrity":"sha512-saolzQ++PHBGJx67FUkzrjwS/zp3fmNmWugUZGDYxUwGsY+6LsbbpzALC8WR0EgAyej8Xh/Inud1rGOqRB0osg==","signatures":[{"sig":"MEYCIQDPF8QuJJN/NJAqq9tvAbj9phZmntPhKvBcQsOMvu0lwQIhANWOmVdAMQxAQbjZQRNNoTmDtYj+VrtG+1UK0OaCyIVM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw0ECRA9TVsSAnZWagAAfuUP/RQt89KD2Om/KGSmqZBn\nF17OTEm2cBvh6pLMtVJRKGZh8lD9HgC9iDupKU0iLBcr2q9j9uqISSMjB6V0\n+/wbltwRdwAy4ZCHv8kUitTP5HHILkNKXugLyTlvWkg5TFSOrZDDx/KA88eQ\n7gGvTc9TDWz9TPJ49smMRQYE6Jq1N5QJ7L20sooFZggFLBAWETbtlCbxWyqj\nLEWRT2vDA7Veselzb6zfPpHBB+K/8DfQMIoA6EbS/FpqgMpLCYrGYGYc3Dcx\ncPLdsBeRyt6Bso8Tw6qURLQt6uTorevXe7QWZp2yueKFeJa33PDYaKMC129m\nUaFYNXblqOgvSzvp1N0zwp1Ep/011PWYCyOxRpICx4i3cxAlpzOeqlb8QOCI\n8G46rS6RBlcHvDDuRR4kfhtp0YI/vc7+39LPoZFrXIvxbJpDStNTGJ+8jzDh\nhIDZTqI6heC/4mHX9tjASfqQBdd9UVw/1R0AWGsk2jOxTxd4UiQDKyZCHXbb\n+ruMNB+IkawWR1xrl+H+/ELIteK8qDXrHs+jDEBxaRkMzq+NjqVgKZ72kTSh\nGQP38s2LTMXVR9mKplQDCOopIx2y2PTwStEVZdTfFX+GpBPhPcI4s/iXbrwU\nFjpkVkT0nJ6LfdRJ4JZtaPRoxkvaZ7V43HjR1qLci9ANnbyPKZhd7stcbKzn\nrfIf\r\n=v6ct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/density":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/tab-scroller":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e309c7c68.0_1596132612356_0.544905960428058","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/tab-bar","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fe7c412a23aedc43fbad073c6bfc1b307a3e4da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.935a51cc0.0.tgz","fileCount":37,"integrity":"sha512-yN4jrLmZtpSlwqJSdgsMzvTsShsjTEZZB4QG5XMM75+Q6o7fzpO5/RUlqdt6ZlaIzhaqFr0ExTnL45ajbI/ZfA==","signatures":[{"sig":"MEQCIDC+LvlQnE9dAHdGMqyB+WGH3tIr0p8B/ykgUhsnEMFcAiAGW8lzT+Naudj2uIlbnTsoyaekEifDEgXw+T6THmkAog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+6CRA9TVsSAnZWagAAhGAP/RZq7X6+xnUtCRlM1yZw\nVIp4cYd03CQv3WgYqLt0W5YVV+ar/SVrHpQv4izuFWD6u6ncmpJt2lkGBKfZ\nh1OpXt0WjDK0q681/lu3KTFPc+GAjNjLq/8C+xT5ZmJhm37DA6fyGfB4UL8B\nLgIMMM1KmXqHnqRmJ27E+NrjMBumfniSrpIV0gsd82zJbyVU25I6pdxQzZkd\n6r2krA+uqH9J40AcPPn13ZL11cpdP1qyXMhB/DykZepXCzgaLczasCBw0P2c\nprJw5ah+knwDTa/1lIwxBLhfppqOoawkLIT0bG+DsnR2GMLrlv0K+ER0HYBA\nOXmFM3Yy7ZhfQCRIfoCNILymxpaiF/badQdFCgzyM40rVf8uE1tc7ORxTkiu\ntSZwh2jtreBwBsMdij17m2XIoja0WrB7Kf3+DCBe+W6znmbbH5AEAhdJKpGd\nIfbUi0zZOHKVlrfURxKwTjzgL4GWBhMvkT1dDS9Rod1xTVCeGRseiA/Klgs8\nd41vtxjv51SdixnfU1qdVjjC8o4DM7ZeSU0xdmp1Hf1P9EkX+jexzM5RNIlV\n4uLsLJCXFgAfk8IbKr7cs38NYj3hE9h3Fo1eAZUk0b5t7+k/4bUirJmzuGyu\nz3eFTWDqCwdjY0KIEwxAr48LoDXtGi3UazFxj9qSgLtWcp9Ueplo107OGgDm\njZ+l\r\n=R6kS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/density":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/tab-scroller":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.935a51cc0.0_1596133306261_0.27360602575801796","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab4bd947b760552899f08c42c33b90b1edacefae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.74839da7b.0.tgz","fileCount":37,"integrity":"sha512-mtHCBKjuaTynBxcssSEYkInJJm/ipxdXmInHeRVy76k4pJgz/z9y8ph164l/PC+2qWQ6pNttcpXojP4o7moNMw==","signatures":[{"sig":"MEUCIAW1munSDzwAMP9LPKfHmC9NzadlzmlQkokNHotttargAiEAp8pp8LVWCUO4FGPN3iw61w9XL40mdM7ujSbqHrJ/Aec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxJXCRA9TVsSAnZWagAA45YP/2bAeHoCmdy5ZxssnwAv\nqHF/kYcRdlU27PT52O3nQ0rUEzhjLovWHX6yzC83156Xk6FLHuO3yjzgO749\nQOKNs7oBRxtVob8EBhojE0EH17ecnufkVzmjFUVWuk6dpEzJwckh+ITYJaNX\nJLQiX3g4SdL2PStbztE9TgZj9Fi6ooaPx2iK26imLm3NmJXy4DBcrRMp13O1\nBEhjfmNgRL4L8oHr/W706V5vaOIMtYFOwmmhlsIk8QhVfh0Gf/fr+8unhA3Q\nYHeSQsHTErRqqER5DXcH8BytkXfZ5bS0YyaOiq2JubSiZYGtViWLFUnVxa6l\nmMQGvg8En6zmS6rmXc1ZkZEAkZIQWWQlOkwZwd0wWtIW51gvJCT7qeESG8Dj\nOdJUkoVSHZiFPgsy/RaGZre7wr4MZIiEZXYu6gS6hyXxIMEqHmc5qJo0VotJ\n8lcMSswcPSjC4xlk6colejq8FxCLT8aH2rQBGyXVQNorqT7L7gk9Mt8r3DZv\nS4DejpdL7hl9/25nNLpsnOqzfWDWM3Se0C5RrLALxHHALaBwcb1dnhu1/Tz+\nSuVpXrx/8T+rWqLek+JocoaltihMcFkERCjM4Xqh9z8FmQrCU8VROvSqLTUH\nGg2h8mkl3KoCsZzo0Xz+H8QdQEOa7PGdnpwDrD7SIknLzaxvGfnLpkpteKpR\nz0k7\r\n=Sj6o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/density":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/tab-scroller":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.74839da7b.0_1596133974963_0.08641126567176682","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d856c1a4014ba09c898084c6704d3f60bab6494","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f041a48c9.0.tgz","fileCount":37,"integrity":"sha512-XDomJ8jEbHNmVKecntq1B6O247IvzZcxwfDFjcMs11Oj+6GJBhPW05IdfvkFZL9RPEhtTgYCoOku2y5AmV6ccg==","signatures":[{"sig":"MEUCIQCt+OSmwcGlYk9jPsEcIYuI2sCHVo6zsbxIQ5wUBpkxYgIgcWgOr4RYyiGwd6EoNYdQJOXWaKQzeVQudQBaS8VZfns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1E5CRA9TVsSAnZWagAAWpUP/inhKtzxv6mF77JS756n\n8xCBYubUCgHQhbHVGW6pr89Bc/qO+MNOX6HtfPjH2fIFXv2TlmsppfP74QmP\n+flkrE9wGpL7oNMTsJ+fbEHyN0u9SujFnHjKFg5wXKf0ReYZNlgZkXMvQZGp\nbWZcKxVhWg3vZSJdZbupt3QItfO25ZuXzh5yK35NkKzpt6owk5fvfMcpd8JD\nBooFKsjq4GgyyiqMm4Xf6RR1j0CXGBq3AvgKkz+CzaSGKRCYKSY3aMTv3HD0\nxbjddHeZoZn0erftbthpU/Do4yKzA9R5CcgOMNpD8dmct45r9RTAjGfdcomJ\nfxXK9kUqW1uzUbH7SJep/o9aoIgL2M5RIVxH1YwLV9puR/5kh+QQoKsM1T0H\nJEyq5vfHuyXVUVTwoYO1fgxPfNimNnzdWZkCFtxQUqkexk6An1DdEfpbNbp9\nQ1e5IwjB7PxrTzXu0qOtoEaX92sMRbZJFWTHM3XVoUdqNBMjL8d9DGgcAFnY\nHUQYG5FHUOzpMqaDSZmE93aFiIhLABKtPIgsWX14BhzDp3OWF6lAVQvtRzyK\nRrLUFUa1am/P+T4rlNqaNvlAOTUJBJHWK5hK4QU26DE07mUuuaXOrNVERysV\nOua4uSkpwts9rHcddtlRW47wSmVswImoernsOEq2C6KMgaBsL+NnfOnC/gtT\nDDKR\r\n=3clK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/density":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/tab-scroller":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f041a48c9.0_1596150072431_0.5218561546564517","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edb459ddf34951be950b3fd16476f7983375c900","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fbb1381e1.0.tgz","fileCount":37,"integrity":"sha512-rY0fEZNV+pVhf3Qg0aCPNb6xIAn1wI2cN34tWN+wJGC9gTcQpwj1GjYxEgkTK2riXrrHlrWcI2O6/2lK/CpJKw==","signatures":[{"sig":"MEYCIQDCPTB2L/ZwKTDNl4PKzOEDDqqazWJ2lQCBnm/Gw1BSxAIhAIIqwrQtaRih1rKBBd0cXrSh5ymMUXs0wQlgI5EAivvd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD4VCRA9TVsSAnZWagAAbRcP/iXwDVPdeLEA8zJ/VKrW\nFLpozImATBl3uCVxgA+VwO3gcEbqGdb77lwwNKz8iPwsZggx0JloMpjxewSv\neo7ZYVAt0XJnIuNy6Wommcq4jbGIzoD3ivrYBLEPJD/eVGP4MPGUT4QuNRba\nv3vGAkxd8eNtSa/iTOikan0HVn5DsNOc/2G1qlp0ePN2vMi9m6fe8F3zWBDg\nxUVCkOva+rEAwk/2ETdzm46NzCSiaB+NT5uUJmQYZ3KxwyoCOBxwjTaHoJO0\nfot7emD/GklZDUVk5oMbM1W+8gZxUhC0a5INZE8kG5QqTrQlIE5I6BpS+kna\nugaBd4sC+68aLHBdRBzMFH2DGyrLSUwC6RgpVRilBmTm8fFzC76Yh+aiEkq3\nocVS3gfhJZuLDcHIaPEMQaoeF62q59lRZ9J3ZmoZta3yy9wo1FjdOGTJs3I7\niZwCzKULt86OGYCtk5XA7Dk0N12ZlbX5pmWjmlXTnS81BLA2O+9ShxhkcGqa\nkGiNMfABaI60EiFjGPz75pQejcyEsZLjgphobYPzQxbzVFvcFw7alNPe5H7q\ndQrDa5piQ43dNXE5zw8AtGVLv2Yub2Kv/dANOaEmIIouv6PN687GmVgA8EG7\nPZtlDVgWXroSKDs1Gvr/TTDVk7N4fbgJyknZi65kd6tqxu54krH0DxYeMUmw\no3GZ\r\n=wBLr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/density":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/tab-scroller":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fbb1381e1.0_1596210708746_0.015056592776530042","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/tab-bar","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"531e6714aac0f309e587bd961e6b5d4154ba921a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.7f61d5785.0.tgz","fileCount":37,"integrity":"sha512-GgxkPyV1zgTiQ5+gq3p9EKYDoDZlfQ4ufL0dTSTRsE4w/s7GZT+pIXBox0RGoiYuATFiVfzkE8+c6rdSgw7z2g==","signatures":[{"sig":"MEUCIQD1HHz9hHIV91W9ZSfQ8QnzS2ey9VEHsgO8GaHs5DvXowIgEuDavRSzp/zHw4BOvhFInOuNzsxf1YIL9r28pHzRis8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFPGCRA9TVsSAnZWagAAidsP/3r0JWG1diMn7kl40KdP\nDCX9vgzdD0PUO7cPHB7Lz76Mp9/8GFuoQ4cJ9K9P8V7oE22p5oKvbLbHBJ0v\nqgoTohn1/FcapeIRLL1y3jQjIPMeYu9Z606yE6rtgZ8MbQotQRfQDHuZt5eK\nOexTvOk6AXVvIlxTM20wFRnlqxYOGU6Z6T2Tg4BEWGVY1ws9Rfppy19aomVO\nS4WV2szGzqL7fOHWmMFhFbmqYk+cJaYJn3BQe1G4sInJZ36x/O4x933O6188\n0+htt+AIHfjErApQi9GulFtGNmSL9nmcPBHZOIPUMZWf1a4H7qX5Fts9mNcB\n8uGeceKVjx69SkO2G3U/mPo9YXFF8/YhVLxKP7cghcOrXjaDRi/ugmyYvNQn\nF/3zabK+WSGjbLAcQ0wPt1T43VWGlnwfhVf+kaTJwTfjQS8AmsvERLEG78xB\nMufkZjhB3x0Ji9GKIgft+u4CRZpidUjIumndTk74nHRzFVTIKAc0G9Kq8g+p\nn0/1dHrAz4zdqUS00lhAUMcDP8/9gyOVkQRyv/7/i3Fl2HIpHGeHohmS8nsD\nqQ3IzIptdeMoHDm0XDfVjkygxDkcQQDVvLQOa7UVl9Kt+GNVywM41FsN/SWL\ngpVbF6IshDHNgbxup2Hak+B7Zmy2wej/1YrFILvdpv8I07MKtrrgs6JgFANH\nJoiN\r\n=Liqp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/density":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/tab-scroller":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.7f61d5785.0_1596216261684_0.5881332067054501","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b82c38b4051800ca74bde0f014430740faeda29","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e1bc84d10.0.tgz","fileCount":37,"integrity":"sha512-3NSZbaXQfkaI0TAeEz8Ox13f2mHwnbmf+lzsva2T61YuXBX+sw9w1I0RP3giM6Qi5ZwF24Ju/SH7SEpxnDSPPA==","signatures":[{"sig":"MEYCIQDt4r+z+WvXSxvgvuCBnD1Wij1APd3OwHv2JQXizFGPZgIhAOb6qP0bfhwHogjJvH82uUAp4QMjwLSV8ebFwAO2H7d9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7aCRA9TVsSAnZWagAAo9AP/ic7rAo2juvItuokE7d5\nk7cIjSVc5NMAEpoRSvUmKjnW1H3lfKmu3mOSA8Raf9sQTkcAI+PrVGBkc5Cx\naxsYuLemhi7LQ/vo9IYdMM9egNivMbCSAYUdKqI6h6kjCr7Nw+5EjDMtrQU3\nvw9huZrjD3Jjo1CHNclf0ZJgfvOrLh37ZBmXZpa5NyiNJSzyXXdimY5siOG8\nW7YiNDDjd30lSABXF8uvfeUX/yuxnDWDgv6Hyrdnf3ohF7fPohLOUwx80aCk\n+QKhfuHFtr05qgNZwAEsObBUAjEuyA535KlQloUBOENOqMXn0BbJobYMVJWU\nripvtazJH4rv5AtUDiIoraMU4iXWjV5NbeoRrPI7zkw0J30sYWdDxPPrWpyG\nNE19+Wy2BRfrGj6a9y5h5+WmeSMCLl4lY8Z0Q36qgmjxpapHw6H0JSK12jf0\n0FF06zq87crO6q1xvSRDsBrPTOfvKnyDyJ2VbbBj1LuNxD8YbFlAhaxOUskd\n2Vh41rrbSGmEz+44sUuhp1uUTcn3WPF8wuVOj3CXkwr23w9XRg3G4ybwC14C\nbifrgGTr3RHL+SdZmxh5XsTyQrgSxeTx7/A3Fh7ISyoRALSKZMFt4/qD3fnk\n2Mt+yre2GIjYe7sbO/W3ifNHJCl0xRsG86RHxWbPNxEFDNI86JRffIU7N7vR\n2fhe\r\n=Fkno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/density":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/tab-scroller":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e1bc84d10.0_1596477146378_0.5612620000546107","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/tab-bar","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"538f847e62216def28401047b90d799943d01a98","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.096a7a066.0.tgz","fileCount":37,"integrity":"sha512-lq9HZECqoOfXqXMhFYCrNImKZN8WHjf+fixKMHTIIm/1mG3rAggRgwkAIqDJj6Ysddn/UTsABwXtiv1SMwrH+A==","signatures":[{"sig":"MEUCIQDoExPY2sWTCiUy4ahdCWcTRo0OosCnZaZMlGPF7qwgrgIgGKoLfeT9puw+7yB+LYTgy5sjQq5eVL/6dAN5Zm+IwPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+XCRA9TVsSAnZWagAA37EQAJS+jeZX95UNOqneYdi9\nGilj1YCaX/GHLxtt6x4L2Hy/VI86lyzLSzIrOwJaKycoSajmTTucI6UkHsL/\nOwz8Bmeq5uB9gK/cuvgJdQmzL/ChsmITDxxyUtA6f86FyoVZVoIcedbpPc8O\nbZiNERGtnlpnwi6SBRnba49MjwDhPScm6/J6eYNevTcLLroDvPOpZxwx2PEX\nB3l/UZ71ZN6eqzUMRGycch4kPHCjaQP4Z+mcgVCDevt0IXcboK5sYkTauCib\niCXEeaUbbwK4y82Uqczdszaw/Zt7FdV2MooStau0sSmnhFe/MuYPJNFqfBju\nLgE+IQqJ0ndt8IytYK0m6tHNKvDvaGQ3f6gh73Dtu3yuYqnxxgFF/CDtCKIX\nWAz+XkRUjZEGNI6qIDQEyPQ7ud/zYAKu0UVVy48A+HPJSgHb0tc+MSNA9IYZ\nhdO4O4kC8FdrPC8bVR/wWRU7sTyPz+Psl0lCMZ2043h48P+HZO14yEfDpNmo\nggnw9t8q15m5cgbZ5A/ctidN8+/0jQIBwx8nZ+ctEApvSfu/UqWHSl3Ppwc9\nI5ODkVB4+v815k573j46K1OktSxqdYLYsQg+uS+k3JQz2B11Sg2wwuLMiqlh\nYIW5Gn6Houote5ctXrC3PmTjl+uyyS2nV9VS0HRGE0YPqWPVi0ZlQFaL5a2h\nel64\r\n=J7I2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/density":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/tab-scroller":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.096a7a066.0_1596477335352_0.3584060090868779","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2596052f336d552be6106e73797e1d40f6208b02","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":37,"integrity":"sha512-0l397QK63BAmylvW4VGemYH4LdPJmTRUVe8niCuoQU7+hAJlgMyYnpzD5CE1IpP52W0HFw0vFourOhejPjAGVQ==","signatures":[{"sig":"MEQCICOzYQ3tHIoavtgoE2AdSwcALKO8Hav9stM7vvF2apnjAiB4SZy0KjhoZh7dl+MlxDQoANSNZ8X6plILNpSc5FpWHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+2CRA9TVsSAnZWagAAG1IQAKS8XdcfcTSlD52G+xq0\nw71gZfnYatnmyimjyQxj6GbW3IRu6gPBDLwMnpxWUfys3kwE4OfTUiBc1qwp\nOkyKYXkstaqSFzusg7gMxOMQ5qkrgmoD2M3u22QeMbNe+szkWO5R4NUPbcuH\nyLafaW+hmAOUxfgRCnGaw9GMuGaRHn7E/IGNCA1hKVJ4cxOrBrg+Js0WYQUX\nbko0VZjKAMIbEvFEEVxhjDtPRx6M5FfQkhPOQX6Et2vPr4Wb8Z9KzJCWIqGQ\n8YcLkYLcBhT6r6xJeAjgE8da1N+nsfIEgtr9NZM2eW+MMLc19C+HKgLmb+h+\noRAhxvI4bXdtm8sLQaR/+/U5XdFc2g9QQo1u57x3XPdwzT7uSJo8d/RRicje\nRQz3NqUAzfNgqHfHyiPcY6+xb0W8xYAJflhjstnRbc9aaa2jfi64sJECYwLR\n3aq8Ng21WTqhoiQB17x941cro8+JibUTQ+E0HNYzcMFoUBkN6zIvVU0EURoR\ntrok46KdP8/VId1lvuD1dfC3B032Du6rdlCu5xeSkNsgO/15yREST7/yMhbD\n1ho8hQj1MbSSNzLB7QI8f5Z1hhOz0Qf8owJ8eN/5ja8rGBDtQ7VBKh/bUR7x\nzYmsLfi0G2PvYyd9ihIchW9LRqxrR7SPy1+PVUMk1hi7LyFHmuch2wzHNchU\nOTwC\r\n=yk3/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/density":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/tab-scroller":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.aa3a3e5a4.0_1596477365695_0.8728463729102018","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65c5202afd1f46a461b924785050bc96f2376067","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5903d39af.0.tgz","fileCount":37,"integrity":"sha512-Q+V58xs/RxVm+pG9M7suTExpbWrWD7YkpIzHmbQOGyebrTA+jFYRcConqYLJv1N+fmpiI8VISxQnTnU3iZjIYg==","signatures":[{"sig":"MEYCIQDrK2qByzyBU466dRv+fbwO42dNxglLTNADEc+dCUO6pgIhAOx5qz2gExMxdtO7AsuQkXuzQxDQJc97pfH3B8iuSMuR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE/JCRA9TVsSAnZWagAAVaUP/3tACt1RtjM2xm9ZKBal\nZptCiskVnTK1SbxZoQ2npscxpY6HmbEfnm5AMlroW+pSoSX9hqSixJzQ9odt\nOsZwQeKshrkvVijJ0HXrbnNqtZelVQI57qEojTJoFp4kdXVNOOXPKGl/Uu+O\nm6q/p5W2vR8z0hP/vKbUwX7qhbckAYaYca9IZIVFLnzvq9Bc07oA7HK6YzWr\n93DukjAT9ksfQXRpc2SwM4kWksdjrE4n59dqDRuAsD2GxzYXSZopw639kJfS\nYqZ8gGwvYfGkTnuEyj7xrWT4q/y1T6TVEKERK+/7osvao8MffqmWtGay9Yaw\nRNm5Gj5A/eoXPmq88IUI3rOwy4Xw9tjTFwx8Qs1UF8bHUHLXASaQmlXhWS0A\n/bmRXVWFQldRKUd/XRgw+9QcfL9xmmxPJYBvSjzgW+ii4E4aAaPsGzhin+aS\nhxDOn6M6Lh6CQ1b4I83yp29isjZuGUc0fi1/vGBGUs5WVoX794cnb7cqNBiU\nO+zONzle92pbbsVB5q4gk6r6VQD6ZKDmu/hvVUMlqOBihoVRkLXwu4KZcwS8\nW0O9yDZ75VlHKkHQqPJ1LvC5EYMt8ATDE/sflkiUSzsCKX84maYNqDQf43+f\n7GQ+fi8Rxql5qOTsIh0eBteWGR09/9fDnWJ/w731V9n4Li7wm0NUynhSCxec\nonT0\r\n=HYvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/density":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/tab-scroller":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5903d39af.0_1596477384731_0.6846754873238654","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/tab-bar","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77bfa50b0ad532d7c0e17411e42d0ab2397a09e4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.72258f898.0.tgz","fileCount":37,"integrity":"sha512-RJsOsoNCxs5FovUhD1XDb10+GPr2dbh+rC8CbOMVprSIM8FeQDlqJSVvzq9BIXtEGltN1SPhZE4a0GpLpgCnqg==","signatures":[{"sig":"MEUCIFlXxdJdR16nevhE25OAR52/p3LXQ3fHnBhc1PFVIwtvAiEAsQ0tA+qIEVi/NRQzyzpZvAY1CRdCTItjWNQUeM1Tu+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLd+CRA9TVsSAnZWagAAUVsP/1yVpPzR9clUl0BpbegA\n8e9a63zQHJEpTk7+abKC+v81NHymWCAADdQokoRS4aE10Nj9vC0PPQzrETXe\nM0sxn25WK4FRPovrpWqPzBus0QdTsoseZm7J1n/to/Nwn3I571oUnfvhYzRO\nSSIt5phwxslQUUkarDhWx5dditwvZOJrqxor7V4nIeTMzNrYLcV2ZgxuG24p\nMk7BbBv6E35V42aBN3SMZ1R3Fg76/BeWgj/fS24+CxFBDqO+25qoJpDW9b2t\nAcpwpheiwabMvmlT3vTQQbw+DqPNkk+O0vj6w1vCls7j8ibXMUS0iqJkv1Ew\ngyC83rZBtApRr/QvMzbovZV+hJwYTOEl3ZlJTHoMB+gG/ZvUrw5H3ZzeBDZn\nENHCbz3RocMI1caCK2HBDaeZkaVgBvDD2B8eRY9eWj6B2VEHakX2pcbVF15L\nUROnczPKJ7CVn7zGMA/VQH87pO7QXJs2Hy9hXeto8pHqrU+qFoFqtrl6IKJ8\nT9qZvA8aC06ADHq3antrdPCErI3AmsItJmgeLU4H8MRky7x7Qc/anEa2Mik+\nlxNSvQt/qQV5s5pvYUWJwLbsfgCUVA1NecBPXxp4bOJrFWvuDXxOmNAAo7yF\nMc44TBYW2EMv8AA0Z9PA8PJFFqgnzmJMQXOmvv7ftKG23FIRpW0s/CVpGLv/\nTUGo\r\n=4HKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/density":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/tab-scroller":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.72258f898.0_1596503933528_0.7506474545954536","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94bbb5f9c03e86035631dd57ed6add423e18339c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.1b44b43c8.0.tgz","fileCount":37,"integrity":"sha512-KGXU7mmVJmEI8Z3ElEaxlaGeRYsIN6KyFD7YW+fhKiaS3pAIzKJNIRVEkLyFLYCn81a0SGnp5DtMXBMGd+H6rg==","signatures":[{"sig":"MEQCIDQZ8v84THaxIMBrhK18T41lLe78q5gPHBu6vGLNOW4+AiAEcZskM5Rg0V3TQ7eTAvKtMj+4k23guR2ON/E7iEMBGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZHACRA9TVsSAnZWagAAJeUQAJZ4Zz28bTINN+LYPt+E\nlzCWycHaJqYXq+BmvZELaslwL/Gt+1x0zc4otOSV97GzSxB3hzbANNagQdma\noVsBkJzDzWjkAkpIMeKfkWExs/qsZ6zizVIoW4vigbUf7QTTleNOgXffrQsI\nGXzdrHFTQJUKHhH3tnJlmNnx9g/M77s3C6Rlw4S8aSxw5klCrrCki5uMPa4f\n84qZ147ifbe32PdDqsUa9z8ZK4BgMH40uv0Uz8EAaDdQR97p4aKoM6qfdBqn\nevpeDhs7ulFY9n+1QyWzTzuEJwhge2ZCNS7Un2nEjRMfA744FiW3sOX+I1IM\nSTUAzG+sNEQwHMMrafscBoz/5hZAbmxDcfsDnhqS0OwfeTZDChkQ95Pbxuwd\nLhDBUGztDBDVKVhGYXy+QxcVrqEIQ+Erxmf4NxZPvM2s1/v/xLtcUjmtghbV\nfVjtJ2Af1anupYQWK+aL/ZL/AyZGneejf7sd6di5PKoIMN+N3Qngs/X4BNk1\nHp7MUN4HPn6JPOxJZ0pdVVoheTWBcEiITGZjVF7jMe2Hu7bHAAC4RTnTlgFC\nvhDkpU45na3LZu9SuxIK6HCDRA4mMEtmYgS0QPWMm8zrDja1Y8Ugp8Ej/D0r\np7EH/Nm8x28fNc06d2vu5aqXbmVUswFYTvWWTtOOYPiFvMc4KoA5fhn+umFP\nnE3s\r\n=5uvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/density":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/tab-scroller":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.1b44b43c8.0_1596559808262_0.4910308045106093","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"997abb4ec4cf2fa6970886b7df0854c61473d4ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":37,"integrity":"sha512-EXVOImHeQIX8F8sJH/Da89fU7N1LgaUUiO77sLdGVp3iumnDc46TkMl+pbadAF0nM8SAdqHRgyrP3uAu+hiO6Q==","signatures":[{"sig":"MEQCIA0B+IrzkBE65dRc6qvZ1YTWdrcNudoQT9mw/ZVrZ+JPAiBboQLP3aB6l5EzGcZE0Sf225RFK6hxJL+1Fqr5kjr9Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcRGCRA9TVsSAnZWagAAfREP/3gKuzCRarq5dtQcmQxe\noNaUuo5mHjxZqAG+znS9FYPvpaPiy62RjzIe0Nrrbu3MtUhsDaZPjzUtjXP1\n6MWJ/471P2bWcVNms/oOokCZTeQ/LL81tdj7SnWkfghsxbQ5ueU2/Z3NV8zM\nHUFMb9WVGVjkKuUBn3FX65HtYxy+2pKb4xgm0qdoblf745wgr3Ca3bWmGTYv\nD0bdNG7DIB5B8m4Q+J+0t9LNKhzuBpLAFlsTLDXNz0Z89IQwVEx6p0U7+sBG\nvajKt7P2YxW/HuZup8UXSsCV5RPaCV+UKNi1R5knQRyHczYDOfM2eF55jSsu\nKG4Eq9UYoM9zoewU8Ac8IeX4+Dm51+FelMe8N4D2Bzn/vd+JC1irXRN+aAqG\nTlfsDPtA69bF3HXC/ehbctje0XiRifG8iBkjN8DUiQT5UFue3hY3jT3o0hC0\nGMOrKGFxAYmebJ6IBeOitaV0n+dvqHwXyM4J7ZDOhhQ9HzwshCpyYftP67cM\nlkh6UMo8KnJ4/3HY9Z/lfVNu+hIwOkXfYizd9gI3Vkzd+bwuJOE7/pYQFQQ+\nWKUkdc8K+mF0OrnVQJnxD35+uzk6ibucosOcHJjUnMibRWsc+lCj6kT0u4lp\nK2Wc7znq+dP53DpbBA3cm+ReywBN6qT+vo3yOVxfJ+YaNxldWp73ziPje59h\noXQ7\r\n=fsQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/density":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/tab-scroller":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e9d2e2f96.0_1596572741626_0.9367502727375723","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"143a74da390af8f13fe1f282944f9b258b03ce57","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b9dff0a19.0.tgz","fileCount":37,"integrity":"sha512-eARvf6/fRJYo8aFw+LNf5/mfP1KOvSoesU3iWX55yTekQdS/d2c0rPRfOk8IpD6sSO+Qq3Z45UZkp4NEceKn5A==","signatures":[{"sig":"MEQCIAy9Zth98iIaIYFoXVF9av/VuycTIHRTjqZ3rKkY8DW6AiAlVEqiK2H70QFBaYOnS9+kCp2IJ/nqxOfJl33lCG4cqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiyBCRA9TVsSAnZWagAAzTAP/RHPdiHiUtPRE1+zY5Un\nkKiyPZNcuJb4v0osLKEXMZ/QKEO2R4vbUX1K/aFsDN5t3ni9n29n/pu0swaT\nO52ZG5W7ZR0O3t9Mg6qXEqccq/5ktjgedfcQsf95dUBDYbRl8teqFU1WrSXg\nfpsW0JT9DJRe99puBWNG3SNQHUJOKwITFo8bxPK3KHGyTK5ck6xk0EoTU66b\nBz0BWee3BIunGrif6nS0JWRAb/5Ik+OZaQgkCwyzI0JLD5jQmv9TmuOxdRMB\nfflvuloHtjkOk31DuE6iN3kbUEo0Jvszdez/uIbHJ4BjMlgYuhl298d8IDTV\nXQNCzcm6ARLqsHaRC2YSXaK5IUt8q3DaYtgyY+J/mqy3AE3PCRt2+D0J5tav\nyp49j56TG3X3axRuxIPjhusm4onG7zxHxxvnJxwnI5tZkAE8zo4KQDGggoPf\nUvnLj0Ah1gMBzbeqHx10EyRA1IVkTUVZlzrNeQNBjSM0/d9jZxjxHwwdirs/\ni5ySgkjEaUnWqoOHX9fHekNQ10o4rdRp7IkJ/ZNgAwvUV4LfH5O5hOMp4+hp\nKGDIzhNwC2Djr8uwchYiiQiEw/CTvBTAxjdoGT9SIjfQeUBgKj8Z302+h9bD\nYpv2Lrhvh7A60ZN+JdBGryZ+cndfkwUmCyXjzERw4S1mLV8EOfPpzkeWvLyR\n+onj\r\n=XIS2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/density":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/tab-scroller":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b9dff0a19.0_1596599424970_0.13065798652934624","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58808f51407c9738072a38b3225fc2894db3db7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2bd09a706.0.tgz","fileCount":37,"integrity":"sha512-s3NhmZXgkOcYcZXEwzvdKAWBKlNGcz8z7dzO1zO3tI5+5bYaix3wUkvmr/HzhvlELd7b8OTb0fzYcHuHSU5Cqw==","signatures":[{"sig":"MEYCIQDAq5dXk1P0qwiCRMwD9azClvgPvFtEdiwIoPrfzpXU5AIhAMm8zuAmJMw0z9sdaw7160g0yyHyQDFtaLUhoQYQSWpC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi26CRA9TVsSAnZWagAATmMP/1DtxATvmwaAROT9jwZa\nq+/TxLYStYXH9ignS47HgOmTGwECxD5FdA2qEGpZUAV21X2IFgnqg4Rtoj53\ntU8CV2p7MEeIWxjze5xOIiZRdqRvwfjo/qhHOWDjpmQEgBhVicxuDfh1jsz2\nI9YVcyX/bCf7MR8Dm5of1iBa0+o5HEHpnjo1j1R5G9pbE+RlpRnMgmlVZ8H2\nNRTbnbC1NWMQvXB1Ylrnlr9gimWxsi2FuHa11CB2M9kdSDCi8TGK7Xo1DrP3\nmobouP9E086eKXZ3P+CxsSfo9QW4roNcl9GzCd8NRIwGQm7sXNqTr6meJxi+\ng/aLLa0E6MdztumiirXCjBVdkq5ueQqae/CqdI2vFzkwae59FaoUwGdZei+E\npqevpTdhKGd4xFPnwX7nlyhsqslo4YupiJWRs1rrgXpGnE4trkBS0G/OqzHd\nH4Ko3kAF+kKLu0tDyIsZAH6tgEqzzlBiRGJDwNNiqF3Tw199xunlSAOKVRD0\nIYqZS6rg+vCzm5vAEpZ33FgM7DLuZnSCcnm0S+Zd+2Hs6wO0s/j69THlfSuN\n+eIKhvzJPrnnwSRyiehB/tbJ56hMjd/1n+wK3CUIOYwlFiclY8zyI/ngbVl8\ncRBbIRNUPmB0D8AA1MgXQtPMmVmUH55uOxQRWv37kFwrTqI2x/+Y5AP1qDF+\nViyQ\r\n=EczA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/density":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/tab-scroller":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2bd09a706.0_1596599737688_0.9587179113396902","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e39d56ab4336b6c8cd49881d70792a239101e97a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e0560522f.0.tgz","fileCount":37,"integrity":"sha512-MIn0MZnmfiu+GCSFdss0EljdSkuYgXwj2QIMRkihLTqAhQ/QG26O3zSnHevMUMFPIBJFhM19Q29fn4RvvwSH9Q==","signatures":[{"sig":"MEUCIGe/phjA0W6Bd6TX/ETuIuxWiEmJ4ojM0T/gEEeLaoq0AiEAuckx4SaSHsqXYaHVSlI+HcSDvREXXwdP3d3fMsFOE4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqeCRA9TVsSAnZWagAAVfAP/15p9tTBpHW2dWvnTyXt\n0HWCAjE/c7aYwBx30snc0rQd2fpo3m6PGWFRiN4sEsCrVFCfOI56Jphe4d7o\nlJt+u1neIb1JFPdAwTJhWQZTllojhJSM+UPCTde1p/wMPSquqRpokaXKkRqb\ndkkaNYLfMK2ow1sCap/hWvqRWt7TQkNMaulj9V5deD8yb3eWa2/lBq/mNZt0\n1ShN+vvyRJh4yuht+U5qc63UXxBWWBFbAwUrDQ+g68b/P4CpBE3jgHl6e6Gh\nOku56IJ8VdLFKwPOKNdZbY5NwlFx5jd/JR2zp3WVnECH3Hy8yztHYh4eUMcM\nEnJYkUxP/PlSsiIr1IRTG3wlS3s6etSoHRBZ+n5vqPIMD4qC7BNJzM4fv9B+\nPHoB3KIvEBpkpSBWo7P1pdr4CL3DlRlda8n2v/NoUUc6kr4QmSSPP4n2mGeO\nO5loTFltGABrMVwXHd/deQZYF8GCc4yBFojkVDSALuZr2yTZ5CENcj/uzkIO\nXuLhpXLbZjKM6o8rRqcgkqJ/NAAk3+LviPxD6JqGgRICUf8Fj0a8SVM1x5FF\nQETMMn6QAyI+yqJfSUJuwzrF+qI6Hb+F0v5FnZDqk/Em6KHvd9EYYgwqWaru\nIKeH6mjkDvHlDUnb7NkvRXcfbL4wFyj4gpYt0tLgyNchOnPJRVZPpd8PuHSP\nfgGO\r\n=o9Ji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/density":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/tab-scroller":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e0560522f.0_1596648093988_0.32176463445262504","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/tab-bar","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33e698d14fcc3d20a51c8d4609f81ecd7c0adf94","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":37,"integrity":"sha512-5fCMhqhQOVHn1IoxkZH95oZGHKJKFrbycu+fiEiJevwBfiYNER/kGjFPIrp+dL0Lh0X1oce6GYcnX2nL3h7dOw==","signatures":[{"sig":"MEUCIDpcOjCOZcwfKisHhTbVTj2wHF/6PYv8E5Cv4JdHCeo4AiEAnHSaA0yeZ/sQHDqcpsScQ0chQNMbp4iFnkgJ3g0j/tA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8fCRA9TVsSAnZWagAAYK4QAKAODU5ZoARCqARbnBqw\nPKGChmVqYL9sV3aSZu5p/xI2NwF2m319sXdoKZSXbFYuQuRVZYPelF8d/BxY\nCRcyhLrS5DYmBFOFGYoQLtc6eAF4p9hulMlqhj2zS2/Em11CnmB8BL13Icl8\nwzbsEQfQZRB0hc8LIYhOxPhAtLSjSpQ+kWSniQ2W2/lJXpunGLUBMZ1me7rG\nGSFSXOluyL8ON/Qwu3+q/7V//PO3/7vgqxz/FvpwZPcXKBWa2NdNhk3d/GIM\njg+vl4fJ+g2QbDx1cSu0p6kSrJ40Tx+mHYdVu+l/UTgm4gdqsCureBds+wSv\npn4yMNvvNQ55skU2b9UnTRbl5Lb1KCdSoy/Mq32+eURXc3h7e/ZIJynjNLS2\nIV+D1cyRIxD4r3Tq4wjL+BAZHQh7D2TG+EtcV4FDAYvuZzyP1r+5GUNuQWjR\n5Gj4m7StoAx0hZiQ443M3T7k0W37gGf4UBmSLW9xRX8+vqqMzVHOuaD4Q+W1\nelTmuDuiE19DzVD7EIDC5iwCurLCYWF99+8UYUpVG9ahaPzcn9NsFLqDEVJx\nBzzOO/j1IJs22SyAn3kWc/r7knt6UKNZ9sPmkAhuowmpGVQNeyTDXQISnwTp\nxhPuikTnMU69iIiAaE+pqUzW0qIay/TNsVMBxCyguHlk1gE4LQb1dLQOWiB8\niX0Q\r\n=GB2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/density":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/tab-scroller":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.08ca4d0ec.0_1596649246500_0.13799807430121014","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892709f50be689e5daf5c4b8d85d05530afc478d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.08090126b.0.tgz","fileCount":37,"integrity":"sha512-lO4vp3P+n9X2V3rv/6looSp/c4GLLL35xpAPuXZHwsecxCrBccvqxwhhZe307KpztDELW3uZkbMzFQsNAwMU7Q==","signatures":[{"sig":"MEYCIQCUCAZbdcIFpr3CACI2KcrgXrVp1ylyZTXe7/hvPOrZsAIhAJYKPRrKo4E9CB/C6wTAlSBoO9kKPAe0SV2C6d1prMdW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFssCRA9TVsSAnZWagAASNYP/29A+F8AR5+JNf8lmXPT\n+W9HZ7yIJbqk9cdwPpITDFKPT0UIrq730ORkKgxYFIQBAz7TWUZU7UGrprso\nlZppuBWYtPIk+AZMem4OW7m10r064yJjrynqqhsv7hwkJjobTLPAfCb6y8Ag\n6jufMKaPngxTqCoMlW5MZ5k4OvsquvyVfK/L6a/mVJZKZCY5XkN5/2ii6qvb\nw03w8+eXbFoGMpj1lqixdP2TGWOUDZJUGVEgrOxCK3GAoDucMWpZEVaOg/as\nJ87MgwsWiuvVqcV3REstU67MqRrKWc72BaXoa6vCMhiccX7FR2XZyQv6ex5E\nUs9QcVU+pp7O2M2Rc788PSH08laEdmNal7mZlJZmfGSIuGzuC6tbS0cric59\nDRzjmG26V28b7WSLT8VPuk/Zch0ohzqtoj7jnL6qu4NUFeKU3qTkywkY1MPm\nmnnzTXuSg6Fz30UtdJj2QZfSbPwtpgJxqXeCj32uwIZP45cr75GghAWWjO2A\nqeQ9EbpUHfqPMWlq5fkdnW1mom8vJpU7idAIoAS6zRKDutzFzo67+YDsGRRT\n2cLNigbXRoeYx9X5xheKqPKB0NuLuw45WYpvg9FqoihRfUKjX9KPEh8ePXWm\nC5A8oQolnaFJP1X/K3iomGmoSCRPAOsxHCzG8x+cnuXM6NartavJ85stP0us\nsoSf\r\n=lX7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/density":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/tab-scroller":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.08090126b.0_1596742444304_0.2725816529308551","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7761b62b7f00c271131f723792d584b14544d07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":37,"integrity":"sha512-+XuJmmrg1lljde6T/w0ErRXR6FZn8C2tEzSgdCKiUmgqNEDci200hOKHwte/66rPFfw9G/qfUivY/kZUmJ9UUQ==","signatures":[{"sig":"MEUCIQDKFSTW6txyj9+/W8bhkR44Qgqh4ZWDiwUIMzbMOBxrBAIgPKJuJHdA3309TOWAuwZ1sYrxomoflDkwAudS4HA33O4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtgCRA9TVsSAnZWagAA1sAP+wS1ODn1j16d3YWn3CSr\nyj4FxoBYTboElob3PYBRsCzX2sYEYkvRV7k5RtPrlMymb5f6NLWeSpzFAlSk\nklQoaN5u2L1OG/SPE8JwjJ9hiQvXrAZNTQqaTikEwYxcO4VZ8PMT5J4fzcKw\nHdhnBzdjIndOZVj//U1xaA8qxJ13tGk2qrJM9cK9zOVs5KD297XDKpJD3QFS\n54b4NPG71Qa9cwzKmPsP2ERgWkZfwVD3O5P0eR10sCnlad9dzrGPsK2xl4jW\nuU6BMkY16Hr/5j0xHJlM5NSCGpEi6+r11EFwgM7OkkmDxVz4CyLJv0ZNIy2t\ngQlPBYLcUYAPHpwpzK+wHN9HN4ZRJOsqLOmrf4e01Q8sZpuXz0BHvtBwxfZ8\nDW9LTu0XJqPRqs1Rgxe24Zmm9BgKfuiI22xhxe84SiruyaZuNh+kSmmpcD/H\n3AGoJBIimyHiTil6UGM5nL4unAiHs1iUBFgSyDcHUA79yf91GjF3KVckFZFN\n/SLViD/bNnZmqGx6NvUvY2S7l4fm4hZHs7tvHI+yTIvZ0YSh7pDddjaZ4zxi\ni5TpkIU1cCuQkBEiZMKobZjHaMyj/08U8lV+6WuL83TA8n7zGUlqc7d7uK9H\nmzxSHnyNkI/dP3wN4rKQt/BpEdQxCk1IVrxGKikU9chLiYnPGbTBJdjpkesP\nC55i\r\n=ECaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/density":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/tab-scroller":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e8bf5b2ac.0_1596750687601_0.6295260720745703","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde4ce98a40899f18b15f4b076a75225c374de11","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e3b746208.0.tgz","fileCount":37,"integrity":"sha512-LSVaB9XE2+dKYSN8tO2TsFb9j0A50BxpZIzmkaevR1oEk6yAqsxgL8/HsO2Q71h/JfIKL99PAKzo72hNWb9htg==","signatures":[{"sig":"MEUCIQDJF0NeTemvtV3AdPrUpWmsGoIjjPVD1k8Uqh+uIpfNQgIgRYHba1qhNrDKYrxuUM9HtEGM3D5FhdGvw7XJF4D+Xs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIP+CRA9TVsSAnZWagAAwDQQAJhLUT1cXqPjBNgl1VjP\nJsZaF2w6POOXTdIJMWj9pAjg/57yiXTrSeId1zh62WWfHGrylT5UnSDXWoTK\n64SKCoD/9SZIXwd8BULer4pffk+MlS6LQd6cN77npqABAlUs0qFwmnBSfY+0\ntX93A3jLg4a1ZhZfikglGFNlynxlUcu/Oxwt78TSJ4qumDpXUtgUGZBYpejY\ngaKe+o0Up07GyfcrfuTbaee/taEjae2Q8Gcdbx/Zrh1tuz70n27BxY53COry\nwjQ+8w2y0AruPWfZzxI85e/INYNNLJ+XzC1uPn+TvPNrL7RjHc2lEpWDenS1\nxrLrqhlEOzZwWQE5179UjsHmuNKnw7y+EKGsU0IJpyy9j8DeTDTVjWveyl2r\nB5SpJw9KDCzLN82yWBT7D7y1Jrf1ecQO46zIsfc0T5esbQeF1vkFYF2FdWDV\nv2bU3BIDXD1BH5ZKVHIgGkMwpp6kfTCCsAqrDypqo47GZZhRk3rGTy69ru2A\nd8gobIEq4IM8HN17K+iFRCxmNvHZvM+WwhzcDvB0ZD4L2f/JGOlNTDIYsqqK\n9jMn65Fg5v+hcSpwrCkKshjlE6oZc8r0M0lfinnnc1TTMQ8YwFegs+U3YO+C\noRF7cnhxlYpq8UmVwnV2zJ3zwjFd9bOFRt95FeHPW2y3Ujt8lhembxeIx8B5\nROSU\r\n=Isa5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/density":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/tab-scroller":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e3b746208.0_1596752893805_0.49009342389679156","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/tab-bar","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b625f2d0535f5784011df2557bab31efefa187f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.96a640534.0.tgz","fileCount":37,"integrity":"sha512-Rrehs27+7qSAgXSAb6wDMqx9kZAcBVmvL08FWh/Qu4rFzudkXhkpyQGes14YeU42x706gRqF5nMokgRkV7Rjmw==","signatures":[{"sig":"MEQCIDWQM5AM7FX2eS3ukTECc+KPLajmbeMKzHmcIDITaDtPAiBAfk7f3Gdn7cO0ZiqjONyzTm6hvlpnIDboqOP5B2cZCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdxCRA9TVsSAnZWagAAvSsP/RSg6PFBw7bSZ0f5iz1F\njd7nbiC3w1SiDHQCPlcXGTPND96ilYUm6vO7EaWDY57g3wocg0pYvclYOMFm\n/+JqGkwIs0dkq19Yariav6mIXhKg9anECkb33eogCRLucY8wicBY3MD2yLxN\nqbkIdp0TvpghGeApn9ExtAekERg4Zm3Wqw2y6m2o9YGcBt2nMwMW1QjoIXcj\nPozHm92k20x5kHRLXflEI/scS1AoHc+KdYwgSb7WfuvmHAhUaw0FCDb+d46U\nm4sibmNeFKEYh9nVD3s5MudsET5kzJQxSDcJpHoVIS3CxmF6bPLvy/dsGXcT\no9T6rphx8nw6YLNdydgnk+APBWWC3dITKknut3ol9l04YueSugm8RI+ni1YJ\nBurj2UuZnlIHVIvwbq8opOjjO0p07fEezN1YW0XsQrIWr65kXs/yBousi0gf\nGJpscGZdqd1s14FCYLJAIcaJMHF68yj4MrTUY4InqskdZLATktoawCdGIiov\nwYjRrmIuy/oLjGLMH0IsIeHxoVs8fpXMcdHWByWsze3JL1FljizdlFwU3L1J\niuzNxuW3gfKL3HveJeFNHnyaC6Ya/+VJ6eYKCMoaGSBiUxW7hsTZuj2sovep\nBjoVkP++gToiuuYjMzOXPG4jAfYpRjKyKCkUF7TRLP5owfiJKi4Ya6g2fqp+\npC2q\r\n=R+WT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/density":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/tab-scroller":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.96a640534.0_1596753776776_0.3553869663808982","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/tab-bar","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fe4b653d702cd84b4018236254cd9a34c149206","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.9f9aac825.0.tgz","fileCount":37,"integrity":"sha512-6w1JaBvg3WzmrNhq1A+1R2LXZlcG30mirGlR/U85opHKWSClZhBJ2+jV5Xglymxd6N5vFRJ7cdQFgCmzB3KYZA==","signatures":[{"sig":"MEUCIQCmWAxk++F343eUHIqAWlQzAvg81n1A6KzGg1dqsXhNXgIgEILQiT6j/nqAGsUMjjk89RvUVM5vjEOTFqa9S6G5CPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8eCRA9TVsSAnZWagAAvzkP/iZrl5GlRFKNXpH2ebY6\naPYADMui913YKkOHCucELFHz7Wx69LLZB4WcmcfQ7RUc2jqSSyh2uWQ0YON9\naunyaDs4PeY1BywexlsAdjfL4QQz41u4VDHzUa5aDajhUOD08LB56u0WmPmF\nw0z3EQdXb3PsafymC4wFp1ACIw7Wk1mXCCIgCzLSOCEztwFym1gMn9uTW7qp\nd54zH+yyf74CYCPo7hzi1huyxM4sWSAgGR28sfq5zFiMBkwxmYnF2TfW4kd9\n91muw5xagau4+U2OnFlpkFxMSvUJFX3wSpVE6U0Z66GkpDgw2Yz0FYHq8cu+\nO+tVcuCsiO5cvC4Q+4Wph1jueqYJpN4rwBbhXBmgI5ebEAu7ZfTAIsu3+rti\nKfHhOAcKa99a9Ph7zxlfysidzfawGJKEaz+RpZ+7Li6zvGn4YIYHgplGDZct\n8P/W+qrAJ3499Q5/OEOPyE5gzd+w32BN+E4U+HeJMEGi/46KAoZ4RzK901Yt\nQvMYujgXxSwOkX+mHEzyg289pE9xcs3IHHkL+AiPv6OPgXCdXhv4wRS8270e\nFKpxWKUzTtksa97O7uV+rNzc03Qx7D28q0P74XN3qBAYNX2tVEL9pSka8Py4\nrr9F9UsfqzdiolTvhvgyyMnA75tBkQlrzrBu/8iIFjQzKue908L0Dux3p7Ew\nLsUx\r\n=T2+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/density":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/tab-scroller":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.9f9aac825.0_1596833566534_0.24898468166457666","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc2b79b9b530e300cd1cccbb1c49acd26cb4669","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fc65fd00b.0.tgz","fileCount":37,"integrity":"sha512-dqwKute+TGCz6yfys01QNG0o3LPPaodTSC3eVU8zt80APYFa4aSMo7ldU/1Pvhi88vU9LLyYgthlwglSNtleKQ==","signatures":[{"sig":"MEUCIQDXZXskUtloKAOEtuvopQCSonOHffyBc2JfPPVXeCOhcQIgWYX/vDdAn42eGLHIS3Ym/VxtVdLPkZhrO7FGOPDPVJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWY3CRA9TVsSAnZWagAA3s4P/12h7rJpF1Xq8mjJIYbX\n05Qs9h8ZczqtgTyGCLSJ34mkJNCjUnQjv/rOtAtluWO1W5EzDOaCewFIf12z\nJRNHAfrLWyQeJwCSs5nWkq0i1VGPQ/R3oSzAUdpt+knjsQ64FosKL9ct9fOk\ngb5AnNve6RecCDUUeqUGoLfDe9+Ctkjq3vbAX1OEaImMKmpoV+J2arkmn0mo\nfs6HjUQ+cws3VRx3IEpRkxj/5VjPkwNiY7EZLs5DBNBHCxYj2mDi4tlpG3RC\nMSSdbuxJ2shg4s6KWtpIGU/WESopUkcqbbTZyDsRMgNDg9S19Hdr+OYJ/WZX\njHz778YgOvrxC4yIrG8/zwESNGz8zkl0J0vOusOgLdg3szY1S2YN+FyaEcGd\nzxyfY7S6Kg05NBo/uoWx96cgCtRosrRNc/6Y8uV4OVGtqRPQDPGaij0DGAmG\neeqrDdWkgUSGLapn/ei95uBsxYVvEkqCw+O3AE1ya4Mm2KmqeGYTVTAbdmyd\nkkx54XhrwGoaLiD4HsSe6lul7IUrYb8r38PDAe/sItrX5jiZEdUKzIZR/XPJ\nU00u5/fuR3tysKAo18BnLJL/R8kBR9DwCNZIp3PjccLFposajCZ0SZWUgCVC\nl8NnEeNNyr08b1U6J2aZDumc/pgHSMj32Th11IPyEwdnfoZ/22PQUoe+vJVv\nSOxr\r\n=dkoG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/density":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/tab-scroller":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fc65fd00b.0_1597072950723_0.7995948655085305","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a03ba4722fa89dd72f258b663c317074b33bed5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.02e372c5f.0.tgz","fileCount":37,"integrity":"sha512-FZ2xwk+lWLw7mBHAoQnAjI8o/ncu/RcM9WyUIKoqMmYG6ggyTfFUjSFJO6szWX0MtrqEKK2xhF1Iz1XkQVhZEA==","signatures":[{"sig":"MEUCIHnZjtmVpzVPvEiQqzhTajvg/Rw/0wfp7Gr0zpDVpsIgAiEAmkpHewWsvvV0c5C9aV+7hrtUYM8q6NjGXrBX1D+ZpDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyzCRA9TVsSAnZWagAAUlgP/RP1Lzi3RXYgemrisEF2\nBqSHxsUGqrEo5uKN3EhsBi8CAILpGMurmlGJEX5ryxccIkpTk7D2cI7B0vBZ\nT87TcQTtOG4PquVgrn7yguOb98R/g6XRGz7xqKSria2fyk1kqt+fZpaDYD3F\nyKKUmFHDVxrSCmUI3hy87GX+DXPexYba4vWBeNhusU2rMaof3+KjWJLhvuRl\nZkua1qPPlPJXzxc/Vwl9XdQx0JsIR83YGUDchp9Di0TLWAhOQle5V86wmNgO\nOvv8xYvNpN7rQ2WEKjR2Fzqr4Sr4tgDBD3h5fMQ6pLcrw5sYWI27H7dzkstE\n90d1y3l5CAE06iimdVKR4aAJEj6TQyQpKwYHZ92lh3sGIIuyAtmq7lNiLFKy\nL5nvaWfC8HIXJTwgm1goc3lTlXXiUbMX96cu1NK2bgUSkQt91pS8IY2N6LYb\nX/VhI3UFnRpZytZhKxsM6pSCQImCJE2pVLVXLRxNF8IjUOX6rhE0MkzL0whN\n6tSCdmzFssdv2QKEpTO+mYHIwP9lvUpOThqyhJjYvMO0Ea4FzP7jcLy8IqGy\nMP0Ka1XgNBUEBmQ/8ntEAjhOxVEzXnwgRyjdQrXLxxijfGL/iwztDfJ9/cGo\n4WvWIMwwy6y23imQDvmVxlgeSuTXV+NOMbyA6zJh+21bpEVTJQ5WVCK1ItEV\nsdtC\r\n=0udY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/density":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/tab-scroller":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.02e372c5f.0_1597074611122_0.260438005319235","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/tab-bar","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7f0abc4c45f6ab09a30d5a4c93e4f6ce7d666a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.66669e3b6.0.tgz","fileCount":37,"integrity":"sha512-hhAovpOGNNbYUL86Ch/XidVc69Q1B7oIh72T7JHIOwjX1+9WTexVqwThV/jLXXuk83exvD0mmMNLOhRsMr0Hfw==","signatures":[{"sig":"MEUCIGZhquYLPqlaXXRpEkG+SxH0ILBujJfEqTAyY75argM1AiEAmiJr2Cbs6cAr0Zp/R39zeFrVREV+h51+8HLz8+x6xOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2gCRA9TVsSAnZWagAAVFAP/2ulMvTHjfL3LWSqrb0K\nBFdaBnR0Ccqox8bVb84s2HSLARjdq71bONITKxweOjeKYiqtIOvHXxGMv166\nPKPLf4jRQXMjYOjZAOhuBAC9FqkKmlm1B7gDeyubVJfJOd20FuVd4TKYDHYJ\n9ZNnqCzXcSOPncth+995J0xQLZrJRoq5/jj/N7dOY0bwtL8L343djvDbePsW\n7ji5iNsW+EYzInQOxLQfFz4vY8cCUWKPCOwFCXTR1tLLQoUCZyUyRKxR1arv\ngJeRNn3DYJ4Ue7/VViiUl31SpD6OBWjYnMbD0Lo+TLykfr0Foy4CP8lpArab\nT059eAp5hnhVFUCsLW6m3Hf/ynb6ujZjryhVYLLlUx95133P1CUZH/ZjvHBl\nfhC5fjjvOyeUiphdEzQ222qfFIOZsrtlgx2WLb+2DcCVhRkgzxdqOFXaPWdf\niv6KlBWAjTvrplx3g9VFYkKbqDMIX2v5flMcPuoo40wiKkNkatYyxvss3NI4\nH8wp8Ruh/RsdSw4bBshLsBdOqWtbQomU5MlQEG8BUX8lOnoc65NQh5MnN9ml\n2fsYzegUJ1krNkghac/AjnrnugNwysM/KZcagtw29GrXnrJl55HUFWyQylel\nhkUwc66Oqlg4ZgchGrJEZ+35cqRb1kbN9uOf7heCyBpLoLzFTyxXWEaArntR\nzo/u\r\n=4Q8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/density":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/tab-scroller":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.66669e3b6.0_1597074847554_0.9424858283386308","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/tab-bar","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aecc825c3db55e3bf2785050ea948d075bdd3209","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.6d1ea9761.0.tgz","fileCount":37,"integrity":"sha512-AH9sl7F2z4AzCGYJXGd601SgPl7qSRexoNlYarb50PcUwJOUf4kqHa7RZ7RSqaAdTtCv9S31Xz+ys7xgl6uz+A==","signatures":[{"sig":"MEYCIQDu2MeikTD7J7LywUXH8xkUQByFnQ6WzTe2MpHwYqbBpwIhAPpFfnQCRIEdBSRDUra2Cm7VW5P3x5XWit0ZoW06ULxZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvzCRA9TVsSAnZWagAA0KUP/0036huLgGlxE5+IAUdO\ngHUnkPayaEJeG8Fj50Afq0a5rJ3uzN7Urwd0ny1dU0QquI+fljMibNPhkB5F\n09GjelI8j2hruTk0Pw4YRqmgomyFiVSNto87BNtsntISlcg0gLoCPelygmqH\n06QT/3sCx45HLLSc0+qQuqnyZoWX7r2N7mo4KFoSYfbWDD4oD4TJhAPmIk+v\ndV3GUfbLOzJYH4B6ElwtP4C5fTdwVf4IIIUyCXUNxesCMdDyL21phMzCFXP7\n8iVo+JZLDfqQjOuFeAUkNx5KBqLLUW/oeUINHStd2uh14eysZ4gsQCgqyBPj\np07yWibOa6W5Vzo/T/AhhAEqz33m2f5j+8EkdQjKFA4jE1GdC9U75v4zPsj9\ntgmMIT333gK8G1Kftw1V0/i5ZvTw4vP+sG04I1nBBUjWcp2G7BC4OVgK9BGM\nzL9v4iCb7hlSeicgTHwpLX8Nk+I7eeAROeGIddIzvwfBMOV7xj2zU9NNPrbg\ndaICgvib6baSrMqyQdJU5rl2O9Mct6vWOipiyXjnPcoq+s0KMaobPfnsbi+p\nyBmHLj7G3ZYoAUw6OjXUJdIXj9O0v6lsMboMt7HwVInKhEoCcpFUUCSfb87o\nOu0XqG1AMuwJqssvf1bdn0wJokuaJ57KQAU74Verc+1ZIwmXAyLpJb1m0KKj\nOVem\r\n=MAeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/density":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/tab-scroller":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.6d1ea9761.0_1597156339044_0.5303170909487798","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77ad8f2fce26ec507f22805e827f23e424bd314","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.79414bf9f.0.tgz","fileCount":37,"integrity":"sha512-fogeXc9DbOvP8/eMyuRlUmV7GMorwqCZSgvcWCGexngmRmKMdbN7hOphFs51A6daCLAb50lUtPN0VaMtQkDxxQ==","signatures":[{"sig":"MEYCIQDd2TVnANvVS3nVKfgcP82vrOpOv8PwSR+310nmfSx5UgIhAM40cDtDUVUvujromxABHvlepxTaNItGsSs3s9b86MWp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMuuDCRA9TVsSAnZWagAAPyEP/2TuXcGIZMs8KmvHGeYR\nUynGzi1R7B6p+ClZwsRFO/jzj7DLmse4p3K4e0KVO6t3ZgTVpOuUOWrZAXVQ\np0l6gMFRAUSJwfPak4fmb5hIbgdNoG/cJIoKP0ANKAgtUDWiEgLeOFZ6yi6H\nAde771pIi5ah0+9ake/fw5A8RVX226MPOy1n3O78ABjTPvYfxT6DpfkyqSZu\nAKtjsb7Ynq7rXiTNTdB2xNJdBVVViH6GlDpX/ShntxF/D9OX6//MvZuIZeJZ\nvv3+ppPV9289T825VvyHLNIqFZtEvXaZ69LD8cFgDXv877NSKBxU83CT+eBc\npIOPA5ltMaRuilJ+V87KEu3ZRofFw0UYkwWs/dkV5asUHiwCK1oKC5Dq/Puj\n4UVEsXUgz9qUGIm8xnmzuJnTLLAcrDmIMRrUHe2BD4EYTNVX/WbpcbSp5pbo\nUa8i1j+JYwNMWH7yzs9sUEqadHWxOvyPwArftPygHiCqSKy9PVb/A3KOLFpR\nkdiVULOKEIsbgleLIpGeFULgPiXuevF+8fmyYEiUFDIYyOGQz12I8uhDonnd\nRrsj5hq3uX3xWnI1T3J3/Knd2clJ/xqiok0myEgL2LkE9t9Q3ZqgZuFAXVf9\ntdcWo4YVUo3b5bXP7DGhNXj9NTsT8lHjQSutDYEhZPek1wtuyROrUMuou9M3\nwAfm\r\n=IaRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/density":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/tab-scroller":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.79414bf9f.0_1597172611340_0.746022724548508","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/tab-bar","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6deef5983e6271455b5c24fc511ab1a8a6819ff","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.85a5272df.0.tgz","fileCount":37,"integrity":"sha512-VMSywpHj2IloVxu3yyjIdENiY/FIFx/dKixqCW0tvHt9vZxNcPwpC9NKkVZc1kepaFjKgtE6oRLhp1B8UmKQrA==","signatures":[{"sig":"MEUCIQCx0outX7fgLBrmLBwVlCAcXTXmeGuAHMei/LbDWDgaIwIgBNBJrr7WBPCUFr43XaQRScFLDMX3ZD15NXwTrbxcewA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvsFCRA9TVsSAnZWagAAzykP/3VzeTUlINf2Vx142Vnx\nH42Ex6F9n4UnTUVUpmKRjQoKPO2Gm7eF3lY9KBYwPCdlw5wdybx3KZpza5W2\nfW+unnFTEwdHXGVZ2C6BOUOonNigi7B5opFkzU8vy5N661hqEiS28tmXmdX7\n/8XjupdokqcugSCoD/jJy5qcL+ttw/WDaY1NQFCBsDmhTTyP3e1W6z+dW+mf\n4gileou4k8KNS+hzr+2SCyMmUnm1NZNw8EEqNVwYNJV2UnSbSwTAYau2q0l3\nzlRhSjXxLdXynq82qMcdYWAQwMO4PS8/nF08SdmT6D7xznHoUAeQL0s0cl5O\nlEhFzPdnIAfTqnOhcDLUC8Lt02/PTeThUQW5/F49uBNFnj21Ra1JUjPuliQA\nU/k674fnpkdyS5P3xEX1dGlP98wYZRdIUVJYHDynm0LlUtXnffCkxsVwgy7M\nFna3vbwDss0IYy48ZE7N+niOu5LbcpM/81VaJTgIa1SCJd9sCn3uKa1vqKO8\nXPlgIv2IczF5HUBJxmX/7DkncmHqmSx5YeG5l5Ry4C6f84aEkHRi8LOq3Tc9\n45QEoV9RMU73BfLYGT2oy3+eXy0K740acI50PiW305rUI8TrgA3EvDo3VKV6\nncZDWm5yhr0nukUFrrF5pZSNUUKGEIVecQuLGYCiHhfjIqbVVFqb+xI/rnTt\nFqf1\r\n=J51/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/density":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/tab-scroller":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.85a5272df.0_1597176581082_0.9591390469532759","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6379cab2875e97a1840ff8769ecbec88c9ff80e3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fda053eb8.0.tgz","fileCount":37,"integrity":"sha512-egHWvVhxaRwc8sDwfeU0ENVkrQ+VUpdRJGgpfxEgcBnsZphLzqZNJVGSFeUArW9KQGeddyR5exdKbvn7dXdXHg==","signatures":[{"sig":"MEUCIAvBzRTSmni/LIBpkrtqfOr4QEtq+mvtKTvM9Mvh6aAfAiEA6rL4mpYTJ941hS6mhupNiaka8bEXZDyCVq2T91RLv60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEuXCRA9TVsSAnZWagAAvV4P/ArgCHtUWxpNs6zYThp2\n5tBJ821CkL8QvX8C3Eg0iA4+Biz7qwbnI+yM395ZtBZTtSKsrCrg4jAsIlk8\nTSuVvyLfuXk6W07HQ7MhEDd7cuqCT906EF/DzcsgvpJNhoOZ8Sc76+9u4IKx\nxFlCxol6fl4JOHoWXHoASAsTgHaGoYdZhkW2bS07myhS5WoYyybi3hAAnqxD\nb3jdCuVk5p6FWqpSePg8JptG285SCY+8DVVYXfDufHbkDUv6+d/1x1WIUcmA\npNsVl6XBEJxJ0XI4IgHzcU0PNsCSME0Zu0K4+a8SdK4G6MH16mqI0Sn+QC6T\nsF683BUPebGFOff7lM1kTl44e1Kh3qn0t9x0noczl1vJfqUD26sZLZqq/nJ1\nCZzmj+0aD6Ast+50t/CMBicr1FaJ7NgA0aj2kVQZSQjh/xUJcRZL8NBat/Tz\nWWtgeWgd4c4pR5ts0dwIRf7Nb0N5+qOlU/mXiSbYuTakIluejnxwkECNYrmL\nL650KMhE0n0Ndd0j0q56Filg20TLFkvFdSrBiPhSPUtWfzTQv62nT2Ol1Xqy\nN3u2uBy2KTHapIZI8x2luiEiCAZ+5oNKVNe+TYNobn3QOY25i8bvI2i778YS\n2hyzrt0JBB6u4MnxHvh8g1WavPyZunKp7tr8M3jYQqtMq4Qd6Tg7MZtVDGC4\niVlj\r\n=OHZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/density":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/tab-scroller":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fda053eb8.0_1597262743319_0.45057119291839576","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/tab-bar","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c192c4aab33ad756727265fad02f8b9bd3341b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.760873445.0.tgz","fileCount":37,"integrity":"sha512-G5ZcfrT1h5olfAEAfnIw5zTVxpCWoqPcgk/QtRM5KK8gok/f1r3h9HSJ4J/UXzRqd2FQVjChbRgfkaKAgekaPw==","signatures":[{"sig":"MEYCIQC1vzHVlcXma2Brkk72zhwEFeKuFP6CSUe2Tw21AsEfaQIhAJNf/RD1SWGdfqyt0bc+MTNOp6c++xOgyEWAc9uTsvrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGLMCRA9TVsSAnZWagAAON0QAJFCfJ1IRf88S/sSJGS6\nkkJQxVEfpxqGZn+YsWG4Yc8fc14Za6vRdJT+IgMtyq15dMv0FXAenTuJG9NH\nNb4BQkiB8ppvAIHOfNPMgGPjJM8DVicp6beE8lN5RirDiHZxwcF/595NOn1p\nu9ojCinWA/Ebj82+1ZtXdKETeWlEBq+nTPsgcLmJFEcwzunZOOKuRAOwW33x\ncJuhgP5pXNN8EEmo2oVpyIzsXHT5IzzuL40H9W+pPE+w+OOZ3swLZtUxu/nC\nZFviq83ssf5gBP7/nnheZFnzF+f0yvgmB03GFGP+VHC946vrZWjqbG9kDxAS\n//CFTyqafuXGRDRjTyCtfAlLKEG/4M7fd0/f7s2ibBk/EbLKLdAtKQ3Z3dQ6\nduO1qc6+v8+UwDF8XasiyqcQWlrXS0gJ5yclfosC4Qicu0cO+PKzh9wMZaj2\nSy3PbeKgZ93p7dBPemCGJPA/dfMBuhmBQcajvf6+VvXYDb5+wRNrgt0qWy8r\nv3rq9IR3w9KMGCghF7o0ej50B5iAVROoR2l7WszqBmUfbiKsAqkftyakbtf6\nd2T62P8G2jgLIduB12WxhVK5HSI28Q1ExC8923OHY6leeDPZ6dbEh/zCgtTC\n/izc9/gfX5pEVFT7ExY+iPJmTu1F2A32B054aRFwFeJogUF9JPdA19s5TY4t\nH2Q0\r\n=DLEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/density":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/tab-scroller":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.760873445.0_1597268683643_0.5248032330086154","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33acb9cef1a49726e7bfba09b1057a7f0848c214","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2f4711a30.0.tgz","fileCount":37,"integrity":"sha512-XF0z5uYkIZq135VaFF/nkI487GNFZQNpxe4dobto+uTjtNT1ILxVWzYpApp+3VXI4IkmvNFkj0IjEzebHs99jA==","signatures":[{"sig":"MEUCIDmO4LLLbNtvtQd+drB5igO8p2KtgaPEk9vwP9DBTua7AiEAms19AP/k8wLE/5rQh7N/xWaBdOvjvhcDqJpVNs/CBVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUjCRA9TVsSAnZWagAAo6MP/jHIs9jOfLEnYadFf1TS\nCWPgyHC8VkDB1bnFFXzGQN5vR1cO2DvQvFKk9+75fobRITD8jqnJ2SB+nDRy\nnK7Z2Te9yTiZ8NWTZtMTqMZJLSAJ8MgH0a9ERABSMdY88pZd17NN0wNAYg0S\nmSMESA6gpOXPKS1yxrx8fEATnVUKvLcsZf+7MuGK9qXL1MFP/56T43WMRVjR\n3S3UNRwcwAXoCxr2bAJntN4nLhxHrOcZTu+iA0U0xhLdesKqyWTUTGlcCpp+\nRwNRdbG0fJhYUev1JuVqOT5xVD+o2NAlc4K61IljlxPPBf9ME3w3g+dp8QcJ\nrSeeKu4WFK6Ot6Q2DzcaWBMNqIJ9qGAbcOm2C4plBWUQVN65a0+US6kLPKBm\ntk9+us7g4wlxX6DE3mZQpk5TIMGF/A6dth+vaUYw5uhVEtIxEVdMHpOLBt+m\nN0fWLLGNsyl0XEl445wth6aJYAOEq8+93sFmCGs87Nbn7mCLuQ9wYqFAk9fv\nGZJu+nJanoiqSSVax6Vwjs/KbqIKhFTKGOrb8SwFct1Cc6/a/y6pLGegI2mU\nEMB13wmUx2GEKWETQ+FyBAXgbR+IO5PW+CZr2Ei2AGaxCv0z8evNuonhs/T+\nkRukvjHP+HyjzYv+ghr3iozp6zbIkyS7EftVxQzoc7cMO23Qu+02n/utlFn0\nvwkI\r\n=Wfes\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/density":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/tab-scroller":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2f4711a30.0_1597269283011_0.060920007924609276","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"834935de914350e4b109b9d13294cb8a1862f639","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2d72f3659.0.tgz","fileCount":37,"integrity":"sha512-BYB6J7iSTQHZjVZI0KbC80h1zGT42uJxnO7ocB9SR0sefiOOp51Q5dBsQGEUxsEXUux54dRYRHK7NxHEooQxIw==","signatures":[{"sig":"MEUCIQCKUMYjH5l6Wx6zIMKugUGc1e3TZ2X6C41qowbcpD+kMQIgS2JC/A1fYPiB1YiROQjrCG0ie6TowI+9InPw/NvpPcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGblCRA9TVsSAnZWagAA0KkP/jiNDsDQ3tsoChVs+OXs\n+I9+QsKqqCvdcFx7swzmyBC0np2ijXSxcoeBu+7FxOU4HLTjC55GM0B5IBwc\nwwEGAMqEVVklOOlV1pan4ryqHvyXhU00oPdezLbtZ1jSMn+s/NRxW6apbeIM\nYCIEnkSFKKfEd6z0xD4oNo/Q3HXVc5CcIqIC871A4sG8UmlfyxFhafB2IFro\nooIm19C6VkPC7dGF2Io3GUpKWovi9ldonQJlXJ+YcC5Smji06jKaOvzqP2UE\ngXAvV5IJtVX9RFW7u78gBRsWuoEUMFX96WGvwij2NI7HhdGOXBv4ApWowNgt\ndkyV8jsMdUJsvckrWkk8WbGL5wpLnGUr7Xt9Lh5RBmGyi/L6ZbCG+nnyZ+SK\nhIDXSmxLabYlJsXULknB25NV3w0n9ub57+PO0l/Wb92kg+JlWVPTcYb0nJ72\n35UEelQmWTuFhDScWmh0vcZ1YV4cgXAbmDlFHGuvnPnBUFcc+ia6rQ+3VHDt\nWSr+Zos4gFmq6u/p4kQugBrau2XUgTF3d5bZIBNkhAtMsbP+p431myJwhyh2\ndGQT/sxZDhuT5NA11LK137kADatT7GQC22+0mdkVwVlGCoCjt3o7EUUZnIPz\nfaYpb/idABM9Xk4X/s/wlGfrENa0hIHmjHI3xHzMtE21UdzoAUf0RNdmbe7R\ns/no\r\n=tInf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/density":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/tab-scroller":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2d72f3659.0_1597269733341_0.5215940533465169","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8bb01e53a3f02a35a90da9dceb0343e73ba1bdc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.1fee70a5e.0.tgz","fileCount":37,"integrity":"sha512-0kxNtJUrF6Y7F0vyZGiy5xs5A2V8eQ1QewuwRlWMFB3sTJCGCVPpc6XETHNEV50Rcf0bVkpPb0wdOxBDuOiT9A==","signatures":[{"sig":"MEUCICSimMwKQIAJYQbBAYpSY/ob2CsIvd2z0v4rSj94fE3oAiEA+IgcS9z98B4qAEaWWQUYaR6hQRhtfrrZ2bxzKOnY8D4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHuECRA9TVsSAnZWagAA1IgP/2EqFNV5sBsFJzvncUDt\n7QwPZmVd9eVRfBgm/a4/qqI34wJ9rcW5ec8182lijMTv5ujk9Wetf+32N3ok\nByDIhLfLW/UyUO8kdYR/6xYGpY6Sj/oVLVmBkf9us9iCs2bAhpJFhRR1r+xo\ns7tr3KrvIGD+DsC6TBWkLFeTF0iHh4forKVeIqCMhlIpov0eLoRZ4rawA2tT\nozqSOBJZNbgxBXaj6LKNxVEKaMmzbyhPCpHfiSlpK8n6NTS9rUCZD1oq+AYE\n74VAWozUxXfPjzekfi2utWUAcRj31E6kHyyIYbAKGeSZ8fQ6Ab9KP/rxIvWW\ndOuYc2YeEeteThGGRaR9No795EQ/b9pmK/TEV44ji8XhHr5YaSMjRtKqPQzp\nl2dKrsOd5TMIf1N8FXkdXIgWzabWCKy9BME410drUMXbjjVslJoltFvNJx7h\n3OyNX9/3DkTCupec9FUgdBakUO63jLc5vgmqdhHZdpsBvytG4GL4S1CG+1P6\nQM4Haglx3m956b7XoG0/rOjIX+MUst/AH5rQ3vvMNz3Lwx8aMgaBGOvYPb4R\nB8+D/OoaIoO67JUtRn9l2Q2Ycv1HBXsN/5kygIDvGvLxYamilR6af9XoMZWa\ngFDt6AKXRJQEfnjrWVdgejWbsPfsgTefkSpfPad5ibKPIjXTmu07L9aEpHEx\nLBhL\r\n=kCTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/density":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/tab-scroller":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.1fee70a5e.0_1597275011875_0.8669532265454225","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/tab-bar","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58ea51eaee11f5f572205464a71a4e2903e5f34","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.023f3fa34.0.tgz","fileCount":37,"integrity":"sha512-8zHKK0KFFJgUGRJoMuIXjm9dZ+nbqrCmTbRE5jPCl2SEN7z0grmWtDsO1gMHHBBArO2y+hG9XkJXw2/E3/ZAkA==","signatures":[{"sig":"MEQCIDJ3Dzll347g60Lt6hMF5MC1UnBEPu/xem8PQhicbGzQAiBuKTEhL4A20hdo45CwRhOCxWDM0XeHFP0SyYSxZnfAlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJPQCRA9TVsSAnZWagAAzxEP+QBQC3aoRle1ER4BsEVU\nGSa1zOA2LTbfSZlEG5ZMp5rdZL5J3DSRAcLKzNRcltVdwR4Ngimxsi4yWJ3u\n6AECaMMR0gYI4jHezsfCBeZ2gE8vNtzYqYFbUgaxNvzbahd4MkLZNPw4b2J8\nMqWAfvhOAewD7UeHWk0x8K72eziqm/6+gzmjXo+678MekhljFQrRoUqWZRRg\naP79sxEbD8Vjzce94bAJp7bUhZ+NSHfzumwYQcgrocVmhMnbkQjiNiibKLHa\nK/iyf8C8bX9C63oOUjDu+An3vcYUkmv68OPM/d3gWcVVBNMTV863xkBHpbsl\nOCVagWa/qB5/h/4iA0Psh7llq0k3kIXryrjteevL0sKm2zCd2YMsh+4069mT\nnMUgmZrB86zeR+EQo/+dJBOWH60iW4u+ju3kk5bXVdLLRW04584yJQxMf7QR\nQRhguTAq6b6sc3hZrK0JkFGpqQjmYHUO5CIb8hD0As8XQ/OmEF1vLh6nwVff\nWhuF5PBQbvkieX9iSNdmq1CKf2IYKashzzLwER8PeQ36OJuAa8ubr18jChZ5\nQHu1K1wB3AkqkrZEtV4ke+wVh6zwxq1y/a0WnSF3oVEs5C1vdGmo6oHFNs39\nVF8Rj2r7BSnyi9joGxeSnwlEIrlqmYzrookcHxx2/lXpYiC/dwQk3rzDrD/z\nly5x\r\n=v2ZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/density":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/tab-scroller":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.023f3fa34.0_1597281231644_0.03072739439481431","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9848ed94a556e62383fae558657e94888b8b8e1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":37,"integrity":"sha512-sBPArrnR3TuVLHwYfbLb4iCBOJtV/28jkV0rWycwhbaAvtzhjgulTWZO4DiXK4kyi0fVLox+suC+XW5d+xRt6g==","signatures":[{"sig":"MEUCIAziA59P7W5tOhbHHHpLWjbL7sV0EJiGpsNNL3JyLP09AiEA+uTXbXEn2UmmeXlozxCFFxbrQ1u+WQeDe5FqlDQ9698=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJe4CRA9TVsSAnZWagAAXbkP/1uvBeb5GCya7xxA0mcH\nbCG4hmKcpI4MdIJq2mz8SfoWfZjnWg2EJp0THWjSKM6bfPJF1bee2bfXKphP\nnY7OOFK27JJhICXmvg2bigB/dvu2qOAlwIhg9MVDpSH/GgA60qaaRXwK7s9K\nmSc1f1B5ar5DEW/qbrA5o8BVSWr62CRzUMsjgae5PkoJH/M/Q2SsSgYvMz45\nuuYsS2hCCJKEPWRvfOL0Jo13v8jjkT4ZYACQG0SfrRzebZZWtGXICxQpBJyV\niuVjJUrV0Pucfnpmv22gPY693ENxqEPmM3p34yHIKrUMFy5P3DAKscpIPBG2\n0hPEXjdWHgmDMRxAk/aoK49WzBxIcTWrPbt/uaNnhTFrCpIveQwtNbPZzlSs\nbSWAxH2H+Na/7xEuVgqJdfMZ/+1wxeX5KT/xc5QVDV+PLNmAqPL9bm7cAJsv\nH4DK/dqYxqiCoei82QW7jgoGoteU3P/peXoEp5x4a41edGjS3m6SPP6E9UCm\ncypiK3Rp65gLper7bRDsg1lUDThzds9QNxbhb3XtkBBhNarYLMFCQr43clj6\ndfp3bqdayNk1y7Wc+FGp2s0k56i5cg7XsA+dYcThh2i6vaYJTDa6qhFnSHaP\n7Zh0O9ffcMTRmuDg7AyN4lNHxV+yuoVXTGzUUiaY0VfvUf869DLBjb04Cx5t\n9DLH\r\n=b6w9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/density":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/tab-scroller":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.80f3a9e5d.0_1597282232030_0.8302910282745488","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc7b8b03d6762100646c23028e596ad52efc2c24","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":37,"integrity":"sha512-3LtnDNsIEywi2K11kHVSAQR2tQk0mJyzC2apkpT/9QlmTYHxY5TxxInNUTRFiwuVW38F8AtpmogPI4equERw8A==","signatures":[{"sig":"MEUCIQDlzusAXt/uCNRpBEhHtzC8flgD+rbF+reWvYUc9lNr4wIgWSe5CIk52psQz2Up86T3jJpPpELR1+Z9aQs92deCNHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP89CRA9TVsSAnZWagAAU0kQAJEXSvfNtRxs90MDtcO7\n6hd8wcQ8Pfltz8TnWiRsEUPOpOFRBVmk/RPn5PjO3ZcWNGVjLBB/ooFFgUh2\nkFMwkpon1bQn4ajLU1JFm0ZwGlEEG/2vrQvOtMN8meG961gvPGeAkHS+EZlF\nZN0ra5n+QwRdAjk3VnINyeU8ubHiMNDRzX2zuaE03NXU+tjA/0Eb914lfgIe\nyrcuXnsRiIW7a4vkocmNVhOrPKwMLbZ1EIbV5kWMGrYhpaWt3RTQQWLTHRfd\nqBwUmibmPNxfms2B65rwRr976q0jZNvdGcjg7bRg9Q4J019cWR/W+OPYJ3e9\n/cPnLW8QafxPTqtTcHg7wThjEVFxBD6uHvN25Qr60N57KB4356zo9cbhf+vR\n0AAzYmBUxvo3RslUGpFaw/MdbNHFuYL85W98ZI+A9708B6ggtbR8yW2depxa\nIkjwlDvukuLNBjVWbgciNhFJ5S7qgcdhYtaE7YHLVJs7NI6j86sdc1hwDHn3\nHSgK5m2g2vbT5dh9hn1aPh0I2GvJZqZb5C5a5+iR2+7zAZTh0ljXX/k9sRee\n5ys/Kd/HORfVL8++/TyjxEWQBP5Tqo0OxwNbpggpZ7Q4eDuZdNd2r+jSJLXd\ndU5WktbI1SJbfkIoaWeaJJNTizTSmxuro67k12bLMaaJoICCvHMwqtJSAUBv\nAh3I\r\n=owLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/density":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/tab-scroller":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a1dcfe97c.0_1597308733120_0.9873063077782793","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/tab-bar","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b47988e751e77ef4fbf2dd3b2fc6479baa359200","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.af332d5be.0.tgz","fileCount":37,"integrity":"sha512-2VGua1bOHmt3P0Ygz5CIYQvA/47K59Y1yinu1CyjQlUjUp9TMjjFP6WL3AJgWnVdAab0smiv5mvnmyTfG7vtNA==","signatures":[{"sig":"MEYCIQDYFev9wm3sFx9KZz3rDtixPaqOJ9jQV74mKHSSF27xHQIhAPy8lLE5aw9Y2QQ406mQdqBubKSgS6AmhFguYGP5LJQD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa5WCRA9TVsSAnZWagAAb68P/2pLmfaf02vYphq7LGLA\neHCG1vwaC/qH6lp+9sh2bw7g7kpgJpiCinWff5RoObQOkBaRdI/0iSI6tC+W\ntNAuz+EzbXBqJWQzC+uVJFEUerWJGMI12oU6YYou5LVi2IlRXYQNSh0xkWwM\nojoonaafycdIYc20vH34WXafboy7XmEP9j7N78O0qQbuo3+bR+iGjK9I3Clo\nwEQ+21uWhsqOD3xUNWDfY9pRv8EQymLBfX5I8YIz5mJToQWhloWlauYnBsOz\nEm8KodZs9Q6hQS0FLHNvwQMMgHEnah6D1bBg9clZ3lXvHjGtagpUid0IQzwx\nWxjCECelCLsi3+OnYz2YNMrlssxL6EyvLvghk7h8v8HDn1L+3YmMeMEnnRnA\njn9ff4bsplz4u6TCi9TlggXNXM69jSp71bLD3iq0ZTqRZEF8DdT/jLEgwEfK\n7tn97C7isxDx+y/JU5rlenHJj40f0zDFPV9TU6amxkY8JqWPxEoB1uokhkYd\nYHLPQu/7jGq9tmJOo9RhoIfv4qZfyRzBSQvSvC7JGZ4+OjpYy2lUt7uNInyJ\nc/gKSwff61KdcHtR8uciohiNrl2CSi5ZN1nouHREPccz5AV18dcBCdZCh1BU\ndwl34rWb++3yf+hWNoo9WOUmC3fMocG6FN39XJZUkz0wureBegeL1rCTMzo0\nxP36\r\n=VeVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/density":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/tab-scroller":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.af332d5be.0_1597353558093_0.3943157761364102","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b380eab060d4e0513db82ac08e977346c17e3bfa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.7dd4567c4.0.tgz","fileCount":37,"integrity":"sha512-l1909c+Jo61xyR2CW+bQ0QUAc03LZ+hA/cEOZD+zTDk8Ud56CHeSq4WQZBcr+OMt68nxjhjKuOkdGNYHrBhuiw==","signatures":[{"sig":"MEYCIQDPxXfqdFxQ8Kwe4ctAdAx1LKVj1jR9+6rZETVFfHc8UAIhAIXQzYtgaY97HfOEwi282YyKmp8nrpMzUmDGAK5I8nfw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeBRCRA9TVsSAnZWagAARk8P/R97XlYL2JK11lCOtFD6\no1q4yDbm2JXZRtGyIr2gQrQPcU5XgZWopzO7KNtSIbvjKsjt4Of3MNRt/svQ\nQMVc8PbnNLPYS22QzEw6EJYeu9gijMeT+tcuoBpYcSpPQU7xWeC75TZ82s+D\nePBOvd3gL0DhyESufIfdGpX+30eRzy2NA4h4fjvuD/+6AVn7kYkvoqHFUj6W\n+pqPl69UQPcfJ2pXcq2e3ebqiEg8DJJYpnpV3tTqfZiFUX6MtGOK/MKJWcpA\n6UIMkQEEUvLtExAoPkn6a7AtegyLG3xNe0wpPPZQoMUx7N/y2xuTMGSv33Tf\nHXVflyJIBpZ7RPNV+blJm+78ZhyGGxHCNENrybSv5tvkuoRwnwxh5cGL3Oxy\nzk+CWaqAHLKiW9qevtDTbRncmQg5dPQL60QUm++OkEj2oQ7rD+gJu4rUxjHg\nVmSCqNTHM8vtigIh5Zo0h0It33uudT9FCOrjTL+0ZHzl9H5JZoCTKlCMe6Ds\nvH7DxU+BVAmEee2wovaqb+cw1C7GROucGsnlGFGMAHp/hrVXcXkjKSgZ2iGu\nA8REsABWiY8MFqU/XL1v88vim38zo/DorQhu2QzlQVzOX9YiBSudi6A9sknr\nlylpEiE4CbOwtRRnBTS4QYsptSreCN1kEV9xd1ShcNuzStMGIX1ZzYsWJ0oB\nV4Sn\r\n=1rVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/density":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/tab-scroller":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.7dd4567c4.0_1597366352508_0.5317517566062293","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11aad762caf90beb1e792b5ccc5a8f4f889898c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ff870005a.0.tgz","fileCount":37,"integrity":"sha512-rh1wNewBJTurxfmF34MKbSjzPGNQzyY0S6tlVa9y3TfBGGBxGMmfDiW5nh8I7CQS7Wj271AIdxZMwOitrEq9wg==","signatures":[{"sig":"MEUCIQD7dfpTqZD5ESvG7CXY0UrqY5OgKHElct6JysbpvVR9wgIgZzRICVFh6wwXmyuKKcQYlZHW8gN/dUKbmm1CGaQRyNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeY2CRA9TVsSAnZWagAANsIP/Ayp040DQ2N8+ciOAxb0\nNAZl3cgSVuX6YNkRkxyuqScmxIUgfYAF2WSLKHtI1jX1WK/NGJ9LE+TfeJe/\nXWJ6dIosRFBLe/dh9Qv2tqa4q8A4b6M06hw4tsA1ZqkkXGHwHsK+6MMhV1Vi\ndBaotbZ3r2bb/iZXEoSg+LQrJDDZ6Idwzbrfwjfyif4sDMs4AOllB4/j7X7B\n9Wnhdtf24qmpbnWg3F7chsbFjhRGqZzzMphPVweujtlV4C+juQ5ICxhpywVE\nb2p6PlIvFj+JYxZwrV9iQuXJsWj5jpzRCSlfwt33k/U3FSXEGr4m9sJMZ16U\nA8jJoj4l2dP++IbNqvh/ZVP7FJfbK1k2MHC0mZ/bZ4Xj7yaWRvecRCfKLmP4\no3GtBtL5EdnuDypO0VE6eDzlL5tlnqcrxD3qZ5mexY0P/gW4/FBTBGXzLwhx\n22jPXt5FeozqEe1DKJ5WVq2OZ4D6kzjxhQhqfu6MCydAwSwkJ8xneiSt2mnF\ngjPMDJNJTZyWFGQYSHDPNRQ4Y04nnZh1aNa6vYuJ8AT+Gb7SkJALrziw5FQ6\nt3sHF27d4IHQrAeYt3EMc5Qj1oNGMzbNzEfXhHKgkYdMS2Ggv/n1wCl44/1s\nTgA9cdJK9HSFMu1bOpMFg/uEQKB7uL6nkJr+z33cwTBmQGAnE02oWODjyCRR\n44P4\r\n=PY9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/density":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/tab-scroller":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ff870005a.0_1597367859040_0.5618882018821556","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/tab-bar","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae7f1a5aeb61fdc20175c3c4a19415d9450d9c01","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.150f427a0.0.tgz","fileCount":37,"integrity":"sha512-9JpBJqoY4gL9O7oXIIpaN1cxu8K4/HgwaPe22UZQNpWbIKCS1kl6YkGs5Jndn94EUOmBm8zfB4aRn9fVHimixg==","signatures":[{"sig":"MEUCIQC/Cb62dCpuEVtk9QlddpVJrCA+MG4rfEnP9QlPW4fO+wIgC2M7iy43UjfFapNW/u0pVU5LQSxA/WrzMXiaWzxspEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpJACRA9TVsSAnZWagAATqMP/1juEw/Jn1fPvdkFXDwK\n7mvNYUBqvTXvOtHInSctY6E3W0Zcg1eLmOIPPz2gxHw+W1I26Dru5CdZRgph\nL4YGLocLqqLolzySRy+BY50SCodsvYY+/h16xz8dbs2eHGgTCjPDqRlfkDF0\nnnyqw7YQC6WiGLrTD7uOhL+Xi8MUhpOXarmwVC9gpd5Ca9PC6juXZ/Z3cOxG\nZ4LfTej15sdFn9rdA9qLaRtvZQGefNSZ4/Vy/fE7RuHEha77n/MO/fsQBg16\nc8vU+ZTMnQseGsZXKlYuweLLpT6hiZXsRnwOF9tjodeFwdXBWYB9XCB+0Laa\nTreGLTYOS40bMmNnauab7Eyp/uJ2NEl6Wneq6ZzJEh17dP49C7h6iMDYZZ3J\nJxiRlD96fJZFj3x0aNiYd29Zn8lNRY32lBSZASZgXAigB3Z54jZHqksQuwkm\nKjiYKS1w1D9rLAwrzhIZT9gfWkCan8GVkRVLAzbrHhKLXa59L1X+rSLS+X/O\nbHe+HIC5lJ4psZgPrcO2dgxkM6WfuoZVAlRojnZlreoRQMhL7si+G+2xSGJj\nw+pGo34g49O8VtXi5BOs43XfV2EZPDAqAH07gnVvFqP2ykr+ZtpFlahDcUhr\nanlGcIhvRxtprtr3cFIYDZKQP0Vrqffiw7DBICa3NCXUIDH81OTuJZPyP4t+\n80j0\r\n=aTVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/density":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/tab-scroller":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.150f427a0.0_1597411903593_0.2578430207634117","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e85238ff714a6f7f3e538d1b85a70ce3e4526fb0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.bcc58290a.0.tgz","fileCount":37,"integrity":"sha512-XRYEbrCX8SZtkLeVo3NEZMTXYXtXfCMAczUlY1ZVyhNydvzKBJeXbYh5wviu6v9aaO5d16KKXfbZqv9Wu65FyA==","signatures":[{"sig":"MEUCIQDgdjerA8a431rnDE5BwnE42prrci1uJZKKEewBfOWtjwIgIgzUL0YfG7kpH4O3lvDC7fD20f5heSEL2l2ljQAr928=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNx0LCRA9TVsSAnZWagAABeoP/iTqWm5yUIgGG1ZykOAV\nb5wm/UntEZb1ewG0Uuqz3HpATRTSg0OUcegG/PGH9mCTNTFrQ0M4YLC3n4a2\n55P773F3l+HLoow/dc80Q/ZV65DjqoxeNnum8VHTuYKRDIIQX0Z8Eq/m00KC\nYvVjFKoZMPHGOaCOGAGnUqKBt/wkOv231nzbKZBvXS4baFWe/Np2bdI+zTye\nL8szrk4MOMib/ugaYMfTmLfsV6TUkKBsUskJ86k95oFYU7pkuCrdTrDZLA3g\nAalsV1eKdoahlMomhJQH1IQQcG4geCIusbQQ/5gh1rxkDQ6RJ6+6YOJ5RgKy\nV4pNxilNy/5dpl/lLgl1VGeCRuOqlZa5XLdzPXDgsMlfdG6Aw2wDEwUkJaWE\n97pfykBWCVJ8YWgs7aYaDuCBgADfqSGOvhh4txvUAPDd1Mjmg+7EliuutHG5\nrZq8Am2yMZYTA/GYgBc626Y5ukQF+IrntVNRMxgW6sVEM/qbkD8Y1H2fICDC\nvBlovhZFAFDdmWlnzRzN9cAisY4+ZwzQG9zKuiBU4hGK68/H/RgHQaaxPOpW\nuTlPm60w+yXA9m53lekhseO3XswdTiEMi4BXoh4CokW9OLMlAMmYSTGta6jl\n4A5oBUqAu3XGxFRTHOTByWvVqrLyWL0CLHIAtNt1GHYYIGgZjEcj1n3Pxtn4\njAt4\r\n=Ph3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/density":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/tab-scroller":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.bcc58290a.0_1597447435412_0.2458108358188953","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46e7a663d9b168a4374e2822d8ce98069544fc49","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4f55400bb.0.tgz","fileCount":37,"integrity":"sha512-PnwrHqsExf1kVEFsi6hz6qh8q+uF5bi8WOQapoP+dSO0xwLZWqpwd5vG4OyagJDlHnzkEaV9s2+DVosbk1U3FQ==","signatures":[{"sig":"MEYCIQCd0PosOHW1oaLsWHG1Hz24lrATswmjvOYO4kZm3nmQLwIhANxxWLB5gE1ogIxhei2iFbfAN1ccB8/1oIRxOto7HH6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLfCRA9TVsSAnZWagAAtMIP+wdXc9lMIqlZ4CGrYgjC\ng+q7qs3zxNC70bYjftDex53b6MjKvkddBzLkdy9kIYyyGoqUs1EC0qgMuu6r\nzFbPqbatDocGvT+ZrorNBmDIrEC9a6rPwntaHgTYgldvIEdTJEp95l7Hf3Lh\ncBrfDpqS1flFZoDUV3LEX9DXurtUq1PdDuOx1OC8RYQ9TJOCVVlps/Ebii16\n9LoSzDdzo8uLEP6bSAtZaVt9ntejfCb1cBO1Fuq+911QYUofx9Mh3mjZ4FoP\nOzNYT7yH39Jqx0nYPreEyN5u0gW5bYTBwg4gUrBqK8/hMtyiU6fu7+js0nF5\nRzfzYMsrydk9zX4OFM0G255kBAErvRXtENxtGittk87uz6eKkKtwEli56/eW\n87pPKg7dN5tfa8zbcCma+Qaq9l3mrXT/2kZW9bDBH49aCfb8s73RGr3z1Iz0\nFRPcLqUxEVAZpT4o/8ad4HgF5b+tfbUt4dABkDiJE6DZJtqh+KDXs4bP9vMV\nFMMR0dt8QeaP0UMa9+W+oE+ivU59C58s3prBBjHljjksrFq0K/jQ2x4rLxlJ\nxA6RR26q4YKA5X3h55xVRMiTyPm1Y8uvv7WOqAzV5LxPMNc/ENX65+A8sE3Y\nCtejzbNVVvoYhLgAV8UvcFgL0ZxU8Xqzj68+JGbiLuyPcIg/ZvVaM1Jb+QYK\nXzGC\r\n=2Aog\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/density":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/tab-scroller":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4f55400bb.0_1597682399121_0.8371950074345498","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/tab-bar","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a9bd85ea026a0c8f06de9871325555d23c1556","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.000d64815.0.tgz","fileCount":37,"integrity":"sha512-h41UUMTsNhaSBC9rS0tofws8QyKSVzGhVAyhUvvGieGAhHS8tc4QPNLbKk3/NDUUruNJdUMcd0h6P3QFURzPXA==","signatures":[{"sig":"MEYCIQCVqo0lCYQsiqTQdzQ3qJ6acAAjwGw9ILnhRuXMRinOvAIhAOweNj9LRbYhMHUs/zEZZb+4HLlEtSFCc03fhM2xYed5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjqCRA9TVsSAnZWagAA0sYP/3PjGd05bulcU1CiWmCv\nPLpblUjyVyvfg+OAyQtbzgNOqKDsVHwU5vIObR5vRqsuDrovSR0ZJ0RJnKX7\nBkZGkKZrvq7FIQxWYulATWVj63IXhpGA0t983ANzXB3HfkHh9whTVeFSFkbb\nGULWGHxTL8yLrJWUkuZ5lADQq9vI65RSIkZBXiW0gYpnINu7E/cuCZVBm9aX\n+L06KPmc0KrGXlBrkOjjfMsNwNGiD/kfZAXJhj7Dutqy1Rpl49btgZQU1WoO\nUBA+fYvQixCM3jmhriKQ3fkeyN5GyuHIKwghNXvnvU2F3O4ByGtNGkDYbVh7\ngLIg5iJN4si9cH3xvGxSnN3gPnSa1A7avIPmAnDJY2ZXul7STq5xOYevrncx\nyo5nfelixCKu4dEZXUl0Jr3Bkymd4zPO8KuDp3vhNP3wzt9IL2Z/uQEBTpvv\nQIIYLYBvb1Vt3CHmukI0pGKQThA7ooKIAHipT8BfxAgRbXL4ZdOXZ2/jwF5e\nM/WZrgE0wC5/8afA0EsRWX5BitvKC4f0SH9NaHk8za6hBurIHORV6pOc4eXQ\nv0h3HAHXp315VjQg17UToOdN0+7QxGDfwhIlxp6dtEMbfqrifyicTyo5pY0k\n55uHOYz2JAjgqZ/qvESrKgdOkiAZnnmwZfOT+JKRXZTtVgD9NC+I9jPyTlFh\nAxhX\r\n=3PUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/density":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/tab-scroller":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.000d64815.0_1597683945650_0.17786001036771903","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bec15f60cff50c7d172d4aa96b239d7eb049d9a0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.defa599a8.0.tgz","fileCount":37,"integrity":"sha512-/GcAa5rH2jiGGGrqjigqWkrqLY0oOvWcbek381R4ZhKToekVnSaM5wQO1lUr4hLS0YWr0kw9xqZ8k+4F3MYM4A==","signatures":[{"sig":"MEQCIFrewLZr7Z8hkCOx1DFBcAmwo3LhRMYjGYd3NbFxCoavAiByTD4cF43E4rVze7dNLG+G2uqX2uPBNc9g/onLSE6ehw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOumYCRA9TVsSAnZWagAA3AEP/ja2gHhhuawWsjjiotxF\nSi1rotetdLmKGDCQV0K3tD2ESK71WBLhzxYKWV5EqQuYPbPg/UR/RSWYzw93\ne00Zy2Bzc4zph41bR7iDRw0prDd/2GEtheq+96Hg8kAirhDT8ntGOR92nLLJ\n3b5HLU8+XHdTlOjYjqP0XeFUa/GQJY1mqam+xJjsS8aPxZmItv/uPlws/e/6\n1p+aj3S0DkiUDrjZfJbSfV0srE55Xk2lQdb6MHnDaIWa5SOwdgJb20TGHJRA\nIXfu38qzZCin0zcQmrv8XqxRHKsFyI9W9mroWECRIkZB+GoL6DC8AHpBIZ7b\n3zljFOAO+TYE5s/duIuRUcxt3JuU/aclSa1OIq6QPa4yvlnvjgLSyT/YV8sK\n0bNLTNgVMNn8kHNB+qaWPA+DfkTPfuYsHVXC/9JxdfY/hpEDWKSRCrLuk0m+\nt/H2kN49N3lX01RFlO11QnI9DTN3s5vWkLJDQF1MaZpO+KUPfVork0zP46wC\n35SDgeGFocSTQixzgYv0vjN7oOkw05KXDzTgz7OtUw8+OGaw0BrDh4+oYSGn\nfckuQwMMgcVFZx13BZhBlZmsS9fp+6pqUV6nowe7u9TcL8uNAhIquh/fd1ZB\nL3V4U3YOAQ1uoAmkynaLDZ8zvkyXu/A5dfECSOeubYvFni1puRkyy5GXG6qH\nF8MI\r\n=zVDl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/density":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/tab-scroller":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.defa599a8.0_1597696408207_0.6303698054784064","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/tab-bar","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"267723f169edcaa99dee3e5a63646e3076600c5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":37,"integrity":"sha512-EobM9S1/YlJNbqe9lRR8ccxglDeLoHYZwELcCq8i99CCp8mL1Z7payccZhCb8O2Hi+BrqfXEWWNR/gnX6Lscmw==","signatures":[{"sig":"MEQCIGWtPqElm29afduZxvW99jQu4Qd88wLwI5GA574uZW1zAiAZLWln7l+3et2/WNzC4v1JFyfhRySDMem6eqF1524p+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCAaCRA9TVsSAnZWagAA4zIP/36un0+PUHsygAZc0yAb\nCzp6rlazuGiJs9MWGZdQdJNlR+IKfd0z8fR3st+RZF2sU1Kc6lFyfzgC5xHH\nNI0E8PcR9I00k/3g7anome+e83u6095QGyF6MgS2P2d3wnUXJle4alKUQTGy\nbOwCQtURxg1Mkuu5z+g3o9TfwK5gUqKbA/fFu5vHw6Uq4mnE789anZGTxWzB\nk+sVIJkcRXkavCF7k7HmGpnkpLBgsdmpKw1HxT+oj205EOARuMnf6ybW7dZQ\nchfVra4Yeoe5OAZ4KeRbbE/SStlyM5C3Jy3GJrohFOAdIR+hz6m55QPa487n\n6kpxiVEMqWJIkDK/b6k2yjH2LMQC2BKuI+l6luz27BKVxJMFD6irWhETrFJ2\nSDWoPpr0ulClwgLdBmffy2Vawm3iKQkZsAfU+JlKzTW6xzMJi/ZU+X5y4SXg\n8WHBsStkZfpAbWcZ7vi2e64Zfgcfq6P/JOiBJ28PaNJnHbOAe0qdMDIp3no/\n1uDfzN1VLsX7/5bbp/oqYMJ6hrYGuKSRHdIGzAbnqss9HvAQ8CJ0N5nQzvRC\no+BmD9cLGsIr+WF3Ml+hF6ySZ9UxbwChoPv2zteVdh+kKafX2hGRdy6YBt2y\n+O27J7EmO3AWTFJ36dN+LOfJOFhE4LozB+cMFFTtApvL5yqyvkoe8mcdvfVW\nJSlS\r\n=zclp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/density":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/tab-scroller":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.66b8ed7e6.0_1597775897566_0.45388734442484213","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d37ad1afac205a2c1804af2179e4a6b9475dd05","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e2b1033df.0.tgz","fileCount":37,"integrity":"sha512-VXIjyYUuyaRSv1+acp1uL7CHZwOurKGNVXo2fk98kPwBwzVRHFJbe6vbFZkbXxS2sTinbMDBrVMAh8fxfgqY1g==","signatures":[{"sig":"MEQCIA7jhYdFiXiK7R056mdrX1nckB6ay1y9pJKcv/Kk7XvPAiBRe6ksrLNazhAIHHKET9TiBtf2Fr29fNvD1+hnC1BpvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXLZCRA9TVsSAnZWagAA+GcP/3q2U6D8WKK/IcLDpTBD\nSFxwtXk/iJC7bPHWTVVy17S49HhLzycGzoWqzC28SZsL6IuvKUeJ539ZXdAG\nwIl6NXTyhSnLIEii9FKM5lBBD8O+QQJmTDAZnWpdMDHo0YkMaELn9VHqSzJ4\nr2OD0mW8tIItAZ7APF7Fi6QIsZkKNC0+QLTwTWZX23Q7orA9BPOge3OCtHbr\nf02p4gOU1kHq2HEy73NUhf9xoaun77wZEepwsuzobCFAi1kM3P6wxJx/57Ln\ny7Q2WU+KeWEMvWqr7bbMW79dzw3S+O0ygMkgsgbZ+2jmvMPfszAAPnmp+sCU\nEfWo83ghAqklnuPD03ac23OkhwiS1J1b6xD6+yccU3rcjubk4cx6BJsaO9L7\nU3mZiTzcyzcyMtj3WfgOUyj2jv8R6zS71t43bRYhZmL3rF6QSzC6P7a8S8fl\nNSdqO2cPlxNjhE/yJYSFK68tp4ImcNIb6J7Oq9+nKVR4Pb6pbWn66SL8DGGu\nnWBrYipf8TgIPs8Ify6Kr9r+IG8/5lOpyTtT6EVnL3lrphAIz5BehV2ZAbbw\nLFfTtZxL3vELZ5gF6nylcAAmSKcukKz9k1FYKHy67M58Er0dylQxYmi7PiYH\nqUO/sotp45vyZ3ufX0K3mEKOXjKR1w/02d9pX/Rz2PY7q+bEEvI36AiHQe+6\n0mn0\r\n=eK7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/density":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/tab-scroller":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e2b1033df.0_1597862616898_0.602988320355629","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53bc531be59a2562770a632a48751f6059a8c335","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":37,"integrity":"sha512-pdZdwtyqEmE9PeL7dbhDpbkLABbhaTP/NI9WeNJ71NbH4HWndpt6AdoahgYIeexpYRTiJH+4Mia5r3k4ZT0dcA==","signatures":[{"sig":"MEYCIQDEgzOuDV/dWXDYPFAQgXYjlsaLPDB0tLwx8n4OxLTLfgIhAOTunqK8Lk1/dCMpOBqi/rSTklDIE0qu0HhJqYpXfEIw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXynCRA9TVsSAnZWagAAwCAQAJOL8x0N2kn5pRKQPLs5\noCQ89SKMW49eWNFkU+W8TpA7pZOZfVb4VqiIgqfDrXaqlOXTePqvNWbNabrl\n3S4OMOCK6tAWZt6zkMon4GUq30d8RAj2khKWTLvwn5Rpdfr+JkvJ8y4uyHGd\nd53bQ/JVxKJ7s+ZznJ3f6BpXC/2vhT/4Fjj91G43mOxDT2TMJAza06k6m5cU\nl36J856ElenS0bFPtcOQOp+vRH/Cz5YsTWuPvojJhJjLVKj9jDo/tLBRhzVQ\nYhKa+JZUcDHsK2eXR7Ie6RZvI44hBcig8TYXXC+LNyjrD7eJOQL09+RKywlW\njWh6eMtVlbe0DadH8WxfYobXTIZEwWuW96hCdUKxroUNsonRAxc5GvFexTSG\n2Qo/c8wX+kUJAXaZ/6RZMjBVaoK975WiGUmpmu2xGwS+GpST6WN/BFm/5Bfx\nXn1pqacBA+Xt/wz8CqcxcyA+CdyqFyI1RebRcxeyALfZNCbdArzy0aceNJqf\nv6PeoW6LTU9u/M4fbcIdwDjwn0PQTaDrMo4/2VbnoFDLblCxQ72vYgvectZu\n7YRXwo4yKCmzRWaqwZg7tg58sVemIsO+ksXbW9ZnRyFcX40YKWhhChRcqGbf\n96vuqYPwBfi1h3ietCPN8sCn7Rt7/Oh1dO29Nf7B3+nrcgx+SZHf83rjf+dQ\neRtm\r\n=LU/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/density":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/tab-scroller":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2e8c3dd2e.0_1597865127446_0.0461924457806735","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0378de99a3e71c640401b69669b193ef257e0d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":37,"integrity":"sha512-hadOT9Mrb5104V4JZ1eaKysRGaGe7LlwzywITGcb5qJnfbj5BJM3kh0BY9dKxPj+I1FeNWxy8cLbJ22zB80lZw==","signatures":[{"sig":"MEUCIFafg8427z8qjLHCaArQRiSM+jcKbFiGo2giJ9vXdumTAiEAoVSLTvwAEXywnSiPRSPus9L50EUueLdD3vOmwc5FIPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYkCRA9TVsSAnZWagAA4UQP/Ao44YuM0rOWr9X5XEAB\nuRrvsIkboDAQPHL1eSLD1HWf+Dh8m1AovoeG+K6+6X3zXi3n8BaTqu7igRN5\nHDo1OtasNgOYLwxM+L2YFhVg/DzvQOXsB5rVm6Yr7maJIoLXcOcGzbQlvQ1w\nMqKivJ19nGNJBGNPmA9HoREIoQhmzv7ZTiNGa2/TqHuGnLY+SMIATCuFMg5t\n23ubBVtiax3tVuRzx6gPSj6ufDH8FEe4bbv0kQytjIDVhzRN2/7iyR2kJgdZ\nbzbF/C5fwShKqsWXDBPnpk1WZBZGT05CJ5TyPfvhRy2EyhCfKjqVksYQBojH\nEmMIGvxLMKVaVD7jQOKginki5uRDlSmljr8N4GuNGk20cG3QnIXbc51n6OoJ\n5vBO/iTeeCb6s5YVJiaI+xCf8whHpHJQeCM850i+MtwK9sHLcaBh2Y92M926\nPKbmoVrRBmniEjmGV2DjzgbuLgIxXzcZEkF6utGO8Ci6pfxImBYd3vgeWKn3\ngthyjpr3j05lzwd37yQJA76TE6E+Fu/S3+b/jOEUGrxH955uBKHU25rqhPET\nzn5dWngb/Q2CEO191MgLpkCrmmsObN6HqnufRM10hdxNQ+ZTApjblYg8vKXu\nFw0yNwY7n2oewzXleSTM+h9/mqfuxGhwSjNaEwBN7cDyslPeZxro2ur8Xfp1\ncFsD\r\n=CWWl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/density":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/tab-scroller":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b2e80a5d9.0_1597875748477_0.7831248253306631","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"407040637110aa0db4fb9bd3af10ec1e70b7f8b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ff88df637.0.tgz","fileCount":37,"integrity":"sha512-CR8YUCWOgFWF8GkwRBsuRNg8tl3NKiW1+jx3+NjLtqJTbRdJjxL5XrtGJ91TQhAXDKlR5srglVkbbGNL94D4jA==","signatures":[{"sig":"MEYCIQCeyEJa8BgG1z07pA6w2csiLk4+V3t9En/69ool2lqr4AIhAPCChUGyI6wB74zVWWt2OtyPDFoYoWIncgQTDlgXqR25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaj9CRA9TVsSAnZWagAAIcEP/iE/18PHcOvO2B/kWKOg\nWyepqdbAW1a35bGukOIGAb0EKI3EDwfVdB4iTGLwnorVHldHfRu5G9YGZc3y\n9W2kTgzhfi29tN02AWdFJTzdHZd4tL9jg2DiVoZXcSVnns6Mo4/getZXkigk\nwsJfn5MFDHNlIcRURYqlHxBGeyIPpzlzmO4q1pzszOLsu3dzqfz44lZYmoB1\n8ABL5oUuD561K/faTXkDAcF/NcW+rksCTwehyXtK1Z4C3xZmw1GjsUsPhnbk\n8GY3w6xjs+MQOkqKnISgrBC74XNeGdr+nZgik82Zw0FzZCc+ZyDADtbALugs\nhMnV6w4zwdWgPCMiZyhOi/N0dwlsSVKkdSeDSUmkcDuOCZWmSIs1nQY4ICEn\nBGLQBpjDYTVSaAaKjoiJucwfUkXKUI+FtZ9jkPEnhOIeOWqPAbnCD+HzllEZ\nRtug0UV+xoESWMBZlZ8tjHqj/nNNugDMuEIOb3GYw2n3MMwXEqpowarxYra2\nx938alu2dphr1iTMQ5hn5OLyacGX2K1CqkanKGEKJh+k3O8B+0BcxhEkWmXj\nGkGJDfEoefSGK4MYdiGBkU4hLqKUfotcDU3B8x6TaQPY6NyNVTiijIk71rNJ\n06ywHlFx4RQaFwu3oH6CsFneA/IsYFVSQuknewolznYgJxoF9ypvUm1el1kg\nKXso\r\n=4g5C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/density":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/tab-scroller":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ff88df637.0_1597876476981_0.5022535304569209","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/tab-bar","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87b9125f6e9b3915e2f62f20064c4fc0bf92afc5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.32fb314cd.0.tgz","fileCount":37,"integrity":"sha512-t/88ivixkPkrBg3cXBJScUZY9kCnQy8NsawGy37zd6oCL8gv4rmGEAeOnqVNET4GpJQymbKE15hZchg5HfbrtA==","signatures":[{"sig":"MEQCIBqJXgDEudAARqOaB47bSStmR6kcIGo8zwUnX7sLyVZAAiBrxJof5ep16+7wZ989HI9IRLNdCjAvPQn5ja2QsyjNGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlLUCRA9TVsSAnZWagAAQzQP/2Zas3z2kL8w36CrVLyX\n02wx3R4DOf8u7vsFc4hoRi5uzbvB+sBdjextN0gbpMxItr4E9Zel+C1Yio9I\n1MwadCdZfwqN2gxixiPvUNrkIDCjEBffpa8Y/kkiSxO2IXyClj//aEVQhRJ9\nce5fErGW6gJjKCbIs4LOJ1Ny7ogdIUYBnlROiFJlZchMsRNlluzt/kezaVMR\n7JHNtIJGajLLQ5599J6Ngq9xZnGr/EylvIA4Wk3Q9oQ2lixrnfVR5TaG6mfX\n9EE9dJmr4zMaTn3tfat1TiRxLApIW/tzNYfQOc96XFXYZ8DoZCuhzJhIY3tG\nVzAGZA3ExeSHUq0nsUjCAs5/+XI+nK48p4FMahijFhVIMZAkF0ana7MYVkFs\n9XkzZE9vqoi/rCMgZMPkTAQW9Q47nwyQ8nzRk596iG1ijem3zh6474RjGHev\nftzonv8V3a+L9V2XZrjw2Y7HQMF/hls8I4f1IT2zihf4Ox7gK3Yix2E1bKHu\naAiT4HelG3FBRufAmkFnUdj+s66TkaecMSBdbPSdrxBndOeFmlcWYf7/64ff\nKvXhLHlNUcq//zdyuRu7iXurE8U/ztXbikqOnyrTkORSrUjqQ6DX59jpoNNF\nurWSiEv9trzfHgbKSH2J6ixx6lKgN/BaMLzSZIu76vYaoME0uZIc1XXAeaBS\nn6El\r\n=DsBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/density":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/tab-scroller":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.32fb314cd.0_1597919956027_0.3231739518532193","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/tab-bar","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2531df91332cc28a5355c844e3af83f2ddea7816","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.546277d32.0.tgz","fileCount":37,"integrity":"sha512-k+xLiY2wSTP9h9ypqv3xu1schkpsjaTQ6tx0mzLh7Nsontumhv8S+18FmpEce1pVH5CFf1RhRiyg6JzpFA6emg==","signatures":[{"sig":"MEUCIDynwzKKWxoc9UOO58EyYystVPa5p2Fpz2LRnNBCcWhSAiEAjlajT7AX+ARwN4bsm7YFDnf4Jm6TzlmsVciL72sTaxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqjDCRA9TVsSAnZWagAAG9gQAJ1J07xX6s9AOV9E7Tgu\n9z3nMHVH6/d8WhtRlNws5QLbF/n24bGHuxZ2lioK2P0T6mX9Llagbs2jD9H4\noTNSzWksSLviHYkdqNdss2k6OQmMAtuVYahwgMIil1Kmk9KKGggWzsvq/K2O\nEun4+1wDuQOVcwcjfw2Ik2I0yX61DPnix0vjLTC6SYxNPEoR16casFFsSBtV\n3jZLlvv4ZGrWnEsDgJSibREcl451e+4x3t3wacmQq9Vy8XCtoldvKl9StZ08\nGtp0EboqLttGTmRT7Wq85wG41CdxaiqQqV7DTZIpthCdbFfRs5fK9PKJwSKT\nUVfz/xWAc4p/WhCqJzup5zHCjNY76J19dw/1lBDqXutCRnzWibYYYH6Nnkhp\nZo6y5CG7iO3xUnE5MI9JkXXZ/C5fk/mmz3YLwUOuAmI6vuWiUWbBeAWbA/77\nvRdukn6fIDEwx0m3FB7OdinQV5FVG4wJAgquvT9q7EtLv1iEepBZxFj33k1K\nRTL9xzT7w0MwN39GwmUwwIL7Vo25OYqKanKb6uNAAE47ExtrbL7ccHMFo3fu\nfEuuLLqWaQNiJgTyUu7HxHzlFBTltqGhN4wZuTIt1iwekQNSsOl1lzvpbyhh\n9FoXvxgKKX4RwFNk46PmtUfwVLQlljrBTK5zO6d0HgDTfKC/Ds2G4taMswxA\nDhPd\r\n=FK2K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/density":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/tab-scroller":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.546277d32.0_1597941954696_0.11037227546119222","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"308a3e3b5af6cb97cdd5d272764fd7342eaf87a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.da72839f4.0.tgz","fileCount":37,"integrity":"sha512-lnWMCTXV++KM5iV+9N6vErOIayxnkqLuKqkqU+iFm2B+cuCCHGWggtTc1iauYv3uYlrSXaphrYeubD/QbG8WhQ==","signatures":[{"sig":"MEQCIHQsJ3eG4bSX3ZzSsFgKW0rdvNAIlfhOf3n695GUo5niAiATNyq2u6XEDsybSSGjNN1uDsD/dk4WlJ/vNTB9DfGXkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrqKCRA9TVsSAnZWagAAXucP/jl3BEPfKFe0FKT2tY80\n/ys8BpX/kh+Jlhu7rMLCt5tIjHM7PiHICyC9+lbWb3JrqNzZpKf+vwadSgOL\nzt9qwUG6EdJOkbFa3qGHTo+aPx9KnFDZtlAdHRrg1mG1Zj2Y818h6HlB9Em4\nXTKs6pUA3je7g+WBYr/aXzTeynS323kc1i30eUllfsfdKmr4UnZBvmO/qg5k\nDW199a+Ib7buq0l9hGIYl1By/+U5Id6Xtt51Q7HMyMvYBYpz66xeDPyxKzd+\nJEga/7bvyt6KEJ9kj5Nm03A06eRe15UWj5jM/NQ99HMH/lYm+FCNAWY0nanM\nvB5Dd6K5lvZHLOi6NStRR4QPDSX0WfMKSBPGDf9HesADqFKxslkCtqgAodrA\nyXNo+50/xdFLzL4gx/Zd2UzEJEtMEis/IZPH48M/WXLricp42c4CcW25Y69E\nxRwpDX79vm86jglszD35tgKxcIJJ8+kuXP3PPw4ND/8AX2Nvhue58/uoUKmQ\n3s01DA1ZNhuflvOEy6OKocGoiTyH3vDonTNn1TCv/QCwFbvAigHIipynA4k3\nosYV9ZbPF9WPxqjssK/5KuS3SsUf8+i9PMdW9ihxaPjCGd8tA/h/n6Rb40qv\n9eUxaiDuwI2HOM2G0wUQ8bsdBRm0ptziUU7akI6M/AbWhCO+1heC/r0SyAnG\nJZgS\r\n=44H9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/density":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/tab-scroller":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.da72839f4.0_1597946505747_0.12429051728851648","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8fcee53e80b2b41a4f5f76eedf45ecfacf3d874","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.346069ccb.0.tgz","fileCount":37,"integrity":"sha512-l+YeMTRsTWz+0yYwvgivky6YuQl9WVxaTwPs7IvCBVh5GcG/i1oqIm6aBSMoGql18SOmTYnzXqDHTUjefue8TA==","signatures":[{"sig":"MEUCIDu6kO92BD49U1/zVuV+meP2zIZWMjF3dR6iFoRhE3XlAiEAtyT4IOSunZFaigkxbBgmCLHLb+kuigZJAzVevHYzKtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr7RCRA9TVsSAnZWagAAEIYQAKGo+bEdW1Wv3nH7KOCn\n4oNfjY6zdzIOAkEAz1ExojPj9WdxERaz+pz649TeUXT5kPrq1+OCVEO3yodq\nh5TXnNEZwsdp8mocmoUFM2SEnFg12FjWDtpsKzNZruSN7t8QZEoGEAKhmtAQ\n8Hc72eZaqepFxcK7Q01do4I6byMjMcPGJaUVanZuGs5kaIqVFyeyvQtfYr0y\nvlWtCHmJ7TM6rFPrcJKhK3yBqaF80/0BDffEBBQ0BGNtCezIkiXn0PuHwIs3\ns1Na6qgIIqwBPhFnXgAJqildr31axUWehmE3A7MOp46NqDJOp2Wg5rQ5cOyP\nMLoQxc3ttbZwliO9RSrodWmQ9wcc0XME4Rvulrfz844pDqxXzce/H5M0PHqT\n4nzimqgN5KXqTP4+5SE79GISm+fQ3JolWaK66KuIZdRddWP86yFPWWVvBjL5\nK4pwnraFnEvfVb4QO9XplhBhlIejvqK9uZHR11yvn82j9A0XWeC44VzJkBih\nDzt4RGK5Ox2JiU/er0sVzxVIHxLIalVE5FOVoCdXXsF7Qt8cp41UzNaf0vQK\nq2EJdQ8IJd5sWmnOwPFwZLxT+mDgH8N6doTVYqx0aBfBbZyNSlXTRtSUvzYf\n/KM1Z9nDCNmFyqaAnPLMA4FsgNyI/zcP8tvkZ0mrxQp/gqjWnJOxVJnkgSHi\nTNIC\r\n=ISLq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/density":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/tab-scroller":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.346069ccb.0_1597947600607_0.17271335510805752","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dae8e1d44e4c4fc2904c2a3f3669f0baf4fd9db","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e27c5802f.0.tgz","fileCount":37,"integrity":"sha512-f0j21Uq/Y0zK6RYNcV00OYeo5qM+iHOnm4e3sd5h/gpQbOhxM9g9aeeZNfyJnp3VxtizYod3Ug6efVPx/0ncEw==","signatures":[{"sig":"MEUCIQCQnT3mSQ1tWPW/YGTkkAcVt1aq4tdUiRdBslCOwADMlAIgRwXo+RxugJIuYTzf40fJAuuxkAKEdXDTUf0s70dOnJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswfCRA9TVsSAnZWagAADeIP/0fpCzIQWg3WjQL77rw6\n+feEcdIltzkN6UpNL2h6y83iwgaMI8gcyIGyIY6YqtD5Sw8brNToNw1NKOX8\nLD3KLbaHP9o0LYnCsSdWIRO3gmKEPvWhmQ5V+bnMWBrzozmlhlBZPtwvENvT\nDra5VLqoLlIcq/WzwtWw/CI5BUca4AVRpE2kfeiHI4KjiQnfFx2+PWLSK5PX\nFq2Qgj7Nt41K55F0n1JWN8ETn/z/rTW15FKiZXgCqppotL7OthIJ2E51y1wO\nyanUecjgyccYidyV5fLf5rpoQhPMxKwuLF/xOx3g+lkYcoRbr5Wo0QFwtcXV\n6HD4Xazd3w2ba3w4CJXS3CFsvxNPWgd8Bqm++qg5M8rq9aiq6HmtT1jfV4zj\nnK61iEDeyUSeIqWMNe+0wqJohTXzVBcK8kPcbyDtYNsayhtn+Q1Aekk0dQ94\ndi4+O91bAKZkM0TtkPq8hb/BRYeU6efL1o7WVcQ8KZgWcDBCoAuPQBW/ia9t\nH1tH8epaO0/ASTd85/sIufliPvrujBZY/hcAU3ltXUelgOYAdhZks8OkQVwT\nmsnc4/PEQMuz9QH0daH2v9x+4XbvukAuD3w9JbA3yLMexMP9sYBnz8+8or1q\n4CaVaFJOzIuYb7CyN5VS1kPI1hg2tJU++pjAyX4mMTZfDGFT2ds6cO/Td/DC\n813u\r\n=9lD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/density":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/tab-scroller":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e27c5802f.0_1597951007603_0.8009542535169125","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4bfeb2ee3cbdca41c060aa179ec64d30f4e5164","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.f4532b9c8.0.tgz","fileCount":37,"integrity":"sha512-Aeih5taiuClyp1lh0wBXbeXNWJTXZWToksw7F88NpS6+k6rmzG+h4u/K/WSk+5davBv1TgMaDUL4Q2YBwTZZoA==","signatures":[{"sig":"MEYCIQCFHPcaPaeq00wyRlA2X/UUWCleI07OjIwlqJJhtKposgIhAKQ11CXRXhUNqaRhE1ekBZIHcqjZdwb7c4NBv5phCvOe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtYOCRA9TVsSAnZWagAAep0P+weZu0hIsmoQVScyI2zG\nVsthF3rwx2BMCtaAT9FxBIvUi7VUd8eMgdUN/61IpiAyUuFqdcmRH69K0G6R\n9bySkw9JD/RoHW9cBdu1a9PV7ah4V2TCi0uUB5B1fDqvp4Fqby+2alYk/a3H\nMAdP4rWsPBeknOEJKtBv4/H1HNo3iMEuZM3PtL0/X3mLblg59nShkXukLBp8\nXOdocf5Lj4v5t7sElUx7oVoYWuSYV/EklMVaJPgNPwNxh+TiB1XfiEFsSZCx\nlSNSLoVMf27hKYJ52KPXP/PGjo9sJCkpdHavVa+CncIg/DxBOH1/LaYJ1DCd\nGHftaalHnNUjNMM5YhR9YtjPe34alEbjjPAKmayEZA2Q+TS6GCh7OIzOYbxK\nTR7d37Qkv/rkgHGowHzF9lG+f+ITXAwKD9x0jz8h8ehRKALQpZBmb8UaMXr8\nR8XzOWU0Yj88ZuzYP+la6/FJALGC7d+qnrcOaE6QLk6YlqVhIwNvIdny7cx4\nle8Pr1PAgwCZSyvYJd5naHDoSqRUH3kIW6I0YhJl4yie/G30ORxWJo1qSJnG\n9QZq7OUiY53uT5ORn8xbuCBqQYEHNkS5YcY2WRQ6ptJ8TEf6b7QKF7TFe9Go\n7RQPOaCgSQRyL5Yz13lY6Cp15XvZma33y/nWU4oJAdrTtr9NlCWnbdGUJ2Ar\nhXeu\r\n=Vl5f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/density":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/tab-scroller":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.f4532b9c8.0_1597953549565_0.34090282435328256","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac33a703d7e92485fdfe8b5b79c1de5df98c0ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":37,"integrity":"sha512-xpAYtT7HxqUVu0b2EW3T4U/Qnf4kcefKkK16w5ddDFTaWkCcIOwhxxr/prRVCbMtU4NEWf/kzofCEm60cES0HA==","signatures":[{"sig":"MEUCIALDzuMfE82g8c03g/Ic3c45IV+Irikw9WnVPSNzPz6dAiEAvhiLt0HmOKw0r0hy/zBTqsfHyE6Dq/e98UV9oKUBOv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYtCRA9TVsSAnZWagAAuzEP/3Xer6q8nD8/RlfuLyYV\nXdILVD2LutfOuIdctLlbV7XcXuL2LcAF9kI6AEHRPqkMOmmPytRZ7Lrg8oaH\nj4pg06BkqYUfOd80q5cyODrFlhSNuA9Nk5CCYUIMUdwgcuTJ273pa0uOCG0b\nh6PZp70Sjgo/oPDnX0ZBME+VjnkAfWQAcLnAsBbInBav58B/ohr7Sy3d/63t\n/LPYwvIdM68+Kx9pqnAFURFSb/ZAMYwt9JwiGWcI8qpGvfBSascxwbDrGVMP\nyftwQISStzNHyuLyYyA9bBbI4Jhn8DMn7T9eCvbBF99TxVXa9Vt2Gwp/gTX4\njMuOEllhEe1uM/0cd2WCDzzsV0KI6qdeWREdTB2P+7zQwI/CI97JpPxGlgqB\ntGt7Ap66I9CzX5Xf6uRSmAq4jqOxh8zjIZaOoi4jc3H6jx5SXyQe7RKuu33E\nJ0/dG2NikIsUcFlI/q5WWJYT5PtGL7bMPdftKVyZAlDDo66+zcvOqkezB2mg\nxXfGEfKL1S1Raot8iJuUV8KXlQByp8/vuSyJNzPOgBAyk8CuP7zPIt0fZ9EQ\nGQJq1r3gcleQCUjMP/BLF0rguC3y11yTyi6RYBF3MMMiKqQGUUncIvNoOFFp\n/INFyhReGh68CWdlJrqH24otR8AOC1sqUcfyJMJx+Noatuo+1MjhFA/X+Yyw\nr49J\r\n=eoyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/density":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/tab-scroller":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fbf73c2a6.0_1597957677372_0.3575302299598737","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e83717e4031511e4537f69529db4a296978b1cd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.cf800124f.0.tgz","fileCount":37,"integrity":"sha512-E113ScPadF2yao5mx49lCUfFasL+T+RI6c6D19qQaH+evL96/j/OyZqZIgogJ2En2N+0/mDz8YHkSGNn5/g2OA==","signatures":[{"sig":"MEYCIQD00W41sTKZxQgq0TEbkeugpF9NfYLla2JNcgWJM2fK0wIhAOhhJY2Zo5wtujKtPtQUb3UHbydNPP5La4QuF2+th6YV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvEFCRA9TVsSAnZWagAA6+gQAJlpc7BK7pnvtxsl6Tsx\nu4N2wusw47l6USU+hzb5t7YB/FAdmmlYti0SZO3WTk7PtrUyDTmt/SKlVxiY\ndtzeUKm0OO3/zGMBIM/q4F7iPsY8kvG6wLMIjSxX9TUQjBvZx3hkro4xmh7Z\n0Al58R6UvZ21AAnU3D2d4oh4pU5ega51eUEfKvh/kxatThyDF7YqBHc4WzmL\nM2h66/eFu6sa//PPc7KVdtqiOozIMvEtG6CY5iZ7TOKYakIyS94Ol3BwQAq8\ntlmOVTU8ruRPx20Y8Rn1JxyM/PQXjyz17dVC4gWOP4XRrbgKaQ7j/Kugdz8L\nu/McrS5MMGuXCJPYNXQA4oHIoIDqzH2dOR4LZA04qg97EdIg3hKjwH0o9ClR\nR+/5TiPwRmmTgtGfGFo+ktDePyhkfKzGiHsDKEHdKhqBjbpwnsr6SX2Qon4A\nWIdeWfRcipyLBteMFjYmstHdIWGtAXlVkMmGb443/tzIInK7eLLxeg0EZkkY\njDrbtRIu3xGt8oQfyeCM5qEiH8ZVMhO8OEDDT8PPtZvR9ubUUYPX2ak3Ain9\nKhrfLw1oMbZ+2B7He5wxiGWzYLVkwXTOs7RpU9tQrkzsVYP1k8nwJUArl27+\n653mTLCIYup0ZisVLC8LM2YTOBgMTzlk8+otwAXnkGFPmq+ZVIAN0eo5TSRm\nvDoG\r\n=d5aH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/density":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/tab-scroller":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.cf800124f.0_1597960453470_0.8042614018105414","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/tab-bar","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1da6bc70fc4cafbf738773dbbd306ede33d9843","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.95e4eeea7.0.tgz","fileCount":37,"integrity":"sha512-atmGwIowSiaJxngv7+tIXnVN68ilu1+jyJtBth1C2LDtKi4Orf9Q0J59XuyQONHmO8F/2aO/jQaI71PNiOxsgQ==","signatures":[{"sig":"MEUCIB4Q/n+zjEacect7bsPDnEevLg+KmurzAzfiRF1y9GxcAiEAssiGGOBiJTxAE2wTJQ9F4CXe74zoNmetEO5HbXm5cAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPweMCRA9TVsSAnZWagAA3EkP/38SKhuRgsfByF+HpgN/\n24k9xnTORGLYd21FDwxa9KKugZRvjVnMKQ9l8JtsG2T7NAAupDk/aZshahfl\nP93AqAxws9g2yNm82T6NKJ28L5nP1AIZBKDczegbjIJab6kNSv9j8XvyhkvR\ncTpKX//LXH1BBL0Ei42wSoihuB+TpQt6GV/exHAe3rLtRn7m8zdNHr+IptmI\n3BsbBF511kC0mr5p/eXvFV8h7lCUxV1583nSOjE7GsLZpXWyGiQTo7Rh7vKS\n7vUC9/xuQfuI+MfEEV1E59h2AEk2B70XaFgVYO8PnY02l/agG6unXOpY9wHr\nFVhduPyL1iCcOiBfm7LbHUX7lAMaBiLQt0RWy9DBj0ynkX8hBze11nAv+C14\nTGmT8p0Sb3D6bv44fdALtxOyO2+4vSQ99RCS+WwSvfIk4yT7EREpQ2jsHjpB\n+0JRjv1+OwPoTCgAgUVtjwdvAEGvVLg+/6lZfcU/H8Ep3HLM9FhPrTfHFyNy\nS0j7HF4G6oBUYZPPxH7aG4l2Lucy+soGzy5uoZlA4/VPiJMT8xEpe4a9M85I\nlnvlD7gcVE2S6JPlkXyENlpJvYK8WBGam3XJBUyTh81NrVCylxK8APfS5BUA\ng3Uik1ZUXe/5Mmww70wLXn+7/itLl6twjyWdgtdMH/0Jv66lo1zfQLoGJkoO\nKaQl\r\n=5YXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/density":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/tab-scroller":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.95e4eeea7.0_1597966219765_0.9703687296207746","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b5396aec62b6144a3643fb39851431a14f76c2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.91ab1c62a.0.tgz","fileCount":37,"integrity":"sha512-Gn2bujl2cyT0JOcWb435jaYGe2l9jdaQNxBO62NmQMehFIHnlWuHyMLja596vakDGOpfgDRHiaxnTAMenpTRBw==","signatures":[{"sig":"MEQCICmdkoz7NzLLnMrvvanTYyEGNc53CP2CnlfoToamOy5VAiAqHiF2lEhchYIglbMqoCFtNS4nLsZN8meyKY+lTVRkMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+SRCRA9TVsSAnZWagAAjvwQAI4e/5m6PSqTDlkL3CIC\nYlPyi/JmMYeXHwd1CO6md8rm8hjH7DsXQ8UzjIYbOf0hZJL6yygfD15BtPHH\nzq4TfeXaYliBtSCssfEGoVZLtnaOokqFfy/CePE0pGwfn17KYfPKfa27OrgC\nypcfEPFHzuCE+i8my0bgAP/mXI+dSHbCSuxHrtgrGU2QTAnOlayMMjlFR8cE\nTu7OJYPnw65CM1D1GZhCcHMDlfAd1G+xyzA0GN8gLgxohlXk5kTkT+n36uHO\nB9xRQDWKr5O2b1MWTw3UdwBHcoLicb05OQf6BOMeirrP4Cw/kh6X0jz2tHcQ\nf4I2xs/k6lmvc/7S5pObrNe0PAxvOauXKkMqeaxJ3uqxQ+rrZXsanE5HBM/8\nRFeksr8s9iPADP9DGtPZcilcCCSoqU1Bx0Hv4/2Bu1ncTjc4Bjx/DWmxQkMs\nQxOq/p1x6Cymg4zAEqYbCS7zYXkMwP0jiHatD9UTev/IECv3dRxXQ7KzilaQ\naDipSUTj9nugRwBKTxJH6CH1Oayd6TGJLXgBI7l2Suev5dxZztR5UA+65dNJ\nlteA9wlp8/OlWOgtNFnSBnl63+b9WUicZv/DDA3/vedCcZ9nSI+YvOM7HdGd\n8k+8AqNAX8Lj9agMSNS4dSmNjNzBBw2gPp+uhsANe0E4516BUubMHJ/q9wTs\n2SRn\r\n=pl6Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/density":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/tab-scroller":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.91ab1c62a.0_1598022800711_0.9215288072926433","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/tab-bar","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1424edce56ec5f34b0716e9f3a489af7513bed9b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.58eaa9f02.0.tgz","fileCount":37,"integrity":"sha512-j3qYUAZ95G0eV7Va+4mkUkuI/A1adsmehbyRka9vttYhag6ItJbPgqa7Fldcvthd+1ocV4kMyAnNAIg+Jn3fxw==","signatures":[{"sig":"MEQCIElRpMJEtydRuzUB7//D4X/HEEjFZLgD6LmghxSq4OjoAiAY5p9QQ154csSOjUpGZXiP7NhqLKIqXphL8IeJjKVFJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgxCRA9TVsSAnZWagAAEh8P/iiVYneqhd4NkbCYxEc4\nCOjZ0U0iDIVQ6pIkj7pSrZAEDTf9EDwdbekYcrB/mT6L6yy0mCTOeb4jHdOX\ne3vrp5DOsq3/CbvbyA4DDKEsPDfuls4+k63sQdGtR4aoabVWuaHtTcz+7B13\nM/aTdIlhSec9LPavmoauJLaoXWVheua6M44BGMjBjwhRv24j+XVEBUoDhCJk\n2UXasS6oTc+YOQRFGmLI1XQhyjY/RKVLC8N7JsA8cGIBK8c4QE2yEVt5Q+/Z\nyGnxwAoPkkny4jSZG5DqFX5yuYsV/zwP39Yb9zc9Qe6cg0HCLatIWvC8bpS7\ntPVs6sDvmZLlKEMKunF19sJNZdd/uNSCmRZkXlg5yNOgiHH8nB9RJY4VoOtV\nvcEUFTRsvr60fZt1ceg++ji/7uh1yxwYzK5jKImXQnGHEh4iSaujsJnaqe3O\nPOhSY/5rrf44yQ/CS0j42+lNjg+RDKcXcA2zt4sS2AJjZZr31pOiDYr+6ZJG\npTFUj9pBT2YWycFqH5tRhrrZJYwj+gulMO9jKaxARlhVe6oFtOpIBLO0cYlS\nWLo//TzrMndeQD2d39N3W/4NDOdpDOTi4zKvnvfQJ1gyoQrc+YOxgeeJGXUz\ngFGlssezqnJNib3oJNsoGURihXWOqfcW6FiKHqcSzK80vh7QPgV0409MsAsf\nRXXy\r\n=Z0d+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/density":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/tab-scroller":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.58eaa9f02.0_1598040112880_0.28166116788995144","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a1ce34e0416194dd1101d82c902973e50c6baf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.238216fc4.0.tgz","fileCount":37,"integrity":"sha512-zJ7CbngoRTquJtAAkFyJdOKXXOeP8ft5VIeTejqI15/EIMPCdrY7ZAIP6JrWKTV4pswagrtk5H3vbldMhyo9NA==","signatures":[{"sig":"MEUCIQDtrPzfKdiofXkt3D0Hudzo/CKbt24CJu/68RWTBChO+wIgTFo0JoMoTAWI8mF1AavSswENYzC7uQQsAX2VOJhDRoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/cCRA9TVsSAnZWagAAehIP/RjwYVDYltpfaa+elXdi\nnHzdgYfhfmM5foRnaR++14aufnZw30l2y6cHlXNMBMTS2Y1kZcq1BUDKwPd8\nYdSTEuLkeojJvdZa1mcTgfO6nx/FElMR0LE0ZT8p3ugo63Gq9kWTPBsFzH7m\nUntkOdoiR2LLp7+rhr/2Vfs1yqjpMCvErVNExy1C74zYQVjA8NA5t7PEyaVo\nBmSuu/nJxAxfFLF1FCDxEPzBMNGD35I2ILsjKCYmhqPXCCTzkUPOVvO1bAy5\n2x3pyQf8xwWLplhohmfcIcRQvX4kKW1Zk3b3QaUrTNyIR6ho+SRhrKbw4yf4\nZcEM2GeErp6+B48tQ29Cxvl189l46+9n+peAvuGWQqi3Y5SAhsyT0kb5MFJp\n6ELv5ociVSteLnQAg7IZuT/y6By/qJ+c2cwunL2QoTWG/uC4CdzqDUtDhvWD\nSIgULqyCFuhy6Zakegtasep/Sx2QD+IrGfnon4a3n694DT25AiPUXeDLF2SJ\n9eWei6J6GfWgPoSwtJ5SasE/DyMvUsgkrPdhghxFHKdf6SV41nhYDoUZuvqD\nh4+z23aCpHY/6H/oM6RBLXkc1VVd0bQV+bZlUcBrJ9S+dgmvek7kMzKsmQg+\n1+sDuilU6R+0cslE9vsQQWcBJgd5ijbFV5bUt5SXdJEWDcWTsqjwQJrFqfiL\nmcl3\r\n=nJij\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/density":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/tab-scroller":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.238216fc4.0_1598283740225_0.37111063952679","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ecef88416a1f61d06dd788aff17f7f633cc2da0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a1c65593d.0.tgz","fileCount":37,"integrity":"sha512-eVUpVbkVHTVF4+gLyIJ2598+gqAEEHzAzj3qzXojudQnF5PVF7zGEqdTBm+J/7xqmGE4thC9+l25lacb813Wmg==","signatures":[{"sig":"MEMCH3xwY7FEEA/D79Cln5z96ougAafZ1iMPDat9U95wBEsCIDm9K5lXy+Vk9AY4DY81ehWT3ZMr36BnTxfbP2NaSRNV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/vCRA9TVsSAnZWagAAoLAP/jn8pmlN3MJyx/jdFSU0\nEnFfP05HACKq3coau6YWHIAkfYFfaqGwmZcakiG8jnBqeL/gAHFf/8tg6rBw\nYiwq7olOwPQWV6ubA5FV5ucpgGcI5GCTpTJdGAt2RwpsRC2KDPnDKFfNTZg7\nCOAOltWSid1IBLQrm1d0aY+JWAf6L/j80ZLScuPLPPabIJdo4xZMdKC98NZx\nylAo1zJ556oFkb8C1YouF+5pN/Q3C5DAIqh1/o7dDsCN/Wzqxfi5iDqk7krb\nAaAjzVpJTXzpCRjurwk54//ZcQJJgVUkRwGplWkPmpkdVGG0TzjiaxhSFhSI\n0/Ifm3eHC17X16Vvq2qIQVKnzoZZ4ljyDjGaeztf6EYaStl9otA+iSBzU87M\nc19cgp5tu5eiMGegT2dDrUSGXtItl/v3fxd78nFHH5hX4faFrqu6ePDap8AQ\nIHZpas0VcTTEmSMvckQu94fnRpPq/ji88AeQdfcNRqyruFndfgz3UZSIoXg2\nMWvVWmnwW1fwTwoWvfGMDhi34wz9ULyghMrldCRHZe/ip5zNW5NcKGyCKTFV\nIG9u5wXuXPFEzJzEoq/v5KUsE3CFmnRtcFayDWu0wruwKn1tz+ddIlamhV+y\n4xy+4I9yUUmvamz0HJ+IO7iGet6v4WYQ0h1rSstHP9oDj8NJyNw61Sf1J0zI\nSBQP\r\n=u9/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/density":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/tab-scroller":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a1c65593d.0_1598324718985_0.5973943173488168","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03341f0a9aafbbc88313937fc9e145296c5c763b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.708cc09c4.0.tgz","fileCount":37,"integrity":"sha512-DchK3/+dFLbL/9LmB+J8IxCb7Rxn7KcnC12IERsTTSWT3XEScQ7EQSgpMcDdwO8HDk4+e+sNTM57knstx6Ww2Q==","signatures":[{"sig":"MEUCIBMXl+V8el8BEOUi+nxm3b9Dv/rNS99oDyArHqQpx8ZOAiEA/ob3FIa/ZhYIwuRq4S9IaTKMp3/5ZfyYT0Bx9owMvRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTUFCRA9TVsSAnZWagAA4kIQAJo2cwfknjoR6emAsgXN\nPz4neLXZwqAaVNxGuyz/85MwJIoKu7sEvsQR+Rf8D+Em1Za9eUS1OqSSQ501\nn+X94WJmUSJ0zOeQP1XfiwPoihGi01PttScbUhz9+8P44kVJ4FY9CJJJEAxn\nZRSD1fbGr3nJeGKQ/pt+UAKZKN3qiObV18oPlqk5IYQ0u6RVJ8XPqRpsSFYm\nE3MCDBjFBVZLNyiAOaB3x9HfEQx/zUxc7XTvZaWKYVMSQSxFlt6npovrQsWB\nyg4N99BO2IG0sqYVGnLHjF26UgXvNjhbJrwqqVD3KWQNl+uHIzivRNBE6884\n0DuKPdxf85203erwjgMGT4R0cSJmIOW3my7zJdPF55iFeZk/2hEMu9DKD5M/\ntTUoLIxnGwoO0qo/LdlWy9J3UDMroDXHuR6meb2CSCjTh37C8EUdDZZEqXPf\nyC/pPB0OfPfvsfXcoKccdoJvPSHvhCsOVHwiqWSDQBZKQZIBI6YDnXvFKXb4\nZS8gfLFpd8EJCDqFOgdskn8RmCQZzNAPC/WpgOxOs9rOyZnYxm9wOiRW1DNZ\nMCY7Fz7MrCGaq1O3KxlBbL/y8DZV2bKy3aZA0+BSckN50Z6ZG5O0K5QgO++K\nOBiOUi1JfvEE5sA+M287yqGErnEF/2YgBStkJZKSg3Y9FP2kaBIzaT4TWycd\n1Lni\r\n=rv8r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/density":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/tab-scroller":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.708cc09c4.0_1598371077308_0.04757532827227995","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/tab-bar","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50dbd430ea8c7f684efdbd754321a13d388415f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.19bea2ad3.0.tgz","fileCount":37,"integrity":"sha512-cRGCTLIsXm4Brz9K3w+/AoXUsAosdyMG9aWdLV45GTv5vW1jTBS2o3bnjIwuJR1nIQEJPSwA52tJtR6Cs9VHlg==","signatures":[{"sig":"MEUCIQCMuFB2+gQOdUMStB4WD3KqVnxXPbXDq7uLiEir774XjAIgDQ4UeYRcXGbptMst+c1uezdKu55Yhamf6o/6RVjLBZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq8NCRA9TVsSAnZWagAAgMsP/3W9fRmwCUzsKvkPDxq3\nG7utRpSYEhOgGODd4On6VdqeizLdV+wYAzLJhMrX8b1taoyqD/basbGQ/RLP\nDn44Eqp/BTESns5uNKhIPRy0ZzlWzGjK2iNZzvrLnEwJANKK+BAIoPXM63bl\noRxrT7jJk0p1OfXiSUip/rHhsPmle2SFl2nBF9CiRz7TtD86DaEC3atP0cNo\nq06FlWcw87wpEIfMz5pyXYRoaY1fezXjLyzvHWtQgO2DwQBzY3hMSo8LAL3D\n/20/D3RRZkRPz0EtPUFkagcGgjiHKgZUEvAR8DJSZnk39oTu87JIVk8gjsAg\nRE6p5QiBx/zF8HAw6twPRXy3KH+iDZIuo2SnmyU6T2NMhEMQh0dljBoCDvWx\n0xtEU7I1qDkvPXSN+BcmVGShGbZuWCcq85bIyjNbPd5Al5DoCtxrayOGHPjD\nUuom7gt1S1DBfbtEuwMcs5nEdSBQdXlHRPWQ141kCOu64AA2OSmWr1jL6HTO\nPpka09rGUPf2tc3rrNfpaHaZK5mfMhG5QZoobrd/Rsh1/9Av/F+KHOSrmnYS\nmAPPohMOVtd5oRxjxLSSiTjp//kBPeNPhLDCZ4g08bqADrZRfGyexZ6jM3Pp\nMG5swiivmq8q98ruFy0uoyV491SV+NodLyvN8WjMe5tX96qtDXV4sgmgZMpX\n8pQT\r\n=WOIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/density":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/tab-scroller":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.19bea2ad3.0_1598467853214_0.34413020935713146","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/tab-bar","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54d24a40bf2bcb5d6552c8cab242f5dedb836176","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.911014711.0.tgz","fileCount":37,"integrity":"sha512-H7mcQM/VC7WtXC5WdEobBW/acv414RfyYEtxQahAauNcn6IFPwhBhBfrHq+PvpEn+NWnQ/Dfj/poSeIT52Z7jA==","signatures":[{"sig":"MEYCIQDO4bSeYnWDaeMjkHmJUZNgF75bfWqqIXqSG/om6IMOAgIhANAjRGgbtENXZWk+uCV0TtsbjKULqbBw2qjUp4X8P8gR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9rLCRA9TVsSAnZWagAAW/8QAIfPiU5VZJaDnsgzwfdy\nXn8z3LcF3xjsYJHY3joQkl4pSqfcj/tgc+ZxCT0VhoAWqiBk1ZcSILO6CPLu\nKGXaIIjk6nkkmlojndgtQobdULfieK1W4fOmFnUHzKZmyvensl27xcKL8oAJ\nXfFX70C/PaoQPY6yw+RgVMG+/I3lBBz1InOyipgC8UnnI6vZlc4iV51G92jR\nwfXOyGAbcgfPW+Sxc/NK3caNIhYccrJvGLNbiYRyEONFIrMTBiYPV53fiB59\n8HEZSg1/OU5Fk+JCiRJn8blgjUS9V3rvWqGchChZ+0C+renYgMQFP3koJkoI\nqeItl15Fv85fnShrRxVu8VGf/FJ6x2BS9SgliW36nflNvrNz5zlfa6WSIbME\nrvkw8TTGIAHTq4vUcLlkl28tS5aHY+huE+L9oJxSG3v75kiiJNsqvFMIJ9fw\nXoHMmd3zeh6IVpn94x5G++Y2TRHNKf/ykiphoTweczgZVKi/+AkIOVLQ4XRZ\n7StIoN9VQBItMIq+MFXIGQmlsaqUo5f83n1Ksf8IsLCKi63HHIdOfr8VU0Uw\ng10ymaKBXaQHaKtBgX6yNu/xq9V6scc/k+n8lX2Fviq5pEI1cY+EHsCuNBca\nbCuCYGFljmqp7va7V4vlLqCWJmUGCxZllSnrhOKJnERIUvdNdXiYHGba3Wxv\npAzA\r\n=tj9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/density":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/tab-scroller":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.911014711.0_1598544586706_0.826628832869859","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f45b8c9019c65e5065e4f5d9ba691adf7f1de20","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d3387f54c.0.tgz","fileCount":37,"integrity":"sha512-urlXmNAVd2f39iXsdELSopc4kG+vJqh/VK/P2bouHRTt1VcFXsyovI7KoViDRQCo5O9NFIC7ep/aIxW7XHnQBQ==","signatures":[{"sig":"MEUCIQCNu2r64wMZd1Czrd5rAatbt9FzKsFKytbd6y/4Nl2IkwIgFAF3GlaEn6VEg8DNLLX7k9KwDOZ5b4ucG51DGBtqoGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjBCRA9TVsSAnZWagAAz1oP/2a5qg84vSYFgrKwqM3X\nscKa7n+kPgg47DCYI5hlQVoOj0g1VYBDu6+KqDWOJr9C2umdMVtcqODQMNU5\nrc4kiWm03fO5Vvqh1RrLBuEonTjORYJevQEzRQRLfRy9nGrV9D6Ah/IN/oJH\nR73J2BIMl5p0b9lRSlZG35oQWXd5iU/ljdm67O+slkyB4qzXYuA+xV/JDBcn\nRSUdjZZOYSPnshKN2O0tPZYB9vlpoVG+5NEOSuWzM8xL3h9pB0kzqLHpTruF\nHNlQ87fvDRIpqrArPyJDyGjNimod7cNxjHcxROQi2nqns9ZahDtpCVyB76Au\nLcuzPC1fAe+Vzjj8shYlNkwRaWwHKfRijjaftjQFH2Zt8dxEhb1ZAQrrFtUP\nh1FMcFgGKW/aiDeqg5oqWSUcGJfBIwaxhKH4FC+w5OQxxWJLHIrgH1drX09z\n9O56vFX7NgnPZp02hjsf64rMTu1E7b/yT6Zf6E5fqQuT5k1MTd8ngFrud8aw\nnKar2WaOOP5podhTf2t7kjgJlzqFSuu69saqoWnVz2jn9kfXXPZfggOTPOlm\n4/GRPwJ0RL4gjRJ55UQAHZLyA7DbZqMcW+/zg2IJGU2HlmcfC8TODhuFlQU7\nzz2cr3b+7lofFkaf/FTjmSdDQD9JrV6wQIU3QLcGux56rbBjZriJHTrMXKpK\nIxvP\r\n=6SjZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/density":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/tab-scroller":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d3387f54c.0_1599166657179_0.6844792097666761","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f83283208a523daf88f8261f81fdf0e747032db4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2ccf996cc.0.tgz","fileCount":37,"integrity":"sha512-qvzxX5LykIQfYoA4f4p4lHNGnaWSA9+47BuKENcbfM7umAI/6QJOsNhEW97jzSwhQjMptc58eEH1v41TA3Rc9w==","signatures":[{"sig":"MEYCIQCQc03sTrkO33gbF39hexC8ljGFtFcYGUAWD11Hi2urDgIhAM01Xf6Q+u6TAuEjAFBj5VXKTgDzbiDEqBggaSCWVBjH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVj2CRA9TVsSAnZWagAA5aYP/2jkGvbFvSoc9NzvSuSu\nVXTPXFJUpwIDGk8eOw4TVzHvtWMAO6wbO1rJutL29s5XACPnCQk65aTAdGyj\ngwP7oaEp9x/XPCevAT688kp6FNygixoGyPrIF48RIQIV1YpTb7aPu0q6b1gh\nEy2BMIQbzL9fD7gt/jjLSFugJapa/TmPR1bbV/Z2FRcbILou34iwUQrFrbRZ\nYy41PNMxj5ysy6TeqWJghWFX1tQwPza7iQ9Hp6GdOO2lP2BUewlkkxjzMkYG\nAU1tDBYiWBvG8L6gb/x1MCOxAmX9sN4X49jDCdZCS86mwOFQ2JjF4qKHJ1f7\n13iPKKtlvJaqvfAYO2f9Hg+retsAKcfxH7ZR6vONGCp3PiPTzQnDy+eeYer4\n7UGKs3NIsjpD5aFZf7PtS/nHAX+3y04Mn0BRYQh0ok1e6qfy/XPMCwQ+y164\nJMe/VGpOwQtk5zO13iWfx7BqO+ZJylnXo6xb64rwRUFdDCSZJJrWqMqM020b\naPfFDIt7guvmFUpo+Ll51BQot2CVl4f21Zb3lyZgcfYL9g4Rtf2lWvCTtcVj\nbPwmj+H+rFaAoGigghgC9YcVYfcfgnbCs5UGws4vZyUVkCSJY8N0UVavQcjh\nfNnXCkNmKP/xX2DYII7ros1pfFbhE2tQehLwT2LB5z4D6vl6vGPM8JTUB8Tn\n8rWm\r\n=PTbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/density":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/tab-scroller":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2ccf996cc.0_1599166710356_0.5095845614375332","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0bb3c2efd97eccbf2b8736d6e12043035c34051","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.744bfe5d8.0.tgz","fileCount":37,"integrity":"sha512-ZnPDlFi9q5OMSuvlhuh+/EmCldD6YpVU/3p69H2HZ6nsn4Xd2pVXqGQpC36Y90vXaLgtRwGf8ly4PYnwJbnpnA==","signatures":[{"sig":"MEYCIQC84FIPJeohSpQ3Z6TXtP6/B6k843h9xO9aQNBngivYmgIhAJVRKjfgc/0FY2DKmJ7VReGgprGokms0WvQCOiN5a4Od","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVkRCRA9TVsSAnZWagAAROIQAI+GFMKHnHiPz3FLvNe0\nlhVEWg4yJ95UOGJozpEZFRkn0cnL3iM5JkEWNP1ZVZaDFa29mrKhoHItb8WJ\nBbGLly121xvLhNNJPmStDEY0l2s+DND6A5yexzbVNQHqWwdXkpsnHCWbW81G\nXsccQSc4cv7dAqWZbq0qW3TOX5XcB9Yo+pYIWeXUQ9yW+XG7qIkjCTJeyOJC\n0P0eZ+iomz9RvWYBVJl/dFDfUFpUHkJYtW0k0KfCHehuA4Ha9dcGgmbCuR13\nOvmi5Bx/uOEU2TVdhcf/4r1cwFbkOsWm7NHS1vn889RyOYbGEk6THK53II6o\nUBBGFBWQu5O0/NUNcGcOysjUL1uOfdzM5cSuX9RTZdN7RUNPdrpUQpONgbZb\nl0PZqx80mTTtyxpPwYUUFHFR9lbw/wO2mQItk1hl1mNcQKXsxmfdnYu/osD5\nZbX+25KL0pHiIJujrK1jXszA4ndBILbkAjJq9yQKTMVdJf1z/6CA3MUCIAUr\n65PLZHy/kYAEZtrPlaVbj91tvWabWaiA5MaBhbBmmVb+BM8stoTRUKrS+qwu\n1Xp8cgQM4nNlyHGAqBO80yqBko9L13/5p1820oC+UXMJU4iaJoTUt1mB9+pk\nUhP0yGBlkqd5shxe4L9uF5Dz0owL/ThD4YWmiRtMm/E7FCVkgVAwxitYEH5j\npInP\r\n=Zm2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/density":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/tab-scroller":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.744bfe5d8.0_1599166737043_0.5663943080773064","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/tab-bar","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ff5160ab17a928f0a387bc74333afd3c4ba741","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.78da96eaf.0.tgz","fileCount":37,"integrity":"sha512-l1RMKvvDqm1X0Wu8OprJgg8CV4PfVOOpzC+aCtEcj/KUEWT+CEbJ9QHy6UgRwhcVqFF4inD5G6oB+G1KV0xKbA==","signatures":[{"sig":"MEYCIQCzlS+nej3l1EDNxU2XOHfggQ0S61CApWc9jpAh/KzkxQIhAL55Nj0+fBmLwV1WBCtLUwa9aKXByqDIrU9TB7kNMtUb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9gNCRA9TVsSAnZWagAAvyoP/0xLNe68YZX/Fy1s1gqx\nCWAxN3xYOWoSZJ6Ui58nkFArtgN7SB3ZXPP6HLtFPiwaYFXg9gBIwItQQ+kl\n9HA/7xogMAnw0UOvXNYsbRa0Mwn0mKbpZRRJLq+65sL9mVjJ2XTyKCIJehHl\ndwt0vachTW9kcnm3keuhq/SRN3Bi1ZcWBDjFkQr9rekVJYJVxf8obCFwehnX\nnOECSOMKk32jsajKcsJr6hDMuLvnEwDYVZ+Rhw7JqXsz+ZrPJFf+UNlpuQZP\nOdY3DjZXzckO2c1HsiGL2MXgmIe2vt8MAheWTzMZb9qmAxNTG9Ga8MGOHcKr\nWb7XdKH0QHBuTOrTGHOS4F01lstUs8jvGTUD0u0tMHW6/EobPZPzNVt2FWJX\n2fp/A12qMEyMtCFr3iJ5xxmMCluOfrdeGxj/tpXEtvqnJ8q0tskJ6BA8WzoU\nVOXyGyVXeaNpb9k5e8rj/RTpKicYl3zhLTA8asTIF+zajntTVju5nOjgrQEN\n3wmbWu3knzSVUWOs5ZLO315PtsL1vFbnl5tKCjQyh3PTbGz5ksPBPrzalJS4\nttvCpk4QbCKtiNh77/g/AZPNg4mA3VQ1FwLFjt+VWImCyNJe4giPPRXTAZXY\nr5B0LTQZHjVeYbsIj/IWsesDZQW4kAyrL2b8LcOxAMXFPMKoGzcb9ITBw9+Q\nD2Sa\r\n=X6tb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/density":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/tab-scroller":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.78da96eaf.0_1599592460509_0.6101310545302581","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/tab-bar","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4b69bcad90df2fbc6892229f5af38059dac65f8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.b0ed593cc.0.tgz","fileCount":37,"integrity":"sha512-tzqLRj4fn/QUcUX3897frr1EFHN2RCYLxyyhhYw2eo/yxXTBxDZTy20XRTpmN9Vz2tLpCrrw+6SRJmW8/ZdSGA==","signatures":[{"sig":"MEQCIC6uR3Sz53SFBf2V0gKLBuIQKKIzXK257yZpXG+SXB94AiAiF38AXi+uOz66hEWayeKXwEbcGlC0qeABF5Mvk+aeIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHN7CRA9TVsSAnZWagAAiPUP/A/7QgPbJjfCoCBE4j6D\nOB3NZrJ24cjZV6/zTx5i3ufKd3N3oU9Ush3qdBFFuzftn9nb6e96JjOTPvTP\nGbbsfIQFt1R+9E9iQ/IFtje/uG8+7dp9R56bAJs3Ut8puyXp52T106AbHujK\n54rPOecuJUA0FUA8gvgRSj4snG0E0Mzc3aIOpUi7w3IUkxhy0dkZ1ExcrOkl\nAU1Khu2dM7AZYyzaPzCTVk+AaIS1Y5PAVvpYnSpSEWPyVvBUSsdIHvzTEezl\nKIv2Xfqlq+9309a9L593WIcvD7xv9I2QAUn2VkIkgF4vVev2wR6nfugnI4PI\nNnplK5BRoZbtmlTDwgvCXKsvLG14ml0KNDjGYRd9onQ/RWi6uHOriPvgwFAb\nw7T3st3BFN4bcH0uYs75I8SoqyhmVOfnrSjcmPY5xXtKJ4uPDxTr/4AO9exC\nez6aZWtAIl9LhdvKUqxvzIcTh6xKHaxakCY47vAkWwS4V/T7XRsKQ3AGODjJ\nD8i2VY49BeVVoRHQEP/FFX5EPA0V4ptQfw/wLF+p8NuOn1RNWa0fSxYiTfso\nvkoTR4OlyJIDODCJiSkYooTOliKMbhbHrps81p4o/NNwjk8Br+YlmOGxFS37\naxPMqi6HAu3+R8towtND78qtI+4VVoCxBZjfi5N5iQT6tir0ajApWEiMvx+Q\n3v7v\r\n=XDFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/density":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/tab-scroller":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.b0ed593cc.0_1599632251246_0.47183592563492605","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/tab-bar","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4887b6230afd3e5610fde9db1960ed0f4e5de171","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":37,"integrity":"sha512-wBhpmP9VrSGqvIhBRNHjTInikcB8hGJIK1VxQmsU6vufne6a/f2mgnPFKja+dPSZdupPAJJoMlOtTOWl4FgFRg==","signatures":[{"sig":"MEUCIBxvVX+33tOyR6xO7g9ZRO6GzjkD3m8BLI1oKdCnCDkUAiEA6I8mtG2ZFIJIPuMnFT9TZpJzno6V/F6V3xzUitA1pSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpanCRA9TVsSAnZWagAApyEP/3AznquiPJqejii2Umeo\nIKO2VFn4sPajeBWZpPKeCYQhyFtHGVdWPgk/TV0thNnijOAlugwFkXPP89xC\nao5uAGEycZuOhW4p8ax4Z1u7seUP5PCWcb3mRVForrC8d1yeHkw6SKocpo//\nVfw1Z+f9jVXewbTrBMMv3l9YbYhYNEUrGgJ91p+jEpNRVvbdswDnkZ5gP/tB\ntNNPmrFYixP+sP0F1ahNJHhn+wEQVaV+OZEB2B5K7EKX7DCyu4146yKwbiTC\n6YeBcytiSvooDdaUHfqhNXAyoN7T4uks8uq+uJbdlpE/hf47+Vg8+wN4hMHo\nRoaQ5Npdn/JC1nw27KadI3aV7ATghyskIWs8hF7AubQAf36hAKu9dca82mWz\nmH/fRQd+vtYh4V6C81+xoibAcZztBnc8pvCflsbOHjhmLGwUSqCGlIGdv7Nm\noTDtNLPT039Vyqndhdcul4MoxV/Hm5EPGCgWP26gRf3vvmVKF+X1H4VZRJg9\nP6m4oOtphau6YqLONm/pghtFiYcErVPLQD31nH85O/dgdk7ENqHYvt7tcVkb\nv7+wX7OcbJNhue0PK6Uns2/Y0iBREdRvOzIgvGfnbUvnMeJZJFcK0h7l4apW\nDbxXerP7sa7QFxa4i1heQm3VZw/PuQN5rKZ81uFaq9Ka1PXr6044CEW3qSMv\nXrg9\r\n=GTNb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/density":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/tab-scroller":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.85a1fa9ea.0_1599772327365_0.49660786008236846","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/tab-bar","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27197c2cd269835419c36451428daab4eef51c37","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":37,"integrity":"sha512-wv6qZSbWIdv/QqIS5Vo1OFRfVjkvr4NoTUYhc5pNhAaTeDL0MqB6HnwsGL2P0IddjCftMcZzFfrYdv/nZvQ4KQ==","signatures":[{"sig":"MEUCIHqxJUhD2ZvellrEI6Fo18mxTpHpQoq3tuErgMhducfXAiEArFuqfCr9PE4rAWSbBE8vZLKZgQDx1HRNgiAW/oDbuaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kcCRA9TVsSAnZWagAAEtgP/2rAimIat8EuA0R5grn7\nu4ge0Oq4zSYOcNujsNXcn+VkSaEMuoWaspA7JnGHQLMEyvWqBKrMXzOZv0B4\nNr+ABKotAngxXYD8gqTCBOg+CUDryk8yMIUJN2hyLCrNvAANpRBLxjC8sDVJ\naPdRVwhp0CBBDhGvgydHsCDe9e95bYLCo6N8f3OJo6eorR67m6wEW0nj6emp\npHTyY9WKhTjiwzCwvzU6tYB43dP2NO22cuvlSXd8ugW8d6QLwQ6XjhW+0AGG\nPvFcExx2f2pRkEDjana2GsQP33WF2v5+LuX+t0dFax72o03yUCR3wNGtS8DI\ngxmXXfRvvicGo8SGkHD5zT1n8oEXNvXOWIOSnboOn3Dd/8B+FafUA7eL0ID6\nJ+GteuaHYASl7fu2UkoL0WijDkZ61xU2egmckUuoSoA0bvf4dQ17d3tmt4s9\n7SSgf31wsmanGGDPDb1aOndz8MSeh2g//ZJjbkz1113bacWm9uvOi+Qi6Jbp\nB9XaAOEhnnXKvqBFc8tKHFCmLD0TtZAQuVunjZZ3gFDzN7UXmGMmZ1FM+8GK\nlMJruO74nbX06dKuY24WujjO2h7pasQEECB69BWszZ1iNClrlThqMr5rn8fK\nivyyNU0xMl3thq/DFx9eHBfVsrTZ25Gz3RuUOcNLlAVmsmJe68kTDP37BdnT\ndMV1\r\n=YD9g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/density":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/tab-scroller":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.0bc41a9c7.0_1599846684326_0.08245334816425842","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14fe4be1634c1efa3b9f9e6ae1cf312f47e05d19","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fc0eb5013.0.tgz","fileCount":37,"integrity":"sha512-juJwfCRDckTPSVOTvZ7BFBxzUCD8/mt1wRcFvV/3/XYwc8cSYKXqm70a9AssrSPthl1nfGxkG0gUafE3rohEFQ==","signatures":[{"sig":"MEUCIQDIKSCl9JhWf6aH+x5rp0f6iUcXS5mTwPHN/jAmXrglHgIgcxjzWZcYmDJIXoydZyzqJo0vGv0H/t+4qJJpuHe4dy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9aTCRA9TVsSAnZWagAAKRAQAJL43SC+8m9suu3HJKbz\nNJnWcWlkgAF0GePDWRgiLTIwi4KG6qlxGLvlWDzyBaBElFk0a6AE8OzgmFHf\nhPr/TGm3l7e1a34xkWXbKuQq7ErfusjHZa5PlUBcbtbZJ++4b7Wfquwotgwk\n18lZ0U3trEgQ7YXzwE408MlUSWKlW4kpNtt2oFpwaAzay+WEWxDSI574Z0BI\n2kzwTOv6th5/SxBDyE9SiQ8G155+0+2EGhrjfMmDTCiMFmRf8pGlE/zBOUt5\nD2XsuZBDJjr6NvNDs/bsvyyxBbqEDxd86eI1QgCwhJjzx2g/V3zolsL0T4xk\nHrMn/IBu30iMrRNFAbTKLI+2IBn+X/rIrYHeOAxVVgBWPAsoYr3aF1uYI0Z5\nPiBTuS9FjwI3Hbwb+cpvEUnm0IVzFEiYJNpvNiE5xxh2RRKRjHWoFaRqdAPQ\n4dtyPhQOiJBawCFzVV1Xt5xTJPUvidn3qEIiZagM7Zz4hSD6+MZ6pdGsNk05\nhJzdY47t4f+LgwxxU393O5VsmBT4vPlym//0/asHBQl8qbFuTknwk7i7TaKC\nB724jhQdzQ5Ldev5F0SV5SvlytTCPLWHdE4tUJrxAN+q029CSfgp82r9GbZa\nnDXGJdn4zqbkZGF6IUeuHEOwgcMfnTF6MZAOlGwiPV7m6AFG3oEnN/EMsTJ/\n7uFz\r\n=tkI+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/density":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/tab-scroller":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fc0eb5013.0_1599854226936_0.13329492060570325","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/tab-bar","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.319bf66de.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fab9c166120e0a4c8f2f56a20d4f47e87e8d673","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.319bf66de.0.tgz","fileCount":37,"integrity":"sha512-OZAFQnnEEZakBUTyzzAvBuljeRJcNFDnoTuJ8F8YQt33FFz6pCNzCxh6aOdwbvduzFFhEDpUU9D8vkQ7iXwf3w==","signatures":[{"sig":"MEUCICt/9wjtTnwt4m1+lB3HPqFLSjtr+dtZyf1uRCiHbYRlAiEAwGex38KSNpd4Il+qDBzxZ8Y6Fol+kIztBiRdRP7aSdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQ9CRA9TVsSAnZWagAALZUP/1fAyvwDQuKoOjmhtnbl\nJ5FsR28xLqEJcfrMBEHUB5Q0mKUZzYXHxRXX9so6FxbXh5sraw3CrK7mpd2L\ncKxuI9yRBME6XTF4HQIQyeHMeBPkxnOnR0rEYEPYiX6KRjA62rjOc9QNzTYi\nlUWgYWQ41/c7E+qxEqz4hv/GWl9EJUECQwzeG86hT51TSHyfrMXZTxT4Ug7b\nHkHCDEfjjFW6s0L+9YOX59ui7/r1R+efKPZLrMn25boD3BsJYWXF/7TF18tq\nGmgqf4td5b5WEgJB24D3EsR3B76WhkYw82mFo64cPUIW3ANQnNeu5xWj7vUE\nld+ALX7zBzt+tnZFMRIjQOzrdmrsWuYQ4jPvGQTxTQvA9ibnsODVEzEmUis2\nF7fDACitadV2P7MRCQEiHNS9+z6jCPUX0KrMgvvp8qe1xEAoY0r/ZNr822rg\nWFeC3Jb75ZAj+VelGdnKfwfX0tuPQ5JqLT9f2vOtDkxZoTGMlhvc41GBwlfj\nXZPIT+NyFdidcTmBUv/aXLjPP6dSgOo0cpURtnC+iJ4YgTz25NpJFyDTdlpm\nPbFAOQ5AdCghVG+FPWdgyQ9wSPfkeEsYQkQUN60ONgYKmlFZkj186j4n2HYW\noFZOB92jTJ7VY+dvV7VXQZnvf9kM8H5OhjBsgIyGrD+/KSnQ8Tm7fexG3Mzm\nwwHU\r\n=EwNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/density":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/tab-scroller":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.319bf66de.0_1599865916661_0.5730656145312372","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d4af4fc1b23e2da9150cda90b41be2c91ec09a0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5bfc305ec.0.tgz","fileCount":37,"integrity":"sha512-92OXdXtAxvXCKuOQu2HSvzrbkgFy3jZ3MuuVnuwuyh7E+oVOTnzG6sVpXH+3GdGr1FAaunWQDPYDOKL31rChgA==","signatures":[{"sig":"MEUCIQCN49FEmAweC4KoK9uyvXynVJUvH2rkwexJYmAULVlXSAIgUveBF53R+S4YzJEHBS3SQ+aAUYQXTGBY2DAYNRxY9+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqTXCRA9TVsSAnZWagAA5bAP/2M+C58MUDjGN5nMV8/o\nOl5BICCGrNrzVcq9oc9l0ccU5dhadOf9n+G6QDd77gOlswLrEEh7PMYid2yt\nwCRJeIHGUWqwebNvXkbMYdrw7zfyVWR2nfZ5kPxgcGihC3vSBZjNOodJa3Bb\nze3xfal/csEkNuxl6iar/BnlW8dq5U2lzBH5g3o5mRIktXrZKmoTDdMPyV8o\n/Dg1fRmZvjkDpr9m5AlRp+wf//EvWP93kopKRGgLIejKkFD8q/mp+2Q6hVjP\n5LBm3ED2NWCsCObDR8jXoicbgSZq243zP4QbQssiYR02hIAdLKzF8+3GEJfw\naza7qEk7pR5v8FqugmS5cphjmDVm0NsmBhglVgv9+wfs/W5LvYjcROffSCyc\ntfveci5XT8YoItAducQ/Hk3oz0VCwN+QCjXk17tzmv+Vg0kkvRRCVYkgWbyC\nqODc3ymQAJ8n+m0qk0RXbVZqVcom+lCoNYpsFbFxjhWihNaOk7Wmxarf8D8g\nv5fmgsSFJAyS9ImCUHxGVhhhO/Q8X58G0CdqTVxYDO74ru+efgPZbuiWmiiW\nfhil1EOP83s1rFdvbJFLF5CqFOv/hAGwUj6OR7oQCrSaT/oPr/kXgjblf2dE\nu8A8zVmnUWllvTWBcLg3x0XTuuYGb7nJqulPQJSSrJ3r4d4INFJBEu3qSZFz\nWXs9\r\n=svTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/density":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/tab-scroller":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5bfc305ec.0_1600038103116_0.1576031531433717","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/tab-bar","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.83d83f131.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f60094cd49ae6dab587a55572410d79464f230f3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.83d83f131.0.tgz","fileCount":37,"integrity":"sha512-ONmIuVVq+G4IyOrTWSWEvdvpD/rvDDdej1qCDAdDjQakulXOs/KKw/DZU5rsvhV0Oomq7xYnYjMBdsk4OOBglw==","signatures":[{"sig":"MEUCIQCy/ntwX7s6aI9+D0SbuxYNuOTwrQ1iK8I3GK64YKM0ZwIgGAbVkwzgFw810tktHMZpdqORQEgkMLyKlzYuN5tv9JU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrqJCRA9TVsSAnZWagAAEsgP+wehtE+qVTd5/tOWMs4U\nIokX/2/wWG9rk2T/hfxl2wz2/CjZLB4Xea7u7rwp5LQimnenWGBG/+q5KsoC\nSI9KnBS3HFMniQlU5uIJ6L+dELraDC1qUSBY6jdQ7v8LfxidwpN4ZIIDroL1\nKuk6COjF/NwsokA/A5z36isYWD+Y5pe/iMEIXF5aDR40km+VDmAIX8ext/F8\nXS/HplQC0RDxmX9Z4U8r/OGabXs2mWCMF8OgoTHzNV4uB6BBkDqnGLKRB9RR\nLY2DlNqxdXjodDF4iE+E73m9ikaQQ0tPYRFQT4tXI+rTZlaydvyu4r9O/mEO\n3Ub5ixprzGVO0GzWiTkMbG+40WTSxU1M7m6vzHOKaaS8+qnMbEDhhu/uvA1H\n0JZn1JgXYQA7EymfORj+25+xmDvfczaYOzokKDjif3UspEZF+gUu8c5RHO38\n2tL7grU0yV/DVobAOiHCeGKPfFHBiaRLhILZNJwURlZW4K/hUPGC+lauZvsJ\ngBM2IW1HZZKiE/yOVYM4LGPlDLED953DnXt2YD7rUSOn9STyONUfOeWdsMXC\nVDB4JpMGuNFC6X7OsQa0ElU0+BwW+N7basJlUjfCLJpIUDVjSFJijqILC7l3\nA/InDfdh8eeiuHPM0r3fdLyj5O31TteUJAxY7TAA3cmURUmy1IfV68MBsDen\nZLu/\r\n=SZR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/density":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/tab-scroller":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.83d83f131.0_1600043656437_0.7811010966303706","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dff32e3e2948da815d22d0e81b0a66abe0ad475","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d52b165b5.0.tgz","fileCount":37,"integrity":"sha512-Ol6n68/Nh7P46Qizj78iVsYxMKWlWoOlvzJKQve74KhhHO6erJe4UuUVofvplxBoRd+w+fvUJmbEvDQwu0eeSw==","signatures":[{"sig":"MEQCIBErZDW63IdrNFjt/EHOsSX+htv2a/xk8Vw/3NsZVTFbAiA+HMiLkerjl4cegL5cswdQAznzGlIMDkIrBq83SpVACg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNYECRA9TVsSAnZWagAAqacQAJ7iOpNBBAJW1PyuC4O/\npu6rUus9LUo6AFj6ImP0CNqgb8QZ5BBe+SXAFnxv9A+HXQuig1NvlBMwLMmj\nwrG7RG16YGBA8WkB1F7jUJQkrxjeyEWvrl2ylHkGzfEcOSQMY7He557Ug0W6\nLc5jNk5Csyjuj5FrckPgYCqloLcy6ygFWkYYGTUUC6pyO9bCR/4X2m6zNKQE\nu7WBhLNSgQcKitLNvy3khhcFB9wy3aIT7u67wczhm2WHJGfJP8ilutCndsR9\nxz0heo6xoWeGkl3XRlUFhxCd304cbW2A9OwGd2c7ZHhP/NmOW0kBzw5zd8T4\n5kvcTFr7bsaZa14DjU99yAvjzzWO6bgy5EuliIUrWwIgjlICHPvJ3xJRRxVm\nJvlDJKbotRV8lZ+FYyHGATB602qzID+OhqOzRrzBpISHTwNRjNmrZ1HMUJoC\nEM8eZjgZBrMx0fA9LdTHojagcfo/2U3DaOyWdPKFMAVAemnpBcEq9tl3HzQS\nLitc1pl3xl45/SykuLOAKOs6aVlC0BgqdhN3kkVhqTcRlwKbmBE67vnAEbyo\nIKM9ImiBvyvvcutg/m5WUPN48ovEQzHNQvg9+KnIy2DOoR9AKJYyEt3VHEHj\n2TPuPThutLLfI8yEVOMket8FCe2+/YvBLiVaOGGvxrsuh8Yr/yskO0nuGz7s\n7Vjw\r\n=Dt96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/density":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/tab-scroller":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d52b165b5.0_1600181764127_0.18350331575961465","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a831d4799.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49d57ac8dafc2904696618584b60c1b8c0cbf4b6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a831d4799.0.tgz","fileCount":37,"integrity":"sha512-wQUuZ7SL6R6pCD9iIIdq9NC6VguXe2RjcdMqTJCyseVDUHJJtDpChtlDvRTtbEN9KnbIujZUkuiPjO/RDYmyDw==","signatures":[{"sig":"MEQCIGlgu9v+LXtE+mHR3LwIp8OIaPUiMoO4hsB75hhzIEJ0AiAeqtRHQhXJ5EjQ0w3c7+Ih3iZJNYR4+n3FP47UA8SA5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP+ZCRA9TVsSAnZWagAAEcgP/0IW6ZnHlBwD02hAtJB3\nddWQF2m9L98cLi8i0MTnBEHv6cudndgbWRGd4t8wO1DZMHqMhgaFlMw+UEoe\necgMrYMhZGq04rA9Yi0b/PTihFzDk5O65S3kTy+h6YcGNsoJsyxESwY1jRXN\nplXlKiBrZMk9GV9wbyvJYB2Flk0GiY9GjpWbMiE5WPie0rlXPIeSUG/ZtTcc\nxUOGRm6BbFLsi/kCjfuYRFb2XUSELLuavLvdMGUu8AcFjX7JPUwEOn4WqVCI\n8IZyjZk5hYmrAx16mnNYK/ZL4C1JdhlUEThBbFubkvR5C8xBK2a2uz7JuDEy\nadwR/7Va2LRfJcb/wZSZJhFkoe5FbTp2G0CrVvvuECwLWOQedZMVhLCTKtu6\nP7i0PDrZzTaYGm6X563TzYiZe4c9+bTVeGXVvxl/lgdBO/c47+pe5FTU4RJ+\nVOtGPC7LmPsZtmYwTbbxG5QEpXLm/OyftOHwXyDKxJ41QSJbZ+XM4aNc4pFD\n1m/N1deLu8ZE+u6ChUf3eAHJrOyQBzEuLOeqkrVWa+igDALqSQ4JFDWSBS/y\nlKyIkAxSzEVRwFQs+EMbiceVDIsJxjgoRZnn3QgYDHkyoO2dnp7xzDLDQ3zc\nqRlHRnLv0khi/c3y9L4KQX8FbIpqYe+D5Sqolymbg4SMmB6T1c+GDQhGpEAS\nWq2B\r\n=qi6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/density":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/tab-scroller":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a831d4799.0_1600192409204_0.6516985714552732","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a306aa488.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8bc46e2bd05e930f87aefdabc6d1c57912d985a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a306aa488.0.tgz","fileCount":37,"integrity":"sha512-gjdvmKLlmrZ/ZBljrL2eiVG3J+hpyelYPf5+uIQ+6j4AWRoBCBPDekcMnz0JtbSsgkMR9d7KEdQvUgPpTbJWDg==","signatures":[{"sig":"MEUCIHX6vRzXDbtYGsnzunm9UdzRUQPoJ3VuXdbgMhT7n9izAiEA0sGSxMEtBeQ6TQcOT0gRC3t18zkOUc4T6Tvyvjqu4bA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUuCRA9TVsSAnZWagAAce4P/R2tvGoTOe2aiEt2xK3J\na8G6RBtt6TW38FtFg0IV15U4iD5jK39HvjcrppPekOXqRv8znOk670Tp5BK6\n9tYsVqZc3qdI7z4idJrrqN5ZHN+7zvtTEaqyR567nGrP6bGA20IFQhbqQTNm\nMPq6lI0dgKPLV/79QshrvZfies1Gcd4FjtC71U+W8BpAYObPSPB+jueZQbnV\nSCl+UYpBmZXqnADmCblfeYYFO6sbiDSdXqjukx8ghBOMIk8u9VMXYXVDN/rs\nmIzkpxc4Yw3viCrYu9s7pLkL/JxsehIVDQ5G5DAGDclpOid0Jh9MG2c1zWSR\nHj1tvEfOq61SVUJ8Zjef1uadgK4p8P+ipY4CbOrA+jbpn1LwIb2Ib7BeFtOR\nMdYTVM/48mtBlFFOO7pD/TlU55BzMxT91b2PELzauJ1YiRNP0w7oO5LOe8CI\nU3Z9+7zScoLt+QHY0Zxdp2GlFII8qjMQ1phDCyiMDhAjBqvBTL02vMKLEeWS\nKFGZeAKnP/t258JsDoXxZ9CsGFjbYeOjBAxsO2GjDUq59F5HYb8vfLgRprQe\nYiAb39yIvUHVm37CJKJ3mcclQtXEf3iVfPW7zAONewmMbDs8MM9P+ukgCJjX\nQ6+WIrQ42820ww/FU6sJI2OwtkutbIisb/B3S1KQwXvmPVqJTU8DlMFWOSgZ\nG0++\r\n=iu7s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/density":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/tab-scroller":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a306aa488.0_1600304430077_0.7395815150394851","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d0057c324e3e0f4371e1c2866e2c6d6ca9bdf4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fd608ff66.0.tgz","fileCount":37,"integrity":"sha512-XN9RfE4imo5RGbLtHU6ly61Bqa/wU8qZQzjt1N42KnpSkWLtjOoDBc0FFxvBVhg2GTA+RBpp6PlMOb5yOw4gVg==","signatures":[{"sig":"MEQCIGj42Gznn9GEFieRbUP3hCXfjIIQ7iNmF9fOysV7Sy+hAiB7q/pTGoo3iLkOIUajnutjgiS9e/OOhElCQeyeo6s7eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3JSCRA9TVsSAnZWagAA2eUP/3wEwp+XFKDBdvhQZAHP\nL++RsxH7buRdFfogfM9H2dYEdu0h6Td6qZLTfg0e16s0tEGsMU7T0UD9RING\n6qnipZdZVxcUrKq+X8m5kx6GU0Q7IA9gmUthJCTUw0rbrE9QF2w2hhG1e9Jz\nW1hJ8CWxUroZCQJKhZG67VfrxFde2iF9+e/lwhIIV/6kPqmVbVwV0ISnS6SH\n4BaZsn2UgMVBJR5AlxRde0lh/B4YLyPSFiD+gBzufnDC+pjazXjefeOkIdwl\nTYLVk1j5uxicIljxpwG0jxaFi53qUDsbgXt66BnZrU9CiLNOd1E0eWqWmHOU\ng9QBwpzDjLBkacyPmBYFRpyoxscPoNdfB5zqAZ4/w1C13sa1guNDLqurXEDD\nbSvJinHXCkpzhNxszLvgz/02PUV5rFrNcYlfLyzcZwVQT90Wh4ZEobrc0x/J\nUMSl1U1wusT5SC2NrIs5uQ0dgSyNiyFPrNu4E4POdasXSpUwQ7F5/Xbrcb1Q\nt2Sp1/MCTpgkv2UyYdqLiTW1V/CBhOZBW6LbJrzah4/3lk3wMes9iPmjII4B\nKWDAHQiI3vXncK4hbQmswlatMqMSgthupaQgVMnO4wzB/o76LMMraLncWkOS\ngO6YH4ZsVGVvLtJ30uB/rVDFUN1HdLGh1f5P2COmBgd51QVjkbb09m5gHAid\nT5LA\r\n=eQKU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/density":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/tab-scroller":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fd608ff66.0_1600352850331_0.7664291012123934","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/tab-bar","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d878c6cadbac5362cc7b2062c59199fa79f19ded","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.3e435ba57.0.tgz","fileCount":37,"integrity":"sha512-8riDA+WImeZzjDf2BUb7aDVLJIW7bWitPdo0U4iZbw8zktzM32ijUUZotW85fYyz8mrQVH1QfO8GGey3XNxUog==","signatures":[{"sig":"MEUCIBYrFHfzk8fAohyHz9fGmfENP/622wB3q63fYuNj5AwjAiEAnI9djo4EzgDedGkuu2vfyT4/YNsXUgJyaQNmNOAJHOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZhCRA9TVsSAnZWagAAISoP/R17zZerCC6yPXoE1BLK\nT65BkSyN+L2VT3sB+EFTpimzLNENHkSaO5FS2F0Xj1bamSx3Juf2KAeVAh14\nYpl6m9YRgKjzus1K49GRY+jsJQQTC78gw9evfaCf61QzSLp8bjXT28FZ03HT\nDBoBKOKPLUOKlb7aNzQ7kQuu5L0lmQPEzmpR0nz1RhJyz8PNX7E8udjzzykU\nqDGJZc/podCebX1QA3Uu8RRlAOdsMoNHQu62KJ2b8tI8pojnEEtAfzmQkzB0\no/Q4eCk1J4/OufrgjwCLkmbm3Q/6pJFEbp2MEvTAmLbVoJzbELfeYWOZHHkB\n5CE2nRcrufENZyIl2s3ITrLjQE3ocxlq9DaB25EwZYQR8pfPWjTKW6+GpIlS\n3vhBwtOdBopfVgGCVqgUzJf7QoczBTDDOrHRdxFvudWR2gB1CIPvkWLtzF7d\nHAmIxGLbIxE5+uCkdxMql5fL4uTDoeL30n3RNlqtLxEpj3fL96lGKMJ6vudT\nIJCUkud/GsHAsIn4iisYom3WfjMOMp2Fl01VC0phncZLeL+U1Nuf5piAXNsL\n0bRDhzBuM+pcwGJ4D0nxXLrl8/cVdsqRhrhVaqNmbH2NPmrf9sEWTyecIaMT\n8FEYe83pky4ZvdiPi+3G7OW04srgWMsyV+0GoFW/nS18V4yw1XRpLJ7qoUUS\naOh5\r\n=ddC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/density":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/tab-scroller":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.3e435ba57.0_1600353888869_0.05144405394485774","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d37cfb529a862a85857977263fc19c2ca390c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c250ec52a.0.tgz","fileCount":37,"integrity":"sha512-M4wiEg9xlUWTdR2zcRMHlcWFrU5/za1UEzwVkqs/PbHxlicucUOZFj1u9f4kmsIGhwD9YiQ1hCSWzuMlV1Dd0Q==","signatures":[{"sig":"MEYCIQDCcqNI1/8CBU4160A1ZfHqhT/+CN0yzZ65htL3inlbeQIhANi2KV10cYMAvOCxqPcVAXoCGMTgAk+I81j2jc+LxC/W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8MTCRA9TVsSAnZWagAA7FkP/3bWBbzVs1e5AxPP2eht\n8f8+PH0SxKF3mxFx2QzxkUO2CWRmJasNgPmAdomf0v5OqBD/Eej+ZC6F8k9V\n/Ehu5XYPqtBNyt5aybc6MKUTShe7MnqhvnreLIevtTxm5gIAUYgc+yKOqdMw\nU9NNlBs/mw+A4n50G+U7YNP969iKyuPSIcG7/ev/DJrv3JKQTN4a3TeqLDT+\n5wewMbRV5it+7+p/jdtqbOLhaBYLgGiOKjk60L7eLK9a0FbDFlhc/iROvvu3\nzS7BbZr83tDheGc5LiD0m+F0f84r2ZNfOcpuT1dSpiYIVfsK/bPm5275dnaU\nruCYBlqngHYxCgN4VWwMhJP6VGtM9wfcnczG8ap/NytTPmKg/UFft+zu71Ib\nM2nT1psyxbRmdr4wkA5TWwAj9EdCBBl4rT7r+9Mw4EB0ImbAKVgm2bbY5UDN\nWvUowJN+nM4hLVRmMJkjlZT1FJWBFymKqH5TV8j2HHJRk1oHJy252hyqr9K1\nlAti3+rlpb50oodggQx0IVqNSmDQ6MWK+OMgxr8U4PBAsyT/dSlffOn6rY9S\nqk8SzjCbVdLOUOKe2U4G1hZCiJSPBVmeJJU45fMDKqWGP2ev9mXpPUNY+4G0\nfB9nNvqB2LkPAW1YVrkAeNaR4TxB3HrSnixIYwhPhj5MFORk9KATei+uRar1\nVBS0\r\n=6IJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/density":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/tab-scroller":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c250ec52a.0_1600373522591_0.789014203833655","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/tab-bar","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09937622247b608d0dfcf387bc7f14f9cb5973e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.e34e411b1.0.tgz","fileCount":37,"integrity":"sha512-Vi+F6/+5JGDEGeBncCDrRwuJAFnlBomGCkAJHu0d4BObfxYf50dxPKMP6xvdLxFejHzRmtT4A+8NfORDVJ2NfQ==","signatures":[{"sig":"MEYCIQDKhaGAYfyV0sne3YmMtlVzOpMPsScMcWUzc/SYcn1ZJQIhAIuUabT7XJV7saY8MTG8Yws4Mb895Z7NmI+68l+g5ax2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8TLCRA9TVsSAnZWagAAWzYP/3vCDiSDZqflVHVt2naO\nL2xFVgLF3hMVfkOwV7xshnorEfXEjVUiJJlMFJzj4vnDsGEc1QhTYbYN7hHt\n9VungZTM2iecR6mFGSr1IlkUPn7jPBSRlCQMgD+Z5/DbmlDgcFcA3qnPWRse\nbxyg5RMcudiphKEqT+b5Fhob7eANRo5DyNKggIOk4bJPC92lzSU9oo+J8zAh\n6259h02EtCEpp1tYpr/3CNrVbdkcj7MyBf5mdHwYSWTsMckezhM/8ATY+T3v\n6RV1wKzBeq880T6Ghe3ch+jcZ1tQpfbgjG5sERg5l3e3jvgkXj6WXZ6BzD7K\neU8tnlTibuljgbS9G6uEy+aBTCguB4Zsj38TJ3l3Q+rlp8q7N8po3H4sX22U\nkUvoDHAv1wzImANXKHyXUKImL+hWumD0K+xFGd3bHG7Z0eWKfag0CilicPY/\n6bLOEib6irU2L9QOwkcYj9I0HyhgEl25nL35YusBwN1hTM1wNHVejzoKlCcO\n7Q7MZmaR2ZdhJJwGrAKw1i5GZt9X3pgoULDb7zy/bh9QAPqcNgWy7x4RMNtd\ndn4KOaknSxfOFtjXswefqb7QAjeRIDK8jWicDdbdp2+VRn1OW6uCYVZrw6sv\n19vocGphV1ROqd/YNCzSir3GWbxD4JF9Whm8Tccxlf5mwsAIEiZkYHMexB6q\nm1bz\r\n=PWug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/density":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/tab-scroller":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.e34e411b1.0_1600373962785_0.9717390637600236","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4e9343929.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a76d30e0ece19e26186e04c9ff78b0e7acb7e4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4e9343929.0.tgz","fileCount":37,"integrity":"sha512-COJz5j/rAAZvxkeCeGpe6oL7UmnX/gx5iiyiWwAkGAVWOqo7mG35uEEaEI1oVmQYvg9CveyooKqCp5gmS4X6vw==","signatures":[{"sig":"MEYCIQCTzp6I0xR2gPMV6igMEdFsJjaXeuxmaEK5Aue2KJR7qQIhALkIeUWK2/lDrpKclccT60Zl1Dn/k6TW9cs5ItimZ7ec","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8q6CRA9TVsSAnZWagAAF3EP/1rBJBaiAtmFfGJHJmc/\nxtueaNZdZoXFcRljLh9oTedyqGW32Fj8TMtQ9yQVIa2ocb07xqA2SUSRvOc4\n4Or6iHX9V6zS1wCTEykhy2Rj+cUOQcjPgth3ke1iV4uNoMuKzE7OhFNdHQxm\nMr74py3qgdmIGg8mPwUpfmV8Y5QyXj+kqYpZtZHhGhuXkIlYduFD4XI1qfCk\n5pDaXVToWMFZS7bItCMcuXHNhqQEXQGSJt2hJmbAlC3CrsnCiucDsWJOg9XW\nUs8BRvoM4IA8WezyvY31D9Tfd7BwVo7D+D1BnRGhuz4NW1dDf4H/pJvLxvOl\nKFiw4H/Q3x0nLo2BTEBbA2OFBYB+3ELmpgsmvna0RnmZl5/WKgjfs498MPwD\nzQlP435PIKWyR3XdMfCtqrfdE+Ns+u23A7P6LjrvWkpPN9V6QGNx2X2Yu0xY\naeTk00zBjkycsO87N17DhM8oY00+PE/tHvj9yycCjw/2mdR8gwQLSBvyGQcO\nZZ7BFww5M0FO1v1hVj0IMsjx6jdCf+FxrRV+ZHFBTHPmmeSSz2vIzajtj7VW\nhPfzwR4itmNjMee7Xvi9MmJTopurFm4ihhbuJ79ZpSDElo2oB+qLd4Lt/eyp\n27+AiiKeKdtiYpxss2lAgyx1h2L9KrZQDq/fKFFZtpSlWNb0/FATrMilJgUq\nGGl2\r\n=gmV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/density":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/tab-scroller":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4e9343929.0_1600375482111_0.05553355479950284","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8470efa9cbcf3e9e0329a0109117030dc4f5efc4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4e5c350c2.0.tgz","fileCount":37,"integrity":"sha512-y43jKv7TIRM9FJLNZkRS8/c9DhS0E3t0ZtItadwWLagd5R5Xb/knIzk3Uo+nFdosr/R9+EQ4ETNXT3GnMF40fg==","signatures":[{"sig":"MEQCICkPlBJVaFMJEsF/+KhJPOgYeQmzVGLPhpzqF/IDbfKKAiAlqw0F2Ny4KZ2HcMDgtWPQ6EXONuRXRszT/7MTvqCgnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRgFCRA9TVsSAnZWagAAsygP/RvES3iFwr528hs0CZX5\nZVsQxJtInMsCwL0uuA833s2QtNhpsjkRuNJ0/gYq+78bxXgUE992zFkilQEr\nc0AmI1niPLEwHDzJDK8wEoyCvaMZ21QoE2C/lkAcUV8S+F9UUVz3SA2LUHuU\n8VFZn57bTMt3svRvpNWGRyqblwPO1I0wTtT49t2m0po90PqrZGBflirM5kRf\n7+Q0HYTOg5wU4WgiyQhGyAcWCKCfq4HjGMisXkHv4MzeOE0lqHMvn9q0gxmL\nWxGLUl4mu/eVwNhdbRocqs9C3udOiHUlMqVNXGbj+zhSvMSToFPDx/8ocPHB\nDpTGzSsMBzfDbL/EQBQ+JxAUZOYak4w6Aud6U7JDet2Pvyb+xZ1JqrfUTB5j\nqHfHrqhTby9E1DWR0H6KQTKlLX5ppYDSFq08y4hQ/mBvTnsIlUPA/Tjh1mZE\nPcYx4t7a1qRrYp861OpJqe1+hM8lg81Z+0UO7+NnJP/ThseYLRPsTGhjzpcj\nG5EhSte02H1UEOQp+LEnCcSf+uJVj9VYodh1ct6sv402aRLoiMiqsKeUtDl1\nIM+RBrKbzo1YlZrpK8U3PpPxYSeKHkKxKBI8SyXQYs1Gyte+QojauRTKOs/F\n5pEmyzmAvhDKGfdbH6cSNUE8UFP5TeoF6HjGoTEQqUTF36oICxOteOpCQzb8\nKgae\r\n=UpGq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/density":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/tab-scroller":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4e5c350c2.0_1600722948872_0.6113678234712738","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/tab-bar","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee5ee1021337855a9f5051d8f20b920830d643a5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.16c563ef7.0.tgz","fileCount":37,"integrity":"sha512-I5NPhpIFbcSN7WIU6XIYnFL59Vhv/LZ5xva9XsNtElKoIRTdngFdkyVfXsC00SKQMFMrz2/uWdyZMTp64RfC1A==","signatures":[{"sig":"MEUCIQCH7j11eJ/JtOxdB84yOIq8Sk++SBIWj3AK7us0WcbyKwIgM+zH+chQTAd/CJCbrereFqzqYBzo2U930P0an2rm6UY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTvCRA9TVsSAnZWagAAOv8P/0cKUlqiSg4l/uqPLouT\nDy/3aMqGo5J+zvnmn0biSyUqodo1eqWjeyjkkDDxoGnvfItGe7qsG9dPdFyG\nkYeBKhM3wfDhlq5C+lwdUPaviOHjNRU3GZIuHYpLwlPx6Azg6DTolFPqlj51\n8ZTmkgZWSuuAGCfZQbm+zNyLObTSliJqWcyIhXllHomIm6B5AtTsBpt+PFuP\n3VF3V6Toze/eAz7eG0KbST9DQCumvGJScwJZUVIPRW0Tiz3fh1D72wVZumxS\nLk1y7daRmW2SSDX2QfhxfYZ6tKtZ6ZLogaQHAord04yIJ4iEnLIIj+2YuUoE\n9PEc9NwOxeXkneQ8EG7r99JnxJoMm1hT8RoW/7W3fIysxziNSrnc6KXSZKmb\nbHGawGsJwpi6yxdwolk+0o4mM8uAtEPkaXIt0aco4qCaqU3YujBzCXsvfLH+\nZyvx28zgQMZuOBVDGwkryuHZ66Q0aWtXC4naLa880ww1XCBwp7y7RAW33R5H\nHrTbS7hn2Q9CjrcSDGVxCiiXyZYKagZGBPawUdwxOpsQ/Jekgkl+RnPBdKYQ\nPmGVSVgRf8fSSxDyKWAkwjz3fr1qHdLdfh56t1VWJIqrHbeDOSsjHX9lf6/M\nXIjdmlX70/7IZ6S6AeAN0LEU/SYV5EoBjJvhKZCXlPuhhXiOz2tvSnX7nUVV\nVmod\r\n=GJfl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/density":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/tab-scroller":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.16c563ef7.0_1600804078569_0.3143940667026879","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/tab-bar","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d36b89fe4da9f26c96c4ab6cdbcf2ed0ae47aea1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.fd8af3d43.0.tgz","fileCount":37,"integrity":"sha512-7XAbFfM8OhP3UcYnw1t1ClfVmDUOxs1/1mSeW6UBZv5rnDzXxdV+juYxlYaAgmSp/n2hSJtAHLisu7GW6FrjjA==","signatures":[{"sig":"MEUCIFahttbx2RwekNXkKm/Bt/h5cSeWixtzPZ2wn/QjxHQvAiEA6cHNY/FY3zYdz94sXK80XQAiXCcfR6WGGAMdIKeOQDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MrCRA9TVsSAnZWagAAS0YP/iXqIzLpH0MmT4fMNv/f\nBRL1TtDnu6zNSnSuBgeyCO18VCDKXC30F8fAM1x/B+bDtEhldfgXl6ztWK8u\n0WOSqJIZ9rcdUD9QBXtyKjllRE82QZKZuUVgDGiPQwwJ3RbYtaRSosKuxTEi\nIiUYtwcKEDl8l2uIAgsSR2UZZYlNVd8A3DSJsJyNkhPAEaXQC3gkuv0gv8CE\nq9HYkoU7p8ATO2FM+s0qmLLbTsup8O1y6m15TCnDqFRx3mr+sbMQl28CX+IC\n2DTP5m8jYOnOO5DO8azosVj7hnogD8etpGfIqYfNjADDqSlqlT2psX/7DT4b\nOKGrFPrAoIxMUvS2ueefpxsiHH5fr+us/8PsxqUI4o3kfLqMTLiCcqxKdHdE\nHyBbZgyHNwHsE1z0JDkAbsDzba+xZs1twO1f2CWhVrKFU+rE5MYh3Tj83Auj\nQMjQSSaRhZAS4OGSYC+S2jaIukSzIEEr6YtoQcKB8JDOV/kz5COMxxYxwaVW\n8Np9iS0Pbxj1bVU49VitWs22YsIRMFq+EM1N+hBGPE6gCarspGDQYUlU9n/i\n8UPrObK5uPIEnfPyke+/zgdw9EAgGY/+XWdllP0dp3dPyTHw3XqZKQupbTFe\nkHNvW2BhZ6l/sdZLqpB5DpMxTo8hlbOBpEf3nNKKbOGHWzPjS/TD9pZIfm6t\nPKwg\r\n=OXyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/density":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/tab-scroller":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.fd8af3d43.0_1600889642949_0.48497446121858556","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0cb482aaa507e16b7a5278a60f4aba9e3efd135","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d4cd83a85.0.tgz","fileCount":37,"integrity":"sha512-D2/D6CWBR0LIvbKdRaX0eUT1tHGRA7sdOabPb9+tTWLRwJl8XeGjDrQvwqiaGo8G8igPt7p2za+9yDhdiTMG0w==","signatures":[{"sig":"MEYCIQD6u+gjcgMo/XFYrbuj4ff9z/FinEg7BqMbyRAzfGCgQwIhALLW5EQeANdf2kowj24+YTG+wvWjYDTqh5FcMrW4ggcT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTvUCRA9TVsSAnZWagAAp+wQAIlGaYzNAsT+N5+y9xwx\ndWBj0TBmklf8zMkW+uU8TBrSzFY1oEP5k00EECSzQvEDfIQKXvU8Cu7Rppwj\nvZEt+/czj4cXienzgsMyFEzKxWq5vJI3/ScySUowuGWnajzg9djVHh0/lNp/\nddRvpojS8ZlSnxLSA601NFVSznbwyxpkzcp0OCNhp6O9A26t5NTGz7n403zL\n6XikIzbzCCWRW9R6guSf4ZzFYT8p5bqUVPa7PWM2053d6XH14YYF40s3gByK\nta9zlSiHsoK5eKRTPo3aCkOUs4OKMjF26e3VmJmALT7JWggF74TpWvU+/8Ua\ncYoQj1T94xd0SAd3LvO4PLhxEoRrJFbkxSwqKkfMQrasRoo3uYDd0eaM74NC\nIA0M+yKzPd6NW6e05KGRJtcTzldjFrdHC6uaBe19FNJKaeEGjlve2mXdlWw2\nPyXG56m0Khl9muWGpbvYGMK46oXg+4WANP3ivetLKqclW931vVhgcdJu2ZwF\n5xJ3kB7ChzYnzKEeJcTIMfh2i+0L41YKRnAqgwsoG24NaSIvFYfKfibcl61x\nIAbQbiwgRmLMJaq0Q16UXLNVijVsb4UogHchizPxSCS4Ka2JE32iEaE71nJl\n54U6IPOzSRE9LOkpELFhBNbSE3DyrXQSPpMy9W2wfCA3AmD97hBtYtcDRtnO\ndTcB\r\n=BY0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/density":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/tab-scroller":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d4cd83a85.0_1600994260217_0.24889988480711178","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/tab-bar","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8cb9bbc1b1394eb494e05f6abb6fb7faf62f59","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.199aecdfb.0.tgz","fileCount":37,"integrity":"sha512-uaHy/1fESJatS99GCrasnAefS1+7bURmVDbfT2LcK4PqPZqteFEznQWkyFK+16c96LMmp2lrIxi51WemvOqgcg==","signatures":[{"sig":"MEUCIBcJ1fuJN18NQG3w7mh7FNxI7J4sELWurAzV3ctC4Ro8AiEA6youZQP8/wqmG1T+9vLGfIDDNvvg6/iNiBc3AZz5gWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJdCRA9TVsSAnZWagAAsYAP/A1eemhIkgnl8i2amsOT\n8yd8sE9AFL82eZTi7VUVM9eC2inOvfD99o6zodnQsuz1nuY1Jg/rEQgesZQV\nXfQzw2dS25q2KRifL2yI7A5N22Vs9Br70UUiawvyrrEbmUY5UvQUZF/nZJj8\nmslUTZQKRudGiHarxufVnsKNu10GrI8S4uCK5/pmwxsz16LVtaSFjElr4PKw\n8XQK2jh/wFl9L8cOP7fJGHhAvkKllpeRMq7RfL4iTf6JQFqj0DDUalUXiJMI\n1B1+eFQinAbFgPk4VVtbciLdzIk/ROmaUV+dlwfq9FfCQJdwy9qSPeZlVM9l\n84YPojZ5Sl1nwSM8M1+iPs/8SCMnPeIYf/oJR0TiuM/u8cNnSitBFcarXgmh\nqASvWQPvdz0sJlIxbDFS7Ocb5t+/pUC4Iip70/mKv+oBdadibe7hjtQizefU\nccTAKqnJcQoVYNxnNl6wXwo6X4VBA35HjZgnc3uvPGZT7Ip0RNlY9MIOClfP\nexKmo6BMyVndtuyh0qUbtI8EVKfgZMDms/WBw4c5aA8g8HY341+ozxX5iyUi\nfNrb8AlYKHxBUPGWRKJiUDw74Tw2pS2rg2moOg/20YG1KVrA2GaLu7ATt3oW\ne70vm/3ip8nPU5XDW33hVblKgGpT/IWvN7NLJ0YlWOIBU1Vtt/WpVq/bep5f\nCNtB\r\n=oNcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/density":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/tab-scroller":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.199aecdfb.0_1601049180832_0.554207937752397","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acf981dc25a667397dbcecb1fc7bdea1f80515d2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.38ef4501f.0.tgz","fileCount":37,"integrity":"sha512-s+LimS2ogLc1f0DpeqZkLaubDfzGI2fWpWZvmOKbvB51JAH4Aj3oednkdA1A1BcZwpb0KEGAKHpAMvD0z8XdcQ==","signatures":[{"sig":"MEYCIQDWM+fSayxjtUEYqJfiLs6HCIm/BfZGv11L6yv61NwXRwIhAOthxZQuNWdiz8ysM3sNUzsRZPvrCGE6HNEcY9+EutDN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM3ZCRA9TVsSAnZWagAAs4EP/2LNOksCPBlqHV0bAL+Z\nRRQAujOkD7Op6SCDYS/XhYTyAF2ssCjo780YRxWvNDB18gE8nIuKuDM4f0jl\nvSVA/w8AcTzdJjqjTIa2osIzW/YmQuXYsHlytPc+FNLfY3HOwxFvoTRkytdK\nBoj0H1uXktQ3NTQ8SmfxsXUiGUMUl6psimiMVZ8l/QWK1RHSnptybMl/IT5B\n3ig/2aD5c4BVkJvrg/7CvN5h8H6vKC7BrZCX/I6HU4o0jTntKGQfu9bvsl2c\nEDu7Al2Ws7iAnB9H0MfQe2AqHHvcdmaCNGCIcfAVtq3RDt4pDRv0HY7iniLa\nbujwORs7r56WcktTY6ax+csf+RIB9rRvmubaC6t9A2tkY+jUCF0jF8bjxenz\neb6rqM8IkGkOILCO1/rWvjPLsU2BjEBfNwdW/zRccZ9ckLSKDwExlxv3PQc9\nmsX+XOwPwiPMq88pWRb+oZdT9fYOxA6q6Vgwuwu0rPGdUUW+Ynb8n1UI2+hW\nLFBC8DKTnDhCwGAGGmSMvBwiV8/o4mj+AkCv8tlKTfwUop+cnD1NV+tsuADQ\nB0TOTHsE+h2KoZy/Qm5D/FqNS9Apc87hmPKKXms3VPi0Klk7vUcnNwITxGYh\n3DqMaH6Vw1fQ/4y77X5l8cp/omaNoMSOHVvrNio4bbXjnoby7ngELYiV0JHn\nNebk\r\n=T8Ae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/density":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/tab-scroller":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.38ef4501f.0_1601490392652_0.5436629505692181","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/tab-bar","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a522650042089128ff74f746ffdd0591390069e3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.774dcfc8e.0.tgz","fileCount":37,"integrity":"sha512-IkRHDNB3kEyjFxTC977kYTu3oCe8Oo2PW6BqFRfvVgYV0b63RSYzjr8+/U5j7umGmQ1FKlAPh8h9w0JJ26nxDA==","signatures":[{"sig":"MEYCIQDCZ0N8qALsUQAlB1FzwIRNXrPduFbMTW1WZR+mg1kSrQIhAPSP0NfTb9ZBRm+NUJNWl4nKHO/G/hbjvHUn68qvgBtt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaewCRA9TVsSAnZWagAA+30P/jjvAespN+UzvLCVg1kT\ncTogMzroZWUT6ox8cDxSXcPZWv7s+8Z5hsnv/BxijOgLps8urLqjJZRpEGaa\nBCeWl1O70Dm8lZYwBl0Hg406oWhbxwsL8SrKh46suJNdu57n633W2KMHLG38\n4fs13lNSYiXX+BprAtV6tRmObQcwgSkpya3vyhpzJC0FYKDCwonsuxauEPct\nXiUboVKvn4+G+av2btTBvGhynArMaQWBZb+N1DAJutEoEVoiCEo8cS7we6M3\nQyL9oz1EjW/LqMK07wnHYUJ2qrekZn4GJyRiZfdAsVoF9tOLQP5lVbBpKFxi\nVcMbdbZ7E64Fj7TsD2g1lT/c6VPYcOpxPuAexGdwYKblgyDxPDIl/qwIV0UY\n/jL2dr8sQ7/VX5/okn4InJJL2bu9SiJnFI/tYYZtGYV5TPasJfxVByMX2fuz\nzUBBa+lRXxHa3UWnLTMBEl7yE7T4EdxOvn8RSl89TX6Z3ovZQQIX3dMDvgJA\n6mTn7QSD7EOIdw5eydspCb/vpsom6VvNgY6FnomWZ7dE3UIFuUU2pLOet9jL\njJdCE5a7W/7weAEafZZ3+7RoXoIKiz2P991+3pdv3rFyc61C2v2dA457EDJU\naM+iHl8Q1+yveyoWbYSgoPVACfCZ8HOMbm2wvxj2KYFpmJhUqokX8JzXR/cB\naMHP\r\n=8C/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/density":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/tab-scroller":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.774dcfc8e.0_1601546160404_0.6759463669203305","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7573a43d0c8bcb1441d687d10e115001d4430b6b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.0f60323a8.0.tgz","fileCount":37,"integrity":"sha512-hDOzg4vmWUaXRvY9uc/sNBB/jW9IlrPUAlrYw1cDD8EIfRXhuET+sDefcTmKY0rsuFdG7Kgy2Ag/wNAD5MOsnw==","signatures":[{"sig":"MEUCIQCIJpxMKo4U0x02MSyEWqU509F9Od2VMb/5pcrpeMEvYwIgcbMWnqswCO7P5hrsWHSB8dxr0MGF1zXyrwk0+uop3j4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4CYCRA9TVsSAnZWagAAv/kQAJf2j1tnFDOq4Wd6lLyO\nPdBcCj0Hcs4Ir/+gyJ+Ubo3VpgbaAlFgj1KNyShjRNXjuDhKMrPy1D4PfkCk\nXJtv5ghppFDZlWc9yq+hMza1jHJCoVsl8HEboR+F/R+MUKqDd0WkgQwW4/ho\nkluZHDlJ2B/AMHdK1BsCEGjFD71ZtZQYHJx2qX59/fPE90Ag8hh64dq9qtOj\nJmILNdc4cMNeTsImkI+UPhYfOEr+Hg9CAJHLk7BIV+Z+nS150cW29jeh2P2y\nJMPtfdUGmZwqxPxbEH3OvuC95EFE1gmnotj+dQw8ORjz8HCO04h681P5BnTA\nODt3q8ZEK6vEOD0Pax7sGzkRmdZok1UD2dxBLxdex1RPZ79x3mCs6DtEbwST\n1Uw5eTeLDhgY04YteLIxLLnQeZvUF5GV2X3xyWVJWDDcgmlYm0Wwk+HRkYcD\nZx9h33hH73Bcngj39h7DMZ4DaGVZcklEu5Uveutc16rzrBOohZ4pxJGinGEh\n11F1bJdpPOpEsC8QE5O60KI3rsYrnsTrk/0WyoSFRlaxxyzZjI8mt9ZXgTok\nVSWzII2h/LqdWFjzeyaLh+VaEjMpuTI+t2wNZ9fc/HCKx21B1LkM3H3euzF3\nIE76uZV+3t8IeNqEzcuSV/KNe3uD0+AOXZrbl7593k2NhQz2HXQhVTDQGmMB\n0uL4\r\n=H0r+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/density":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/tab-scroller":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.0f60323a8.0_1602191511773_0.9216344399676564","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/tab-bar","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.d71622574.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b5f3fa75832c2d69db5ff071c26cd5b3f136888","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.d71622574.0.tgz","fileCount":37,"integrity":"sha512-zvDWLlNY43fxRQwWtclnYQgt/se4QWNLbxXNnJ6tF4i5Dq5urQrbwgFERrwh+/aZ5PnDP74JZl5bIwKvO6L+Nw==","signatures":[{"sig":"MEUCIQDTrup9YJt/7MuL7FxN3hP4+uRMWhhUtGYJ/JVN5IW3KAIgBnwcXfhzr42JL12GkU/FeYjntHAfLM68/R2K8Nj3iG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJDbCRA9TVsSAnZWagAAUTEQAJ6j60KH8okZFwsaekyU\n3xITly3poNBa/3gLldfLzPyAynr89LmdpVviZHwlh9R+qO4jUgw0dp3MA+kL\ntCtvUg0Z/9LTDlr+WpX74MoAGLaic8hsarhFTjuHlnuVFC54cCMK7Behzw0M\ntnnD4A4Ag3GMvWHk92VhKGaeGiDujgwHYK3Y7rbn35G7ADyE9EMF8tQqCUiq\nj560kO0UFIF4KM0Q4ycAGv2eSUU3QslIz8SDF46HICZBQNBj5xVYcbYEy6A9\ncZhUn1/PpSXS1VRqY8/5DV8el0mAi7yOa7V0nHMWU3/UUHMp3exmKGKlBQce\nkqbpJk8fUukW4aEnV8YKSn0+lwvv1m81jyKdYHkf8CdZN+IEjehukpta+ypR\n0cW9P1uMRVRwM//1gaua48f9Y5LTTnszqhhgtc2NMBlIzO0z4SrSmGuwefmi\nMw3172yDb7sAvDKcX7KW+3uRy0UzaFDPQUALs6Yn9b133SugyJLw8Ig6eYbU\nCRrJm6RxbWUoqcAKbCsOYPO+i6nqQObHG8O5hkJv4szLJ+PIhzoYINg2O3qi\nMcDwNBg1t884DStsX8KNJBWMKO+8bh150Hfm+XyUdAbIZpMsEE4IcF2kJzpI\nzH5u5zdM8GSNVw8PhMbEIKBF+B8lSRrl8S/f3EU5wtNA/XzztjUzlBfmo3L6\n/iQ6\r\n=egy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/density":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/tab-scroller":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.d71622574.0_1602261210693_0.8783289604087932","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/tab-bar","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e7ce55713426f10c158a4dfea23c4837d145ca6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":37,"integrity":"sha512-K9fXeuYPWj1SudROMhMAewgDeUx9fTbqLz9mL+GEsLUCGno42bHu1GN+9BUMGSinLFtoXl3JjsMUbe03DDoNeg==","signatures":[{"sig":"MEQCIAqKSHAMzN2CuhpDK95BPrhmGnuZ2XeZqCdUxbOkZ69wAiBARo/bVZertwpM4dOeMXAIDp7S2AMZ337J8247as0B3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpwCRA9TVsSAnZWagAA1/sP/3xj/B4uwV3+2JMQFCpP\nH1DUAUDLnGPh7FpgHQwmAZLSP5uMwKNz8xBlXPeZ60jBc+ymQjuh3VLy91iQ\njE1UKoNg1GK2ACsO6M50hT5lHfPEmcivIBYKHP9VQTihECWZUq4QvCkMZScF\nYMp/2x7TMBIOxOnoMQAZpV4u5VJ0AGc0LjjSmQvCD7qaFgBp5xmgWMMeyVbH\n9D0FaTw+bRqE6sPP65jWMNpVabwM7EvXyIbQkRZ57bc2KVxpL0G5BAgzPbiZ\nBrTMm4i/uZ7UTibnSm44MdTF37sVo0iWCOTuSQJkbK9QTtKlx1j4b66gvyBg\nnFhWsqHStB1rpz2o2dDFJo/JXez493JHHO+Ki/jwhj74b/4ROXe9WQKSsUs7\n1/BR76Q9BybWFWr9shAS+1Y8/i/Vm7JuqUOzsGD5NVmwLR14NJ17NjZgIqMG\nkN4IxRKLmmUCMJJGITnkmxL3W1gNK8WEjSwVMgsMwtFV9K6t7tjyzqnwFK93\nVFyo9pe4tOqiOc6MW82nBYWJKuuqO6iNWIAC/Rpo9mk5ELwcuu6my85en3bu\nFHHCFYKaLIiWwRWv+7aqmcYaXmGzM6D889Pg1DeCexAodL6vsVC7Jfw9AC9w\nmpuy+FREfLv7XCAYT36lN9/HBt8+x4rUriuM17CqRl5raX33Vt/R3gSkE+3u\nMiGH\r\n=9zGZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/density":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/tab-scroller":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.7a9afaf4b.0_1602284143625_0.04930149607524115","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/tab-bar","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16c3b9f6a5d97988434d1ae38a883891359e3604","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.8a39352c8.0.tgz","fileCount":37,"integrity":"sha512-uarQhvT7yrAiMjGQmu8Pdoe5KNH9WGR/1P+3FPIjyo25qPmINaRpHJOo1d/6qRREFUxdnTDItol0BIBcImU7Iw==","signatures":[{"sig":"MEUCIQCpfDspDDndzNRocS/ELPVAV8N60PapIQpfu8FfUAikKQIgVpuFzqFd5clZGh5xmpsWLl+ENR8p7GK/giTzgWCXCPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbjCRA9TVsSAnZWagAApf0P/2tlb4UkkpRx7sytZZOU\nge7DCkOQXMngvBhFkiddzQkFOfxQcimntp7Dociy2eGmsMBgKIc5tT/hSFsU\nIPhCK6/nRK2tmIzes8HcVkQGBIF5fI3hnoMoAqMS7Yv3OJ44hxwzTsVhhtC+\nfbbU0ZZs/zMW5NA/tqgDUpK2azj0n/y8qJdzK/5u2Ki9dEmHaGhAbMEJPRQ7\nYp2Yo5LmG273E6xCw+X2KTsMjCWSb8tC7pzqivVlLj4M636xUG8JOTNUW91W\nN8r8gOq5ZK1vaVBzf84cv5B460l+rPONC2K8NP/Fzsuv3Bz3j24KM9tNNBw4\nrejiv+sI4rI5VDN8sXsjSoxp+8ZTm5ZdkNCPJ++qISNyl1N9DAmTsI9SZUxl\n6gIrOs10krsxWcyHsLTy/SdItFfA8z/+2CLqDHdouTQ134fqlU8LAF2b3HB6\ni+FQA7y0Gepu1CWUrS2LBmd/kJmtCiy+loG9b8Nx484269rL0N8DqUB+HAtI\nqKO7jEDFYddaFpSjoBqO1CdiHLD8PPYKyobmVMHRtW3EtqgkEXGgvxjnqCu2\nJJ7dEbnBSVIdX8xnbMa88Fpy6UqN0NS9QeSsT8Xx9pYX4J5iAQe+vbTJK561\ngesem/8OwMnnGEX+1gNpp5mn/Oc3ErKk4KBcT1Ml8OJbXWzbYQjrXUzKvaWK\no/cx\r\n=U0YX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/density":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/tab-scroller":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.8a39352c8.0_1602524898607_0.9575855611978106","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/tab-bar","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bf8c165ff96b0f2e110031c11692d193dc22164","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.790ca85fd.0.tgz","fileCount":37,"integrity":"sha512-mViJHEgipbxRvvYWZ4VHjC98l4ynCWCmvMiVxfxP3OmViX2m0zbBnh4hm71WAPk2meRA9isrHR9bjtnIdhyF9A==","signatures":[{"sig":"MEUCIQDM+Pb2IusSdS99WkOgs/eoh0j3BjtHsSrEC4K67wMRXQIgDu/Xniis++pG6DNqeSupWvMqsvoeGhXy7u/LHgKnHpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNGBCRA9TVsSAnZWagAARncP/3ENb7No24UR2cqq2qbP\nV9SV9h4cvZIr9ts9NSKlIIJkQaR7EpcBg0X8JAAj+maVK/hB39id1UOGCFdj\ndi9WpDZKWdb5D/f/XTGOcbUAzOOaFlF/vnkoLBQR1aJdr1SU/vFXzeQhzLym\nyBf3wg5d/lhw4fgMfn5RuNw4suAF5OhvXocxdKznz2Th+66LWTSLWYMKqfUz\nxGc53X+Z2BA2cIm/TPK7HUhaXaWZofG9uT8TmfPHC7OSPO082+AQ0zDJXnoB\no+zYLOestIAqt/exkAihJiU0YBI2/G1GaaScNxczSCi7Jc3B7oM6UtpZ0i56\ncWXH8+sAmbRISr0lEQoKY8wVsTNDsB4sD7OceXZmJUqMm6AJK71i+uabkRRD\n95U00wo3HHYEdFK+FC9GMXR2XBDbejbKhWS3r1vRSDL6q0862GlzE2Hu/4we\nYVXdwZD7oIeIoZ6Cely5y2VkCD71BN7MswIhZL8P523Z2ruXCFzYMdkxR7S/\n6xdtfxkERlIKP0TAnFL+LzJAAxQDef9Bt25ZqHQmr7HigQUmAJuu9Yap8dG/\ns+vSn9HLuK+J4GH3uVyD6yL1wdU8TYvZkQYnzhP4AbsbO5U6+j37RCPBcoUu\nHrjOSw+q3pmmKa8LiVwhxt1d+k6lKJreDbTZoW2Ni9VC49Ci9MQeO/rhHaHc\n97L5\r\n=Blp4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/density":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/tab-scroller":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.790ca85fd.0_1602539905274_0.05564891109012171","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/tab-bar","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.174c0becf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cbcedc428703d1fe481b736955ee1588bf8b1d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.174c0becf.0.tgz","fileCount":37,"integrity":"sha512-gIPskARe+3wJeaAANdJ4mFXM8lMJge3XKH+hF9ZYw88OynEaaEx2aC1gDDDvbML72LHTVYTMNJCOSNHja9q1yg==","signatures":[{"sig":"MEUCIBdgXaFfWeSGyNICLGu9kExxjIzhhfOqjlu0mcTjgTIqAiEAhmQOi7OS1KCTOTACC1zOXindi4zWr5rP7Xz6PC/DMAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+zCRA9TVsSAnZWagAA27QP/1RvwJeVkecRQnlu4W5Z\nLlRZAwlAdZVW82xyp3E0fnuguThzSKJ7hHqjHmPzx3tYuZZuj6OIYP5bMc81\nvRWS17LXDDacQo6m3LqgLUSNN+wJPp3Uy9Ihx4+oa2Y7WYQlibNZasMyfbrm\nJnVZaOKsp3LruyaHz7bplR1cWx+UghJo2PRwMVBZFgAd+1ik4rf2TgWNlZcy\ngzhN+7yXtR9SbOZdmTglPVUu9cPTdETiFzC8Ray3L+N+iBYuyb8KDxIrYx9+\n5UbmpM9AbciIDfmoHqZ5C1QK5F+FUGPMtqJ4ErzyDbGT2qN3gzhq3qyNSs2p\nlCVrizkdLvgtArO+jqHgZoJ0oec8419qTvBA4dhPS3heSuYhn5Qi8BN1u2I7\nh7VJURfmmlWeyOxGf0aqZBcw+TgF/GrEFgGxlYTf+dLBwgJSVHUOTmPX08D4\nrZlgzTKyt7wAxqF1lxj0oaQTB9Vzo3Lv650T4zZa7uZ6OvZ9iCNI9sZb96iC\nb83ckN8EmGR2wVKnrMAvainROWR8Ia5WiW/Z85UWS7g8/JRS8cgbiw0x8JF+\nKxHXJdIBstr+RNSDBP17b6PVHIds2URe4pzqi0zECBM2n9TM3tt4Jq7Um+em\ncQr4L043i3LuP5A1jat/gfmmpdLV+UrAvHM4Wcn4WVyBeJKLyxHD5+AQ43Dl\nbH1C\r\n=0Qs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/density":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/tab-scroller":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.174c0becf.0_1602641842597_0.1462098588548404","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a738e6d76e1cc9d5fdfe40d33c725833be38c8e0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c71ebfa02.0.tgz","fileCount":37,"integrity":"sha512-L/d0wnimHOBkpofzztGOPbJ3W4CLj70UizEpTeLtvNjwfBaHjyiVjpD1x+3WREi5d5JXsEwQy3pXKfsIb0eciA==","signatures":[{"sig":"MEYCIQDkOboYask41g58jBco64GKIb3Ha5jixMK8xcsOXMzhfAIhAPBcJ7QyoVVhX/fs8lMI8JgiHu2eb37Ge5y389xrMEAf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnxDCRA9TVsSAnZWagAAl+QQAJfK0bZE35USahAQXAoT\nYSo+KJ0SkuoOXUpTstocp6AnTIXSS+wBhQiBJO9YuCQOGKRefs4n8GJb6BAn\nSO00X+TG5wbt5qtahCcgmGrG3l8h0/Kry8l7TG1MzOe1SJYOHAmIgRGVhyaX\n9ex7UMsowrlV9LUKFP0wpvqpZU6hK2mGDqH+AWXWLfIzlaqr0ypIyaPK1I5x\nfGEYR6u+3bA0ZsBFE12sIi15axMjn0VulNU1oYg6uqqF81dk7vcb44d9d9N+\nz2P59i2Wkw6mWxYjl2icgAY5xCcesE73qKU3zj9Ob8tIcNz8eB0cdCxa2MYb\nt+qXIvqGJLrCY5dhfJVlBT0/TYbZgUzdiQG3mYEwlgeqVlQqDKctxoVaH5ik\nZ7mpu6h80RXYOMSLHsgx3TSnbNh/Z0/12pd2SA5DfYlAYq1PQhl1EgzxEQ3+\nkbm45BJTAlvpw9e3iM3z10QYuMw/hsoWGpY63YnowsmkAn0IwSs65zLzOxuq\n6kfygsBITY5lJikpvH/6rMuEtCoGRvikYWa3Ed+sHvBYist1SHb1AYTsgDPN\nrQ9d0kcZYLOmDH2f7CB/n3upaRKseYi+6ScNw3g0AfnfQkaVJ2Y2YOrrf9fj\n6adMZlL7Q9alg3ryblQeFP3m3f7cOqcbChdUWZmluAVSgw6PeyRQN9ClWFLS\nNZis\r\n=MYbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/density":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/tab-scroller":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c71ebfa02.0_1602649155297_0.6149083371691353","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/tab-bar","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1433d3df402751ca353fa8da2b87f0260b68af57","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.2ab716cbd.0.tgz","fileCount":37,"integrity":"sha512-9D6sM/vZ6kEmWU1d4mAe789UnHHlW12Q7TtxIPgQTLBjAIfJXpj/8YgDPsf3edzFVFHHExP1UJrwRjVbk+ok+g==","signatures":[{"sig":"MEYCIQDQPduqpORithVyH1ak58zlzMfXcSS6uBnSViaw2teAbQIhAMgxl/i7yVnM3kgvsK5OtDQJfdLoEIGwnzld04mEEamY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPnCRA9TVsSAnZWagAABzAP/3/kMatrAQaT5rGip2UO\nGwCRKvWvkj9f/kC8xcXuyr75TNIyhh+8ahPdb6g917+yBhKPpSJavxfiaEmb\n9/kkoqkHsjUBiMiwvpSTUtVxjASIovwC4Jw+QfSAdDSEvqwdMdHFdiWEPpG0\nN3Mw/jGco53WoGD1l2vQB+zbOHmhfwQvexZGdLqDG7jHne19p74LXq6Fs5//\nCoXD6SuvHqgVgmQNvhFizOUneKoluQ5JapGXWDJulDunTybDowEvqN3WekGx\nNQt8lsUghx13/kkMfu6YyHKTG0SOHj4THKjneIUHzX/MUWFC4CfZn2EQwFeM\ncpy00/CbEjuFbIcIVN7PZT06cUkiEpaM+wu1Pf3WJpO9qXWdeKo04U5YOTSl\nOHgfs08G1QANWry7os0yjtZ+LvftPh7V9FZDXE9qUKCPpasIDHyKyv+Khvou\nk/xqikVag9EjhUN0JsXcQlRU3R5eXNEF61Q0OM3Bw/MyCyIVYm9y0ZFulBDe\nWNu5idoKpey+9Ll5Njm2k34kod++RonXuxWAwgmajOIfomvC4QuA2o2s8QmM\n40oijBF2autgoBoxE/XTar9Js0q8q62y90Iz6l4tCR+Nxazhzc73WYOPIHO3\ngE0W+sHZfAxwmry8mIoBGD7QoytY1ju4tiOLk0D90oyzVgyXEKSojJbU8Za1\n2R2R\r\n=VWqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/density":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/tab-scroller":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.2ab716cbd.0_1602806758910_0.31899796688627724","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/tab-bar","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b3bac2a5048bb929b42d4b758000be03d20c61","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":37,"integrity":"sha512-d16TIyJtArfpVkoKLkmMlwoR8umv9kvpQsfscltRYtdIb948qJpUzufz+XpoBAmKOI8QcBtCc7kvrOpiXW6/zw==","signatures":[{"sig":"MEYCIQD6dVk//kg5X4zkHNB0AphBb8xjQ5j/sdud19JT9+9xHwIhAOl1bGe8uUNxMlpG5gl4uheDBZMaUkFjjV1ZiPfGsNUU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4+CRA9TVsSAnZWagAAkYMP/iQxRKfBdGzBJkDwNVR5\nn81SyztjnNdmdE657MHf7v1qt5iIdHdgqbP2fynpoOx73MEaVtMpMqfRvYV2\nhJnrTq7lJh4b7wCo4TYEbJPPLPmx2KPAiltgxeljQqX2q6f9P4CXaf0X6Rh5\neCtLnOrLrho3QTGywc0P89aD720KaIPyDDAuErtlYlZE2GzFJea7IKjMVMXH\nxzuUL51r9wcrhqv0paFcshXn1RM21CWrsHbl86s3AuC1Hvr+KX8+PrzCL1wY\ndQmr+PoG+pcOIpGUpo6Y3IGmBuY4MF5omW+KgcSklKzi2YH3b4tuRyy5sCEp\nieWkBvVCjAB/sjgXqu+Fg+Wx1O5wjecuIpsqrKrbsHF3Gou/yQJhCD4wEBYc\nUIivyR2tTl653XCsIJdU5exPVes8SmoevUSi12i4O0hP9J/CgMbfdyf/YPJw\nUofk/Kvv4MHPPeUfTfr+O96bHZ2ZG6pamM4gVxqdt85SxLXQw/kMBYRvDgyj\nf5dVPYTbFbod/jzB0WJmwqUQHd63jU5auHm+nj81RSfDgbm7nCqdu1LEDUEp\nM58Dcr9jgEsajexvfiWFQqew79BkJa6w9fXV2D1/Ky0y8HhZVTBBqyX7CB3L\n0ndDoLg5goCRQ0nXosrgKAeApNfw7e9ZbXOftGLzM59sHWMXROMUMzu0KSrc\nS35v\r\n=kVi5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/density":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/tab-scroller":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.43c1c5e2f.0_1603116606344_0.48416000774420986","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/tab-bar","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac26c6ae4b819f71273f8f500385e3e6b634234","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.ccc64eea3.0.tgz","fileCount":37,"integrity":"sha512-hCG5CQC6bv6sC3bPQBmZFD3mXo5zvwzLJVzdd8UQ1P7JD8wyYMMv1URaqOESzSDKQVK+FuYxZkUFD51OuW/r6Q==","signatures":[{"sig":"MEUCIQCui+EuMKE4I4HhSNvmuuo414YhvQuO5eKQK57vb/OsLQIgaW8GbPPJS/uzZC7gA6YvqVm3i4ebL1I3rIoF6GTyY+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NfCRA9TVsSAnZWagAAJzwP/itJ6e9sa/VH/JruxvqY\ng9uR6kbGHu3vPSPennR+fW4sjSlE2wTXwQ3pp4vRE4u99EcO170TiyGI9qrR\nlhi4hX93b439XfpJahgvl7e6LWfalsILeCWePsB+ULGo6AGUYPOXssjWi9e9\nGVuOEeFfJwoI0JKWZ4QRLtV+M+kKEb2l9aygtaOWfPvChTXMlhNNliJBDVNA\nlP4qHrA33g/5+NjScFVV9vAohwLeMU9hNN6/o+9YQdWe5IjtTidOCCbvQY1F\nspOxvVO+82bxJQVw6PzIJH8lxbqXweWMxF8KpdeisV5LZbkUbIbXMa1uIQ35\nvMCGH7m+q2au//I3a+A3DwLBVIFy0GnbH1bN+lCNh4YVCRd5BOLDgovHXNBq\nFGEZMJLNnSj1PTsNxIb+55SDZS+fOmxS+DL4yqNzhb2oiP9A+q1LqY4hS8ww\nLBHLzHcI768Q36B2gznT0EdeLq4MdcbtzQp6q9yTdIQtCaXS6m6+iWxBoAg4\nqkhhvjPx56uoS2XIRaG+rXXUpqng0m/s324PvZfxi02DOE4HwA9/kKDr81es\nJz8KuF05BdKhrc14cB/D8lCnQ+Mkvp7YlJJt44+NrL7bEjPJnm2tRragUMhv\nT/rnvyO/9ArazfCOH7DdskVl+fDWqHYe9dvXJ8L3WqU4rQLdQzCYupkeSwEa\nEXIf\r\n=TjOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/density":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/tab-scroller":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.ccc64eea3.0_1603752799159_0.3430839888398862","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/tab-bar","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"706fd5c0931bbc8e6c72c7e036011e68284e4aa5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.a79cdd019.0.tgz","fileCount":37,"integrity":"sha512-QqWwzPrx432qcs4GaqZYYdPtf6cvMxBcGztiqlau6BCm95KMiG2AwwADCOPyEXFDmuN4V1UzzmYUhtLMmyGQow==","signatures":[{"sig":"MEYCIQDK2bybJKp5b+ITVmR5pOx9KjU3zy32y4j2W1wLrwi+pQIhALCHOMFYr6Ul0x24O03dksNoT5Lak4f4eF8oS9R5gKTz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEvjCRA9TVsSAnZWagAAA/QP/22BTv54vjgIhTIvMNX/\nkH/0EIXIYg+4ni0bUI3nuriti0RTaqE1Y2RU3Pi/5nWI7OzSE17uPwdYSiNp\ne8d8yDgOsYqe6BUgFuBegR45GfwFHiXzZpuRyRrxO0MhWevc+C9ZHLWaXgYz\nWMyaqaZQ3AtwGQS8MIsJ43Z3/43WSXI1EytqQtRDzCnaem7Yu+PKae9Ub2xS\nDdfUgQbzn2HwELWS04qzPrT4XEofzfHnHXNuNtznjHRJoCLj+rEYrDbrHLnj\nO64lXaTpTStRiffQJOMjktCqktQDtaWv5IhKZ1vJ/VLIT8vfyW8Ot+Ae5Kwu\nYLoZO3DhM88sr1oWjlCOwIkf2cjNyys+E6iem/+TQk/uzw7neojGT2p86g1x\nKpLE4CfFSCNez97htlTd9lguTVV9MwMQepgaRIWc0iBPKUJnH8RvLjcvO9Uy\n8xjmwNklYt1eo7nf0cvxNGNMUWQ0lizhGNNoLFCimYiRSSFP1TvY9AufZWhR\noDz1kiFn6TmLp0SMpTXTpqB0JlENQSuRHq/i45ISwmavNPhB4LLPyy/YpjT2\nSnVYVmiQh4aZejtDO2AeNnbCkyi8jQzxoZME8bnWXIF8Gylw3b/R3X9dCSeF\nKfAtaU2KAI8nZdaRTBn9/DFcfmLbTLZVcmXhdsmB7dNSFbLdiXaWQCSbnVNP\nbsOf\r\n=j7lg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/density":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/tab-scroller":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.a79cdd019.0_1603816419073_0.29438168198821035","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/tab-bar","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.596e98424.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"176a220354ccfbf63bcd17cbd91d7ef883733582","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.596e98424.0.tgz","fileCount":37,"integrity":"sha512-6IB70HKjzUM+9uuE+bSCdOT9T/ahkzwJY06/EC6Ei/pZ9QWPJMeI/h+s4GVOYwpW81Pkj+uj6oPFanytxKliUA==","signatures":[{"sig":"MEUCIQCQQZ5iUd0KZikHqxTGPjHBgb/+f9wt9ptkphEskGvhYgIgZQiJAJO6/wAg1iiOmUC790yHb/JJHxsgIiOPePCDZzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZbSCRA9TVsSAnZWagAAuMYP/AvluKnViykjOrd/yEHs\nxRNcx8owCq+Cx/prBo9ns+ndTSGgTOIVfmulmmv4h/Mt8H/NgYLGQw3Z/s48\nvAXgHH/G72PETObeUKc0uNpm5wiMiCfOXKGbN7Bnlf4O7wY5U8nOQwGNeG6j\nQYhZZOUEJPW+cdWtXzKaqBlqIquKtlwK8WT7eWhQnjSUzcotNar/MkcDgf0a\nAaa29PJBSeuaAtWNs5uFqr8IHLpR/muWnXYdyKad4J1g2b3h9jooRQDYi1Nd\n7jTDKujw+5Gz/mq6IACyP9zZ2TafQIkEtPuYpC55dAAKK2LCNwVlCbUX8sRW\nAgXrEjLVwUg6MpRwWRZau1TmtH0ydztceRCjr4Mh0co1RUmp6+ntvqbk3XhW\nIfvaTUT1l56FFhuWDbAt7CliRN+Hn/970MMAjWuCa1tQ9L9HusEteZv/Qz0e\nYeHg5rWbyLmI9OOZGFSMhrZd9QigtrP9M4T1bFGTwFmV26GgBxW7S6aVAkkz\nqWyjpg1uCa2tf5uQo7P7dgs2cSkaIxd1hiBUjpg/WkGNmJ7M+mjtzt7Pwn5v\nYeHFWdJiwVxmOldOcGZNYIwCSyXvoHCFKSoxnZElT4bMS+7lmvWxAsj3PtjN\njekhuQJfbS6UrT3ANkh2DhLlisiKnYSOch83Tj33ZPMqC7jAOzc+Mkz4VAOE\nDlsc\r\n=bgRK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/density":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/tab-scroller":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.596e98424.0_1603901138025_0.4955464488284398","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/tab-bar","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d25f21f5dcd90dc900525b9957fc1c09d2ce0a3a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.05d5facc2.0.tgz","fileCount":37,"integrity":"sha512-MyNtS8tM2uvxsMe2sUK8/AQjJ0wT1LT0Rjn0KUWM6s5Yve/K2X7HYZ/SKBzZqO1/HT5gZ/DC198zzWE0kMYzyQ==","signatures":[{"sig":"MEUCIQCYdcaW+pINnij5P47GIRdZr3WMpek8yD5wGNlFbJTziwIgOXzMKfV/gFR7I6lPmcG3V8hlnKxOfA2BPF6rwPowo/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZjOCRA9TVsSAnZWagAAkCsP/j7sELm8pCl0rngnwyfW\nJJ64vwHlDklj15XQT3xA2Ea3zGI8EFwvumTQUPGQmdokodWx5Cv3pa5x9H3D\n7XMKjJ95UWsbtMlXYlgn/rX3j58vhlnbOSUHo7KTS8j4QYyt421JzWl1Lfhz\njmMklEf98xWCS1xYsh4AFp/WzVWYcXZcCQU3QHzCYURYPvWgk+6pw7ALsiOg\nH3K03JmdL2BoGH6n5XF1pPRgkpv2EdxXjuSIGNRzleZxwfpjiJdY/bhuQCr0\ndKbghvKMqbFr16oVeJ/h7BUcWKoitP+N7DOKwAy0s/I2PqlIaKuDQBbuHLnz\nuz/lNDWkdomsnH8E66wMxT/NA4OUeFgNd1BuKFSb4SjggvkSPzNbcESXXE8z\n/pNtQKDZ/ZuqVQp/QcM4h+ICXVfvESj5AtyBfVToPgCEQVdQ/FFNzEHcl/0f\nP2fMCrtWogjHsPGQSyzFYnIG+Nv0QmeOpavxz7eNRvHzigOeGcjr508NJv8V\nttd1gDRTcLqT/Es/V5bvy+vFfOI4SE9NkX1oLt1qSWiHdJYAerF6tepr7Kbe\nYJJW8f2uFSJibU9Uzv9bifZOT4nAaOemcUXyaI1gf/wECM1vQB+KttBChCAN\nlQagLlSLuNmlf5mPIh52SAsWGcwPKst3PSCs/8lRxwMf/7Z9Czx4YeibEWaw\nG9WZ\r\n=ZaRP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/density":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/tab-scroller":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.05d5facc2.0_1603901646325_0.9868970956730827","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/tab-bar","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.291b3553d.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d403b8d38ee5e39f9b9eee46f5cb2e0076acdfea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.291b3553d.0.tgz","fileCount":37,"integrity":"sha512-txSlUSq4zK7CwmRaos+a8UHaMazhCn9nOPieKm/9L9ogOunP6uvTsiYxjHcmjK3WGqHOkJoQ4P/E9uSso50beQ==","signatures":[{"sig":"MEUCIQCfKuYOlh71MDnx5TSNwsyf9UAOukzg1UdkRI30tC55oAIgZYNPkiY+1HPr5SI8pKB05t3aJxbiU96xbvA3PzbZqKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma6QCRA9TVsSAnZWagAAOUUP/0qNH3kgulp4TqyLuUbo\nF98El0gvLAJVv5LwdQ8hFTad9exNW0F4x72AxQNiZ7IwjglaULL4LYhLY3lm\nxl8DtsEBqz2qI3TwbC+ru+cotAx8Zsw/cDNirpiCPxQ5serPUHelSpZkI9Px\n1jJ3c4gfk+cgGyYF8cp1F1w1/N0asHdL2F3kLqvjkwyEf2Dgq1NGKKld3E+i\nW4j1s64tmU4Yx0sN8NNO18veEPLCIXICgklCi84Pzo7Q4tEe5zvOutrTTN1K\nzD2cHYXKRgnSNL+Ye7lL6dVw0Gi4OWt0KDijBEH8Mi0Jmt6YG+6hKqdmM/3d\nODvXWpO84Vu7rVZI4Vwnp+8njCniQA0LlP2elVbwqyzHItAAs9lkeQdrWVoD\n1GBGmoySQjpTm48RXu7b7j1kdWZg+hpTDTXSNjcdHhmIrjoHfg3s2NHzrFjW\n3IRNcID8qMWlf4kmYVt74222uOBKeCf/sWDKaCW3ETXyt78Z7dGr0Jhkkvdj\ntG5JiAyveVGvLf+CzTjUrtNIlj7Ht7D7INsk2x200dliw4y4U6Sq4iqBIP8B\nK7NdXboL1UP4OKwKOBdiBn/NSRrqsOFiJ2dEILd6HsYUFsSNLI4jjro7WVN5\nDMcsLpuUfMbGEucKTZylAfgR5rFmxuDLlpe2piXccHfHmMZaBTCJFgxUKr3T\n6FO+\r\n=W0pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/density":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/tab-scroller":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.291b3553d.0_1603907215761_0.40992350582021087","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/tab-bar","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3da36bd8b6ce9bc3b9d9d8947d9bc70843d082db","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.dbc449b09.0.tgz","fileCount":37,"integrity":"sha512-/bwZt1R2VFeDwPKZtbaR2+DimMDaWosg7SLwWD09P6y87GvF/yw5hJ9u0hj8kiWhGWx1vNBuJLD7Mg/tyqRKEw==","signatures":[{"sig":"MEUCIGlr9qAZnS1DbVLsBtSam6nU1Z+sO9RF8I3w8wfVD9t3AiEA5v82w+A+x1j6j5j6bBfLdWCefTxyQ8T6KzbzwlElsBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbUJCRA9TVsSAnZWagAApB8P/i8oQOe7aYHERa69oiJP\nckf6w08M2THmfmaLD3iR56QgFKcq8r4bGO47X4MkSkNL+dezmZL6AHm1tVWM\nXsjFKVxuHvTrSFx8HiOOXI+7ka99kUhtx/iPWxwOhLu0iYFqh7fr6pmDvhf9\nWhCZxWXo8TouC83rHVOfeND2qa+Jxx9CMQ1PintVHwr4AJ/FRekvMQ8QDHAA\nEUbXY5T2FsOuJq2stfOb+wVblHgybtldGdosS4m/D/+l73Lwz0ZMmalGB1rK\nQFyi6Ub06jD6vZkLOO1DN9u071cuszYZhAHF4D1k6RBc1NKPDDwEYK+DBohx\nyGpB6wXZZkkXrnX1yMwBTTPFACuI80+h5uYYZI3xSMcge087GIrWXFuVS9E4\n3p78m/X8w2kfGtNU78A5D1xRyHCvaWoYVb1wuzkg3G6IHHzZDNdLHW4PcrBt\nw4CiN8vSwCpO39Xib6QTHSIOiiTS6SIWh0gVsVmxxaMSU4xmRGangRANvYqS\n40/UrEMjc0FyEPrK6w03AoGip+LhF6p5DcghQPFir7ejtZbNe+7SSE0uKCuX\nFzUO0cSRQdvjDAS+mWar59CyK9EfcpmoxNSKXXaRrnnG41Ok7LE37QEhWHy6\n0Eqv0wePXUdTLCjJzlrA2By7lds4uWK7zB67ADatG62t4sb/g5QvFo/ffVwH\nGsJQ\r\n=2LbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/density":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/tab-scroller":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.dbc449b09.0_1603908873337_0.15736924159697585","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/tab-bar","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.4794b25da.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c612ffd8fd2c3973c437b164084e7d1984ff485d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.4794b25da.0.tgz","fileCount":37,"integrity":"sha512-K8+4xmeMh7DIVOuj7A6A9YTYEOhiG2nloebWUWxzLd8G5XqQDBrIJ4XFhTXenNlfK3dN1g8suA04u02vLYdgxQ==","signatures":[{"sig":"MEYCIQCt0OBK84AIpjBGakpvIHXMu8qMuJqT6sXltv2qtRNAXgIhAMVamWn62UXXJXz3kuMcbCql+AQeK/H6l13p4o3Jzh0B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbuvCRA9TVsSAnZWagAA/x4QAIIqHCbwg2g4n5Pvvi4S\nBYri/sDH0je/vm/DT4SEfnJs5rvRBHGerE3T1L8NtC3wIKPPHxJfWiLBZZyX\ntJ7XChVpDonwrqgsWWLT6D8MAvE56ZPJYFmMTDcnfCJEBBOjd4sG/alhhKXX\ngM7HZFA9l+gEg2tegd2dXfqIrhuUd3AQIoFj9ASIohalGbWokOTuhkkdg4ER\nyrxwrl3zvGOMcba6/1r3wOImx62FYuQ+sPSQyWnGBiQ08QAbFGC5Rumg3/5m\ni+XS61EC9w61Ezc4QdGUj6qbHtqGmotry/b5WUFULWAV5AKfY0Zrjy3ohNTX\na5wPvfzv07+VKp6SJwYOq4GnruwWh/Jb9eMsj0eBaXaSNgF8fedEJWxqjx6C\nNIas6le2xtM0Mfs0NdcThnCxifLV5t7h/jPXt+HGK7sgsvhs6OeGnIn5VzoB\nVC+FwiGZ9ZZfYw5atA1F11fmyrlAC6X0IaRTTSW0+KdjW2XE3DnaZ5yF5NUR\ner/6Da9LQL84doEtz/ncqdQE3vJUsy9QSlEA5Wm372oSUxvBIJW1Up0YEAcV\nkUJbehSQ7ok7v1rSTOe1sSh75pvnnUHj6/weoBI+AYCXUWXNbj9bxrvi7Guv\nWZns2gAF7aHSiRWyUfLDRZEYeNyKAIq3ycENBnE6CLSnLFK1CmGd8dby3/dy\njdeM\r\n=iod0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/density":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/tab-scroller":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.4794b25da.0_1603910574488_0.8530922796537166","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/tab-bar","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"059e468ce2eece5d2a8abdc983c634edd265ff98","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.c61db90a5.0.tgz","fileCount":37,"integrity":"sha512-dPZpK4ugSpdLEbq1kxB5jhRigyC0nRDCN71If0b54Zfy4JeoNXquziRJZAkK1E0hvS2pmmPLNu4+bh+YmyMk0A==","signatures":[{"sig":"MEUCICeBIz8JYRikGeel5rkGUfulLPJ1tjI6tX9slxqRlhk1AiEA6/qUe9c0wqyRB9X2K5wJ+t+w6pKTeF22SN0xDw72nV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcAkCRA9TVsSAnZWagAAsZYP/0DCs8J61xWoPzuHMXvV\nFCIuZk8o5R+lE4PiZ/G4kYH0dGwCsaMzZdmtp7kAA8rbpCOUw7nZuqtsbwEE\nxO2+EBwAIMswbF4/drOiNAoNyrVpa5qNE6l4zl6Zod7wi+HVOifwk0UkwhAe\nLjrI3EHzSeJarKEGXs6DX27mMzWSGubdtb0aDPzwa4EZRZtOLk2uTARCuje3\ndr9HIhTPiMYgJdS09sy3uTYBH409Ljs23wLaKHdFWsNy1ijzlyp70ZSUi9tU\nzDn2Kw1M5KWi3xUUzk0xyiGFIjVJ8qLxxwvOPN6uYvQgbzuuxEkysD898xCy\nqHZZPsO6re9INyHkLspUfzEQMwaBcLt2Var4Ju9RyoR1iKd/fi8MYiiX9scI\nOfINPmBwFU3pf709D2MM+atNyFOr29g7TdLn6/muAtd3xIbGxGvfCYAfwXZ3\nbz/Ln98M0lBCtHhD7Zl2jvoxLZ4e0o8RuKlKXnHTSfTWv3EapqZK7r5clRMO\nKbDHzaSEtOQjmy0DhzBXI0QZmkTnCdfhPhjC8SG29S97F1I0rPlBhYbxglKi\nTN5wTkvdQaXMbTkYA/FWvlNtu16rSA4Crle4089O5dX8ycdyWLREaLRXkmjS\nKKY+K1B8Bz5cxut6HltUOhZPqrs8N6Jr5WSAUzuYfQxmpPsQp2Bvx6XMkmxD\nzZ5C\r\n=dtf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/density":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/tab-scroller":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.c61db90a5.0_1603911715908_0.8532899609696449","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/tab-bar","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d856bee7d501b5b0a5940a3a3bc14693c4c1cd62","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.6d9648ab2.0.tgz","fileCount":37,"integrity":"sha512-qEREqLNVS+GfAUVu1TogM87MpRIQfAs03+U3Iau31LpMwcP+YlilNoYOvciCwkzxNqZpkBzT6CgI+8791OA1Gw==","signatures":[{"sig":"MEYCIQDSzNOp60DDtPi/GTOjYzwQOTcvZvOANjIvkDDC+S8tsQIhALeqh/eVV9g3MuXM33TEjiUkzufsD9MQYUWFmjYT8jSc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmydRCRA9TVsSAnZWagAAVC4P/0n4fXNw4wPxqopbYgYZ\nakdjDs7mDpvkyYYn2ub7T3cnMLAlOWt1EwOnFslvnIRlUHG1Ozr4I1Ho0GLS\ndxgAlI5kKLJySj+Bo+wVaOE/lZQYzxxVmKQmpuBA8RhP40Azh00VmEJ9QJo2\nNLCn4NcGyyWjWVE/hWrzNrURCd7WLdPeA08d+TPlL/0SX31ztTRq8khbmfh9\nVOBLYIilv15PQx+onkyQw49zNz/+p9cwc4gPaRaq+jwKjAWhvhbGQYbUlTxH\npCcRih/qOSQjYP+ZfogvxWmDmiX8ZYIaU8sT0r3IGkXurhMeRA3wlr5WZkBi\n2kFVoiaMRNKVQsxqeDM2MUnNxQ+K8SpB02coW5uq6dv0p4DmkSN35usSHT5t\nrL9nESJZTGzN0KVwKp5iu0jW7jiuj16t22la3vBPlv2E8guIdmK08IkvzbwT\nKi/2c5GxBuH7sccodXKOOLHkepyCv+p/RvzgmVodsORq/rncL9PSuLTR+UZQ\noHVDpjyvftaHg0/Xkf6kizSUosxHfMKAY/2D9sfrmepftz4mC6scVxSys03J\ntEK9CNxyCooD9XS8qngqL/8J+4/rXbP9geidjGcIeH+aDLoJC9lDA4uN7jK0\n76hHdbfxhnT4ipB+/LHMirTXC2L4zlKhhbeegoBH2GMVbXOxNtQeu/d0/Nc4\nzyxs\r\n=kJ4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/density":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/tab-scroller":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.6d9648ab2.0_1604003665141_0.2998189470337893","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/tab-bar","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.5511c5254.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e5bea9b9303d5db71c878a511810033d52720b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.5511c5254.0.tgz","fileCount":37,"integrity":"sha512-QsvAMTdQ3chYRrDvguaHZ4QSjRWx7JPaW05AS54NVwiKga7vjAGpn5JiyEZYzqzDpWeGxFY7JRJ4zgLtbkPvuA==","signatures":[{"sig":"MEUCIBX5G9k2x/AuZ+T8/pgKcb7RweZAAkisbi1H6UKovf9eAiEAme5+Fclja4Sw70TJLfnDRPnYMzI4LONnYmDRnz+htcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFUVCRA9TVsSAnZWagAAGjgQAIswjsRP3V2LlFGUf4V7\nhRLS4QiSPq8RO1+8NB9i10Qx2Kv2nYmBnynukWpLauum0jDwz3mDOHbxr9l1\n2E6B9RTAdrs6kq7Aj9mze6v/vmEAlSrNvBqylfMxsrblCkGcDWUjERlYZyPH\nJCXsL8UcI5ZryXisDUPEvsDYIbNAd84LIGHJriCnEm/r/8Njzx35aSOqg+X7\nMNwk++S7Pn3GMPPKAawxAhMB3pCOTatDLgZnrXwEaS/TlhgfUzdRbRrfxaHe\nLA3XN9Q2qrCm4/JJtoZgpRgdZqZewbw4FvQ1zHWmobNXPoilHQr/e0gsuJZF\nru+2ZxXAoLJCTNomtL9QmaWpitXHX8U19HZoxifXvZjLLdKcBpGF24pzs1BR\nlE97rHSQYleoMSW00tt4CreYpVd24HrbgKZMS2ouYAqcw9ztOyM14q5bgsY/\nI04eOAt1ZVq6AT9hgMi8rQdYyg0/17kjbRPHRNZTkDUyY7FjxjEm8bToUpba\nTNIEAsQ+XqsOSpZw6zQq723E4NcWmU1TJnP7n0FDqyBQESWaCWz3B04qXEUu\niI1EPjMsIB5wO9Q+eEfpPXBX/lcjDYs/LVLh17ovT9tuiBH1+AZhtH/Im3M5\nO142UNiTsqb7GuawnK9if98H0+npR4CCSz8djEl5GbOi0H7ZiFUvil9R6MAH\nzXsL\r\n=Qhfl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/density":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/tab-scroller":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.5511c5254.0_1604080916559_0.6013908448307568","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/tab-bar","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d430eb410c1c39f11a26a7ad68ccccb2a05aba39","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0-canary.bd6e302a4.0.tgz","fileCount":37,"integrity":"sha512-3lbF+dvfg5sfpYoI4fH3VWM91FStzMmu2P8YFICIRgRqd8gS/SAgzGnbpWjTohYHIQJtItsAXABdsF+yGKzaSg==","signatures":[{"sig":"MEUCIB4D68MHBf5SRI9ggpCOOnz3MRPT6p/pdKPsydvUe6YpAiEA65bkJmJlP8Lk5s7MDkkvKWxmGSPxmkcq8kF4Iv+rGk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDylCRA9TVsSAnZWagAAKNYP/1eQZSxlhLB6yeUQPCWs\nyHzctblW97VRaBNpLOJmNrl/YXutbLE7E0Qz528MmKivfigZmnDJX6wxV0ea\nWf8LG3lZhh6V5hbjVd3nm5UwVhwr4XAoLDZ/UjtXdkDv0IZedc1y9/KQMW/f\n11iEFsXgsvdLipHk5L9b+vKUIVe8UphM9uPn8JAXkJLSi1/t26ETybD8kSFQ\nqxBk61Ci201I2m0oAQcTsWg3tcGLUJaCcOTxWuZQQQFp+8RVn6sqNk8KKz/z\nWtoUM0M9gPY1JGaTJ8NpllPappbFVhNDmcy35BVJHhkwbS6FsLhp/4/ksxVb\ntpWQoe2xzJxPJhMBwFW81seXG4qX5WHNovdKKUKwpjBIBmsmLv67GtIPeul/\n0D4SLZGv2Y3F4+CA3Z69VhYx9QnTl6FHDlJuL2NufxE69wl0U8opyyonv5Mv\nYU1y3kL/zMguKFhHd+LobC+OA7FEAHPMNInpr6YoqA+rF9bCxbiYa0DaJV4y\nZGVma5a7zpUg5nl4AQ9zCn3XYX7WSADD9pXJ6JwafdYqzbJ7amvTDl7Awsw1\nr+4rm6QgFe2t+0aOORTeMStn3qpe9VkI0JjJOzWov9KysSjbpos1GqUcr5xl\nAJNbWMx8bLewKqTwh7ClxcX9RzPvKsPkSe9vg5B0sN+ToKODS63pl2X51b7K\ne/d+\r\n=YXoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/density":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/tab-scroller":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0-canary.bd6e302a4.0_1604336805050_0.16327009270242976","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/tab-bar","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62cfaa961e0a120f2856ff8483d1da6980b10041","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.d6b5cd418.0.tgz","fileCount":37,"integrity":"sha512-esU5NnylZAIgeEnkxw3aYrL2FjCKxr5UsTY1X9YJuzB4PTXEVxnPFDQz9Q7i4pIZC9b2KN92qq+fbggIFM1GjQ==","signatures":[{"sig":"MEUCIQC9n/0Zniax1TkEzYsa0b/an6WMqA5BfmFU75AoQlNcbQIgGMbW+0Mc9m6cJgJM3gR3ClCXFUYXG2GOvv8tAmq9qqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI/ACRA9TVsSAnZWagAAOnUP/il5t+U10R9sZPqMmF1a\nRD2dm27UFVtd5jdKe4kqOds1LtohEqWjEVMM4IH8JB5Hls3tvLaQflyf4gTX\nKbWILtCXe7PVZzWerkz/UBPPbqo/JOXXeIrkzxThsHlzZQh7NmAhste9XMZC\no/A+5l1pRGBqNBgvyaS6BtKagAsfV7JDomYZlam80VH31m40YP14NoAohow3\n1oRupeJ+Hkf707B7MRMAIya3o7cJJ8REfj0aFWn5t3aY4SpK1HDBq4HHmxya\nAzmz5aJicE7BIWcasU2FbXeViiFcaXZfSdl9oXJHBTM89H+P9NhkgXh4JONg\nDCi35f2dcYLdCNLqu2xDI/Y5ecUv2MUE6HqBh0UsNcmZwQq+UAPhcYVZeFZA\nH2NIQTQsW1Fyigy7Ka0oyaFUTFJN1IFY3YwyE+2k7jvwwhyZINv5Ab8QYCvW\n6GC1PUcH2nhzV57bOfxhI7wKjBuMZATIH6xqhsD5Bsp8BEItifMMfy7bM7jx\niIbOOEwC+/Xk6bQTouMev3TSoewe9CYaHCaQR62Q/invPi8jY0K46TzYp5jy\n9dVYztVq3MXljJ0S8oBVAB9GduGv2kPpR517yLgFlp8KRpZOqVwubJlMIjA+\npT9e/NDzdFZFJ7iEMD/2JVzMLvxN1lwO1bYQiBuwzpaqD3c+MoN+YHlD6SxC\nwkqV\r\n=YLsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/density":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/tab-scroller":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.d6b5cd418.0_1604358080168_0.06918431334996566","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/tab-bar","version":"8.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@8.0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd15bf5aa5fc3efad65cc3a8a6fa44520c15b60d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-8.0.0.tgz","fileCount":36,"integrity":"sha512-m2zl7wp9zGaFbUGBdksF9Wq3lSY21FNhpiIlNxrqCwTMdAYPOIvjYaQD/kW/bpHEjqu8Anqyr3ovP9XdnbA3uQ==","signatures":[{"sig":"MEUCIB9eyBsAcZ1wAILm2ngZT19k9sZfmGLqvv1JFj/1LAJgAiEAqwl9ubAa5+nntFAHPpilnTK57EF9WEqlCDbYxa63IWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI/YCRA9TVsSAnZWagAApzIP/2Fp5uAUMR6kohzFyTKP\nQ8Vo0sH3PKljdRx+cOlxbs603Yab2Y3PEvzB0Sar9kkScNeCSRZwtZX3waVy\nitoWportqrEQWdd1mRIKSPRCoy4hB8NVixXXf63aePtMgPpuegDNEolVlHV9\ndyMzwBuAUFUqco1+ranJMsEHEqrOxAulQ5t0p0n0cPU30wXjpRG03NMPkyfM\neXR6RtYu4kTySdBGiLlv5D5fRuFAstlHC3aHu/B9vd1KnKaVFRc+JDwFAapS\nyoepggKvKFAUvCsfNOlOZe8cmAkSqien7/mvDWQ6zdtl+lppwTlfva8oIBf+\n7tpQvHWTTu2WCZATNCR3R08/S0eN7kLfqP5GQSzBWIaFnoRp4k2mhVXhEDac\nj76cZB+faPfkjn0eMn6Vhs+yuGr+BS/P20ZilrdNKVnC/APkOgLVrqGedRu4\nK0k72cIEqnLPmX9jf/u43cZqz4ed0KYFHdCWHezxWAaoeAlu9imemllVgMqv\nkUWKn9ESYIgZF5Oyb6nRJobOlYUQYWEPB9VdhhI7RkFM6I74PzRY/5GnBRc8\nPBfs7xlWtSJi5L/J2oRFlS1jUiHw5nMDLZUL4Yl/xDxXpq+GH24IH2FHEtXd\n7F7F/G5hXdPlwyapQJIGt14TjJKv02KECXHc4G1cV1MFQ9ag3xWhJjg9LqJU\nlXEj\r\n=4So9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"^8.0.0","@material/base":"^8.0.0","@material/density":"^8.0.0","@material/animation":"^8.0.0","@material/tab-scroller":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_8.0.0_1604358104070_0.031273379080101416","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/tab-bar","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"331f195748855e3d4bfef71087165de2dfd74ae8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.fdf9a2634.0.tgz","fileCount":37,"integrity":"sha512-5FDezxF7j38vpL6Zj8UK0GW3acvOi2UD+c0VE/c46Tv05rHMig4ca4stq3//WinYjtnNQKgsUjVz18COYBH/Dg==","signatures":[{"sig":"MEQCIFSqiLChxZd0Dkcu0qZizeSICaFJifi0RZqy1nBQGf7RAiAkBYm4xVJmKzl1G/Yrv6PSd8CC7QC7rSQWC0QKTCWeyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZbCRA9TVsSAnZWagAAd+AP/R0VZNq3xRY1D38+Q281\n1AavMV6GR+UQLYwT2bwa4qfWh/Gpm6tmVvJE/6XE/De8KZhpo6VRxzDEzxR6\ni6/nHrwYDghe95lAgF8obORn57MyulRvnBGTK3NgILecbTH56KHSBnTqBvSf\nux1tvf8mqRqSY+7V6KLgyeRU8VnIiHIahd0bcYIMf1Mm6PMH6DVvj8Bc/XYm\nXaTihGMMsiUUGb76AT9lwzZXm/JajzoFzLndnFFX6kFifC2P76waaVk908VI\nv8hW+aKIOY/ZZFcd25M2b9RVBgDQ0nAWgAQ6x/u12jsw+js0MMjpPiIr8kk0\nzjyS79ZCAsGOjf27mjbiZ6vz5yPpeOGa5DOCk3N5Tw8bj96uJC+HNRNPAqzY\nAAZdH2zo43ejNyBAd3DOSMQkPEEi4eSNJLQfn9tiYMmLm+miOWdhHmyF19MN\nFwV0lX6jyg17LuuvzrDVSYHNlCIW7j24dwugEI7JQb0X9tdZ1Pysmvs6MYo6\nrntMz8UQJJw+3vV0jJcokWbYUgSdbg4J2dGHPFoElSy+d7J0gSzdDDuILPHa\nXkXLSzHiBrYvZvgV0dG4SL0T2QXV5EqY86fTt8Zn/7uooYGkRr8YHiDHtCPO\nc50E4+Uej5wsbOFThGX//4II0aSuOdje0avxXGLoFNqwu8HNxIWk/tM99VmO\nCtJt\r\n=ErD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/density":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/tab-scroller":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.fdf9a2634.0_1604445787162_0.08748274130947697","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/tab-bar","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfb5e83008d6a493bdd577d8afd7f171275d1b5f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.4a86f30a0.0.tgz","fileCount":37,"integrity":"sha512-RdQaLhXSvI0QMUp49IqgxTqxQJn/uIY+tNB3asTXdLFqjWFuVWETLuevTGdMM/AmMqRDRpf3evBcXuV8cZj+mQ==","signatures":[{"sig":"MEQCIBVgn1Tjz/pibeZQz6Rz0PYrpIz08DD1X2NPa/Os/oecAiBtGbHoQqO7QV/7D7vWBaQxbO5AOjv43vVpbEYhqZEeFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoef2CRA9TVsSAnZWagAAGRkP/2tONUowZm0LdanYO+AD\n0Naqq7gDjXg/LB8y7YMV6iIpDx+2ZTPEJltXVF4o1tHuMZemgE0NH1NUaMqx\nqisHK+aJcKJPHVjUACiAxilsiKZ6W91/SHpfabswVIz5Dek0MTopigbJZ0tm\n8U+9XjGVEsaedXydhYeQ03QYHNP4ANQr/tLeRpg25Ys9Q8GJIlzAaacqNNjz\nygQIgevmNqlMs37xCyQpZUso2kUmPt4WJCBdXtIo0bLBENBL3uppQNTpRMv7\ng2JJTZKkdum9Q0nIUv/LdRE80xyjpYwrFJRK/jC8+7tFGIMkt03kpngRIJvr\n2fsFBhU+iepIxK5auXhRp19I6wHY5mXskgageGtN4cp3xBqQTgDau4J8P/0d\nC6YmKIiL54bkPj0I6TUcD/XVZX3+GfNgHvBtyevUnKdqBUVT/sS2MlCOdOga\nEkrLm0NdFN4sbdiLDdzjqL2AvhB+9Y01LdBuiU1FgxSXLyJGkYTEFHeeBCQ6\n1rFSFp9BYXc0VwvNqrPH2EqppAMekoqLEtIynpa09BmcqwU3C7hbk5jnOhBl\nEMQSL49n8QLvNp2/b/QfgHumx8os96FnuhtJQs6upBpyRP6oVJG5Tj5CIkKE\nrvk1eym1Yj7m/SKA3FKzK0mkK/N4VMiVn/f1FpADB2t2cXtbAJ0GS8y3wkSg\nwN9t\r\n=7j4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/density":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/tab-scroller":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.4a86f30a0.0_1604446198235_0.7478729230736612","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/tab-bar","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf6be705eadafeae33d555120be061cc836d6da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.fc8b045f1.0.tgz","fileCount":37,"integrity":"sha512-MrFnhYizgxCJ/WyJWbIWQcSAntDNi41ZoOgxLq3IukOUJFAKrT+pIwcccc/4Jfad4zjzIWf+WV5kgaW+3ha7pA==","signatures":[{"sig":"MEUCIQC8XWbZ5PVUqqDMdMFUvKUqap9TKR1MBgabzPHVZDVvvwIgfyqhgmLNKQMPPO0gP0Aa/7N7lCMTpqzXmatFahK/2BU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeoNCRA9TVsSAnZWagAAuMUP/iEUUIDy95qFfooJ+LYC\nVDaOH0Nq0o3Wv9PC4+gwFzkllCLc1cde7Pl2c7Ft1bM3+emFLl3Yrow10YBN\nb9pNIEMEJyvWDTZ8erj8jH1u+AcntB3ccZotXM8dfTKRMwTVUperm8kFX3AE\nJe/uq3yzFNhpkaAqX4oVbJfUJ9tBeVAYFBbnqI1hPbZrFJpSoH6YblYGBrr5\nj8iCjpJ8PfBsczOs7x5epzvC83btz7Klo+V5+E1QK/D5L6EHZq9Y/aJi1tch\nrh1TI+5DtLBTiShEQe1VFQzn0tfwtgze4BS+J9NE4wxVEXMq4f8kgf4077Q+\n6e5RwQTy1VuBolGcwBwxYhIh+x5fkMYaZkxY0k6kbnVUd9u6MULnZvLPoZWX\nGFT8G6gr1N/XT5eLs24vcqyecbMnqlKYysL4Zrmp1piwgYfGZiFhwe8THiRe\nm9TKbH9er3V+Sr1/LBqUGrsowZebCt/rVm3b9Ipyoje7x2HR0JgHi0ipv/Wc\n5rvqvPkyjxNnF4uLnzv4niM4t8nrjkBaDCyOE2mF2e89G+4Ndxq8Js4EfqVX\nEX0tWWm4kyEAQ7H2i5nFInj4evuiaXYydLPIe+OcaeWvxDr2DdkkbO6BUmJJ\nccTu9hjo2kNz1C6uS3LPGx1TuO+nz7a9KDkdFFv7kQXVK5mP8/usQ18EL5qS\nvPE+\r\n=Rhi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/density":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/tab-scroller":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.fc8b045f1.0_1604446732552_0.32677101555239685","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/tab-bar","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"040b10e25ddf83dfdb524a615fed77bf1222c834","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.a0b2db26b.0.tgz","fileCount":37,"integrity":"sha512-Uhug3AM6CZ1CHlLl60/V9ccqlui4S0cbERR+2wCNSI47lQuRkeA7HH50r0dAEtxO37cHz8Q6Y9ovlPPAzhNJBQ==","signatures":[{"sig":"MEUCIQDXXccZn82bSK0fkFBmJh2uiIcaOa95TjWKW7p52sJcJQIgdvD+W2LI43aebJqsYk7eQZ6tRnnQ+Pm5bJD+/1M/Joo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofGVCRA9TVsSAnZWagAAP4QQAJb9acfrueZBJO8yCAyz\nRQOqoB/+SdW+ch7ay2nJmYrRSQZrWVQMwwaKlijPlGf2Xw44kjuzz3ta0Dlz\nXur3FTpIT8LsEhSRi/eIZPCRHo6mQh2eaQdq4tuR65eI8XUVUOIaH1lCOZ/L\n8m7dGqmVH/tGHH6dXaN70kanoZLjatAkLW3narFQHi9R+5tyrNW4DuXA3A13\nbKVeszHRthY3DqOSRszAhKz0vTY86fIlTauHiF7fxLfQfHWaJ9U9a96/AJAr\n/SMdoqNSGMlau2X8Rmr+6DDKyiglX8q6OGs+97J+1939sLT4sdwmcbXfxAx/\n1P6s62gA/Tpbk5bgaCvTjdnkz0GrRjKJ25kE7XZrvPMMlZWPX+iDmBfuz69F\nTuIgJybr4bhi30INq/UxgrKdyoSlyXo7iqD1Krdyrl2eneCHqGVInEZYNlLH\nWuzc9lBdfLjQ5ammMeBPaaUtpA5znW0pBwXcia9zvphWIMB7bDuUrSHc+jEi\nUmRrW7IXBPwpQi9alXUMZr7tVUzkmwFffe2AtDTelJp6XzfNSZZYhjYd4+x2\nfBSFlMH2jJTaa773FCDFfy5T83Ty0+UGrMP21ex0JPV1Rb/ib151yyyHQCNg\np3Hy31yLI0IyNCmiWbAuB3U5P7aV+6z2Q04qjX5uPK51qWddeZip6IwDNLX+\nMu8g\r\n=8He6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/density":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/tab-scroller":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.a0b2db26b.0_1604448660771_0.16078369034211426","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/tab-bar","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.419e03572.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b001b5b14d38dd2c3f8c97336542581ee3cbc110","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.419e03572.0.tgz","fileCount":37,"integrity":"sha512-LjWk6DsobMQh4WzM9ajGKluhTeEurUc+5ykqe78eKhdFfCqTOmm546ID5v6h01haN1miCKPdQdhdPp+WiF36QA==","signatures":[{"sig":"MEUCIGAljb2I197Bk9sxDf34Y6KxalLmWcNSGLQpHQwTyrrSAiEAxVcZrWC/xE6JHMO5u3ML/MJnHt273HT5eAtk8DY6nbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogU6CRA9TVsSAnZWagAAGmwQAJnBwHW/h7YdUXAotH4Q\ny1NJ/aoG/jBDAyi8BuP+CKHzmX3Pegdo+wAUp18AQ/PpMEWyBv+zIsIFatAj\nDxzFaXU0Tw+iTRx1s5rPCfevQJElSf8D207MArFHFUXSxetm1h1pEk3F3TN1\nzyQUmeAJ5TCNMYNXchl7Wv3praZT3OB/aKIHMcyCMqca5b6aakZlppJKSZKQ\nBaFaGj7YUAHkP1m0lVOThwYFNXbm2Afr5tlju8Is0Ux9AcA/COPITuUvOZap\nK3+SOyknL7b+bzx1i9Ad6jIADE1UhTDRVlkNklVj4xKqzIe2Cn5u1bKzGTso\nAQt07Qvyaf5pidyIqiYzLvJGzoF74RNZs4ii+L4qQZtUQZL7ReaMpLjwIGKL\n48Qz3kcn3kdeFaG0qa0gicz8AIZ8BTkHe6MqQRdxzzYv3qxXsBRPinRhD4qQ\n4xQkVgG1aPkRBml/Zp/ab7ASdKeFP5NADBKM2Z0Sbr1bt/NfTBgPWJg8m0Ok\ntKxcCPvY7J79Cn60F3Sko952ju5LbWRB/KiZrxBWXHFCOsIb+S5IFdSzTQNf\n1PXh2fc6U9Y5coEpWhVYSMn5gSsNHcp7Z24+Twdy+iR7PCNK/fK5ODUie4YU\nFClp9cLLmNtJjREJo+wFkE1KNxISO/UFJ7y3+uMmIaKWhrf1w4mSCwzR7sI9\nvOay\r\n=MQ5N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/density":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/tab-scroller":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.419e03572.0_1604453689870_0.07352384014656566","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/tab-bar","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.a432ad542.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beb8bc4d8bdc9857eaf6c3dfcb96ec62b2e65416","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.a432ad542.0.tgz","fileCount":37,"integrity":"sha512-VLrZOic21yMNAoyz0VsMELl8lK4YSpIMeTHa/oB9pypc55uGW2lfYlzm2OS2aooOyn9B152LuTjWYF5EwQo/3A==","signatures":[{"sig":"MEUCIQD3Pk8J9mK0voGLnfgHYKBaNGkYYh/+3g2D5k9wLVTOewIgCiCKz5u7iW2A1KuenhQuzRm3J5/FKwFdBENoHCk8eK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKs0CRA9TVsSAnZWagAAf0wP/3IcbX/6/TE5VWKFnIWH\nANnWzhbMOV+xdYrOZAJ67aZdzH75JGKoQZmM/qQmgs8CO/d4N5QlyLYsZha/\npHrwZTxRxCeORjy4L4l2zObWp5A0v1SrdP2TWsMbeKmFezsTh2Teqpwk3UHH\na1oaYfpd0+yhoMDPTG3YGxty3MDxEMiXj3Knt3DaYE1Iz0Tj6uEVanTel6yJ\nx3vVMMFtfAklioHFEVw0u8vKyP1yWK1yazXcZfjXoCPGrdodXVZsZPXhKOx9\nq1Qt4XOVX28oRSzgrcEg0Gc6dpEqYL8LKg7k6hI1uoKA2wdfGQV9EwDpA0qh\nOF8o79yYdK5afDBy8IAH/u5a4iqUs8wtGTr2RZzCwH8mv3k15K/zg/sezEUh\noW/xeqslBZssGP2PcAdmmUv8QlqvGB/6CPMaTtDSVKe+c3DUhnLRNS8xVsZ/\nnF7x5kYu/1mIHFjSi1Q4t6DSLYclxJcy28bxbaLHPoTYSUfVJ7z9Z+WsakYV\nWomtUUnYCbNinpcgBxQlEfOyDYDjd7SYCLamvKF6057K/DJzJnYVqA3uea1d\na9ggkn0nsBMoPk3w+1hyfW81tMdLYKqThPQCatCZw+KVxTtDj6HUzvaIgn+A\nmHXh/5UqoypUAacHeQs55OJbzXehgsFfENghuUNRlJqOenrgKaUng6nK0Hkw\nCz40\r\n=QRFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/density":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/tab-scroller":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.a432ad542.0_1604627252158_0.7923773637641169","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/tab-bar","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6767cf705992a9202fc828d822df71ad1e7e444f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":37,"integrity":"sha512-kETfHJIJAMvsUYs5JT5XSofJ6NE6KpigGY8AgQ/6VrprdlQvaLgngQyP0KjMbrQ5nxtV61/xk73YmsEBxYGMmA==","signatures":[{"sig":"MEYCIQDiQTEvmQiM2Wi0ZL8OP6jX8Kutq7hSJ5O18LBWEhpmjgIhAIlrtylqqahYFXkHeEwR4YEcyPFTHdNxXK8q4AiW9a/I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK/GCRA9TVsSAnZWagAAddMQAJPwodV3GliJ3lZRVoy6\nXR37f5muOeYQtMd8Japy9l2uHrp7vu1C6W7rMomE28j/cy4CXq9IjcqJcRWM\nZl5YPw0EWpRCFeiDolmb1Eqk6Le56fCbcoD05NjJr5wy96cpYfVcxduKctI0\nRRLxnO+K85/kpRRc/c5ksHUcTpx1Y2hn2dRevJYImvppP93PSPBmO+nYCSj+\n7HPx9IZdHM4EpDix5brLUy/p/2iGTRC++GEbQSdUrK9u7Wx2fi+7xxkmJwOi\n1aeS1NC2HSRZDgqNT6dRknU1ox1ENL425nytlWAPvfw4b4dQ8tSqSevyimCD\n20Q6X7qLADuBs2LQ0GcZH3NFXYcNUDn8oyhWoMWinUnlsvfRUgzW4f/SrtLP\nMFH370RuQp3eAGrfEhH7yjvQBL0E0E6HLbZe4qDTKd0+tYfciGzrI+TKpcWB\nZnFg8LjfL/c78oGaVXsASVMP13hUpbcNMHXN3b27L9m0Y7wLX6KZXUo5mwHw\nC0KZKcPzPqkEuW1QmzkhMme7IsdYCZ5Jelzs92jDItm4EgccGWBJX3bR3HIg\nnxQZWAxADTh3YSdx3BqBom5F+UEVKMftP7KhhC1OOQkeYU6/UxuWfSP1Zp0c\npDCL0fMYglxm4a4PuQZuOCDwlwJ3AnrT6vHAxR+KzfuUHw2xI0mmevl5lKsU\nZ1/1\r\n=GfyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/density":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/tab-scroller":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.e2e8aef1e.0_1604628422093_0.8992956763005469","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/tab-bar","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f3e247295f42e48445ace77ef65c9c5de23f5a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.ec6b68b34.0.tgz","fileCount":37,"integrity":"sha512-8Wc8agXp5f/unpbsm7B9BVe85dBnm9D5cHN5C9Si01UKLeELVudo9Dl3D9r+yqSJPI4IVWeZmUGQoFOEUzwyBg==","signatures":[{"sig":"MEUCID2qMehUOTA2nueX+vmeTxNAcwGsyaNl2D6lmOz78PTdAiEA0feKwuqr6cs/ryizxykbmfS8tZApRUUhslU3k442evg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZzGCRA9TVsSAnZWagAADXwP/imsrzoygdXx8ujgOrCm\nXlL4SOg6ir0VSsUOHQVysBcNBIW5pXAYLsWQnC3hrnSOMU8W/swE3sKSrinE\nZZERRdPXCZv7tT0LWLfraE/1VD1OgtsqqcEoCPf5YsOzmiL8o9hf68OUXhQd\nWW8dYar1eAbrM+prf+5eC2bw4olQfF+NzW9NIDwOWk+89sN/rr1NDxu0PnG7\nX+FxYL9j4yE8ByNBHHLKETARi+0qS1TAXkbOECvt5RpfUkbX30DC0BNtYQrt\nIUuoh9CgSigsxc378bd/JRzymbJiVSOT1Qva6kW1AcuJIMJVeFTjZyBi1URd\nyCvU6DweLR0OSD+xZQZKMrAvNz0IrR8p10KB6gHsgQpIXYJDa2wc9Ahloc6x\nJDLXS4b6nBcNnydOKLjl+dS8/z9tOsnxSF5Hcz3oOPNMFeSzvPneNl5hTjQ3\ndc/o7AjZrgwci+Wl/TyB8Dbt+z8j1o3U6HLQma6Vlb/N99bYrlSy6mvhPs9f\nkFTnEgIDQFqmXn9cxbUz16sbcGGFPnkZkc4E6a3LFx4piYr77PEXwTu9pDnM\n+mGAdrN8Nz5sOgtP0AOglOAIsL2VIwDvRS7pU7K+o4cZM+r/HWC/s8qL2dzm\n8FH9z4I1fz8VzyMe6Cm2dbycBFrXcGp4zPNVwM6UOZseaAoGZ1MwvSRxcs+Z\n2NFV\r\n=r/6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/density":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/tab-scroller":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.ec6b68b34.0_1604689093917_0.8419981819158104","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/tab-bar","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.b39094d14.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b28f9b585250b365b28ff04b39f2b27fcc37746","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.b39094d14.0.tgz","fileCount":37,"integrity":"sha512-nq229pfiLP77pkxUor5oi0yYzuxxJRqrWdNHXg9b8BkSVJ/2PR2g8tdR3UZYCrhTxyPYtd9eVHMk4WmXBRnJ4Q==","signatures":[{"sig":"MEQCICYVHmHvoSr+BAhTSnBjF9/XG3bDxl67+BC3Fyjk2bYvAiBbTIkSqOKtTm42KA2W2SzEj7jcvvs+7crSEOhvVM2BlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb11CRA9TVsSAnZWagAA5JsP/2TdldPOjXbmsaOkpL6q\nWvgjPd//583A3XshoUzrv/hQVMunZJ5lFBOIXDa+yn4fA+DvUT97izAUQJH3\nUpZQL3o01puhlKwEf/hjRQwaCpBpNj7B8UA7DtcEafuusixsLoCbxL9zHxKG\n+lZJFgijGcKSPYwhXeyFfID3mR00VBJ8hA7OkkigWz3lhEhUr9X7XwNULJ/A\nIM2Cq8VyIl+5zmMuYUGCAAuaNu5k3dXYO6HYBUv54FnXuaKdnBpPya8eEiQG\nculHxQiIW0ZbUnZB7ayzkbAC6m+n3Ej7pa66HU19od71fW6RnQh4JwtttR4I\nu1q2q3qgLw4AYjPb24zT9YSxMgYVKU9lj12ZrbAj8tVDmJtBl9gWV/P8Q7A9\n5F6qbhE/6qngba2MPTaXZXjex3PsPAw//b4ZdcUnP58QIKOluMV7Ajgm9pu4\n7JwSnZpKOU42RQqCI5aGU+gRB0MOmp9/hkdHqZGliqGClNo1WXQlWDKRK+7b\nL5u2Cb6xqpK9T/cZroM5HdoATFOmkPOEAg/T75cn0pn/NQwBOJ8wk4vL7W9u\n/IN/Q+iQXJ57UflW68tHFDDHA7WdDFjtQQ+O2lfXqRm8BaskntclssMFYcad\nI+eJRDgBFxyPnhjIl6Z0xnSW5UUazMkvHbl4NnAFbkzDcfAGqkTgnRZAuRmC\n1mNl\r\n=5kRP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/density":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/tab-scroller":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.b39094d14.0_1604697460750_0.29503058790466663","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/tab-bar","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.8648b8258.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09a486498ab31ba5c488bd5fb6d7cbf096e96753","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.8648b8258.0.tgz","fileCount":37,"integrity":"sha512-+z/AAgPDppSzSnjV6Gp5Z25g9qe/Kth3YOOma8apPb6hPOjpkvoHX5r3E4XmMZ2Q/B03k+VVbQDXr3UXP6h06g==","signatures":[{"sig":"MEUCIQCrEu+L8drMt/7kOzKOyWPZBOGl4taVvJtAtyt2oFY8YgIgRWtPWuzmHbS57Zqmrjhg2QHq4CiAUJ/y1jP1DyOLgzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRKOCRA9TVsSAnZWagAAkWIP/iaMjzbEUfFLPg2ftRso\nfFLRbdG+YCi27hy97dMPH2qsmBbI2Qzx8GaCpwjZamrxLfBtizJ6WyaFAbMY\nhen9m1CnJoWPnaUaXCKqUQ9nt2h6LnLDN+g/vOghrvTNtE3drDiHvV5nFgVg\nUhaCQX9DrkZziOEBvk+HgY4qngecubhW6NCRUsNvN7PrRa12xa3lVzDmnjVw\naNCRw8+ej3QSLu++vyHZLMI0z9PqvCdfPqlMXjZvn+7IfmVsQXu4dByVi1Dg\nCdHsO6KEb/UN/NmtA/wwxmU+sxYOXZVHBoUMdxW0sKFCPSzDP+VCXPU1ofyy\nMKslAhTQkxnrGtWcrO76FblFQTTMAUfRRaHTMNwkTnULqPsHoGTDWU8nT5Ed\nbmT6v1AbEWkTvU7nZWfAtQjujx6DZBH1RxPRxNIe+zOEnY1+Ve9KRfh4E/dX\nF7fC84Sva8oVaBSGWPjamxfOaTfsm7rpie3vw0L900oK9mUvD3ttafoUiG+N\ndJDOBQ7qHuUguh6hKy4O6WBpMaMOlANTFT8GgIxNNK1et7LoKG6ISrz+ABME\nOhSWzogW0pnIoMs45qU7hxMTWxSpWAXtJPoonP5hrwktKAR7D72reAQG+g36\nVzdFxdiTo6jUHYMB81mSIihrKxxaHlTvkXreS6anCDWwiVxRuFTCs5P/gU/m\nAW/b\r\n=/9UC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/density":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/tab-scroller":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.8648b8258.0_1605177997451_0.25153571760188886","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/tab-bar","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.240c5f74f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cace27aedf9062c5ad7216560ed47e0d41af4e73","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.240c5f74f.0.tgz","fileCount":37,"integrity":"sha512-rqEd/QppICmFRu+wIjf2EFkDxp7UuKs6K4zCzJGNjEVtOLYGyQQrt309tjQnzyXoaXgddcr5YJvAxJb5NON3FA==","signatures":[{"sig":"MEYCIQCVr0vm/XiupQpGjFMdeK9U7DepnMd9SPeLf7JcKijtRgIhAOHvZbzcgkvqkdrnSl3BVaO0CcV3YOyP0h/ashtAecLd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZmECRA9TVsSAnZWagAArA8P/1zl7QKdK4FKVXuI2JlA\n8tj4GUlNy/m5JHKP6yR10O9a25mDm0wl4LkngH96M18CS2afXAbjUDXCx0C6\n7cw4JJKD7O2pDYMjO/UtGefdurysAHNyPphFB9JPG89zv5soHSltcOlGAJr1\njCi5oThVz7hjUhEtB1dGx1lBBKJzGh9seDq+ue0e7nulpvC9zkKdTSA/CWbC\nRSRtg3/7KZ0y+jp0Dlwy9qSs13zqjhG8WDFFSBgdjK47VLdLG8+2advAW3Yc\n7OGlJ+yziXdtgt+0pWTtbEbSOK4cNebAZfL5PpejVMQZYLw3IpqmuQ0TiZU2\nxW+CnKQgDiTJNjGheeHsvoau9kp5p0luSeKuvV7U9GYNU4mzSvSzsXOxEqRI\n1ru05fBahgaemgBTKxK5p/XYt/pyO+iFoUWkL44szOE8hYG6lJjsk3TKjlqf\nMzL4N+HbQ8Be9Wd5/hptdzs+bjKFxjTtU3DqokJ5kM4E2gle0HOPem10EHZQ\nsAUzMaZlUNevh9RoU0xmhgpLqJOlUk9ShuV0gZ4WJitkK5GFsx/UbbnSMarB\npygD4En2c/JmOoXwcvbuqd/r1/duMdO5d3q08ymAFCKdpnHSzw/HyEzlxJfQ\nuMx4OzKVis0CeaBanMZ50to4imN3oL6HQa18405zaA8JttLzUuegEP/RSlj/\nkjDu\r\n=/kEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/density":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/tab-scroller":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.240c5f74f.0_1605212547888_0.8592891686380069","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/tab-bar","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.6cf6ba4f4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e41a2b1efbf9a6480e3d7e93530c042c841e1913","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":37,"integrity":"sha512-NFmVvRXCNSXaaIkpmYxx1XnTOUR7/VpxFAWoPHq/19WlOCxhrnL4+BLYTnKAxRgKq5sdV8XUfwf4c8Bny5M3Mw==","signatures":[{"sig":"MEYCIQCTOw57J5dlOoa5xqREjiSVeMokNs/PFq8/vzxrY3nk0QIhAJNKQ2SZqlbUF2HZVfqhUmxxw3bDhu+EDXxYZMOUwesN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsspMCRA9TVsSAnZWagAAX7EQAIosZXIPhpWZM22ujIlG\nwPeEPxyqOtAmuk8t9FG9nmQQHymDuiIQztqsazzd3rMRgYoBDLeZYkezt/xp\nF49puoYgTyzYSMKHS8cxlJ72/J7UttT/of8lCldkJFmG/OUxUghqks2JlOuD\nwrve3wH2XvcHn++l6rRIcqKu6dWXUItIBPM6dokOOaE4w4/D8/xhOc0bOjhG\nPe0HaJ91AGHGkSKAVRp6TqLRrlL/OcBmf3b1htfBeoT3F1bpz4A+Ewxgec8m\nNSRoGDp/thweCZuAJH1JNM5vWEHk04IR4QAjuE6XJQCoEJtrnbAsQKMEzgX+\nMGVDe42w5zSkUhUiW05CIe2YBjpgpdklxeB9ERuxxjUkZH0bW7cBIKi2nfIx\nrXkj4ChmPKT/a8JCgk0aZpTunPUX1+uSueo7haeaHjA+ytl1wt9KWSacfwI/\nYVKrRMzAiHHL9I4G+d1hznETywIwpxILSo4iIEMCwuUboSLSypDLfZSPuNPi\nL2kxxDiB+1gWpR2xcROfVJDFsXqmJKxcdso4u2dkLDfkF+ZW8s459ovhtcP5\nt17/LK8YthXEqs/L5mPxLi1bSQ3wRlqa+CcU391l65hGGxOs3wnw+sTy3zOp\n8Uafi3nX5/EqvHwp9bCvScgt3iizpb+OSETEpvqqaZEnxGHtfmRkDru+2cp3\nfV4H\r\n=6seg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/density":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/tab-scroller":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.6cf6ba4f4.0_1605552715606_0.9842803701309246","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/tab-bar","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.07f3e01b7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60d12dee439da493e85de28e1222a88f18135120","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.07f3e01b7.0.tgz","fileCount":37,"integrity":"sha512-33KUPQr6bgkr+E/6VGiJ/6RHPzXNdlvz8HL3WaobqapUqGWouJDAHr30Utoi/V/ykGH/cBxvRr8fHWMfSDsSvg==","signatures":[{"sig":"MEUCICEgLWXYsppiioXwGDcss7aOzxwHY0Q0Y0jcDOMNRZy/AiEAqFMLZXcU9RcELRKktDR/bzEZxgvjWs/JP7W83Cd4WWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNwCRA9TVsSAnZWagAAvDsP/3/zo73ZUeo0zQgC8+B5\nwrl0/ss6h9XdVTCTMaZEjlALBp9S3Gyhle1Z9gJLpjZR3Jq1L5A1WnAEbCGD\nix68CJ6DoYyj2U5zyTSaw9Splq9Eb8dGZKXwbOFiZkIU22Jonh43onkuYpcH\n04YQ3pUy4d8mg6ie5glCYnji0jlRqRayYzfXGI7hFSQdkYfI7vquYDLVqbcL\nJaYv9Dsy3mdCzhMzMYIzvfOJoIsPZaYniAZ/NCUrl7ZoU9ZwiUiNb7dwjEy9\n0GHgZaOcn+F+NJt0Q3nfJXtB2mEzGr9nqr3mfnLFaKw74kYRuNZjv8cZz2nT\ncos58kyL5dvel/uuh/EA8hcytWpV3ZpQcaol4diLABUNQVKxel1rcC32jLdM\n1oe/8qiJYJ8m19HabHwi/yDxilyBpd9juLi6jMGM8Kfeqv80WzE4jsjqBg/I\ntC2RpIxlGCCIDZqwpXXlVdT1LvWXkbX50EiK4d/Ik+V3RgWz0Wevtb35ORYK\nCg9dWn3sIOGu1gkGdUw0Pad+Yojn8JBRNNXsb8CFpoSU+mGNHCB4SSvRQ30H\nNK1ygT911OHsCmegPhMYGBm4areCLcozKQBsLQaYZqY1tApxLiWWazgQEe/q\nDPz2AjOBl1f1G9eVamkhTd/3gJVyteSmEkkTIGuJqHrxw2dvezBoH73bpVqX\nr4Np\r\n=PJdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/density":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/tab-scroller":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.07f3e01b7.0_1605563248511_0.283916899637324","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/tab-bar","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.23491cf85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56977a54f12655165d8394b71fd08fa970e5e0e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.23491cf85.0.tgz","fileCount":37,"integrity":"sha512-ac+442poXRhuYuN8xgGPnNQI0iBgoVHlJxV166U7vPVT8Z80i/y1mPZp7trXNKJ54We6DLpquETxrGrkzheWDQ==","signatures":[{"sig":"MEYCIQCkAzXIIjSFm1IMaGH8VdyQS0hcsMffv+w0Ql1Ms3qzngIhANfo0VUvtZcl224WWrZOgXcsDQm5kyHNuSqYAjuwuOFh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbyCRA9TVsSAnZWagAAAlMP/3Xs2ys6Ai7FLCHXh6Ra\nFrS5lQvezfRNPwEcHgn8O5Pn6+vOK8QuQLRe6fGzGqzeoTd2qjPk2RF5+FjV\n1lkPy4CvC57BDkwUHysSfi+SNzoX8iGnv9aQevFQQHs7obFMm1fp5I7HvYQX\nj2M/Y6RdGERXDDzyjNflyUsdtwNWHrPqI7bDRgYNMyQknlw0R8N0dWb3BHoo\ntBKRv2CZYrjqWCCuu7p9XYmcGyqo/TC/OgQNOr+5z9qgVk9+UB2/fZO6wVU/\nePsKsYP8GooLYHMz50PFejH2uQjhLD5UkIL6lHB3vZ2jrWb/MFLd5gae4CF9\nBKjh/hC5ewpaFs8gaIib/3iBuW8eFBar19isUxlZj8z6w6efuLrQAVqdAyE3\n6d0n5FwSCADQDWeWFIUPeypoA18uRdsljLWAtCARIR9mfN4yv73b4s0aia3R\ndJUOOhaXuxHCNrwBpGWQD986Sx333BKHiKwdMrr+q5F/LiVn4NYVcGtZcxFr\nDdDyGxMtf+4WWsX1x3mhpv81SkDdt35IfruvlLUwzFcI2T8feBemSf/BM9Yz\nEXKQCw5oYEvrlTVnPawXkEmuUlemzYBXhOkpZfxIbtnyI3hg/6pWPv1jW8EJ\ne16N9DZgzLuYyc09yUws+88CK5Q+l7m7xk6RybRyWo4Tftk5SSbmWRczomSX\nXiA4\r\n=7T5u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/density":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/tab-scroller":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.23491cf85.0_1605572337888_0.7101761196242826","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/tab-bar","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.b659d4fc3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48a3ff052c63b7e3b5744d6d599a5a3ccc0c13d0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.b659d4fc3.0.tgz","fileCount":37,"integrity":"sha512-Hpbwk/oiisCbQmwxepVy/6xDeHb22yrmIOa0TuWywjG6TOsa2HwO4ZdDLbP/rW1EbY6gTTbGyR7eJnp8H+X+KQ==","signatures":[{"sig":"MEYCIQDIU3JNGbZPjqdg9alqcu4rspzXlOy7J7I55JOo0Bk7WwIhALA99LT51DdYaFpEndSs8IJFkBuu2/r86d0VM/oYY5PP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxjFCRA9TVsSAnZWagAAzOYQAKBeycN/hWb+CyVivVVi\n8LciDdTZNtU8NgamkkA9YmUIcD72PgwT+eK6Xswt5L8cFsDGGW5h4LzkDMk3\nKAh4t3TLgk30MzfrR/TCDR5Zwsl55RZ8gff5SMJ6yhotc1Hq4xPOUfONzQ8X\nF1JMGMJ5q6Ddh313DcK+MKliyPFBb1isvvgJ9P3zaqJMlZHs3XpuAikaKQYx\nMWuWVOhTzLNSEGF93tEohFIyu7A6tuPa2XjYMEyhyIPJIdGI1ckTd4WIycZY\no8jQvsUTgQNACXTW71K6V8W9RAhKwfrioDpseuB64pa621wqlvyPMUX0Aa2U\nl7vetp/MH2zMYKnB1a+ExLIoun9VpEpzpGgUlTNimBy1eh1Jcg0owrQczDq6\nLvPaR+Iu1taPUhc76GTHcK2z0HH+hy8zWSve50BkKsrb+rrK8DvjpF/bXzz6\nt/LoW79nThWLInOboNNDm3rA8bCW5Hh8yJGC66jAPnaklI91/caiZt+xTghG\nwvcNEsuxXpijCIchVoEuESO5LllPFbfX6QpKL7LDeeAqcSd7CI2EdEYyGk2i\nwxvC0I14jEXBT21TCEd+sYrAiLEv0oKzZqUX3jdn7OYS24a1CznGs8562yQC\nitMkglxkYQuozxZwRTTRGPby23gxxLw7zl9a7oj7ckozpnIKeMljwccJmYp3\nKYCn\r\n=ZF7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/density":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/tab-scroller":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.b659d4fc3.0_1605572805200_0.00871437678525444","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/tab-bar","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.d8a3aed67.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c001c5b43d9497292a42f584a1d0f38293f9cd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.d8a3aed67.0.tgz","fileCount":37,"integrity":"sha512-R3Ybmmd4srdNmesfgc5WZB2iPiupDhflOPuYe5f2bvMg/IEnLz15kF3VDDo2WhAp/X1wfKR8ftUyJR/5ADvRrA==","signatures":[{"sig":"MEQCIC4mR75usMRWdi6uQSw+eAoJOZNWxQ8l6cbNSMCuh/f4AiA2KAQ+nDw1aaBQOPDXzIXMGVr81oO/Y6Dl/o+7q6qGpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+xeCRA9TVsSAnZWagAAHxMQAJDxe0yZIfDa5j52yriB\n7yj7psWLmv9D/mi6BndBblU79om0+IcJnv3caccy3n3vHvThOE1am2UtJanU\nc7fO87TbsgSv7ha9Jn2QUpc3X1SOiiBUYPIJz/SDrOWn6Bghebo+G6mVyTVx\nTsJXiqInzDZPGViTKSwII/nIeB1H1zq06I6kk3Llp/WyCemm1xtC/bM3lONf\nyjY2awI+8cU49Ljek4Hbj1hDE14ExIu7QvlB3hiz6pLNUNEDsULJqG94WwmP\nzrS/2jFdHW6ku4GvSM5ThW7//i3jSxJW3cziRPrhNSKsAu53wFgNo25ZIkaD\nOQG+UmQ/DZknqqgX0Zjiqw9OCYsEfn2rmQem4XsfhqpdZfgRWREQd9crB16m\n8Bx7TAprkQG5/MGsNsA5PKXosUdLBKTag4kU93D1zNUfOu1nilT6KadartKg\nEqzI6+YHG+U2SHKC3iX0ctYjG2a4l2VpuDwZ6sVgBPfTJvM8bd9+6tEqWtv6\n2XqyNhu5U+KCWL8W/HIwJkaaiqyivsBMXw9AVikOHvJZhBvt54eFAsjueN7s\nM0kDuml78hFvIdg1HMAQHIUpwhuE8NAilMaqtbsPC7TOrE1B2D4ytIXK036V\nmNcM9rMuQzYiRHRvt+cl3Jx9F8FJilHojvGSJV8lSW96ok8miMqCfP9aHIKv\na1BK\r\n=Umbe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/density":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/tab-scroller":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.d8a3aed67.0_1605626973797_0.07305929104309117","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/tab-bar","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.482ff9091.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f682ab43007572da6394618efd97e93b36ce836","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.482ff9091.0.tgz","fileCount":37,"integrity":"sha512-K0lIiPF/Azbm5S8gB7c6XC3nebI4fs9nO5itMZeFCHfuUgqdrzZfR4TBxiy8dROpWJUE67wp/45xw9xNMjL32w==","signatures":[{"sig":"MEUCIQDHV1KR7JB6kTREAPnm2ABsSpifT5mm+bnVbpcy5agsRgIgdeNFX2CGAAchKyGwe3gJ8idnuGfDTEpVns+bAIJ41Cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA+cCRA9TVsSAnZWagAAO34P/RGcCiU2eAZPELGx/Pya\n0jOIBz1SdGuFoZlLbYznJg2Ck0LPXyJWOEjXVJYTHrkhD7FfpuIEar3AB149\nFn3OSXFYLJvTTTejjCgPNeBnbVa2BcNWzww/JJKYYGaPViLQM+OEyzVCjG/O\nLabH2WCBiZBYT/Ns2ZCE9lU7TNimRWD3iAvZWxzGIkMe+I9Nq1WS/I+8GWp5\n8ut4cX8fmtT3eInlcVKkNMEzCdl4ex+suKBNg4J4tBgj9c8WiDGUulq6oafy\nzX8Rq72cMOkoBjPhCidYWl64CSBEaZHFZ8nnLGDcX+TPhU/bVXeXeUYtYeeb\nQubDleiZZoUk+uzCDYgZAYq9IRdCOdjuWcWdttwlkMY0XJVADS17xFqGBUak\nfH8njlNXVOJbPaZspGMYUA0C+tN4B4Yfar2D9+RBbc1d1sbY7lcP+zLZW5Z3\n92Xo0Kh5VnSDcfm50BGmDz/4005f7rS6WJ8bcOAhYQSssHhIfG8pX9GHVwim\ndy8Rcm7U2biJeVxcDx6EFWEsYNRWRGNe79/1xRn2SRTf50UQ1ZfZCy3qo5Qb\n4NStPwKpiZO6a5EQXH2kkiHyTrevqr2eAdw8ap+lpac2Fz3e14z8eSSPg1v7\nMETqmi0a9L4AicDwyh7ibPr8IvXJUC4wBCLO1yLXGYwMKvn8ChNyRDmcLlOg\nkiwc\r\n=frcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/density":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/tab-scroller":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.482ff9091.0_1605635995920_0.6868200583319177","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/tab-bar","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.99cfb6bd5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2cd3580f426d24dadad6e91e34cf5f3d11f8e51","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":37,"integrity":"sha512-E0MArNpbi2//TdAMHGrLq3WSpV+KluG6avGmmb1bxTSy+Mvgh2zbbgd8yyqQ2fLgCfoDtQ4eoFydFFC7WP49iQ==","signatures":[{"sig":"MEUCIQCLjf7EJfTuLwV6ODS6C3k2SZviMqcOBWdkaihz+GEw0gIgOQjFXJI/0qfUm6GJ6ozkQfls2P9S8DBjpIHG3vZJcgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWvmCRA9TVsSAnZWagAABrgP/3CSS/etzaPHtHCwLkI3\ni6puYaDMHdpojxkZURqSOt6ipy9GV7PqMo606x0KnIPKfH8ageoUoFM5l7Aw\nO26/LmLV14f+MgudMN6sx+7NicwFlR8MCQGxLI6ZgEpIbOwwHVejsFXRT+gK\nDd7xrGSd0yVYku73YLpPzPcLkW84/eEb4JOWqC4xBedOuxm0y6wM/21Zvluz\nBKCODnEZ9hc1n95393nD8iaA1K1KPvyj1ZXfN3RZY6Jq5t/uBRBhfE0DTjFi\nI1+7KmGSmswE6rU5ObyfxMLnKFguAZFBXAoCID70nndIIWg3Pmcjdc1EspTa\nRRfhJSoY98V4yepnTXtDUHffrYO/WTjWmzj07vF8wU55H9ss9mjHYQ4NTQKB\nAPSuVrtESy5KUHwLZzuVLyrGY4MQLvP6Vzy3Yohtnlg7rWeWQ9wpDOjeUrnP\nibaKfCuryibAZ5/ZQfbi7/cSgvRIa4WH8DJkESW1FIBQIWdbTOLmQi4vbstf\nAV4qgoOP5QGkjr7VqzRTA6J1F4vtvha8At07llYvzJEjOvJZodMeo4fhGCkL\nC2YWJMEH0fx+X1kIei36cUHqzHjp5bnvKMEdHDzgtAb0CCsvIxH7XwAfZJX/\n+025U1eetws9/B7Vggdy8cSWWSaFUkZnfpZX42WLhO/bChAOVmD3iCI2pIRY\nZGjt\r\n=sDlD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/density":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/tab-scroller":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.99cfb6bd5.0_1605725157781_0.8106113146269731","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/tab-bar","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.b98d15d90.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2648cbff404f45cffa41d49e2f06efe42fb683f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.b98d15d90.0.tgz","fileCount":37,"integrity":"sha512-Lh1YiHx1Zg9ryyI2WHwFnWOYLnr4PX8TShe4JiYt2MEe7m7LZnc5mAw/8bBY3tQvu+iGD6V8S+9o7hEsGaR8uA==","signatures":[{"sig":"MEUCIQDp30wh6hh9unY00mO3Z4KHal44C6ib7pRFVy+sEP/1iwIgP5uxiMU+jryL5aMAV0zet8ruck0+vIkfDOQlNsZe8/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHtCRA9TVsSAnZWagAABeoP/RMVA2vuKz377knawMMB\npQ7wxEv4HEXsUQM/PhG6e/TPLfo8Hr0ZFGEMicXdOIdvqgMo4VkPsFXnowbd\niRjDmf9Wfl5vXYc2wXP7CFO4l8Q0UzxALnb+CPzYjw8TKLgX4CO4E9i5+3p2\noVtZY7gaJwWUOUFny9GLu5t2876i1mO/mxDOQ+sX5d30dsi9TZui0gMrps4q\nBhsoUdihVeluBXIdaLJmIKI1ed0mTJlK8DZVcaAFkfNvYv+N8VVeoOZE7shg\nh7JwDOtJ3C+5NkZivIL/opSN95Nx7kzPUEt+LH7SrTitb3OkG24hWJzrrd+z\nzXQSY4YR7rU4cEwMhC+UwjJJdfQrVfOzsmdyVMWleQUETDMcMB5XKwq/8FiO\n05H/KPQCVEbZKSwzfzqEz3iUmgBlpcBvfSd4QeQhEPSGcJmsnIqYWrVMlh3D\nfOP9dTL+oT5zjSW0DeABNK1URggKQWLJwIwjDxkQQcED8tRJp2SwtOG8Aa2m\nWKbGbpMU5jdcu3+vhd2q61Uou9W0ZJv8u/qOjqqHdDek4wUL6yjD+g5AB0ke\n6zuVAWI1/sS16wjCEa7oFs7rSMAzsfe4a/fFHDcgvpLfj2uyZwNT6p2snG8N\n/t9mZ7Jwm5d4Y12rn1BeCiolKvzDeBVeaAonhu00T/QdG8GhAhOb2AZMLsB4\n4PFj\r\n=icb6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/density":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/tab-scroller":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.b98d15d90.0_1605738988992_0.31196685915842326","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/tab-bar","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.30c11bfc2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21dd820434b0f175b8cdec2b3bec2428f49c9284","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.30c11bfc2.0.tgz","fileCount":37,"integrity":"sha512-ML4PVd9Qk6H15wrlQSzBDk/Qb3PMCYxnIvuUJGLCUwS46N2Mx8Oti4bIFR8OXC9IgQJZu1q81d19cAZ8P0EQsA==","signatures":[{"sig":"MEUCIQCNNjQHBEJefgeYCKuC8hbVmPBped/xsn0tlZVVl2X0UQIgKvvLNm4YelZuy8BrqA6b5kWb544l065oWOnZPaH4IIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcoWCRA9TVsSAnZWagAATDYQAJhDfyyCaem7b4IxFP5Z\n/alVYB6e/ovcGPR/1MGdwqijB2t+EJ66aa/M+QC5fKYIV34NwlnlxzlakLHm\nRIXH9hvSbECdocFp4XgbhDlVQfrt/7fiiL3MtDV66f8ygFW5SNHZrLhM42MX\nkmWbgtYsHFFiA3DCVoEUvB/YkaZLQvDnpsdcWd9Um5+AIajcFQ5lBAMxABZp\nfKEfOAK0sbOAgJ97wreTubaVqk7PEqWWf5Q4LA6cRIp9vgKe+RU3lzY4WtVf\ndM6VKFqxoYQpOv89rQO6JhiwK3w38S7wM4mnwXvToQRgZHRX1omK83YhfmX0\n8UAfTYrrc7SyeOmhng1yjttfuCPXnWqai18+VNsuoZ1tt4qA+77MYk6rCtoF\nFII6HwWeicxqMld/4EKGNLXy/pZDkKFREeH/L6+q4GLrQP9nLWf37YhKTNLr\nnACySvEh3h0usEIgpGT2YCAUKVlox+aGWTMGxEOTnYiAJUzA1IYGWaCgwes0\nFwwxbvGaQbfezxtPbeayt1qbvw3NOWy9jq0l4kYi05VCQnQvWweV+DZNylPJ\n9uMtYUIHRw82Szebr3iLp7dQ/hsAB+bTyHcQ9hiFOk0ZD6QeoqKu+OaK71c/\ncGEOAyPzlVrI2EZyMS5/qyiFh/i5McKMYK+CFHuA/ZvC0bOPvgKENrr7wYeW\nMlfH\r\n=USuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/density":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/tab-scroller":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.30c11bfc2.0_1605749270347_0.7004932866294402","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/tab-bar","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.1b731d51b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0ec8989709ae27ff27158bd8fd28ba92ba0220d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.1b731d51b.0.tgz","fileCount":37,"integrity":"sha512-CdLMRytgwC1U88sJan2odidlIfQ4626GwL80hpNmXB4kW7pcrsXTaGsgVXX+2Zi8scji05RB26fwjTG7tTTvpw==","signatures":[{"sig":"MEUCICkmXmBFwJisOF5TbO0RAFZAmOLV2xL95yEqT98DCSnKAiEAouY3ntg6M/G+obIgMwu+BKvRd5hO7Cp0m4zUQRfjfjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9NCRA9TVsSAnZWagAAPRAQAJ71zaJjA8zSyuTDRH+x\nU2Y+3r9P/E1HYPRW8N+AYg8jwAQEzx0hQ4auHoisrxS1hUM9SdBeybfjGT4l\ncv79IGiGgPE9ENiHKHaFtrEyH2Xo7gAU6jbhzR2rQCU1j3c78pr/R5GkSIoU\nGkvl2aJ7T0DDJ/QtYi9bzpijgFwTp/jQt8/AnOfYCrqbrk5ofZvGSZnJVcVy\nrDK6L11wiwKlKocAJkYF2ck/DLV/3hJIwnFh+zOc7jv1YT26kKh42tYvpsVl\n1bnmuZNu3R1sOd7JSa1XTi24SY+rR6rDS7BeEP1D/5xX0li1fXueWwd/pT/Q\nlxmZOchKlb+Pd5OgqWseX9Vii7Ax9ArBKaY+v+nfy6jmnr4Wk7qCuFvYkWOa\nH2Rqfanz9Ii9Zk8CUaQMqYYEHTlmqmeQThcS9faAilQ4v5zXw9v36AzLczQt\n36iOhOorsoIUWvlDeol2JWjDhb4YuGsADL88pihtzVBF1wvD6amstr4Bdo+b\n6Ys+//Wf6PP+rjIAPUwem1I7ubiPEGvzrVzid1FbfxdraEwwXMOBGY7NxNsI\nmXBPru0VJtgSph0w9S/evvuxE4oxrYTbqpt20M3BMPuuyftuL0QXrSLpEMob\npg0agcDbsuuDnuRb8TmyiSlxntMVSxtJCnPOuFBWHVeh01CeFX9DiTKg4Qwb\nLET4\r\n=CBm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/density":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/tab-scroller":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.1b731d51b.0_1605812044219_0.0029802586734970493","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/tab-bar","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.4ae94ff78.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac338ee927004596f4f5825a12caf2dde316b6e8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.4ae94ff78.0.tgz","fileCount":37,"integrity":"sha512-Mfz8XAxVV6dxRZSmIfo4inVrsGd2YPWtLI9XqPf2VF1pUoMx5XN1xqw9DUHF7qun5KG6Or44qm7MFGLyOBUOew==","signatures":[{"sig":"MEQCIDlhmWVJ7DwDN1mON9a4YgH/waSbIxaoa0T+KwMgQbszAiAKdJsH9cLIT6Kyl4+2FUR+fhEZjP/hytdVd0bPETfhxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/5CRA9TVsSAnZWagAAAzMQAKSYlDj2d6+WpmBvsKDw\ngbzr2N6iK/+z+/sY7obctPxIEuUp6oK09C0kQ2CJKZUeaMbsULF+5LQNB3+u\nzvDb6MGZmi12iWoT6rw34NF/Wuxydz5fYiQaLo1J8V5KfZnhZYRzU7FkU7i3\nao2e7PWfaujciBjFtaCs7qiuzx/w2cVhJJQWcXlFOQkICRXIHXR3Kd5GZ9eO\nFihEH2F1A9T+kcbS0BIKfXOhFGCtHJuFC/mGgXOlC9ohhUSIosSFsxmXkyYL\n4tyFl/vqKGCOqbn4OoBaXgwCNAG5OD+J/VDiLE5oV/gYXuzXdczF8lNyKIQJ\nl37diFVQEN3DNlbcAf1vaS3ZhZmA3UzGY0XUZHAHHRUh6ZaGJoqQd8ZVyCGv\ngkVvkGZ2fORxaBqmzPEtC78VV55TzEJejoDt3cPAd3tZh0OM03lwS8Mji4pF\nHdUp+GVkBvCIVYuTxek7CZqlwrVc6G47hUXcHOjuxs6N3NP5cuK5EUM4klnw\ngLKPk7XOK0gDswlJZyUfAU/HNjM5r0qFZC8g1mga7pv1vczztflXszu/OFJt\ni3mTj9ghez05fcxc92ttpB9K6So7k0sgA5qbcnrWfZ6h0NPeK83boeocJ+87\n9p9Bz+esrpUdxco2nLHUHgkSTohv1XAB4mZhdXya4W8v7NeG+F8kH5s0VLNO\ngYQh\r\n=KZxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/density":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/tab-scroller":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.4ae94ff78.0_1605812217507_0.1422628986449488","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/tab-bar","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.7ad038e1d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d63a88be956234e5636a2718e6199bbc4d230043","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.7ad038e1d.0.tgz","fileCount":37,"integrity":"sha512-bfiXfCnskx8j8eb7C/YgPBMi+qV83zwRiQ5IPENz/onZaTf2GgVcV+Dxkb9NpLRSkzQf8YNGcz/rmTWi+OBVuQ==","signatures":[{"sig":"MEYCIQC7CW6fu+0eZ2I3I+umtlj7fIytxQuNLFBoKv09mz+z3gIhAPl1j96Nc/5NA8VSzNz5UUaclBdbYOVISE+IseliDVYt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVoCRA9TVsSAnZWagAArv4P+gNF8gVOxAjptXr5FVEP\nOSMhr8TQ1GjB8J5gqOJPRzODD/ZMAMuet4F8ffDJBlVv+PcjcFe+OuYSpHZ7\nngK2KA82lwdprDsGn5772IzHL9vzaTQCEdn69Ip5+1VFAzNgM3v9vDBLhMSi\n8Wv7uRs14GM23+qQlOMPBqbwwZ5Hf3F1NrZBu3ocE2ycTtEU+mGBoEILzvYP\n5475ipZqQq1oPFpGvMZJV8pQUGkCA+tsAVFdOR3ghc1vyjKUJQXg41SwkTZi\nj8KJ9wsYYrO9abOipuXL/g+hILlmqUjhOL1a8kkMjTaX77q2qkLJtgqVUOZR\nC84KM3j8pPehYfSVvHjGdOhfGy5u7Z+UNK5T/xNDMod9F/RKK0mwMkweVjKY\nIto4UpUCs8IE5KDzBi08gyguZtqAClMbDv0paflsrgbTHyVzWHvQve/2/mS4\nVXjIKats80XoplgPoFyBoWxOZS1rBK+SL3nkE+OKVLpNaBLCtbAJAxfYHmzv\naDEAONYl5q/Ze18U3DRXHUdpjh/FwAtx257m8MYWouVij/NZUGCZGtQk3TkJ\ni0IF7vr8bDZAzTjKjcsCvTfo+cv/zTrEXejpYROoowhu7kxnIVPmTm2fJs2v\nrXa1cHSfqU4JWAAxAT0bXSYgGWm1+l9hCTYPITMmoOPYTno4vDW0DpoiGdyQ\nmULJ\r\n=CSuP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/density":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/tab-scroller":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.7ad038e1d.0_1605813608064_0.122522014666679","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/tab-bar","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.a41527604.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b29294a7482bffdea6ac23f2f678224e57eb4c4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.a41527604.0.tgz","fileCount":37,"integrity":"sha512-CAyX/8/yZ4HUEYJ9MN7jJx38izLL9SW3VMdOFqURcwSR66lehDMEdjqFUwl7QsKrwJoDRF2L+geMTiAeq4NsTA==","signatures":[{"sig":"MEQCIH7weGssP4pJlDahOVput25VXiP+ggUDHwqEUl6Nc6haAiBsHDsYG2uBHjZO19KZK0hlrS3gjEfzb4kp3gWILg6M9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts92CRA9TVsSAnZWagAAqPkP/1STCFY7Twt87X12LITL\nVV3TIiQxT7epuGf+2uhjWw1LjewE+WVr4GvRMhVSgY3GQQEvjwMtNSUXIwWU\n0kKQmocgJ32KeM1Y+yaZyjZUh/bA79nZxTxf4BPdtcsOJhU3024E15G4hbKk\nmj1Snk88j5S/mIaSjen0c+B402MGPGI2fmEVSNKSeio0EzW2IdLHkO8Rdq8p\nd9Gg3tR2pKALl/JwcS19UBUpnaDWCAiYpuVKvsn9eodMdn59DdwuKL/Brxc3\nrZObxkTiSV0IJChY5LjH/4aiTE5SQQdckOcSldW5K5m/ixXuYFgsBMzKlhWh\ngUYfzng8nJJ9NNPONHmBhrGexV643iRI3DIeynqhs+Y0CTBqA+VEMU+tfr56\n4IjzfknPXrCTuWuLt2jrNs7PjEdGMuvRSLMGOBngJbiKhxDqiOHMIyvCCcoU\neEJWbOFZ1+GYl+V6yVOfRcLAzFO8rlNGvnt1kdCubKOprNxEvl9kSpLxxeUV\nORa+zzefp/ZNCJ1PGTH0ED4qrs2Diyz9wVLKgMvhejtDdmnM7Nm4PrAKYU7e\nN2fysKdFKZvNdcpusq4mW2jZvBHP5RoyYuucqQv+oChIAEuYR+Wx500BT66g\nkLUeGRPytGrT5PvN+kCS9MRTKPIRvbBFrwPLvH98JwGGlh3v6P5mxIQ0u6dD\n31Si\r\n=pfJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/density":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/tab-scroller":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.a41527604.0_1605816181697_0.18456011147700768","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/tab-bar","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.7b0e2b377.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67ca5d6d7ff1bdb912650ecb43d9c3901baef3be","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.7b0e2b377.0.tgz","fileCount":37,"integrity":"sha512-miN1wjm5x6gitRfEG1DNV2uVlal5iLXaZxGbBkIxahZpzKCeoimQS0uQx70n6obaGJuTTqI24828I5fFYxRTNQ==","signatures":[{"sig":"MEUCICF7Hy10FABt19hv5O0BGPQCowBhUE3kSat0xJvzXjFxAiEAyRQQWC9lXFMLz1MgTJZcgiUac0eJDjXpCk8bfYxhtN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnpCRA9TVsSAnZWagAAHm4P/3tpoCls00M2m5Be1OrS\ngDdil2tayCuhmetkHX7wCcJjl2VqavXXFRs2wlPvQigYQOuSVWulEkXsLofM\nbmqH59eN9OgFmMDZ+GDLrMIkXuYeqbhmEWGg0kfyRn9qEi1mlBqDt9m0jgqj\nHc/SEkECyLCAX4Uo5V1umrP+npQErse2eeWCVD6w0MXCVzXlTjhX7swE8oT5\nd2NvwDcV+z6nL57b3ikQ9pSfkVuV0fYxEcDnwiM8ZlpJ9W1qTNL1DCZEi+KD\nEgfBLRnKuLzuylsAwCNnrlxZeSAdUHSEuQsAPjg9yhwvhc6Lapk5h1v/mATu\nAv8V9nF9PE1ilLLrmohwaCF1SydSgYtzf+1KIJr9VJAaUYAvp6jisd2DLjQQ\nqhyMJnwABtdl2BbEtDHU4K7uXKlfa0MBgU2hX8wLuFIwLnMZB123iVq+CCiT\n24ALDElWYLZcc615B6/hhfV4U7EAkQlxYEf2nMxvSVhvSPbRT0xB1oJVb+S2\nWecksZkSfC4sP5U23+QNSpr3Wrao2CuM4D1Qw2FE5CS/m+X4i3fCKhwL3E6p\nw55yulEvig5EKU0xrdLaVrgaTB03b88ObQ4skg4OwfPA+yfPRByXQs4crixV\nHrJKv9liWVrf6ZWvQz89WVVcw/+SPkxh9kpgnFtRVghkV7mcax/cr2oZfJMH\nu9EP\r\n=lTY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/density":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/tab-scroller":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.7b0e2b377.0_1605913065221_0.007133145661046614","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/tab-bar","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.c927a5d05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6f1b850e6f8ecb42211f6a6ad344f36cda18cf3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.c927a5d05.0.tgz","fileCount":37,"integrity":"sha512-bO54cQLEmHW4ND3y7KaHBE9nSNNs9u0e2UE9QunEMn7whP4nrC7SnSG3Ze9IC4gdvl0I9w9fqJ+gmx65ZHANzQ==","signatures":[{"sig":"MEYCIQCT2hTcKSMS4D5XOnEcagT97MWGkiXqWvcJI43UplPesAIhAKKYxOGlArezOZ7ytJ5nf+G9WYYGZ2UbYvPFNmpTNcJl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBJCCRA9TVsSAnZWagAAFxMP/A5JV/DkCQbjS6HlRvba\ninUqsa5oqxbUYicNW2uC1pekGICSx5tYSwC8K9tmKcyaGeAJQw/wJ9NaQlQ7\nGu+dzs7khQ4+8LCsSVnH1bzlYiof1dNrnKYMvfNaji2MDOcAetuheaEmQL/C\ngJFBbvTRkvmJKfrbADOjOsmMu6ADcDtUpkGb+NTygTOoVx70LwA2DI6Cs0Sq\nGEriOWkalQU1SOryJDtnZIdAiBK/CaL8I44rHX5NIUuFoiv1CqeAyPOwtK4W\nFGZaZ/QxBBoDiJ4n09kHPnF4s1HQ6Gd/W+ln2ZAo+sDgul8wjMjetXgr629z\n4cOVlqxTW+OJI0pCfL/fPvZD9pMp/+EOe4q5kpCLlAVmHq7tWzxgNT8kunXI\neF9DVIeZ6SuUxEfal++rgSl5sNWuikSyruDohqTUvBSBIfx/ZKUgjf5aYhVs\nT1QV7NbXSpiq+TCbmbbphRd1mm5NLPdTM7gDM+E6jlcL1vfGwP6fnXsNAi5z\n+gHf80Gxs9Vw37KJE0FL1JCxket/knwYyn7O/2P9NdRJ61YbOtImtFNesqXd\nxznyuvv8oQhtauKDEFUvrhXbvjwaU/PJ+cCjIiBiaHLNtwCk0smGRZSrfQl+\ntIxcMJIQCZ57Ex6GXOWH6uZY52bdPkWVjiIcNxsqb66FXKndcYJSxHB4rTyp\ns45a\r\n=HZqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/density":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/tab-scroller":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.c927a5d05.0_1606160961665_0.7334158372222288","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/tab-bar","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.b349b5185.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e0c8ff780ebd8dead1aea370b5188b418171678","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.b349b5185.0.tgz","fileCount":37,"integrity":"sha512-P0vtiGezwbkREgH/2aVuw1+cDN8h6cauGlImfcoCrj5TzGrRpSIe8KLZsECd9GaV6d0j1m+gn+x1u7NqMCyxRA==","signatures":[{"sig":"MEUCIQDumDvmlBJK53FAk4HrN6lCcCOE6hZGOP5nf885PqQhNQIgWMZvA525bQpFFXIO62FVy2DwmSN189W5Aa1oHuJ5Tp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT6RCRA9TVsSAnZWagAAw8UP/ROQ4btp1Wqe19g4nXP4\nJgHcaIzZfXqEVSHrFhLyf/MRrF71wFsgl/ucu0pqU7PjzsSKvEGnXSUuvshq\nuutSRoogL2RcFwPQjVZuh6V6PirxJvfWZ6wWTiFZPmqvEMBAA5WgGELbIxYN\nR03/xW0U2R28KV5IjBEMh8lu3ey4AC7NRYI8gY8T4eoSxiKbPO7P2kyQicgU\nfzTcJFJhLiqdrE2zU5kezbPwIv16hjRc9WkMcqQLAtngYowLJX0rrF+Y+ICj\n33wmn6z0M1Z8/cmGe07p1yzOMLrvPCWLah4qMsMoZcGNFA/AhdneUoJ/huQX\nktq0eWWTiPHdRg23sE/Ml74qVbWL3B3lQotP9u6QFIN8VbUAKndd6XDetZco\ngDuuod3I3pDCiB3SFMFK+ECvieR1mIPbmDv6YwEeOj25ll/UjpTm8Z/46uK6\nXkJY5T1LHhraQQYBIvBc2o/cGW6RuuFbIfwbNXXySTArGYlGywi9+n2lOPjT\nQRuflfMim+Wq7aMBS1s1q6zHNMPpTo1Jr1jFq73OW4cWoLt2PU+VyhKrVAhx\nLvOt1uNrJde6fuNdoS657b0tp13+y/QzOmnWeAbQ8BdHgh2B1+wPLU4DI0rO\nLlHDIvSoKqn9WV0rNKh2bv9kqgpY3SYQ3DYXSHJJr7Rw7PbXEZJg0NBAUaYE\n0rJ0\r\n=LgtW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/density":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/tab-scroller":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.b349b5185.0_1606237841193_0.6389158380308035","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/tab-bar","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.9083b7d61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f4fc6052f99cf3716678576b4678db4be0d9523","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.9083b7d61.0.tgz","fileCount":37,"integrity":"sha512-+JGuw3VAvBC2oNDAZN8aFzTvxz9jgpZf9iLjwlgbACTX1mFBgKpy2cyo8ylCG4B8uCxWtpVPPYgYto49xzRTcg==","signatures":[{"sig":"MEQCIE9Vwuvkw+/WllXu+zgiqxMPYGxexzWCXtgTpXPOOkY5AiAerEdAMCs1pwCvHv4QnS8xq3EpjyIfptx3wSxRkfIXlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhmCRA9TVsSAnZWagAAKxQP/3fz6G9O8T7UTTBAQtXK\n6Aibqhl/4RgFegYh2nLpHOa+pdnCIdaEeQyfQquUcR+emyPbMBFKpD4e2Bq5\nABC1Yfbl0wvl/Sdyv5hm+LpD0acp8DMQqxjer38j7NWt0imkeRIKAxQMM60o\npuAtXLy58lfy9nVZm0lx//Gtl0zcAWtVrk6RThCyEJ+OzwdFeu/CRT6iIW51\n+6kzVUaA8LQBuBsYrr4ZNKbLEKpLXpllG03cFVKoNoyUxwzfuXvQ/Z8lwY2Z\ngYB9XSkpm3irSz9trMEQsF11H01HNfC291Rosg+SyuKVHp/KAGBxi6JlKDeI\ngBNHDM+kxnUOZu/UyB/TWUTarq7M/I4JTI2K/5JwmAuI6JaBzxNLijP8AQ3S\n4LdUaDgttFUiF4LyHeKtRmYp/p2Xc1pASvN3W0VfusIkGkLScowcvCgPwT9p\n+Q3zuo49Tsq1bIqPiq/chR3BnNpK8UmNXIsIZdXcF/QFKzvG2600musLB9Bv\nMvD1rX4xT6iF1z4rryxRhhA5nBgMrSjwzXNaXEax7WEdPeeib01kx1uLE/b0\n+FYW/l3fvJqUP+51/mEUbgWB4g6lpEfI6PHqbAMRGSY5vmUsYpPrWcIqnst/\nrlzES/QVGi706LeE3USTv1Wvv5qFTw5rqFh8x9Vjsyx4bL1TlMzF2mugmDlj\nU0AR\r\n=Ivfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/density":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/tab-scroller":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.9083b7d61.0_1606252646064_0.42474342173496726","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/tab-bar","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.eff7b46ac.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ed9be26a2b84924abea1ab7a8b1348776c7716","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.eff7b46ac.0.tgz","fileCount":37,"integrity":"sha512-agFL1CIOtytbcwq1uKp2JoHQ/uO4b8AdUWqR+icgmp+hyZFDHfDp+fQvVszmxAHRyek3xwInyHlRdZ9/LKyieQ==","signatures":[{"sig":"MEYCIQCb8BrDn+wGeYGusddd33Z1Op+wNVj8T4eZvr4jDURiwgIhANNc0YfbvYi5Qk2P8ct0ILiEDXtDWmFEM7ulHYuyF67e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgcCRA9TVsSAnZWagAA3hYP/RDRYSWUzF/e/ZISx7k+\n2l7F0j2zy5GxYqwWH7ElCzcMsNRoo89eJ92SdTVxnSJ3lZ7iy1OMpGTH9BB/\n4YTPTZ6vjKaJY47p8h/R7iPIhx3dOVKS4IOpzQrTTbllruwtZhgy4lMGc18F\naQAfAgjlyN3Ndg0PPoEbV1/4+v2VAD4Qc0nSgWb0GSG91YvFZAxt1+q5nrML\n3y797vfdMRJU73WDiKKqnybyQh0Xp7UcuyewVSH789zpkeO9FGL8W2QOWs+N\nrb8B9EaSNYCget9nN9oYbMxSxXE4LB3ALvgX0waGPl70FKx7su8FqaLjI8hP\ny66ixBFGWj6sqwYkSJJM1tcNP4Q07JWzd9wOfmeXqWtZX1baQyLLFPdxVhfc\nhJ6wHhLpneSOdnbIojw0x1Tajvaw0BE9G3H3oH6Qi85Kf0vf1i1fw1i8RqJY\nqSQtfXPVslGKN4WxKKMmGa1bQn75pWLvcSg7dLfkGPIquJcVh9qP9HcJjsOA\nhWp4NXdgwe7CYp+stHAdXxgBHWJEAGF4YfzGnEWRx2B2RxYzKVJ2t4VoThYl\nTxO4jYmcMdanUi0l7M56xlJ6Jtksjhxv0UHL4MrRCqyTDVJDWb55709+NUUt\nU77+JzItuDmSubEjE+ExoRbjiHgLu7cahSJvuNXsVZnZ8ioKBUPwpPJ4ksiC\n4jek\r\n=LNBB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/density":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/tab-scroller":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.eff7b46ac.0_1606260763928_0.5582349349334357","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/tab-bar","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.ae27b44b0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b46b2510654d3affee3ff0964bd718e147750a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.ae27b44b0.0.tgz","fileCount":37,"integrity":"sha512-JUdmiFvtvttxKqIdNIDXuJJr6R18fXE4UyyBTO4FpXzEYcgld489TeqfIL6V9rFyCanE7ChrdRxOg4FBa3Nd5g==","signatures":[{"sig":"MEYCIQCl/foxlhTylrsoK30jKfCElzRnouj61cyAXiZLaYlhVwIhAPsIynxKSr/IeNCe7zEH/eSVYnQiA6p1LfZGO6/GnhC/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnnnCRA9TVsSAnZWagAA9doQAJxL+XZV7EITMgq3iaZH\nBJ3p3kDLO8GFo3/G1okoABWtZQry3fCjq/hm3fsy7+wAV34q50omy79Zw39Z\ny1R7rpJfZy9X1mlj9GEQD761pxBiMgaob9UUNJazb0+3TJW6d7kih/NSGMyn\nJyAcC6YVlYStpaopeE7yKaETw4tXKGbq4xwFwvjesbocpjgzkESISXjAGwpr\nBu28yY14WLYGK7eoUKA24ysQgRbIupMS7yk8oP2VZW2n3xuhp7BA34X8RGP9\nBOPlYo/JcLqA5Kvsph6aTYX6oyVmRqMiYXlOGt4yTF03DyngIgg/SXJfJl73\nNnVX6A1ehjegYWJKv9vsBuo3ZFzWdLcmLsP50bCKHiZ00FP8HMPJ5BXgz7Md\nFLC9yvijhPRfj0wh1o960gE7HJlywrUfb317WTvrvDKp/gRaVEQXM3Zs015L\nV2EbP1jvzYbjk39emiyZ6C556UyRa5lmWegyTqi2qaSWKwJmUfDExCEh7hzz\nONxVWsEtpZa+0QLiKsCfbwbIrbv1SxCZphevyMbvs1w4apYsZpexph3uWkHv\nxBDaTNo1edBCZZS1wMK7FPhNdBp+AA1z74anI+TOnN3BnIgtOWAvU1Ll0d9O\nCwQFhaMSabhv0TaeNjFRg/s3TQ8FXNeSu3Xiy0ElMLXQJUDt5I2+2Oqi0Hmq\n3y0C\r\n=fXdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/density":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/tab-scroller":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.ae27b44b0.0_1606318566768_0.24347185537201144","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/tab-bar","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.2fbba2554.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef217efac941fe7c72fb367241551118a5389648","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.2fbba2554.0.tgz","fileCount":37,"integrity":"sha512-RkFPkK5GXBnqI5raSKvuUSzZwUmfepJYdVDB2424O8/5YMRaA1u31hrqDUO3DyOCmLFgMgk9Ch0ZQwmmPq3xzg==","signatures":[{"sig":"MEUCIEEZE7c3/wTZMoH8gQk5vhARIsJy/v3VmOMxc7Q7KyaNAiEA1/nm5wRGqJkSdOTiC0PwGNMUJmWYBckn/v2dyLHZkaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7tCRA9TVsSAnZWagAAU6wP/1MBLABpo2l2tfR/ZrPN\nmMVQIjiiNIiR997sn8QEASezMswMyMUC0C9wakstcd2AOh/95Xor3OWMhvLf\nNqz7K+1uk6VWoYimfq7boF/sWjyoEGo4jXla3/iYgCodYT2XmvSZ/bQkFm0/\nJe03M4vzDVZMyq6wimm5NAei29st1pV8i2zp1kYNCrk9laFUXHmPCy810gwQ\nwpbVDi6hFZzC6v1UCNTsBLG9V4NAgKn8ooJEzA/CspTYeeNzL2KmvsASDZ1x\nCA04NI+MT71ysH8iOi900YfEqPW+1T7W4RjNpiEHQFkY1Yom6wX/F3OpO/te\nuDhwGFefgJSXbRQvAivzno7I/RtTROhH/HdZnMqoZjLJOMIU8j0qDPZY0U6J\nb4lR52wfZRLNZbc09lJ6Ue0tIM9wdG2ORuX5pJ7h6iETTY/kRckIDafr9k2i\nVmab2KRATZO7HJanaXjdQoL2MSv4xYwKxfw28SneGCLEqOI16mLIdkyQtBgg\ncYgDeT+CYzQL1ks8V76i+hHnYU50pvYtO5wddI/elySDullpdCzdaHVHra2o\nPKQUul2S7BiLq/9cY0D0sJQ/mjOGALplI8rosdRS3kpZ2sHmav3dZYt/X662\n2vDChS1Pua/9ny7Kz2/9hcRVkP0zxlbBXmSZ2PsohzAjNy6FPuD0BmRbF9BO\n9x5n\r\n=nETd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/density":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/tab-scroller":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.2fbba2554.0_1606758125089_0.4871433689398632","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/tab-bar","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.6d8574fe1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4026a4f922741b9aeec10a88a98ccf88c4450f51","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.6d8574fe1.0.tgz","fileCount":37,"integrity":"sha512-cuylWET3ZIINwEiDwKH6arbC3IlEqXGPZL+2a8hDO7AgQW5ZOMq0JserlK1O4Jm+/P4Fk15+4WBWrrDoZgY9kA==","signatures":[{"sig":"MEUCIFy3znuhdhE9wZ+L+GXhkTZ9fmYzA8XtNFw9oN8UpVgbAiEAudLZT8p2LlkVcKEPDJllL7Q4c0er+KNaVqxRO0mTkl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTF7CRA9TVsSAnZWagAAZmYP/iiRGEhxbHJDOL9rvqqT\nlPkja0q5FGxEnCFaloRG3I7MsOyrZxqdVbVJSqxS66AKxbIfEv1iq+/9tVIX\nM44EjDwZsqH7E6FKNQyG5TzI7ZFtgq4Dw/1+EfHULqmunhOPPAQnS25l9fCu\n1oitNdoAG759SyonY38419nMqIQC2QkoMZpSwZzoKF5LSpQa37GjT1DVLBLg\nCFNmH/DcjR5HzYldwV2vOuVSoJwIhuuuDNKKMNB8wASoU9zxj6nK/OcKUdo8\nYdpF/iaQ295FowO7kmBjRjXBRY27BxjgYWIctimnheP1ZH/DwGSgS26iUL6R\np23cKY81LzP20dAIfV/OgbpulDwSYS+4AcMxUgvUYWSl9eNYwsErNabjNOCQ\nFs0XwdcnZ+1hgifLwulGa9nbmnmVCT874W6wZYCZb2ui/XGTPLp5SmHtB2vJ\nnrsFm6FsD3NKJBI/zVO+4u4CBQFEd7uA9cq7+CgXqIQAQjgiI94bo2ks9Qft\nX/NZd9WO6E/QPjdJAztVlVBDEEgShSb7pXLYNsoc4TEfvZAb3rMSRJX9vosm\n8FTpIa+kYYa2hdAqq3kPEXWAIsfYocCGl+R1JQTXpS86YgHlKMBN5VOzJedB\nVVxoVIPXmmextxYQpHga5RBzY/Sci9rUUkGDDVtsSmlUhF323h8d1oPLA3td\nYl+f\r\n=Ug/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/density":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/tab-scroller":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.6d8574fe1.0_1606758778700_0.813379056912519","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/tab-bar","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.fd22355f7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71ea8abb1c1677c4ddc299f3c733f8e3f91c87cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.fd22355f7.0.tgz","fileCount":37,"integrity":"sha512-CwdhIjwAhJqQFYe+Zg3ej18BVia3vacnQek0paPmgPIroWzLKuy6p104bmANLPk4OH/e1as2i4HsTfedKtsZEA==","signatures":[{"sig":"MEQCIDSUB1UBti+42z6lgWEbAZZiAOP2lewS40H/u/NjwdpsAiAfCjSqmgPeNQpf8sDadVzOkMtT8VvRih6OTl0Jd8TWEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXnDCRA9TVsSAnZWagAATQsP/2YhhwqrWOgYNcci3P+J\nVuYh0coyydKcLzbgkRPr7bslqJy5YfFcMi9ncBrH4zh6vugOezKFZZgO0nM+\nbN8HafmdED71xMccgkhu8O9Y21XUjLHzvTw6blSgCKx1yBl+jRR6NkyjAUEP\nqYl1RzOmaV5VXATAjlldDcskvqYGkWPYc8k29N/hoRPdr3qIKLg6LssEqoJt\nzDzYAicxcdf80b4V/eyxBZ7FXKpXCDQMQZ3iNeZIaS90MROUNvujszPVFGsx\nFHhYiSLaVRoMqhX313lSgExvpM+W+dP606/BQNjbh1wG9vZbgJ14XJEY0L0U\nnd4GYyUtjz23GMVG7k/4k/USLN7PgHSwdr0YZHSasa+vmRUBP/IwTnzlahpt\nNVj9IeTQtkVj6qdy8lzal04FA1PjxBwo58fjIg2dTOooaRh0MOCRxRRzkTIf\n8pNzhFhzDZDE7b8MrEZz1W0XW1Y/0FKL+W4sMMznwUTLtocnWxerLHD3ljO0\nhHguyxuuaMwQfNMcUK5I6HWY6ajBPiIrfvNh0ejTkCyQPAr7WYScWob3Pxgr\ni6LIFIKAPLme2z2TQlETGxX8VELdOwDBQG99gdBrUokYHPGLdAlFbNmQDekE\nvguPCA7TJormvNrpSBN1qwmcPyZ19Yj7uCchCTymnfVz+Xjj7MBXvCY9vbIg\nUcX/\r\n=fFsw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/density":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/tab-scroller":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.fd22355f7.0_1606777282828_0.8818882227717861","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/tab-bar","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.c4ab98722.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd14d47bbc7bc2813061b41a25727e60334ba34","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.c4ab98722.0.tgz","fileCount":37,"integrity":"sha512-VemYThs8B3RgcfcUSNxAe6kkvnXfz7qz1YdIqvr20gWGRbvARjl1pr9PgueJQe219L7O3Pu6eOeAeCEst6dc8A==","signatures":[{"sig":"MEQCIAYUAv3AvKwZp1lUhFZukzdeaRQggfI7dNgo0+1nQIzBAiALzaCRB+FRP7rb39qnXMYsqu7NbQw1wFJvEqEHuE5lhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxubJCRA9TVsSAnZWagAAAFIQAIz/6a/ePNJZ2EEVBH3k\n1vWEwqqswmJLlQpRrZ07akqd8iu9Om2gXkmWFzmf5hDZuMNZGSTVwDAJ4MFm\net4CfgREIrto6XJ6IoSzNVmF4tLsGX+z8wjIs5TA6v9J1aIpTtNTcUrh1iTF\nPSeTxM7cYLrLZuS1E4esZzV9s/W55QuSWmCIP8kek+o0O+a4qJPxMeJ8M3Mu\nXlZ5pZnCTpc7YbkbuhsiXr/MfTo3nprzDxH3JYgjN23DBGxTBtYWJ/gMkmm5\nV8Q5u8ejJ/Zzh+us2Yd+0K5VGFjN01OFL+rUu1Gi0hV/pHtT2E+gO3rl8ZGz\nalMvIN0yNiOvifqNqM29bWw1dhbRZUIHXxUZtn9uNCS9bP92Gz2T8NMVmoKp\n11/69s/UOX8poTUyKyNjUJWMaJEsVw25e7NlJWkdeupfvUF4qhX6HwqpSJ/G\nsuRPES0nk8KOfsOmePrEjh89kBSx0yURUB3sJEYZuWgY4YUjMrGWE8sfXU1t\nChrkOIyEREi9SzeouhbPTWVHTl6csBuo+07/pNLxL0UyY3LnkNbanU3OE8oA\n1j6eqHZM3OewEPU/lMFCi76MAQyiIBCffbfRA6E4OYC6Kot9LQ5b1J5+R6Ky\nDOd/9CspUk16Dijvo+NvBNPgGj2/MxrfleuSG2GSRJ2kwHxW2a1TL0GPjbB2\nsjBU\r\n=uTn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/density":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/tab-scroller":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.c4ab98722.0_1606870728809_0.1325339193248425","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/tab-bar","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.977585650.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"992a02fad27c6ff8d33f51bdc7d84e4e6473bd6d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.977585650.0.tgz","fileCount":37,"integrity":"sha512-hZyXcKd33Wc/tqJ19kiBS3TngMFbd68yM2j8q+zXzIFArDpZydlkAKa1Nr8x0ZjJ59O0kWUNtxVekDw56zVuBg==","signatures":[{"sig":"MEYCIQCczwWYMVXKhYMDnltZI+QI6XynH3h81Gco8KB0Lk6pZwIhANVlLL5UwEaF/hpo+Ro+VkXNTvgdD289ryhn49UolwFA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6g7CRA9TVsSAnZWagAAzf8P/Rwfbeu/UuPCtS1jHUWC\nKYKVxyRh8D44vyxgE1VX3Ld1OswqDp8O77pBsEF72yHSp1RGj4uzfSJTK5p3\nn/QlJKgR34JjNbkDs9vFj5ZHMLfu5KJ+Ls5mSlpbAc3U19dQwI1CV4Ns+CQR\nVrY9b7Sg65L4SM/Ml2PFCyqb1nIWR8fdPCItQwVy0bCyZIlMolNs2SFfGZ8a\nMsdfbYZaxgZN0dGCeeHvWSGbX/M9GFcQcT4ry20lNyZPBcGff9PeaZl7p/e8\n40S+E4cSuSayKvn72JHMECiLHgcJxsp7KXfe+D6Nwi+RNDBXCWM0hUa8xwsu\nwxLXl/3gbACntGgWGR5GdxlnIVRA3A9PHXFZS521ev/rz6UXDmXO1irVlRWg\nX0KLU4MJzAHeP1MjfM2iS78Y3mgm03ad5NBFiZ80v7LsL6ydTekZ8+mS3X28\nvPzkXfjq7UeH0RxpPsue6ezuvJLgA4s6lR3s6aEfwpfttf+slgLBqx9Afi+m\ncixOLXv4ZTt9P3Z42GYGJ9CjVXbTDuP9gNJuv+ndFP+M7QEwDFJ/G4uZiqk6\ndn3oSZew0YnYmsvYeX5SQ0cHN2uRHEYUqxUANrw1/E78uFej77zRPHGuVmlo\n8O14UGpok6f6j7ra7L8SaL576NbXADJJqQxTrZHbAeCwS22cFEZZA+bZha/m\nDndL\r\n=FOgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/density":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/tab-scroller":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.977585650.0_1606920250642_0.843873342714174","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/tab-bar","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.c7edfc7b6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43176f70ca3a1132dd876496ff0e23046d211c8f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":37,"integrity":"sha512-ANwVFWCZ/FIzckXc4LomwgdIfsC9yY8arHFjdmPzj/S8Abem63btab1QW+14prfb03HkncItRZRuZp/XbtWb4g==","signatures":[{"sig":"MEQCIEogcjIkj4ng5WBv//hRc6vujXT4pnxKMdOjYKHu43UwAiAg+gbkH1p+VHYISjCibKiE9FgszLxie7YnB33x9ki0DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nmCRA9TVsSAnZWagAAlmEP/RW1q/PHZ0MJ67zI/Hx8\n/NnhBFemGIL5dTFzcnuLdPtco26upKd+xD/FG0U1+tjYuK21cmitsqTEf//7\nJPalNYpt5gH5WB6mIv9VHUlX3YXXV49uD6KbW4xpW9Stjuaccicy0OKCr2LQ\nRocuzhh9LVo2EkkQVeKcAxGngupxzU5hqDRGI37TGTc9s/An+QD7PtihwKoz\n0ziN19XcvRHsyrvoF/UCr42emBs99lChnr1P1pX4nhoztQ2X/DsIZ5jfSN/U\nr4jDyRt7GHZB4LXAkn4O5l96asqXdji40FEO7XGXyPEmVu/Tkl5HCKr1kPHW\nnyhNJQ5nfHFjeqXUqHnpuKQ45vC9l5oIR7ccKOBCjOUdUrWqMH+0TrmX/cTg\nfM3hUaDBTSDqmK/2dqOZxjGX37Ql4JIONKaovHU4KObAT4D4IyetvzPtMXij\nfLp8RUN9F3ejkEWr6H6QTXdi9pVe+YvCm/gU2N6Kw+Sac7vuqCirZ2Fxx9Qr\nTwZkacsfIzTkYZRSRPRNsJQFc/Vs/pDIQCtYMYDalR254cHt6EfSR9LCaiH2\n88KEjpFcK0Qosoiy4xBb97oACe+YqtFgZxkEceGVhuFx3j9NavjheE2HJ6bI\npN4lMqMPY4NJjP7ll8M+CY5Fsp78WCDEfe0DtjcaRBoJggi9Gde0tCmkI1d1\n90pk\r\n=H8Dm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/density":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/tab-scroller":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.c7edfc7b6.0_1606920678318_0.07806369893872667","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/tab-bar","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.4f3347306.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2c76adbb49fe60e7282edbe238dfb3e815bb49","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.4f3347306.0.tgz","fileCount":37,"integrity":"sha512-A2+p6AGS1EAXKETfBrk090g/v6KenjUNI0KkQ8cetTXhvYrrQtRLhq2JjNoDhuuy3j2+AhjwcVvJSoNjPYMDoA==","signatures":[{"sig":"MEUCIEBedA1AGxDrS0pkvVUXt3UirV8Pbj9Nz2UzZ83fMOEtAiEAuASUAQLBDFKr0DibzcEJmPVf2x3c1VhF30gnzAeaBFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64dCRA9TVsSAnZWagAA4IAP/29zQ7FYHvt7zB9SaPSG\n+JtifGAKQI48PRNbSsYK4lPYhgFcfo4zqb/bMGtac0VxVajl9RvhcTv1M8UW\nD9fDeFtuxDoLokUXz0wgwwHli2QD59U2zQaIsvB2e7Qdj24Pwx5RjUqBAXw1\nv5WRRw4/fx5tBsy4epfBZ+PG6GBAQqM8V1x7n/KAGWNM8MU5xhpjbC7jDqBN\n8deW12MNOrezTToFhQyHdpkwDXIIFHJbrbuJMrkKbAkEY4mEb0BXISAgEfka\nCcMCVOzP+Wd1u8LUy76ylP4lygsULx3hdhXDQgnq34xdpz3gcyKg6GJ4uyoJ\nFv9KNFoyz/oaKWdFxTkhsRVpHhguc0+Och6HnoaoY1oihHomhVb9eRfVYs5V\ntWr9nTH5uww5uWAqEPedkABv2SK/khT6xsyUKfKi2F8kFMzsTzdaUX4jg5/B\n4clKh3P+igpFu2Jsu5QjED0N2kAkcxHJtbGsft1Oe/BVDV0MOoUJ4pJa0b0P\nwuKyueUm+gtJ01RFd+Po9hor+LjdXg+97d5bM0e6RCs8yzaHJGc4rYYXhj5h\nm7lhFxB3avCoPzSm3d3hy+dWUkTVWYBVJWpEeyeZdRamZVFyDLGQOyeWJPo8\nWDppX7xc0e7o3omceQjbxY1uJokQ7wZFk2k1rjalAw2CFywtYR+TT5HtSBFN\nqxYj\r\n=nT96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/density":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/tab-scroller":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.4f3347306.0_1606921756536_0.6309442282659685","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/tab-bar","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.37fbae10d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"133ba3e07e099c57f98b64006378e2823d4800fe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.37fbae10d.0.tgz","fileCount":37,"integrity":"sha512-G9lrnA1SvEn0U+1gvMrX6DEfAjWgX11+9K2oU0tK1idgYOP2nxAPHatuVa9MQeHTSxsGFHEWdkSAcLVqIX757A==","signatures":[{"sig":"MEYCIQDCXpK91PRDjlaei+Lt8Agtj5dGcedhaMFoJXxUsIMmswIhAJ/IERytMOZm2gVlt1EdJN0wLmDfAXyQvbNrdteVXVou","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9ppCRA9TVsSAnZWagAAEdoP+wSOpa7z55+fCgtaOzao\nlvaISpxXG7RcciHw7doZeX7wh/HFP/j/JtbWePTFe+aycmSTt89AjWG+i1A6\nDwrOjFJIcmgmYCBp3/f6u1xJWZAzUB+qmpfrIkF584JhMQpQc4zUv6E7Q4Pt\n8niSuCrSlR0eOdC1kgX7r13bKAf6r+JRmBkgN9t4GkfQheHiXMjTQQCWQKVO\ndK2KcBBdhCAiIphxPAIR4Hf4Eb+qkqTKinyDpqxieVfnsRuf2bNkIRfEM4ss\nNdNCNdUOz5b8fB1mxduFLpcr2BriJwzPW8DJa1QRU+XxaIKwlvZhTIFU0VEV\nerB0F98xdtr5GKheDaiTXxfe+dte0rOMmV7Ym4w9VqnHTeawqHltP79MZKaq\nV25fyh9Fw4NOA08/9eyY4RdvCSuZCPlQ9c8aEYyyV0OYB0coiHXFbsch6udN\nVwt+XcIym7D0ZB2HXRqv3l4glr8yWb5dSv8wf0Aoy0jodEEi8JowrlYL02wq\nHRGM5QngLxBAbftL4snz1enY138f4JdlHqi343xvdozaNmxtYG0zsJGSd4tx\nV9+alY4cqum0qdt8G4r3O6XSpB4nIs5cbkMsGBz7mZOnsWTAolDcjQk8O+G5\nPjuwxTtFTf+DWf19D9Z2+9HWSsIMonqHj0PUtmmxPg7ErAsRctGzo/QX5T1r\nLzpr\r\n=XXTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/density":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/tab-scroller":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.37fbae10d.0_1606933097080_0.8141627343739806","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/tab-bar","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.11da3c0db.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd79a3c2fa932bdbf47fad67849909dcb72e3cbe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.11da3c0db.0.tgz","fileCount":37,"integrity":"sha512-aO2mcCEcFxa1AfoJ3/No8mMsByjzE6Zg2ipP8TDJfXy0e25SUk9P9tyaQPboD6uuWh2bqDtXJ0DcazX20dwFeQ==","signatures":[{"sig":"MEUCIQDxUxE3Xd009rAK8Era8dTCOoqxo4c4fPn4I+x4I6/K6AIgdKwqvvso3bE2/sfK9E5jMeEu79/CXKcQqcq3DXv0NRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/ftCRA9TVsSAnZWagAAhf4QAJ6OkNYDZBJHJS7o9iwa\nXEqC0dRt/x+GOiRbzVnJc2dUhS+QzB5Wq83jEIKpEzjoHdqj+2UYi7blzm2A\nb1GY2B7yc3r8I4zzxlIhD6yHX1bVRbAfZXf3IKD6EJTvHgDpSvJ3vE8yRHMJ\nuzZ8eHmCaaaIverrHIot/ilILi5qA29RHhtUqyzRD2Tk9GeB5G9Bgx4HGq7h\nNuN7q73PwiRUQKznoFRMO4AHiZVRcsUogmXL4cD9S2tBKaL1g7KN9wvkd3rr\nDmu1nKTynkDkakXnN96xyMqakBEkiZl8LcVQSRgGlIhWBwZLm0aptdNt3mYH\nkEcswXqogkhdve67ZIDU+4OFam/Z5c8ok2UMCuN1N8nA6KROH+HByJp7C7KD\nSkx1dt3oEhFBENzlCZHy+PHWEBOQSFUIk5xLfn13MG/a+pJ+q1ZYsww9D5tx\nMyJnXDFePx6xQ5rQgeHTp04DPDiAw3Y4G6jLcvDSSNKaiH9Evidon5aKw+Be\nRe6O5FAb65+vU9hSLMTLEmNQkHbBdQ1LATcWFUkgOX4DnSEVYcMT44Vfib9I\n7UXhd8qx2nTXiOlfKAnP7Fy8rQVlgWxofHJq+bvnPrndLOP1LDexorFPMS/7\n/vwtvL9cpvA2isPMVQv0srHtLIbk2yyMMSmhb0bwyxSKJnuzcstvtgM6+8Oq\np9um\r\n=MB0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/density":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/tab-scroller":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.11da3c0db.0_1606940653277_0.7236379483271134","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/tab-bar","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.489d4c219.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c9b8e095177845d05ae60f4a20375d6144e75f5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.489d4c219.0.tgz","fileCount":37,"integrity":"sha512-4SdZQ2L3oMALIZGVixbJ0Ww86V4cM/SJyJFi0p6A/70tCuWnfUgajgISAJxVMRpnxw6Pj/uLlFUqkOZ0tHCuTg==","signatures":[{"sig":"MEQCIA0W/Ma8oxtu1Nf3YgPvSnd8Pu41gz21xrDOdU3vQY3fAiBT2wc6NkB1kcVPyFktcpJbE4CWp0luHP+fgkLc/8w0dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQTSCRA9TVsSAnZWagAATKkP/ju27tWw/0T0oKLUQNvh\nm/4jebmoRmJHJH1z1D8YvuCwzfrQY/CrYhmsTBbcr39Kj33DthNlSjXUzVvz\nJFirpDC2l0rJIoShk2kPe1PJkT622xXqCyjjU0MU66gQMVwMmURqnuFinzgR\nFLq6D/pcifVf2j29+rLAIjRjGPI7ssEz5MW3vdcmxTNs3loYKSCsDZLEcQjL\n4QDE9WXG/qOePE5Ufity4qjNH//eOyXrSBoduxxMBwYsE2ODPN7GonhWRxMX\nOAU8neQYjTrp5yiLBapmC2XYd03VtojAhMolNVagQOoUwRdLuBnVds6ZyUKJ\nE8OYXkA0oVq1fbO+tah/4YUblWRY8q98LLgLXpqtXuAai0ZxS2qB18+EOtVu\nEqVZDGQGeffcIExGduXUsfQE/hxaBUZlOBiNP0rmnuWbSWKDj08NXTnbIZUG\nPSzbpa4X3YtVyWis7ZupmYNRM++0Ntox/jLRFoByuWiRLPgTUJOzFAShs4B5\nn+KrDcbz0URcTnQlf+aDcfEVxWagt2lzi1wn1F+NUVWl0kaAIvSVwo+VD+um\n9tXi+xJbUgk5N8DP6W9SkXOu0QYGd+BAe9jG0KxMz5iHIe8mcLcjqTaCwL8o\ngmkgkVexgEVzj7502hF0M2Ru9ESGOoOZyqBZk3b9ldjympnkE9UQYufc+ir5\nKyl5\r\n=nJzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/density":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/tab-scroller":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.489d4c219.0_1607009489715_0.9858664303988613","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/tab-bar","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.6557a69d9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8136476663341d2ea2faa9bed1e55fb76c773177","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.6557a69d9.0.tgz","fileCount":37,"integrity":"sha512-2C/wilcZJBPNySNGh6KaLumyV31UOEOKsIvob4KaP8eJHAO4Fwi8oQU7ysQqqJ2RsqOo8ssh12QSx2gaGWo9tg==","signatures":[{"sig":"MEQCIE7H5YRHiMddVchHgv1gKZxNAVY0rAwRCTqHYrg3JHKDAiAaqLo/uCqeoRGWZbOmZx4klUMcDOsQd3JxsHzdB0d6Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQeeCRA9TVsSAnZWagAALoUP/iEnfcpfnqfW108Oj7eq\n0KWs/pSOqDBwGjODJWIoIOpOn3efVCQR7egOAfFN6oy8PaTVa5rYEpVz7kg6\nF7BRpvAnwYMuFaoSbfH1jdgBmjNE/qnybI4Cjyrl9qmHjZUOLcT4UelxmohP\nuqe5wlWD3Z3AeKg4lqGkpLneM3pJlthKjTdDOXFDGNbKRmdg5361KSos10p+\nVmxIAkQDatihNk3g6VP5fxbDKz56cVQaGGIssRO6h4j3Hb8O0cBDbs4J4Bw6\nu745JlKZWTchOm1MVzwN1GzIDoLDsEKFJ4QBPhOSZc0P/5y8WbKiThpY0PLd\ncKEElSSijKHj2TS3QS1cX2zyXG3SiREugLL+/zWRRwvx1TLG1bY+ORevsEkJ\n0Z/2cl3+Nu3OuFMdGMsWr+TGjNSYqpXt0NL0gGNst6YovqzChhKplNZl7wmt\n+uVa52788zS20iIzVfSvrKh109RXnZW7U/DZzjVK2jZO0Q5uS3aMmAIsjZJi\nHgQ7oH+gqwcb875eXsnGT3We3CvxIe++v+vu5s9lAiU3v+rAf33SEEwrd2rI\n2aaUqra/cUwo+S7D/E+7ZSLknqS7FpCru2CuuV3ZWOgOUbe3YG5eN5hZw0yn\nlEUHeBk7jMUPPXhKZfPeSapZ1h8SKurKAkxo07GbiRv+1ousXGrQU79zUQ5L\nG1UJ\r\n=erDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/density":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/tab-scroller":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.6557a69d9.0_1607010205761_0.30627024582624585","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/tab-bar","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.4ea1b7c69.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e6041a72d5baad7139e5309628a33628a38650d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":37,"integrity":"sha512-xel5Ds+x8bynhXchW8IacCtPTilndTXzeRujvXmRJzfSEVlzbxkBRWtDtEM1EMR1uuzRiDEWnnGA8TYsWkdxrg==","signatures":[{"sig":"MEUCIQCNGxUXxR0E7NIYY99QdxQhdOKvkADbthG9c3TI14zDkwIgGOnykfnKRLItN1lB3bm1KnOY8oAt3KcqqYsSpXPFXQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQu0CRA9TVsSAnZWagAA8LcP/iacGc/McDyQk4xxcIqp\nGQ9erxygergerKVqDRNGv+y5WMptEgnDWy5ARdAg0zjvntycVuSUgQ+xhgwt\nESpwqPRkoEaj5gQh6YeQrcQZfNa0GyOs4z9vetATGbP7GkrkmTGbUM/pDodv\nO6dDzzpax1wV2yBfJ4+y8N0yNDoliRQfIu/9tzmwdsOg2JfTpCvsez86nQGy\ngsw0iq5/Vu7ezFwB9vyP+z1UOvXMT3NUdKWTDej+6/3/iwo03Gtd8BpZ805o\nsEjSssKaQzDDXJ5jOTOgAzXrtK5tm47tqLXUcf7+Io0b9MaXuXL1u/wvLCnn\nXXWmf2P0augXmNTxsONWhdRf3YLq9YabuEfNbH2TDk/fp99kHCZwsFwD4Yov\n9X5f4oa4fwX9x0uuqroX2hSP55r3SbRQHz+vA4Mcku3DRlz27RVfbBU8zZqi\n3NpTpfLh+UPgP0LGoPqggP9/4ysnig3fGfQdkIwZw5ulKSzcsNEeiYX7ZuLS\nkqBpPoIdBqp36n5wjoc2s16NkNHPUOmB8p8SkrIJTKGJLqJAxnXM9MG/QiUK\nUs1t+s2cnWfHwprpDi0+02fyD3wXnY+7hMSZuaB/yIJVqk1wSNir1ZiZyd8e\ns8sJVsr0D5ADrPMz0S3SDmH14KTa9RQ6HZdsxFVmxJwAkeef2kWBLvf1i7oX\n9nw3\r\n=wtK3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/density":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/tab-scroller":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.4ea1b7c69.0_1607011252329_0.2497645698800235","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/tab-bar","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.eaeb78ce3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0867d73f1a1aecc0148e2d13d69e9d6eab0e7c58","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":37,"integrity":"sha512-zPIWhXxJqT+nbzs7DLDztwwxnDrtqXiQa49YnMj8aRqC7QVT4bcciPiMIPElG8XvkaFthd4+UK/kiTWCMCOXLA==","signatures":[{"sig":"MEYCIQDxl7thD1oFUeyd7R2PAAmrYBVBW6QG8vcpZHOjsZtt4AIhAISKynuIggbqqdfuby3XDHK4qZDU8y15N72+Nu6Xd+IW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRpaCRA9TVsSAnZWagAA+RwP/0naiGecfULJ3sVfBn8r\n6TpcpMe0n6nNQ8vATBBOETLV0moqRm35cq4LXQhHHHgnc0UeC3UboWY0K043\nhDzOQwDaStTtryJ8NmUEQaQtiCXE5n44k0WC51pmKxa1xE5oqayLhbb3iMvW\naDTw3GyTxC5JPaBFq7gPefYGBxzZ01UvtWEVtU6tbJfd8k4Lf4Vcbb7RIij0\nZOBHCM5GoO4pyYMPK9cLso94301qiSaR3fhzb6Bp+ZCfem09WEJqfYdX/glF\nAXGseMxsDBOHgBDw4ubcJRN+4dEkfKyTup12fETtzGj0PWK1WNr/z0U5NnDm\nQUeWblx1yVNnNhqIbl55J76qWeBkLAU+LZppC/S8I1+4otcvGP8kCx1I+y1n\nX8UCijcSENALvLxgvfkQmWcYWC5F3+/yQ6hg1EiLe4zNgU70/YBjVWY/vidC\ng6qmIf2U45qNxC1weA59QAHfL2PU85gRtwlYLtCs2/ebDfA6wVQQzdlTkN+3\nSHpJlSI8wrPAU5DHUjooSIEj24kZbqUFhz3ESHffuEr4CBoFxstJ+VHVmwti\n0S294Yrq1kGP9Hk0feoVKLc0pfJQgX2wGwfRUJlBFBF2AofD+lnlOD6nZ1Rb\nSgajrtrcB+bbSsJGGV/cEh+rwgGHJ6B8oSvY6557VMDMx9X9RVobUMoxIgAe\niegS\r\n=anbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/density":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/tab-scroller":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.eaeb78ce3.0_1607015002002_0.23845735777115262","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/tab-bar","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.1c156d69d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dc2ea7317410c4fb054b32d88dbbbdf9c34bb3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.1c156d69d.0.tgz","fileCount":37,"integrity":"sha512-wtpMK37gxkpbpdTpQh3IlHXx/maUyiYiwRjioIeh3GFQ42ZXW/N/9Ou2HK+qpiGVZDREYyT9TS2U5DiZTmM7tA==","signatures":[{"sig":"MEUCIQD3kikqBa8VUKjIhPJ/OXuc/PX8oL2uMP/vDfTZlmNW6wIgPooYwiMYAWpIvzj4PaTWwMZQ/EpSKiGH1AWoY5wDKb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU7ICRA9TVsSAnZWagAAoHwQAKRh59LKb7865Vf0su+d\nbL3yOvdtFiCfgXLqVyj/GuNaOwvnomRVLudnikqjlJp8ebmer1/f1z2IeIx1\nRU4N7OjP+9a7J61bxY6+KrX9h6mOv7wYiciMlt8IPx0o+pLwjjuOD+htvQeX\nyr8ZDg7G6HYKO75OpHZ/9acR1zhLzfSXnWLt+vTbB0r0VxaT81WC5jjwiX+r\ntn1l7Wn7xihP04jixEZNQHgi5THaNVjH96uC2fnjKKUTdEaU3dHn/GZSqC3U\nTM7osZYohbIXA2xCXZTd3v1CMXoLJNPIZf965Y9qZuHVcYGNEzT7tWGenvpr\nYWX9LRZmwioD6JxBejQ2bvA5+wN7qniz4VXSozZKybRkGlo8Ihil2GUHhSlW\n0Lh7Yj8sbCIlW1LXMDr8e8h8pY+B3bEmJ+G94biNjx1c/ET0vjt1T8w7fnNy\nVotVa3X66MxFlPhWwWXCX3G7RCh7JTA5/uKstvVuWgp5Od2Hhgy0aWAeNOrK\n6fremsFCCTs3Ar5Q1rWAA+tOikrB+6Z67BB7ptxTWcTVv4y1uPlylW6PyiZc\noCerRSU7G1sPuHpz9IVgudN1MMnawnxzsUkctVSd/H9DaswebObQ1f5SzcYJ\ncXGhheCtjXHr6lXBZzKExfXgQHycKdOg2snNL3Erho8l5BDKws/zaYiThJag\ng3tS\r\n=QLk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/density":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/tab-scroller":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.1c156d69d.0_1607028423497_0.9411323915478635","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/tab-bar","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.832668d33.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5102b000380e6d4395e1df8d3dda00a78f1504c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.832668d33.0.tgz","fileCount":37,"integrity":"sha512-MHFftR+C+qGiQZsrAMBHuZ6V9Udffw0/8pTjUhiX26hFYqt31TcGjn0tiQbKY0Qb1hC5QqyQgd374tQEYq0xqQ==","signatures":[{"sig":"MEQCIHyVDFoSsjPru/xgMtKDaLTCV04Cc0cMa9IygeUXrsbaAiAh+T9ksYTcS2crfY/Q5opOGq09OXLTPpaf+7+tP1SEig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrvCRA9TVsSAnZWagAADVQP/0vcmYHZ+LpwKaUkjbzq\nWzMKJKglm/H4uUxhZWPjrMbeobuMPHtGxmwAyP2RNciBOnwZ3uDkJ8KZkcoO\nwiZGxccPK6GrPZ5tmZOq1u0LeQXEYEh83FbrrujJaW077U6qMB8sxgFH1rdy\nLwcNpuI+ws0mdAmu6bok7l4vkRZCB7So3Q/oOEdJB1grE+FH53hv2Lt+alIp\no5G2po35EVtsy9DjoFgAxydZE6fy4ZIi/Xv05FGM1Y08lYQwWXNA1T960jg9\nCPatdekvedGGJW4ZFQRsWklmIeKcbehOw/oGBvpCzi9a/KSqRIM1pJJxttqP\nWZSWdGlDK31NF3fF/AXPn3BFDvNqjpG1AanvHnijL6UmNq6aqntv1e7/MYQO\nOn0VqHCfmFz5sS5jSsZHS63z/VUU/5PL/Jnulrry9sZq/2XwqeBl9gX+YnR1\nbt6fa0tjqIwaptVClcC286CdLTiK93GCRl+9Mh0NcEdTehCP2WL6YFpCK3An\nTwATltWbErzYSDNCyW6iCLzJZMN2b0Q/qU40Rauw0oviDAtMm+kiXhna1Y9F\n4LnaoerRRPPolTjnZtQhXbrD0k3cGAvnO2+fhpcbpG90os8W5t8r7OMneKTv\npW6wm93Q+Nd+L0/nl/67uku5uyR92IWGRljRg9uDZeOhpYcRUcl7ipN8Zqgw\nTPkq\r\n=wiwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/density":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/tab-scroller":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.832668d33.0_1607105262797_0.10911635614908355","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/tab-bar","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.4321323e4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7152b5b0740d8dbc1a66745c91bf452f1724162","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.4321323e4.0.tgz","fileCount":37,"integrity":"sha512-+m5XXt+xtQybgR8YW8Rwbt8noSq7f+EPm4WJLfs9u2v7d/SAx4UjotVh1s3S2qbT5p8n1Gamp7reSoMaoRhhiw==","signatures":[{"sig":"MEUCIBSBDmgeYQ2fDnqR4YhKfvSlouPpR8zhwPLJFf6Xew3+AiEApazxw2fhMSPDcHswlVuxrHIRmtV1blvdDhrD7cy43lM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJiCRA9TVsSAnZWagAABNEQAJrklq7T8sjoXw7+tDeQ\nonwOk/Rlx3m31B6i8h9h++wRifWNNQuk5o9vcE+krOmZYmWf1dJNtc0JPGcV\nyPvEG7mtPdtT0+j95pBRnNl2QEaW1nyObO4BZmXqri9jGOHjQqZJV98CAH/G\n24/DtN3nZa0TVLTZ2tNIM3LRy74f4uWOtK2My+9yEjDiVz9Poo4gNyDZodhm\nSoas3PU+Iy5zIHhBjPOfctzSsoZ/z74B6/ejb2ZMPIqcoWlYwMhpYaB7Q0w+\nqhTLpFh1V0pjlRjyJMg8fWgKuXP5j3K+EJMaNSBaAbb01fVZyooaaTvYoRqU\nqVOigPYedlbENjUichZGve4uYioKi7egZjTGcnqhC2/uZCbGsFdxVkljmHro\nhJhBOWdmdfesNX1dDPpuSqmWUgCqkpiYr09iV0HYhdny0Y4eEXsYLZ+hByBi\nXtK+d2bMd0S63wciBWweI+lAckvAU5zr/EpUnG1H1tGP8n4fgBVFU2jeaUd0\n9GNoavntTZCY/AyzoU+ANGC15kVo6i6UncIk0vLDo/EVMQ/Bcu1JdwDyVEqh\n9CJjx9A2S2KMRbQEosYU+TSt0tsNv+i+ZLaksS0TJfe4AFODdz7405c5Npvm\ncQyzNVGC2Mlr2XI3A0HnyN/bOlmjB17xB4Ac5iT1kkYiRhOHbHNOH903ud0L\nN6oe\r\n=OXGt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/density":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/tab-scroller":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.4321323e4.0_1607340641679_0.5248367463619346","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/tab-bar","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.2d5f32d41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c138ffe82989b87b5c72ba8a8114e7f7cde9064e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.2d5f32d41.0.tgz","fileCount":37,"integrity":"sha512-3UaAQL1mybUzT+abEdeb53FkaMXBVQ875Q2r0d5021krjXX64IQP2u0vPWpSLQlLgFl+xhheG5BM1qlVWDa+nA==","signatures":[{"sig":"MEUCIBlHkKASKFB8HqHNuNGcP+IZJqeGHTaASwjhVIEDUYUGAiEAhMhzTq14zdsp9wlIXWCtbyUEjmyvMXVeK8spzp67kfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlvWCRA9TVsSAnZWagAAOHMP/iig5oSoErshdM9RD8yO\nvROIvRandH1jwBXhCdx8ihkiUBCxl02czz2nNRF+bo0jlgq91mKCHq9xGxxr\nk/Rgq9yIMEA0jPPRWXyIaACv0keuztG/MwHs2i2I+SrT0xkkKagssneFKgPx\nzJFFcMZKFTfy8s9/IKiTRSdzN94dhs00vrQuATBuAhIWzeUzPUBZ54k+B9k/\nUarsm7SUVzKgph/yo+MXuRoSjzDYCxi4sUVxU8W8PClHtzEMElLxwlDRIpo8\nfZLriyC4uWKtGOSFwXFJpF0UmutQi4Vz6pW2kA1aohs0jgCETlrlpnjEWhki\nNIzHEBqrzmYwOta7A4DoOERfIttwaDSMXN5IiIxrCqYNzrgzwOHZQYHha/L4\n23zomgnWNMH3Cf5VbgsVlR/Lq25FMR4d5xn1BfK7sIh7yC5I9/fciukFA5nm\n0t5TWt3FW9ejiW5qq92z/663eh4BAZka1c2V4cdGWn+3kWIRMXOfojG2JKGs\nuEsezITK7DylA4/FFRQxyDzGog4zdExt6bGuDz9yq39w9d0cFU2qmXxXqxTG\nyWJzxBKxOHfRC4Vu7LVar49Ox0XofmVmYFIEUfIrzzO5foaHpWeR7g6KbyZL\njFpuhY7LWE0aukm5aDqmn/eM1kXwvMS0yj58chG6vBFLXJ3LpvV0JRf8K8YC\nP9y0\r\n=Vbkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/density":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/tab-scroller":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.2d5f32d41.0_1607359445609_0.7706591954889397","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/tab-bar","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.8239afc64.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"514e99e883fef62d193bbd77dd06c73c15edc1d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.8239afc64.0.tgz","fileCount":37,"integrity":"sha512-ZhKuBswvLdD05VlW3Vv+5P1us6zyeu5MFSn+CQBypYjjwRzBAoH1VZN+l5J3sVo5urMZgGnyxnTWc+4DrU0Qsw==","signatures":[{"sig":"MEQCIDJhi8EXwlrLVf3h6VIgQ/r+m/A5DmNFU5mVqg05ZP0SAiBp+6mY/d1dDU9nwtYB3l8+BhPog1TkmeLZKS9B2qH6Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoe1CRA9TVsSAnZWagAA2nUP/RSsokcKHQiC1aItxUDV\nQBkB3tu3FuKV8/kcXGBtg3GklQpButASouVhIIUj8NihVE18/9VwATO+gm2u\nTnJtQeand7pkGeIij+U+YbVaSMod2FXefOO5LP4dzLIXCYHQ+7OuouR+kCZM\nBgcV0ztdZT7SazKxkCFQ0IWC+tDxyz76HuxGlgrFbT91XoeDNGrcTqmJv7rv\n91JGmiyhUhQ5MxqXMM41WHVxwPvmzD0F5aQDBu+0Jx7IvKkahm6EObbJzr7P\n8hBLZZQ1XF2RCQDVV9Ov0I4TX/Ph0t/zN3bPWIh0tcwMThZZIleGsnIq8cq3\nRGFU706OdHhrgCV58+m+Af0Kejjm6784de8Fnb0qPfggkoRDkaEyTs4HINSA\nRjKOmVFhotIQvZD/k8oE8kM+wMYWAqss2qaFVTmJ6w1qkKrp0VlWWCM2aEFQ\n84oh5dO6hhm2j7YTTHCbdLpM365cY5KpApDO2Ai+UKh0fqb4l6zUFY5vnh72\nOTQyg2j5sHtEQhKhCDzF4d0R1HLhz2ULPn2agHi0sKV0Xrt3yPhSTureRWkj\nLizrVqMTlbO/gr/jfOYCxmJvF8OL2/LADYltxgprlJiVwGRGw5BXFbEIt7PI\nNBQgK1hIwaGxhg00sC/TsiVo0WXnDg1ATSueI/S08mPCjMQbG5iaQ9YdA+NY\nlE4L\r\n=DCsP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/density":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/tab-scroller":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.8239afc64.0_1607370676543_0.966086429888855","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/tab-bar","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.6871336f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89eec0b57cdc6253a58d9cd7fb18c78ba0506a66","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.6871336f1.0.tgz","fileCount":37,"integrity":"sha512-wVwaYgWz2rNwtIprywIb02dvCDSJ7bkDctkVEE01iXvNT0pqHFsdCvbg8VTXuQ8keNqd0FEpZ3miLZOWo/j3Sw==","signatures":[{"sig":"MEYCIQCC1fSH6/n7rzxbkzEWlvC/6AGcdyoOEIj9NHo/TgUW3gIhAPg23yhG5gavm87FXrItcCY+GRYDA/rs6TVIZja0b3nA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6PJCRA9TVsSAnZWagAAaz4P/1o+Fs/xDDRXhjI7bizw\nhvAy4mDe3RgXYg0JI9Bn7p1hMw2rQMXTR24g8WZ1r73lOZ+u5ujqNXgRNo6H\n1+8BIYdNI5MmHrOLMv4g34rbFHsvo8eW1j6vBJ3vTLgEK7f9+O9AMv94uQb+\nUaWrh69rW65PnjIJ+cMcd5cuIbTHEu30qPghUht1oCNrA/q08YuBGb2EvCSE\nkkhQ7+7Z1ZK8DLUrkUWgMY4Mpy0pVxjFGRWNoAsgd+Sh6VeNbdcV4pgw2tt4\nk3Ekcc5JJ1vx26duWTs/MwN4oyChsRvzu56goHgFXSKN7tH0oamO2Wq7NoK9\ndyzDwbfi9IV1Tnm6y6WUuRsMxTKp7luhwnSvurXGP3Ga0RoAZFKEvG5t0lgZ\n+kQu28EhdA8wc5Jz+X8pQz0vOtx/LYUinw6D5O8RiB2iDQUuIrklNM7Urc+W\nzOVEj1z/32rxrEWuVSMOueIEoDKTcEruPP30rpKKJsm+q7Yyv1GNZ+WqfksK\nfKQvI/dNcD/tVblV0dF/6vWTr2XqkGTmFHOHK/JvS01qbHEUWNMVkFepWtIU\n812AVjmKmc5Wejkc0ShD1J6YwW//u2e7N4CkRhdq+A77Cp3wDokfqIsvZoDo\nvovyCqCiJNTh7LCgGLABBHNoXkiwAy0eV9+bUiCR+DUBxS5V9LZEWtUo+Z3y\nwfTk\r\n=4nSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/density":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/tab-scroller":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.6871336f1.0_1607443401204_0.011272403797830455","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/tab-bar","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.9f718da94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e7e3dac86547df0b001b10ad726f4493ddb66f9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.9f718da94.0.tgz","fileCount":37,"integrity":"sha512-nr204PeCDkFJdKshWNya02syybu9axhpvT/QDJ7jCRrrKn4Iqc94qtRXCjScDM5BxqzE3zn2q47YfvxUQRkRBQ==","signatures":[{"sig":"MEYCIQCdUNQtJ0AO0aUGW+LHRfZpE0Sd8C2wYBCdOk121dOGJgIhAM+L407OFhv/Z1q2/aZ8cOMvuiBIUEVzSxho0m7p77du","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6aMCRA9TVsSAnZWagAAPQQP/RBYwd+d3DVjuP4xa6eP\nTZ5GY4KmXeQN5VxswQYC5Nth9nV7F0DQ10ksYiaNqW/jnZEbCQ+zWEWzzBEk\ngjL6MrJsqWoWUD4QEmQ5XOWexZ9XKfXtUx7sokP0Wcz3TV58WdyHDxItFAqd\nc1xZe6/Lx1FWr7x4MbS6Ukg3ZUe3j11SvJzrvuYe0U1bMtYdWs7VTo8/N8O9\nIvrREi1GU1ybqUpBO/D5bc97cnIvjldvI7RsBlsyCQBF8k5eydPYUK0OBMDr\n1GcMxcBJFLApHcSNS2oymJTIgpnjtGKneiw3/LL/v9ucOpCyCJamFdNss4g5\nHlHd8rTDvgrXqPRydGkvB9Od/EcG9vx8q8wEGV6zuq5oFr1KWPh/yhgWjVrU\ntqIDYRuolwYruD8VaniDPSPCRmsVzxy9USqFRDtnR9Kt5DhExssV4KglEJ3+\n8/I92Q3HaAFwqOm/pW3PC98sCTk0oE+xURU+JX5M1eG1FgMjhoN46vPQLW19\nh/6M75d8Nm3uqoU2/fNPhR6Edbgo/Wa8ZCRpkaPzzum4wRxieoUVlTOgnSiA\n//Us1v+ksGsfDjf3bBJ+9u7pxU2nbf664I3UKQBWfd5NrXILOPtn2kCI/Tl4\nGjbNpUv7prG8XUXmcdDAo7mGHJ4GJ0laV5ZAm2RG5pRQwUkSkt4GNdgIuh9N\ncIqb\r\n=yXxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/density":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/tab-scroller":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.9f718da94.0_1607444107928_0.439589781120038","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/tab-bar","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.1fccb1418.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da9858d0b3d6ce0a930115c8383f90a11bb5672f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.1fccb1418.0.tgz","fileCount":37,"integrity":"sha512-4yh4sXMwqTouSIK5KZMOM0+WcTknwKT6hZwicv+HqSoA0GBNXBv+gMfik5VuX8AONI8/e8VrRh7dCEsFOO1BFw==","signatures":[{"sig":"MEUCIQCTowT/qsMV8V5UUFM6LrrIXbDH/u5aa72T++TjCNkelAIgBukKj4mW4C3so/hVj3TccieK/PmZdHNaqav16mTk7Qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6oNCRA9TVsSAnZWagAAnSoP/0XzLt25XDIuD2Ba4kdN\nK1Fb0nXR98QIwLRbJyaA7M6RlGqcpTbK02RVRhpwr7uHy+1fzfwx2QDTJOkI\n/S1JpFdlBEXyT9ObuB/03EsUKealNXeMw6JVibx1IMoYVVu1ZWJRXRx28vcN\nkj9EgAwEk42NsUcrErukJGejWwlU/nicW1PXMxT3xKmPBKIjAnRnP81XdkAO\nDSqiYYp5cKDLTLpikGDju4qwil6Q0tnU8Zg3c6/jBQMN7fj1L/E/qE4r9Yey\nny4FwtFy8FheVptYVqrpHKgFez/H3w0jT6d0aS+R3gpNMBtHoIAZoDw4fpS4\nYSN67nurbIcXUSwwp0jztpL0wAiSbyvJ3I/sPVcoTJJ5EpAiTgLnaOtF25QK\n4HknBtXSPPqbKaiiuhAMbMhPNJ33sIqpqsaWXJycMjX8//A7mc6qkFgLsXNh\nQ9WPRl1iWz/BWEDWjW+nzS193UliqULBFSH4Q05ss4WgIjUCjTLEdCtiEQvz\nRYsXGB7YhpC+ht9aqO08TeHlaG300vVP1xpUSQ8F8qmZotU6d3WoeFPmw09H\nbt6bvM5ECffc4el/k+u4+fwC3TT/qeKKmItocWQjGFRz6q7sXQ4ceS6nGLMl\ndLho3W0MTpTM+9biEOwdjYRMsJ9mFxARME6vLBo1bYmyVsc5DTeecVDis/8m\nLS7Q\r\n=CT7J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/density":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/tab-scroller":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.1fccb1418.0_1607445005114_0.8145600069674934","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/tab-bar","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.afb68894e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fa7e16fc7d3eb99133f1d66832c5cd1cbbab538","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.afb68894e.0.tgz","fileCount":37,"integrity":"sha512-fbo/NLUQz2L60Dn+D3UJKAqgkaIPaB+EDRYYACGoAstO7Cc08FiQtW4wsM/j5wYpF8Z8IbVGqUG6aQ6ADnh35A==","signatures":[{"sig":"MEUCIQCc0dYPYwrdcOb4NvN/5DtQl9TyWD/cSCQdCoHP+fBU2gIgdNYA9Tmc6t+1D296DEP0rgCfMuRjD8GhtPFKPcIxxzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6r/CRA9TVsSAnZWagAAvGUQAJHlNtZFmrKWJF7fZ+Qx\nSME+TevEiqeVhqXoJHKoOpKDaHRdvuUds7fiX9nyuKMWh123B1HPsn6zb26G\n0MY/aqW22xtusRmMJk5JzWHLNqrymdq+98gIS+FxHYcsmfEqfBz4fOFbGJ/p\nEfokVDF9owqIXFfAww3tD6zHAkE9pQwdSVeMJaGDF2ywC+1DrKYvtzFIHVjg\nBKD2xexHzqUEJtk5CGwXO0ecGTBfwKT8da76Aqn65VHqYktC+KcnNK9XGDEb\nFv5rBbM35iC87Le+ATLlR3oElyY5iMFIbVRF390QLlaunnzQlm5gjCltn8ng\nqlf8OmFgY4e+zASGjQlASfOVyn6gOgT54FZh5gbfhaLEqQnrOkfSuHedRyro\nFvfkRv+JVZWJeg2rbvv/7s6nTcCG/qN/fD/X5Mi+4PP8t5lni1MnLkour+X2\nas7gPyqz6w57FHrpDk3eprcPEj1EQc+echhYbv+qDDAj1LjWptMr+WWAe8Pj\n6pxG2PsISS7s6fCRqZYW9+hFiBBOKDNR1ve/zks6Gy3rqmFusy/mVTbEEvQF\nBJmkWZWw4xUQSVmkB+luQ2+0GmbWT7HXK5q1WnYZz4SJRDuaHfRMZbKqybNH\n30LCF9xibu2sIgc7XrKe1QoqSecBHxYg6a3vBQlMGBDcMLW1f3DooAWtJLrK\nw+nX\r\n=ajTs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/density":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/tab-scroller":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.afb68894e.0_1607445246911_0.401727137704903","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/tab-bar","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.fd88d40c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773266c7e6b55c61317e19b19efb9b38f84bda83","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.fd88d40c2.0.tgz","fileCount":37,"integrity":"sha512-NkjrOntkQscxZUE1izYrnPTkyx0JhDeq6svy7zZvMsazSzMpN2sVC4beJF4hYcREkJ1Mmk8d9VuL1aSbO90vUw==","signatures":[{"sig":"MEUCIFZvJeicJfXyw7jbnVB4kLvNITwr/a97SnTcABWfJ7DsAiEAgBtRAbhmlT5lSAhNL4Wr9R/P6ef7GA4vDx+pGJh1ZRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz649CRA9TVsSAnZWagAAsagP/0WpLpdxuwX8tGSYWuo+\nxmo4r7ER6pPLg2Dw3P3VOph9iyoXHxHoBCV3UIlZi+CddwUfewDQwnmBCIdC\ndnuUQwJHwRBvt9BQVtZM5lH31b14tfKo22N/ZGZKnghd4ZmHHj1LGeqx+XDU\nCseNj9cdyEVe7zIsvC5ox47dXknlcbAP469YNy3NvzYNVRKwrg/ekNeyoCVC\nYm7C17Dk7AZWZepyuPEPdiKQ7JJt1ZwvlWZB48k4p38gTmyBDXvNbnSfCQG4\nCdELMuwWB0uIGhdXkAnFXOFzssb1UM9sb+aofNUVWppxdOwMokA26uJYt614\niPcz42UuttqxBMu4+g8IdwARGOO1fprZbkTDQTVm4C8Zrp4EPoeNUV15fxLB\nzbOOGk4ref/geWogM8O5S7mzc3vQNdK46ryfaovTeRRt9DAI7+oFACfq984Z\n1hQl6KhNWLXQrfSCcrY7M1duapraUorEbN91/zMqh2n235kZNvk62DuGLsKP\nnt0aLvNImoxeJZ+7G23yS7mtxBv+VjT+hcyMX9JrO1mmUzP1J18YFJBRM0kj\nRAOiw1+x377zBpfGzC8SZ1869P3wxZ216JloCnT9OiEAyy0gefeQrhKZQyag\nhRNObEJDSpEHV5AJHTQ1Bnx2G/ovme1T95WU7KK4K47AejeEoMfje76Bvrl+\nTwcf\r\n=Yn3J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/density":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/tab-scroller":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.fd88d40c2.0_1607446076979_0.0006386565528855304","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/tab-bar","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.ba9e3109c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa1b20f4013972d541690a833e546c5ac16360a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.ba9e3109c.0.tgz","fileCount":37,"integrity":"sha512-qP2V2jmG4AM72z1O1L2BICSN/jVL4uRqXsFYNe74fc3CJe1bzgMXntffQVWIgfzpc43Tm6/9RQaDlh7K+DqwsQ==","signatures":[{"sig":"MEUCIAMZF7uGoCpz2gCnfUCBjRya2/wAf8hW9NxYIoj6THzvAiEA2B+xrD1g27CdO6T4xl3cFnIIg2JHEUEbM2OJ3E2lj04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87kCRA9TVsSAnZWagAAMukP/1lt5tK/0/7MX8RV9Gqx\nJe8Qr54FUjKpJcLw7T6z67ED30dmxSTmTxbihZ7hdJ+aAlv16sHDx8AakATb\nQabbQojafZRahGUFod6cswA21P3PAJCcBFxzhWQDKQ/B7X1dOQaroOPPrJNy\nzAv40KybOQr/n+XcPmEJnOPnz+dOn5la5gAMmS5SCsXa3H5/aOJw+J6yIIJ+\nZ0wLIBzV7U3F7XDKgVSfLprNDB/rR4w8mCmKD8Ylm4bkMDDZ0YfaJtuaI4ee\n/A89EVpGkqO56EqNgu9WsZjJ9HobOwtnL6+TSPL2umosAgSFdaSIs1tSZbZN\nECPk5IFGdJV+VfTOwV8wfzWqTwN70VV9z1etwWfHy4Qi6RcIJO7VnDvx/qHA\nRWvRsKnMkZVSP6622FsZ0IRE09DGfEIMk5l2lxpKlRWQx999/cgYz3mChcRr\npautayJTUKDQw8Rtva8zzvb5SrHjm4ZFEgaA/1YOEW/F/tcKg6RBLrFQ4fCZ\nHP0/6crm2/2+3dr1wz0T4mrYNiv0MUDRBr0z8Ch1rFaAqiIKpKW7cwEnYWIz\n6vcPSNpxODWWPGBvwIFOwrjQD/9/WKPzdnI0HBt3ujuD4Ri5YND3PI8fMOGQ\nEkLAN4NWEm+Hp/HqERPs35GJZo8AQ1826LSDvbxP3T6DOhISSKBPeZTqunoO\nCSxu\r\n=XoXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/density":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/tab-scroller":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.ba9e3109c.0_1607454436217_0.6719532537442907","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/tab-bar","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.1085c3b2d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c270f6491f1ecbb944c24f625ac9334c68ce4aa5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.1085c3b2d.0.tgz","fileCount":37,"integrity":"sha512-GIrIQHhA3nGEoag3uop9/aXUjX0elpuybiht4Qmu+LCEhwXg6xaikljqxhfzxwYaaILz3u0pLSa0qefkQKStAA==","signatures":[{"sig":"MEYCIQDadOzwyff1LboY2yGmCRf/k3577d0LZnfp0h/6aG/SxAIhAPvpabEybU3D34I7Q7g3xbZNPBPS1OTVnMMERkp1AMm0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGxCRA9TVsSAnZWagAAvOMP/jcX0bkI731RRYNTX1Ds\nPaa7cCRaTvUM2f49k53fvzboKtkz0bCEbhYmxmj5oJHIcRCJqNyruvkVa9OR\nrbtLyaGyqGzTbrFHXtRjueyLyPL5yvt3e7YTVPuoUHlhoSZ79oofzPm6Xp++\nMyPYSnqkaQDqRy7FbzMv69Hn24Ck8Q4POvETaRQBV//WW/BqT9ZCM56yR0Yx\nHAYQHhz99wE1FQvE7RcbuwAH2FUScZkOrtEltQ0trykrSuayWRein4oSLx7d\nCt7rFV+BLdAFCd5+jv/1qfwpBELEGeDCS73alDpzk3oj87uEaMxgBsX8UdN1\nw1Gk5nDNmdjaQOB8UcYETttdIN+bFIUEYKzvFMd6SKlJxXKUcpFUSR+dyitq\nyB+qkHo1W05ClxMxNvHrdBWxwk8TVGiH1fCUWJSoPeRGBV0ACbLpSf/eXx9m\nEQHmY4V1u0DsGDJiPS1bp5nKXmEZq3flSHDSDo6ler+jWC5gA5oRy4gV5/cy\ngQmegqBxnDx1ROoLT44faQu5QzNndQg+2x4wCr7LBQzYsMnDi4pBxiDX5/Ks\nmTlZbysR9K/6Os13q+v0A2OgCsMLuYbdIBSaHxw94fC497GMucOBRjGLNnys\nMBeC7Gl+okJYEXqRIXRGvBXeZlxT68KSO3zFkjPh0OYEMzdszisiG/kKbjY/\n1EmN\r\n=O4G2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/density":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/tab-scroller":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.1085c3b2d.0_1607541168821_0.8391899615232239","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/tab-bar","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.c5dda809d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0360cc57315bcc5c5f8b038c616c6aa823f861f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.c5dda809d.0.tgz","fileCount":37,"integrity":"sha512-FUkcrr/qscyT01zQ4L2addQngCFNR07AawmUxVTw/Wlxydn4ZFY9j+M4pzTQXzg1f4+7V2vsbEkKwRINKGvDdw==","signatures":[{"sig":"MEYCIQDG6/JC+dfEcFb2e2EUs1TJIxnYhBrww1hlVNJ0pPOArwIhAPewNoB4lY6X1e6BYeJtcEQj9UhPOmyN8pkJwq+dpA3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjqCRA9TVsSAnZWagAAQ50P/1bX9nGGEwZD68tR0XCG\nEs+q2W1ZzpTv06yZnfU3AwX0z68hVSRz+TY4hztwl8ykSB8DOAh3YoUGB8Qd\n93Ann7SsTC+Nd3S5D1cpytujuvvqnT2lB14m1WMUzmlPLY7iTvj6xrRXgI1N\nX3VHyuCCtvwboZ+6fJXfjOpSiuYy0t5mf0Y3u/9fofY+3GvSxXbgjfbGhem/\nAzqEiqcCOj371xJTRcGeo1oVIyR8GmEfS58YFxiVYEIAnJFGuZxc52T3LVNp\nHcgicVFOZ2aF4r9fCFG8lXyeOw6Be7h3ax3py4XvffpvBWzA3jovNI3v/hmx\nvXLUO88QPKjayBmv2WofJj6wIevYerXIzdXh4FTaVDh+BSOXB43QFm6KIyJa\nmlvTiRDMhsWz+ozjcG2i6fRhCbe+zibmgfZTW0m1NpIcOHupuKvULtbhdpau\npkhg8XNyGvL7Y55rZHhzirjjnGJv2WKd/tdbUc7csZMc9ePWIWTWTse6rwEL\nkMM6nu1HiIYlzFCtM4f1nuvfBbR6TIZCZ9j0fbmL0xO3ry47KBcEGhNWDZFs\npUyfJt3mlM9hRrZCh6BfRBzEoI868haYCPVo6bkV53U3GPQHc722RpYixigg\nyQG+O88EXGTrtY5xbSfPj5MI8WovCtCaoeslh3d7G5WdF0FIvHv10RzbN8MD\nFltp\r\n=yale\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/density":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/tab-scroller":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.c5dda809d.0_1607547114153_0.07733211400679085","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/tab-bar","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.f5f1bd86a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac99ca9491c869905a79c0812eabec8de2f45edd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":37,"integrity":"sha512-Q9tW2c5PXy0eoL5pB945P8NEPVtockNyKJCqtJhti8nvjYfV/wV15czBDoyr8iSFBz9KFWeqIXEkPSpi3Qde6g==","signatures":[{"sig":"MEQCIBqsFjnGP/AK0JnsdqWKnbWx/uQvfrkAqKnaP6rt3l7uAiAsXRqlQ2wjY4vCrvKcEmOp61y5etp/HZzQ//d5qz15KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0T0YCRA9TVsSAnZWagAAYpwP/iCcc4xeO1T2WAOUUo9M\nI5Ps8ZqBxp+zphWEjrH8RauCYIzBiNoebuELMXLKJZ/PFoHvDqS/AYyg5ldg\nESXpHAvZ6euu/3/WXnzKxClZrxF+UmIkCU7vrADANA+g4ZpgZ/6foyNIS8KI\nAc7l8OtM+4FXYPspCavgxkPmCyn8EiqOqlRgFnoFgE7Dg5tWI+9nWyPcNNQb\nzshkkwlsQvVPA/fOAUni/atl8TXp51AlyzzIl8pingxbLXxVzZXvroo7Ep5J\noJiM08fHZBVzLpdcISHhW//zMsIsKJKQlFDRBOukQV84yb+fLvKdPCWaXNwz\nFokA9LGychu6t53Kd+hl5779RoUsv5USwOFw5J1HjX4qazbUUtjYgFo46njN\ntYS79KeJqtkyZj4+EQLrogqLem5bvnDr+0ccfTr0EWmp9uz5t3fql6uugYt0\nmfm/J9EKVhk9o49M6iahz6WaMlqJ+Urd4WsqA0VAcn/8EVRZw3YcIELEQU7u\nEjplk7rLLJ7tApdWSaioP0/A9011A6hJCmJeDLDwuqjFXIvqW02poipsJEN4\nGzWylZPibPaZbxZNT6x/VFBOMevEJynLsUmmLOvC85FRI1n9s5ixX8HN0qqo\nVg/5HfrKBIyrnMPI/yBLcEb0SauMZtw3A6T0GFopRGe/ey1wwjCUOx6SWWRp\nA0pJ\r\n=AvVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/density":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/tab-scroller":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.f5f1bd86a.0_1607548184049_0.08588874238093669","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/tab-bar","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.00f38200f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a07de19272018c0ceb2b38930e8753491eb04cf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.00f38200f.0.tgz","fileCount":37,"integrity":"sha512-dHcGibf3ogq+LWm8V8LOZHCjndWCnvtEvs7NCJ/t5INDhwfXNhGf0SJ7I+4v+eL7wqP0K9lcygCix4mEiLZn2w==","signatures":[{"sig":"MEUCIQDWM8cwN3z+HKIE1+/D93wf9UNjmQ6jE3CiZ2zGxGwiVQIgBhlPJK5DysKMTnLjURTL+OE5xQ+vKje7SGVbLFDpxZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05S9CRA9TVsSAnZWagAAhsUP/Ap3bMx8kXr9F2Ic7yVa\niFkVtg14pieotsvwdfH8ZUQLPSG8zMMz8uvJ7rE3sLnpJGcZj8Vq2CL1LAI+\nndGn/K/akTDYxfgKjmw+boZ2A4ZYfx0aTx9AAa8k8DwMdP/8VVzI4OP+BqXr\nJGo6GHwWtM++rSQ1sH5f27vvaQa0+m10S4XExccirxOubIExR9IJig8FlJti\n8bNnX8hmMI5g9ymAwVELIUcR8pMmqB6Eprx13KNd/AY3XG91d5IvyRsg9UCi\n9njtwixCU/AlvkQHuKxSyWwG4EYVhswa619+xzycpJMxMNN/ebQWX+bNYV33\nKAwgEymY1Y9YdeHzJZtDAO0Kw8cRfafUzhQ5cSOvHvqKNJzKgNPJ2mee4ctG\nRbV+x9tuJIXwXqZYdScUexCE07I79kUULkbvSxS+21D56ExwkWkOgJzMbdP3\nI2BG1CIvWSm4pJPiBVF5f3fH/nVzoUvwFVqKLIh+lLij4ky7La1kJ/vnBW91\nycThe8NqhLgvSpQWeNiLHQVQa7MBqbMqlpU6ZpyN+lGkCEvJZc+CeyYVGuKl\nC3ayZI0MT1mq+8nbySjL6SIoqqGEFnHv+9SImUnrltzsvgR/151XkdaK/U2+\nSBj2r1Xk4waIAQ4H5+38NSYf//ob7xg7YueuQpktTK1PWqnAWjTZNWmXvB6C\n3Bgq\r\n=5mIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/density":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/tab-scroller":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.00f38200f.0_1607701693460_0.42792691549721873","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/tab-bar","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.ac41a5729.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d5ea9cd1f7ded04022d1ab1c46e0c60376ca3e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.ac41a5729.0.tgz","fileCount":37,"integrity":"sha512-fdm2nKG1ifdll747EhePF0/X5Si3sLcJG39YoGYuPl55CKDniQuOmm8i/6zHCx/xM3TQfLRil62mg4ZhNuEYkQ==","signatures":[{"sig":"MEQCICsSZ8s1e8g9Jb4MCZmIDK4N/hrQg9Z2qbmBrXj32mdIAiBhv+ACiybEtD0GYJxy6Z8dhig4H8RSs4S3g/sXuuJ38w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf056UCRA9TVsSAnZWagAAhOwP/iN011PacllyzwWdygtv\noZiJ17tBp6rNQZoX6F551/RXRrfagysu1mLyRfGUPfijmxGZ0jIyNjcOaTsl\nAQUReD0RQgnpXLDAHgu/vvVT6Sq250mx2vp/NzR2EQD0maxzQJjSEK37ejE/\nLK6xo25+g91Wl86s43cmyn81CvMs+3x7iz7Q9tL6Ps78rDMWtUgkzfR0St2L\nCnsIVwGeQHogmXdmcyX6z0HYGqwtygKhlBBf/mULoDd8i5Uad91S5uPxWa47\ndGqb8SGEaXw/npp3g9NwpgbHAfIuOnM4W2ykKzzyMDvIqcSYbtuLeYzS6Bvk\nqM/QVoXi38pFZMjt2InhcMXemmIAm7aOw2Hhc2KyPLa7NCRDILKjZSoaa6Qr\nDBmQJ0qVZ9diyHYygSAHzKmPD53sRLNOPOp77g9FHCDmillrJKy3ObbEa+dM\nDR+5UZ/DSIuzSscP3CN9FTRSqF7yhs0H/pJtJJhLzMA6Z5WsKzkYcBcGhWZB\nJW73HSpHpviMiRP6lNNoN1fCPhNyLq5+DROu0JbxcSKlO44d5owjJoBb6vnu\nN0/P+YymLXPtXlp93tHgb9Mp/m5+xnUO9Mw9VgCVHZ7c48H72q+B58BiERLM\nQnwv+L5QLsc/gwLJQIbtZ9OWQNJaFs7c4Rk5zj/d+Ttj1IbCUNBBrY8AxBot\nPBlO\r\n=L2i8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/density":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/tab-scroller":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.ac41a5729.0_1607704212399_0.6299137888128665","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/tab-bar","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.7fe0e4f05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c38cc31aaa882d5085cf789813a21dd04ec84af","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":37,"integrity":"sha512-ev8wzD5BXoverYzt+VCbufIqANmkGwY9nJpq4jHICl7CSsSy9HkwIo6lw9YB7absw04wXkE/bnBHZL4VVtsUJw==","signatures":[{"sig":"MEQCIFSO0uvFfXBio3xTsoVDu5V1hdy8gkRAklpc7X5IhSqqAiBUhvkoEvB5RQcRIGyss0BpWzcnrss/FWybFsg+pSaOvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06dCCRA9TVsSAnZWagAAAp8P/0orTERDBKs4Njewce42\npf+fu9HsN0h+vGDM945fUFQ6RMtpZpBZKJDxLfHUIEQiE9L1Nb5xX1sltRq0\nTUSXjt8HaER6Bfe2sECOIEpUI8XKk6f66yfagDkiwrKRDq6LEhgDQSXZUgwz\n/qhoQuXeX0jANrK5CMiyzzVklAuQ/8Z+VUf4EbEaYHTq4V8v4q3tZmGw1wgX\nERGwON3RicvCQJEPbDnqXk104sVefW54lEnxm/etqS5fAheEaLUs7ZLxZxov\n1TOlpuuKzaibeK27QKIMJ1voFaolLxI4G/08KKnK4Ts9B9Rd818YkKX/uUhI\noipp7KJy8NO5vy9ScvG+mZL38HqPxksWz5pNdqCPVzksQvwJ1ljoB081piSi\nwn7D95TvJ/h/vXYla+wDDWLqLxkM1XAOaLFKMyEOnLzAefSWA+1UMJ6IuFVm\n74fl8Z7UxnhEgasPP/meWITg/3kp0VI9BZSlD6FBex+k7q1kppLFMGFQ7ESO\nHkc+D31zwRrzo0cvG1AQiPjw13wjD1e0201JKoFNgOjsuBqecS6SKE6DOhZB\ngRSe+4dUp0CtrJDSe6hffYhOSeroMThWr8ImIGrTZs6lshebjvIxt6czMMbt\n1yfhuqi/Dh6r0kiYX+ddINW1fh1G9rHeUjY/t5TtPtgRN7WTHJP891lqeEzR\n6M/J\r\n=KCjy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/density":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/tab-scroller":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.7fe0e4f05.0_1607706433624_0.6628304545103603","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/tab-bar","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.9244508bd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9de1088d53bb203565c23b4a50d508043859e62e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.9244508bd.0.tgz","fileCount":37,"integrity":"sha512-o9pYHMBOtPLWwVMCcgsiPQnJD7AXSSKzc/nV9WpEjQStoi4NitERDV96+pBwkW4J/lJ8Cu3F9QD/pc4ce/RCXw==","signatures":[{"sig":"MEQCIHSIemXYlQ5W1xno8zV4RbfbHE7Ig114HpopuapQ9woJAiA/85zObGnGoma9NeBqse4dHE5CYXGWPu3x3Pl2gHAj4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08PVCRA9TVsSAnZWagAALWMP/2UdViVCCA/p47Hpo50l\nbj4+7dVQbmMdH56ciHQW8rALoNaETqeti2LSOLPlFte/i12kmGX1Rmih06XV\nYypjJJpzad/a+videyUYlnNp0Qq3ZomEVKsl6xp6wMBeIGKYic4Rm20rUCv6\ntD59pVChup4o7C4uK1gdIH+lMeYu0bWZ9qCcvcu108nmhvvWcHjeZVaPCDvA\nnrffDd8crWE2IAwqtQq9KSYDeddjitGXUuxA3Ubg0ENpeJfRfdWtRG/rgGTw\naKbqHICpahBdE3cxOWsHN8a81G7NyW39znavDkbCmU2dewiyzCv2l2TyOPdc\nVcjtKW94PqEGjw6pqeWt2Xt5NGZrbT6QWopXGeMNncIfsR0k6CdZ4MW5XAsR\nZbTl0dN4hPbJhbWS2J5C84Z+awg4T8NgNvfa/9qKz2P+ZQkJwzzZNFIQRdTO\nbcRz9C0tAsJ3pL31u9QjacboHfHPSXUtxIM4EsyRo7KydhJNlYBiuO0gKock\n7hiHCeXDhZE4iavRodFtcIlXf/vLBz7vn8MIQZpLIY0+MgIeY+tgbCBUCAoT\nMGIlKQjdsbQHYPbph8qsp3VS95sNpp9mY2nmVzVkoTjlQpcIpqqGbwwrsoN6\nnLnqzt9U7c+i6xlgU7wMAWmJDxXsczbU9ysL43tos1xw1q3f9Y7fAOaEfYLw\nB9Ub\r\n=6oYt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/density":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/tab-scroller":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.9244508bd.0_1607713748946_0.025990661479083466","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/tab-bar","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43803b5b91e5438d3d73320c8ada2d4890b087f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.384a8eeb1.0.tgz","fileCount":37,"integrity":"sha512-QEt6p7wR9hlhEegwC6BG2gq6f5ZLLtz4diDXidih4tzhfIYOdfVPgcjkUNSv99FIxvPTV5CFlpJFUE4hcIIN8Q==","signatures":[{"sig":"MEUCIQDr8NI949m0mX/aDCCiFT4ZfGbrKxpK1SrwoMVP56D/GQIgfWwkAUq99gBsMlOiQqtPQgoie5Uk2Xgi05PtJ5YUwXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3jCRA9TVsSAnZWagAAJJAP/jTEfYNtrWYCKX2uAN8W\necsiBX8/ykH019Md6XwTANf+oyds4gsdKh4x4bWsMtEhemynZYBKwE4RIl01\nUP1nO5SRDSsXqAZpwnh7Vwmu7yFmAMB4kvmDEqnldHHLoj7QidrzqT+jKpeh\nRSF9aKZPtzPXZnjUDDJAKxmpfB8kf/MH/kceouDI31FVRZAwQHBFrOsEkATW\nTLNn6oni3uvcAgf/gTfCrXxT8+ZZBvJEc9s8eay1Akjr08RvuZyQHYwLKuaz\nP4hvBI1wS9tjMQ4HBHZmL4GEND0iBmNdKO0v1Sna4zxX6o6Y+4BJSS8Bt1bk\n2RAQYAuaqIwRGIzWE4IUrU0Oh4jAakIFxmSMUmYkWMJIYf/BWAbKSNEKrYFA\nCbA676lhDhL/X8g74kRNf9qCSkaNgnXitF5E4ldf8VE7gpkQsGdAp/2osOdK\n+PmD3L7CkFAxG7yddlc+iCTAtGfMT2hrWSP7+JmmEen/D0J88nbM3CUTgbEB\nQGc8aeNb1OSrPP4yM5KlihXnqm+hmN5nMz8WpyOfgtP/wizFlMFTSsu6+eg9\nkzAzaWrnhfbQ/neNQS/7E8+I7RAHQt13A5nsTKEwyFapuzCE2HaXCfHkOrM7\nUUuMqiuCksGV53k78y5EK9qcC+br9FVG5IpnRKVOL1eOikFLUiL8QwQdcz2n\nXcxf\r\n=yn8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/density":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/tab-scroller":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.384a8eeb1.0_1608138210898_0.4950597910647876","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/tab-bar","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12e6756abf052855660a8d4f1d120839f043ada","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":37,"integrity":"sha512-N0/HIbt6qPGVoV6uIdjtfqY0zNSj1/t1Lh/l541WcAJJKO/C0mSpwwSuFqBg/KWPmR2g78AA7I8QVOe6luLD+Q==","signatures":[{"sig":"MEQCIE4dV/Q41tXE4SZqCCCuL3p/uER+zkZ3qMicnjz9NNS0AiBw6w3BvZ8e+cY6fKHruy76dxlzJEYcQYiquVW2MhBw3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lH/CRA9TVsSAnZWagAALbkP/jbNK/6GM1GQnvL9hJtS\nZUC+ZRMHQIoiTIx9XkWuwfyLJXDBpRNYa6fxzhyHZdrIoojzMgJ1Mft17tmc\nmiP0EhWZImyGC6HHzbQ+JrNaIriMT3eVhtqXZxbEcyLLUeIOenSjSVURvbvz\n9j9UqUz+C/Iy2h0BZqNdqN1drBF/isPKesv/v4zp6FaN4Ecv3JY9RWpTRpkJ\nbEAV5RC6YPeytb/wvBcXHDCxJk+WlGCjjWa2e3mh8vCkVsD006T7kJnb/jql\nVom9Qg+dg8xNBm0jO1UGD289dGE26pa+2/uuvv3qkUMv2fz9cSE/25aiu9wt\nOrnLyW7zZP6ROJoCv2BeJL+IUHxkbYRO+zE91eQpvGqtuoSyXkmvhDuzAcaD\n8P2m1ybKfzKENySDi72WQdH4JK6ti1gJDHY1FDBcpijSnKyXApuN3fZJ1sIW\nzxgGE0PFhFR0XDPyx3O/SPi2U5pUDhRwXxUerAPQ5cqgLW1ODyGeRj02BQ8M\nWKUaiTz0v4JxNnf+33pBeK0797Rib9ERzKUGDnwXZlvesB48vAIzYkm0M+oA\nNFYYeCgjudAldr0A225TIOY+9nYK9yE/ox+3yg+tIcHgg4grocmGrIC04f5k\nM6uGbfve0faeFBC8CzLic9TXWrQjchSgb3NGjA15Zqtdndw0XCHsK28VIMJj\nwaLW\r\n=IgVS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/density":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/tab-scroller":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.eabf9d5c2.0_1608143359214_0.48137219563073863","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/tab-bar","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b931887c27a461d70d592162a6f0db70e38eed38","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.30fdfd06e.0.tgz","fileCount":37,"integrity":"sha512-TvnZeuRNQdIEuxC55nu167DMIe19iW2yrVk3VAQvv2je8Ayb5Z6WjhvAMz2Yp6H42ZI//I/DeBmIplHUtDfrqA==","signatures":[{"sig":"MEYCIQC5J86nFgBbPK6NmDAAxdhg9Dxb1iRE9jl5FMmEVZFGCwIhAKEzPtQKRhyOUA2B5t0JNQfJs/21a/vAs9Co8RUDo/6c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ltZCRA9TVsSAnZWagAAxmwP/RuXm0TCSxBNuZiENICO\nIB+0aNF+BO2Fzb13suHOvNoSfkqTYTSrMLGe7RXgvsNyGCsOnfediBng6zQa\ni/IysLt9bJ8WjMzrhZha7C8tBJEHcMFH7HIqZHo3I07fNmu5qS3A/TKE6gix\nQvt7vgQN2RNCcwXuQSDyWao94b6aGnb74AunCqWV5jUsn9KZ55L17VOHk4f/\nR+nDkAwnh7wEDiZV7fVnM9MQOLwKVNnO7YiuyuLDe1HutMzBjrdW2s/g8u9J\ntRc+SvnEDCjwgaXQrpjJrcMkLaz1fnfP356EV5l5Yo/aVthGDsMhyv0J8BLp\nV1YS0aVahKxyq/L+bg+Y3RXyd88laAIOXw+JPyUoCgYMkJxcz2ilZeC7RXkP\nkA9FOc+6la+QuUjpaMuo0p71rCuH9oNpuuFY3834B+HxtyViw8YmRt8DPiJv\nqdBj6Q2abjXAUUcBC7MerMoPhjVTz+SkAzccTKVs3wGt4om5RzkSgc1KOfqG\npy9MC/OhiCGh+i3A10W80qIJb8mjbD+o6OiEqSRfpRGAoQ7XIhSLWyf0fId7\nRDknWI5jQ8ts5kjOiMGMStLIySl/WQy3LeNDlTHHI4O5eQmpp1l/NnQQTu6I\n+WWkMqoRft4IasUDGQ57DSJHxhy1nplPhnH5iLH1nzIcvE9KOpTHBOEgj0/1\ndwBi\r\n=3fpM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/density":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/tab-scroller":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.30fdfd06e.0_1608145753294_0.2224531813981372","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/tab-bar","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b7af58f4e909887ff38b857aac12c190abeb8b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.9590a8f90.0.tgz","fileCount":37,"integrity":"sha512-mxPqHr+8rkbbtDzX+Ysz1vfQ3pxw95/Z5kWCreUXeUIkJM9ohMXhenycN2xWZlDTYG5W1MBJVdnYQjIMNgE8kg==","signatures":[{"sig":"MEQCIChrWouoRCFI8EZ0vxXPvF8G/60vYnHXh7oBqBZI94huAiBnSVTlfEAg5JN+CS4ovEEC6Ot8E4ZQobUj2vS3snxpbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jBTCRA9TVsSAnZWagAAkuoP/1I244SGtkLACGQQiull\n9fXaCAcbRnATHM0MylCKqg6GALJ4dcvvFdeDDjaGYCJDEclr9flWoVvXjRf9\nNUawut5THf3+t5+z2N7KcqT7ZzDmY/8lW9ej3F31dvjUCd/WPbNHowfWfuW7\nsHEs/830Ch/KuW08H6SjM8zqk14Seiy9zaa9IGnSkhcdK8ihJ+WbJXCdrty8\nFS2Fhk/Ljnt29qUUJP78Mr66KtsMSqSzXOGP9j7uw8o6jQC11OvmwelF5rgS\nhcEl5i77zUswMqLIx3JyLWsWbQerDppU/SxLThRjMujR9r4qVHDryFIz79c0\n66xh9ofjvMlsoeFM3g5ZAvuQ+rpLhzXESlSGSATsjPdkpapfif5BiLsA1Qoz\noF8QAt4+wzGZ71afj++KyVWXgPbbKFKVGoFCpa2WRI4iWP76RHyA55AT1Tun\ncGUllmi6JFjw1xp5Dwdd+6L/lD2W+yGF2Qsq8O8/R+g4TmD5jawZwE6RyBFW\nYgEO+kCa86cnjhsLgnkk4+I4rLGvVeTqq9IFSD23APrBdSKWH+PNApuD2YWL\nxF3eDbwyeaeSsklBwcHoH7wY2fylbMRW+InX90sNdrCuA0LyAS9Y8S5NlorO\ncB9OLfRbe9dG3pRARAF6OXb19xHVn77aSBtGcPgAIlifwVTLqPwr5trJ4hrG\n66TB\r\n=KmbW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/density":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/tab-scroller":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.9590a8f90.0_1608659027377_0.2222437729949307","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/tab-bar","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"378c87e4fdcd9b1f2a630bc68cce314f0270d11e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":37,"integrity":"sha512-X7/UBE5Bz/Gsim5WS9J+D71ULk+QQkcQj0q6gIzlyQ8ov0yIWK4upFV1c3yFVQ5DhoSdFB2Djk5t9TU9h0iqkg==","signatures":[{"sig":"MEUCIQD4O3N+stdZz46LXkSaPYABKOynB6DEH5US9QvOb69AZwIgMueKKaRfqlk+ynZomY8PkL/4j57xFBMITHOrFau8Xlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nwPCRA9TVsSAnZWagAAPYoP/iHjKWiq/N2tTyoQ3njO\nk4mBGbi/wbP069oQ1nupPbd8sc8+ZSSnCq+0ihEwau5yHAA2zI02CvKqhKVC\nQ8KiocPFzKWvUZhoXqcj1O2d6MErLUvaGGVT5bqOpc6viTiz9BK6fQucZ5Nm\n/bIwIEu6oGMaJoGFvvr7+iiJXrlvZ2//Np7kYFTychfyjGj2SGCh9IjbjAbS\nA/HsHhJlzpHWWrwjd+37p/txy5ouULn7NXVlHqaQu4E9G5/1FBb9vul3kU9J\nF1Y+Bl5iTQs/hcS/wMfq9AHXeiwm5gAgI7VCiVifQMtQckCASCYs4NsHp2QL\nEvrEAXPIEZUX6Zs9BnC0TjXOrm9cLMUm9IxSGQlmkdc9gXF85Cxnfv4olRDo\npWG1kmUNxjcR+4Ejfb4oNSr31SS7AV3o2w8nY1mD/pn6BL3mjqMdCta9TKya\nKwGeK0H2M5QSCUYqxjHLK/TV0dxTSh70nhwWzDBobBIMxjUxDvECZoc4G4iU\neFfD3ZFxAsU2ph4zNHu4sIqgUBgS0J3dzbEHuTFXqvcTee0b7Bn1Yoopb2Pd\nhfPI5uEFenPem83EdYmqYOn780tVaPOHHEpn5iyojk2zETtsOIyDTlInlM/f\nfKJtIyTUu2QaVkNVtg6isFsJdXnQAO//3zZeBD0DzoIC8G0fIe5WvAJkeaGO\npGs3\r\n=ddVk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/density":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/tab-scroller":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.f89d8b8f2.0_1608678415310_0.4740586938288267","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/tab-bar","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c4198017080b62b690eb54b7c0c924f8a4029f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.fb194dd35.0.tgz","fileCount":37,"integrity":"sha512-7LuB4owyoVP6HhB1vYQqRSWap5Rg/kV/9YDgUb3CsL7D/OCQOVsANXPBzXvH+qDKOewx4Imlxl0kOFH/DLPl5w==","signatures":[{"sig":"MEYCIQDomvUskkBJWdOC0ZsZaQeft+FrNR/PcEiy+FxLW3A2SAIhAOJo6kl+GNxy/MP/xF6m7gKpAt1xN5gF0aiU0Dwt60fm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kRQCRA9TVsSAnZWagAAcq4P/RsR0HIbkayOomahEFd3\nApH5E/lnNrxGvdIpq8AKgGrwXN6xxoxQ+qfsOxgAni0hMNO7wPsD8CJmmR53\nL/AHsXLyaQ/DyKARUrWmj/s2rzBlX8Qm8r1/U8JLgGo2t+H5Sk5U+ALeWNtO\nTXikOLENbqmyUmpaqX/3HRgW9oWDCyfBGCpxbTSn3QC1NbHKHT2ARAn1oemQ\nQ0swQ8nt3/Ro62dHEcU+oD3qDXrAGsh086urJI2x+u4HlDKalIfDY5KfVKFw\nwle7Bqo88mrK30LdtSnAMPb1PPSMBMaz4+hgruCUgEnSBCzUGHdjp2OW2biU\nLBIxOF+ftw5jibTbGWhwSrYlxgLIYk1bhAkDikuIgEj/MYmDAkIjCRUHbm4l\nw4F5bJJt+XRY/+nv0moCITl3m3HGZ7Fn8On4p88r1fV0pW+e839SQcGgGcS9\nlE/vQpFbOzG92gwQbWGL5JaaL1phceenTiIKE06DWqqrRQRMjgUG7b4XxHpL\nSDLe3icOJInJQTdYfHUw2mn8HnGkSwsb/NoMVS9nznGWuGecpE7mIZxi5wSH\nQwydcnNQ5kLq8bT3nNPsA/I65pKqIlNF4x1BwxPdEF4tXunBBO1ps83EDFsT\nlcwXAinuAm0EB5MnxENTfv/FLJvlh1Xl/857XmrSq8EJC/TrC3nUlW81Hh3u\nS+oT\r\n=Ml17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/density":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/tab-scroller":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.fb194dd35.0_1609188432240_0.26669098022052795","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/tab-bar","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c3ff75727d197fe5729ece16a2f4f1394b11e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.64f36e287.0.tgz","fileCount":37,"integrity":"sha512-yjmL6eFPCE4WoZ1KTIBzyltaHwy4O11b3DvbfXEAX8ya4yxF0p+Q4nDFHOXBbpWa8j5RgCpDE35aNr57ufXRoA==","signatures":[{"sig":"MEUCIQD+G1tgh9K6l6jAyvwSz9+VGzli1YN5FWfvWDe3yvKDxAIgI0nidAYgpd5C6yLHpZq3slnJXXB93XMF/mWzY+qxAFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmxCRA9TVsSAnZWagAAowwP/0wbmqX0Q6wghuIOSiEB\nlryHW/zA8eVyqi6bs6xRxLUzCNyg1U/B0NJT6ao47Sdj7kUtfe0gE2XcQ6Nh\n+2VEvWAHPiemdxtTla1PUyft9Cs8YUtJUroLBp10EZbokG8CsPC/DUbz1tys\n9paoymiipG8pY170kqTsEpyj2cz2kWO+zg8jBCuNxHukFU3BfgpGiu8H+GYA\nIMASFQITtKJwqXMPuRxskwR/a6Kq2wgshQ0VgGP08nS5cayWZqmFBMhmOkqb\nZxI35mITRql6f/OFPmq6psAwdbaJpD6+yYrWpt0UKH3TGmy/d3vk10mC/uS8\nt99otVoY2fWs5PwMZklIlv0YBqtm0tTrVvB4Nji2lXtAMjkpQSa1RaaeboZ+\np+/YO2EAR98CUKTt4CkJBNdaP7qDAjsxjko4PA8DcXGggb3I4OSykif177CF\ngHmUaxZhePaDmTO0LWdC1moUrFdTDjHJyrcvyZ7xE5kvtAdDexjlIxkZUT5k\n9FgLt3EpDunhoIGbzJ1AgrYMVTJBBUNWNtZXQ8abo1gbQmC90hRhQVimzU+I\ns+XbGo+KJN+UGaffTtnZMJuZwVaKPXpXaHHQMTFXCdajAljHLYaursm1fMjU\nAR46PU4elpH284A3BFGDfT1xAs+Ng21VzmIhggxEcMoCwsnsBo8ONjHTVhnW\nisnT\r\n=Gw45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/density":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/tab-scroller":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.64f36e287.0_1609189809447_0.45016224962719686","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/tab-bar","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2e6446f87247df55bcaecb0135a35cbb30792a8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0-canary.b7bbe7022.0.tgz","fileCount":37,"integrity":"sha512-iIFjb4CtcAufCLueFLHQUufcqGIQO06dA5pgPolEYRB18vwyJ1b/9wA89XtdMaxrYi/Ckmcv8/FFet9EXzgacw==","signatures":[{"sig":"MEUCIQDNJp3Vb++76vN9eIcJA65TKqDBoXG1xZ5vQOUOZB3AYgIgGR1bnhqMy4vD1S/xWgzt0EAxnkKtgsI3En/PyiovLcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63o/CRA9TVsSAnZWagAA8qUQAI7LU3OUTQbMOKpG5rwt\ntdnVdLfzT8swdMiNMx+BUOx4ySkI6myo1/WR7EgNn55VsI1hWefypTRi9Ssp\nrn6tvNOlp4/BxWzIE/CS4ZtbO6L1gjOVG1S/mLqNnDLqLsTFvwAonJYqmF0v\nEeA0jUPpGn5mIZ7pN6rk5dDK2luCzFDo+7PKK9z+/HLHUI7skj3LXxZ6cNKy\nH8r5EGtKFp8Ag/H7dtLdAIVCEamwYjX+5VIqewJhnLU3UgK05D85+cRetVza\nAm8n/V3JktFJFPQXLkI3UBDXYThUkBxf8tW9stjPTQtc+R/jC0t+nFkSBRlX\nc2r5Zr/i2TNJFYFXR4yumSJIyu8vUhPh569QnT4DYyDGjZbDsNx85krPQeIH\nae71r7u2s9l4YI4fPzO+9wLp6NWMTFtKWKQ/UFBeh0L/IggDA8lmu1fM8Tsm\n21Bj23rEbQ7CorgS8BEbTPGwTP8L0JZ09SvdfD1EF6SaJeXZVq7GNHeqfGyZ\nFl146cwjTXTrVHaZGk3+g0TYmz/LA6tObg8DY1Bibq1PaHDcXomxIWy0HfQS\nXPTUoRzSr+8lQBw0Ih0V+6IJdoE899phIuWEzCbDaZGJQpAVXLgSEMVVTg52\nI/ge+aQo/w64LZjmEyi3J6nOAKF16WJ1HhjGW1ua85UIJ4ForspF3QIM3odr\nOoN1\r\n=XIPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/density":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/tab-scroller":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0-canary.b7bbe7022.0_1609267775452_0.2525923099992968","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/tab-bar","version":"9.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a8c8067e11bf52679482ba30a60f3eadbf3098","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-9.0.0.tgz","fileCount":36,"integrity":"sha512-kHYTqfmAIyu2Wue/bBlwHMgkzXdZLCEfLyulmM9P9CHRB/It11ofT3q3VtJBmtogh8bmA0PSZ7NaOtl2r6YiVQ==","signatures":[{"sig":"MEQCIG5Txy/EsmkFxHoxhyUONIDHDTegwPg4lmbjxWqTl4ebAiB1P8nkOW42zsrCaPfcioJFPBJymnzYNUle2LHuVdQOjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fiCRA9TVsSAnZWagAAMPwP/3Ht5Ab8tK/ZZQdJAf+c\nHeUwc3/mXfZ+a7LFUFC/eMlPkLLSr5rEtD/uttE4f7i3ObCsXlhvswOA/OoZ\nznhLtPjQCpv5EzTYiRAG4TofFu+v0EtQig6SOzsAYvTp3cXRiwC+2c/3FRV7\nBw9FtYrJp0f1h9AGeDfsT7XYSOni7jvbw6O+5HjEuiJdlyA58GNaN19RYFa+\nvpHKQ+WSzlX5VIJbBplfyG+wfGxvqElG3hMy1vVdOLxGUNAM41tS7PEwc+9L\nF1sjF3maG1VmXpNbwLA08lgTxpH4vcXINTwe362kxzlGksCxUochcVPuALnY\nP2d8YJZ8tFheLP4rEGMBSmf4AlchLx+7yumcOgs2HpLIsEo640Na53p83Or6\n7V4DNOgKgfDTwXdtnz8p7ngRstTcjYIuogiikzCbMiusg140ZBUS+BEEJvhM\nk2WcfePVpkV9h5a7sTz6klsUzHDWDfzLH1RhxtupWKkCmh3CrN6cQN/Yw5WP\nA4LHDjfmB2hLFbK0O+6Ps6P1dAR/8SEtTUW0BhSfY3GNOxHETgvcgnecsA+/\nIYhuRHgjPHnCZVV8aF9dQK0n71xridPFdAWpsyPOIfG1Ps/x/ODiQ3SvKD96\nzUCq6BEDBh40/OxFlvrKHlwBYjgCNdC8qo9lF7VBVJf+PNDwzQc0JFmAeVqM\noccn\r\n=cT5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^9.0.0","@material/base":"^9.0.0","@material/density":"^9.0.0","@material/animation":"^9.0.0","@material/tab-scroller":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_9.0.0_1609271265787_0.8758987148038679","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/tab-bar","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0459f7ead205a52f1395ebf04336096cb112935f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.776c18681.0.tgz","fileCount":37,"integrity":"sha512-+wcAB0UvKTdzZUscHKkZY0yped85jECJ4cFAyHOUaqTGaKG7kxxsd2IaQHlC9k0Od6x72H8B56i6+LCvASSRTQ==","signatures":[{"sig":"MEQCIGKDZjcC9jhdKQpXTbP2SaCRCSH6Wty5Z24B4x3CLvQPAiAzJCK1nzzJbOO2k5uVpc38XXGkaEDtQfh9bcuDbuXUkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68zNCRA9TVsSAnZWagAAuUcP/3xAVVEkF9W7+J9FBTJO\nq3ZHMaFVjmnWJyZWXBVnF7aq8esdrnVIeypoFRiQPG+fulWAjKcyXFyNsLcN\nbS5tDAtqksYpHe87VmjrN/RyHcL6H2qj6bLg8czv86oBRzTOhineeTiaUsHe\nPhRXxRWeUKbzs64KKh8wxYWfqnWsPKBEFcV37eqp7eevBjURNFain2Q7/Yay\nipdzO5MqLSED+d8JvoS9YJgPoxe5XthvCOsUJl6xg8knDF/9eLr6sCMgq3oK\n3BFf4Y99KobayMNMU3CaoAzrgq17dZTntkn3S4TdSZGsgiK7YLXu79y7fFkK\n2YuU3nYtSLL0oY98IxZbgf1wGaR8c4XMoQNPk4d534mXrvkYk3QVrWC6X4O0\nsH8yHuHzlBJgoOL2iLAVacimEDNOXnz69MYVgqT33nxkSPei8t6GfKt+wkV1\nEMTJ+5hfSOlBpJU1sBvlq8ErHL3Ua2wP3XbrX7zcIez0hiEUlgJ904wdJiJH\nGp8sEfPaOYv0tiVbabdDLS6I3/WZVfs/yXfRNF+3MZ2YK4TRX8B8PIcZw50e\nNzsC8LxsAE00ek0sNotRYfAKZnjoiLRn1oXxiYmcwq7gikqtRYAxFr3MoQSB\nwBtgcblc720wtj91x+WEoaqOQo3wdNXb1kFkw+VLT48QNzDKTeiIb8AWM1da\ngu8f\r\n=hD+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/density":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/tab-scroller":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.776c18681.0_1609288908838_0.16833125826311424","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/tab-bar","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ed863b012159d92c5cff823baf32cbf42d43d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.671d72d95.0.tgz","fileCount":37,"integrity":"sha512-wm7NYwm1SOYFr7oY/So8qgJ7KTvinfOZkU+KSiT9FDMWykzemIXPamT+CE01M57rAVr00Yv0AUlyks9LdttKnQ==","signatures":[{"sig":"MEYCIQCNE3F275WX4hTETtpvU3JrYBxebbBIrMNHBJ9cUVNKIgIhAJNwo9fbNN0PUScRG+qc5RJusRlhYzgNWog70Ut5wJ7g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9yCRA9TVsSAnZWagAAPyAP/0z8hAcNpVUNZsa/zZ1k\n0e5OKNlyDGurFB2hy6AD0zcOl0qa80ilv9fiFEH8mfdOW87JFrNI7S78dMWY\nGSb4RXelZOWv9cK0ouJW6U1eJjXK5qeRCFG+/7/CKuSUrJp3DxgyfqJjRn9V\nlP8dfW73t9zFAwZUguJrVv2Gs4BeEcXFtqc204Z5BmwIEp938aAWYbuYcUjN\nxIgItyLS43rakkgxM8JoIJXmCLTpWPbBT39kaW5/0aVrAfC2Ll0sp9Wzd4Xc\n2tRgh6oIyv5XTaDamOK9A8kEOkpRXu0Jr+dfOEGD02CC6ac4mXhfjp1q59sn\nNNi15R0POax+JkBvEFGkR7MmRUugTFJgGB8hMbdLHvHK2OC9XcyRA/2wVus/\nyrm+BgDvtbDFBCL+boO19ojZCPzInQOqB6JRYblLREdYNARWMP62qY5qWWZb\nbyI2Cegdf0wNO6N7EqFraXNRVFHJfXR30XmPKkZkFvkrdpt2exFD9ZPKNllE\nZcGfXEIvsHjXNS2vMWmJqSmiQS04swHIfUzroOFuTmC2e+pQeMNYBs8FrLFk\n1/PYaEcHab9OSGX4cJL8imXUehybqbAH+URyNm9bIjzjaeI5RwwiTxOsXboT\naa8nz6Buc3lU8Wupy2FvlpFkCkKP1PZxS2DjvakkoZ9RlqLsIGdDW8jLe/jJ\neC6l\r\n=b/XA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/density":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/tab-scroller":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.671d72d95.0_1609359218429_0.004643589187760089","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3986b40ef2382bf75ea2817b6b5800be6583b481","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":37,"integrity":"sha512-khoIDqNurmqe5U/I854aNZJOcG+NBtqWOiZySnYke+v8suM8rMOWz5MgFhtBMo0KJnjUb/GssViA44Iidb/WUQ==","signatures":[{"sig":"MEQCIAxVnxUBO14P7lePYLGPEIYPi34k9KynUGakYAcqM+0CAiBmlOOlcPuLaMrci5UhGpRHop+Ip1xVWsCvl3TOdWPl3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PWcCRA9TVsSAnZWagAA39MP/R176PMIzpbbRMoun0zz\njhOr5Hqs1VexnUtlUgR1J3bzV4qPEp5pEvezulWTgzyy4mKPO3MrQlXn+RaM\nm9fMTIZ+dNYtpHyG++UqrCT4eianCKKRdiRbCAolT0hvYwnP+ykYoBF5C8VR\nEfQU55wYQXJbpxFaFYC8GMBIJGFBnWFeB4IrVbOO+qZAt9g1buZgVZ5uNDB1\nC1Crxf+BtAdEflfjBZb+6WE/i/hOtq+ZsDfrUNCrmCRzj6UrEvI16iRWguqA\nZOnwkLajknxTFVX/GIKf/vl0ppvJaldWoEChhfFjBPCp1PK5Gh23OkzaZWOb\n9xTU7Bp0BhBwQN6N9XQ2nNajwslcGYOMwpdf1PzsQJ7mUc1rulruJOzgacf2\nZnZQw0DIYBOP7GJAeNp4/gtRg5znaUg+TbnLNUZm2vX3Wg8Gr2MDVvGpjSsc\nJ60JDMkURURcvJ7IIOUYwKN0Ouo1Fx+w1kNMyqMFc4j5QDNHncjChxVMkuzC\nB9ceHMZkb+aY9qx0NsU+hUtnZz+6PAXiboYNun8H/WdE0xex61ajo6GhhTkq\ngYhfOymExwg94Pt2vmRtPTGAT0p3sORqLstRbAkB6oQ1MqTYZ/rR/JxScW7/\nuI3Yq0XRaq3SIIkXUwAycZET7bhAHhNsIggFt5zwH2z8pOs7FyH+cSc/6uk1\nVDTr\r\n=mxti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/density":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/tab-scroller":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b4f5a1c9e.0_1609364892075_0.7265410140428767","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/tab-bar","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e15fb4765aa125772676cfcfb3fe4b331a1838f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.a94bd8deb.0.tgz","fileCount":37,"integrity":"sha512-fxpkpjk6ejcriGicqHP4b7+RDyXGY8ehQDdm1bDBEu9c67aELoVE0lQv7bN4zNHwyuEfiYjIQrc0aqRmSvBXLw==","signatures":[{"sig":"MEQCIEMhi50h1w7w1iAvqNpSQuH/YPxAS01PzzWG3v8RBB2cAiApVDOs12wuXkUD+daxU1nHXYo+/xtFEJv/diggYTmiOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PnRCRA9TVsSAnZWagAA1dIP/0AtvVWuucdhX//0xBes\nCTGl8vI2qbx6l1jRq8iYv2Om/kiFin4OUHsxNYwtzyn146kKRkw9J+avPHxl\n10xMo/SgbuCUVFSvVlePup4xJthrkz7eUsxrftvueifSsOS9JFstGK8ndpqL\n7nt5PJN7TBYvV6TLbSfFMArCxG+w+DVZ5tU6AkJrux17AYOtaQ4zzm4BfYU7\nuYUcx++w+adF9luWEhkbauF3oIFz8yf0rHl8+rhAcODm8PmeQjdBDoINs4u3\np2RJpR1LWLTH/86pifhKQ1jp1SpBO4h9HwYEcBzw9b9RC7TcgOJkf8bOf0Ij\n7oVbXz4pzQcPjUx7VDeXYte/GE3xIxeMJSc3+Hd9jm45wfY6cr4ODKfOVcoa\nGsvoTybZFLOzro6lawqk+b6Q0ZCgPtTdGYluyCqwKODIx0HGuRHUZ7KnKN36\njy7klC82g5FhK/WXmkRVwp5Tro2lVkxUaPGKy5ec2MhredQHHZnZGkmIV2j9\nirv2by2MuA9O4oiFKlK1ClvGWQE43k90C6l7Cx0FJ7WGIPCvtHKa/dD0hA11\nQPF83sakPw7Nzq9i/kzWplE0FITZNyiejrtquN2mLogySwSjyiC+SjEQ5poJ\nlidmCJlTohJZBUf4XLpBhD1IEs6EVDc2VETfaUpqb2+yvQ0QpPYak5aPJpr3\nWMWF\r\n=Ggr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/density":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/tab-scroller":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.a94bd8deb.0_1609365969524_0.008403111340962166","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/tab-bar","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41c18ee30656551a70edcc67f81a2f6958fc6075","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.5d128511b.0.tgz","fileCount":37,"integrity":"sha512-BgpB10kc4N548/oh5tEHzrqH0vvYICbCqmmBWh5xkts4GhpaCB8vr3akd1oHINw39ytduFi6/+cdTYiKWGCKDw==","signatures":[{"sig":"MEUCIDy06PEk42KkFEO36otz2pVf6i12MWSEiOdxl63lGHPRAiEAvUpobGcMX82/VXsJr/3bEyR5orU8BHMDbbmkfAcY7eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PsHCRA9TVsSAnZWagAArpkP+QD3NzxVxoXSr7Yqfm/v\n8DI7f2xj/HDbFg2Z3sweyhgvy5fpIP1zxFcu7nh7BP1vAKP/6d830OqG2DNp\n8KxLfrh12pfN9FIFzt43PqgdhmzTJBMidO9NpEEZ1AbmnKZ28Jg1H3chG9o4\nPU7S7Q2dwx07zYNtsyMH5WFL5yafuYpLTPiUW0fEPslD4ifmVXqGQ2zv6bS5\n7AJiy/q5xNJ9bWBPe4136xfDO7S1jAolVuD9fWvqbWcGhsYmpthkI2OLZ+QV\nMTNbv8S8EXYJlWPpd9nGaELT8TNDmoWMDp4kjLBFO+OvyfnRupSSRrG108MZ\nAebR702Yk3JOgub5B3uxLbAkuRvNUYQlhhcHftcuvXykWsxONmulv87nIPFA\nl2zeJCxQbCy1ffj0Xymx6eu2r1GmdOjSpiglDvMJi/YXwUXfLE/z2Y4Ft1rJ\n31uermMLuZKKENrHxAQEAMqv9YKCgFkIQmIObBWEc0bZIkQffHIemcae0Xmd\nnHtqQYivpeXonolkgtGnh++Gj+GC6Q6bvzF95ewYHU0gU+AVn8VJsNqDp0qF\n/Vh00p4J/Xz+KibRnz+597FNJ8jhvAhCRPc0Rno5TSrqw9qHPb4m0vzXa59o\nf9TG6yFAGeQom6Dhg4+DHTtSwGNAA1qezim8zcvAkeg6BLTDgMm7G4LtJE8s\nuduj\r\n=YWta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/density":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/tab-scroller":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.5d128511b.0_1609366279085_0.6289906302121997","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/tab-bar","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeaa2223cc744d2278ed1d02f0f20604065619cd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.365c69360.0.tgz","fileCount":37,"integrity":"sha512-HMppV8Sr5KT8sjGg+QNHyaJ0+yzLP6ol7D1KMr0vs25Kl6MkpUA/Cetgu03WCDllwxnh4orx2l/E7kWc8MrZrQ==","signatures":[{"sig":"MEUCID9JV2bKS0eYJMzwHdgLJdlv2G6INwM47nESE+BryU3iAiEAvR4xgj9ZOLTGqSruCjOB3RkXbDLI58oY65gEGGn9VkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KbaCRA9TVsSAnZWagAA3RsP/0GS33lefML77d/yoadZ\nDcmYOlrAITtNi/D6qvIiRVaEqalAVRqb07SCCgfLVhcv5RQiQTx6/8yqmmGf\nYWGSrticm5mlc/SdTGe/abQ+J6erCfErtQHfSFw9tbImNWK4lpm6OFcuf2pq\nhgzmpxfJmZzTaNbPUrmQx5kzKG4/2VTh4Y2lCmqUcKUJCiGvfw5hSbWnhSt9\n99/oilxhIGOMMOX78wRLX4UHzlUyU/iQkH+YYK4lsn64gXE95C6ai/XBZoCq\nkGG0IyutRTWLBpcvLqJ70o4TiRoOTZ0xCEOlkP5jN607Sa7AoozUrckrdQgh\nnb+6JXCem7RwpH5vwvVMhITZnazoylurHR0JqFuvgUD+abVqOpg/K5cEKvyd\nKaZaleJnYBOKGmogKAjYR7g0bM4Wng6IeCIxWk3mcuskzIrIhMyukyExmUN/\nNeBZLE03Vzaf32d99c3T3B9IAn/dClV31KX2hxfuECgoEe0UHdvJf2VuYo9Q\nWbCnPFbds7jxD9gprji8y3MItYgbG2C56fTbsnkbhukKm7GZiqU/WmUIGz6V\nwKjy70Wgn6Qi4bJ4zSxpAFF9f3jysdstQ/RDaFZZ940I1C1J2rZenQnfJMga\n7u2eS2nEOAarp8geZkEys64FOg9W/cLYXcLmAH3L/LAsCcyEAbJrJCErXsgW\neOsC\r\n=In05\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/density":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/tab-scroller":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.365c69360.0_1609869017585_0.15021418080147297","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c7a8219cb5440d5026d0c723607c95c40581c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.700a8261a.0.tgz","fileCount":37,"integrity":"sha512-ZIFZmfEqciv2E7YkNojJakHkPhiUOQCjusjv/dLpsctldexO5lUlLS9jMLuayEjUAEwChPVStvIrupyB0pRIRQ==","signatures":[{"sig":"MEUCIDfK/VZTQOq1FXttw/oC4wRa/FJs3gtbLAjg036ogSfLAiEA3bel0Z7hnpd3czyULm6fS/0bl1bELwt4e6M34wEYIy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPjCRA9TVsSAnZWagAARNwP/2ONN6hbmEj2857LS4aL\nX7BuDRZ2TxFBt9QHhIy2QRtQBq3akrdiEP3y/ydcD5Wf0oJNP76hvA6jPnMQ\nyJVTFxXbZJx6AwP8401ZmQxffy4kNqQgHJ1+gfiNsluBcSzBFRueQLuPz1an\nnJo8GXOtunuGSU2DHrLiNRr5hwtzdU+/qW4ax4FZrVPOnv90xJPAzFHt2mHr\nb62Z4fr9urLOtcIrRcsMLniosa+W96rD+j0YEbI714N7tFRKtvOiPXoVzT2v\nLsNxDdUJuzt5VAey5Pl9DMjZPKKYqY9cqXHXoBNOK0z81SLP12Hi3JM4h3SE\nEdZtpDvEB/n+PwK4KGVMm7gn2orpisO48HLXSsj9mums2iTNYWWV1i3AHTGn\nww1lpZ/WeyRFfih7QKiCopv992V/lBqJJwaB8bWGdslxDJFtRXav3ENM9kj5\nQ18/VtBuA8KEVQkD6gh8RgwM0M1ghSy7cEI78YqwL7qfOoUA6L+8tiyweEpZ\nRXku9ws8fFsjRkp2kKxo1E1Z1qabJ6PRpl53ikvw8817AaX5LuZqBWy2J9cg\nZ2oOOFkMBPxfsfWFbRQYQOYe8lLPT8+zteOo2cwuky5SagNwAlKPtNT+fA+1\nA5mwq/V9eujgI9z3MWeH3+goGZkdTz1sr+r++7Koa8Q+AmXKRfRVPRpXypZE\nLgPy\r\n=7qEC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/density":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/tab-scroller":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.700a8261a.0_1609880546789_0.13607969920976926","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/tab-bar","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5442f108021b80b21e2518d1a973e0e23216648f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.766981c15.0.tgz","fileCount":37,"integrity":"sha512-TNwx2B/89fn66/4GQ5ZOTl/LXqgnKRIncoLSx+bcoxIBg8JKezJGkefctZ2AhEOmXlxlGehbuyujGXVXNkgAbQ==","signatures":[{"sig":"MEQCIH1zv917TGlYN5WOL0A4/uusJF/pAc9VdiWlwxLqk9TOAiBhxyJ6dJYkQytYk0hNS3p/uzYojozeF4WkAikyE2Y4fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Os/CRA9TVsSAnZWagAAvn8P/0Utr71sUe0LKyl1DRyg\nF+gKm/31IOWB2bj92c8kklR1WSsH1VGdWmK0OZmjAsnMVIXtWfTDmFhc1qea\npVAyKokeRNMjpw/ZxOKbStkhrojyzSsQO1kuc8Kp3SmVYiZqiPtLvIn5Q9Vv\nfb/F1+aAclmjPbMYl4NSzvpapf/PgdwOkjCzTEvHfoeJLwDRaSPNJPn7Zwu5\nWrOySuWZzJrSIK03iV3XF7Is4iPYdV1DliR22VfbHXrYw09xKOKQMQBxHfi6\nYLaF9wOdy/cnDyWCxImtQrHwAxa9kps9uKM0JKWsDuRmh/843u+EPYnPx5Sp\nEn1HDWKAr28uhZunaoIsyYN2FRu6Axv1mUZ+0FAdr36rSZujkZKcOhNccAVq\nVwj+H3bhhRoAlIk4UGUIny+WDVal+Dg7FIp7xx4bSTNIbanRDOQD0B+gLCYE\n2phkWHFnCUSlcnYgSjJHLwgSUjcxt50f3CSvf4F3R/mTt2Eh0Cy6h8hVOy9c\nX13VxcPNPgou+1enyRmBlpjmLa8oY9t3I4PAQ6UH7/c9/b7Ql/HVXakEvnNw\nkJ9I9NNGP1kIvGHYUwRU3UPwowQdLJuI+hhqZ+AJhlMyHgDcULTIDh8VHzb0\nqubFK8yjNA6NFCj0Djfb944fKbQzEhzIPSQVeYG1dw1j2go/93+naTCItHZv\nXNrW\r\n=lQSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/density":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/tab-scroller":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.766981c15.0_1609886526618_0.2551145974156168","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f6b03392d31dd4b658dca796b0603c61f4206bc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b28c576d9.0.tgz","fileCount":37,"integrity":"sha512-FG/ECbUh1799qGCNNwKh5AHJTaGnFYobMbdbOY0X7nw5A1p0I6tjieqLi4CFeVBhQpy9eak2ROrGO38saRxkvw==","signatures":[{"sig":"MEUCIDZIJgmS1hya9Q4kY+38l6A7gZjnK1kOgYQpXIYvaefbAiEA8xYE48oKjrJS0+LXJD4nYCdtGcg3EWovTmiPk638LxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O17CRA9TVsSAnZWagAAN6YP/iaN7DeaZxIZUGIvzQy7\nk/88Ca3YjyUTmVey0DQp694DiHlM+9S6rFu7sD7t5rAInfOt1ZE2/x85ftJr\naduvPjxbWiBdhdOrj0GyZia9753At0yfdxoG9VND7BeSFnJQ/Zi/G2mvNQb6\n7FdxUvg/GE3iIO7eppAGViMRkHT6iYgirVbbFjbzV2AJeuXq41Xc0DDzKq4x\naXG0Tq27wv7zhIn4SnQ8kwddP+goKPw2JrkXXhESTEnAS+fpUGuM0B6XAq22\n90A6ZH0vuPCQ+mtRxCzyGAEK9ZzR0q+5tdHb/Vl5rwnv7TdpTEJyQy5i6GLQ\nwHidJPYxkajxBMg07sJrujlfckodkEtz6eFvZUXp3U4X1bOpQaqlcmjY6ZVk\n2z6NMYaMccWE1YA9nM64Gnb318TZqjSAqAFAXzPUh1Sdr594UDRdVS/zlG40\noGWMvESIOcE8Ow0q05YLmmmWB+SNnL//Oi8b7y+anVwQ4jem1VZopfp4Xkrw\nywWWHwElKNoSzPk3MvqT76X+c8xHwjsiBjK2SIRUg0rc8VKA8kTv0PxG7i1i\nh5piNo1lAx9N2IlT4ZH9iMzNFL1lgXryG+UJ2sUrLSRRBbKD7NjZsuMuf78T\nC3WQWo2zLNOu+RMS3At4muYNKtO8sWsDFiRdtjiaFq3vNG+HvmKGpzfyhORd\n/JLj\r\n=Smy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/density":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/tab-scroller":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b28c576d9.0_1609887098804_0.763420043335084","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/tab-bar","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ef167a12b80ed82a68f73ba8124421949d9287","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.968735356.0.tgz","fileCount":37,"integrity":"sha512-9DvwqnVZ+5+dZhZ351BP79aKJYTMBYgGJ07/gOYTKF0L/qohB7WIKwC8ehXonWygSJNlduMT1MQczTdK2iI5zg==","signatures":[{"sig":"MEYCIQCTsPIEb5mi0hzZbACCtuc6q2C3eooGRzbMlbQ/KCA16gIhAJW6ty6zAab4pDcsrfxbewVCDynqS/edA8r5P/aBgwGK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dzQCRA9TVsSAnZWagAAO2UP+wXZLmnjWYI7E1hjDWdu\nuQsiVG9s5B52UgTzAn2owUBp4uFhEB5q2+t7M/Dsm4hZ+ouvFnfde3j+jqU0\n/BXt0JFUhk/w/NR+IxbR6+X1/mDvFMyKRGZN/EOF+0VGY9B4MmBLGMhC+VNI\nEPuJNjIhEnQMSTrIo8Cvoi3wgwp2Sat/nOWcuJt6OR1b6PF1iTkHl84EOoHV\nG4Cap1h+9ACAu+/o57+MDRjnWNb0IqhBEQ4sptmLR6+6N2qjK4Q2mi8TnrB3\nvlVFNwRGe5Y7v74Mpfyd2kuQlkEoTa25QsyCO8WVs4VE9tBxeFameT781Wl0\nEImPEh+WhToYxXL4CTPk+Y7Fj5Wo1OZWBJoDpXO8dqpUzpv2U1PGf3nc49wm\nC2hyR8n+QJwyi4vP8HnY8BF48ZdSiXWkbl8qvLdO7y8HfYHND7KWQkNqeuEc\n2S2YwE1AtNVORsIIdmXmrdkT3nsq4iRVwZXUg+04IRuEbqjbBL+U8j7i9cMH\nz4XJtIdZhtEa2VG+iI253FN4p2ogLq2u55YJ5ba6MLhCaANsA6D2VU4kGwKf\n6z36bf3upBBPHn8ok7Xn01pfdP+v1wB8Pwjvx8wjpX6ik8iIITh6pGnUnIbN\nkAl9a1rHHOfn2VfLoaw9m488S8w0dhw5AoblUMIwDgY07HLA2moRHlt1KG7R\nShFY\r\n=Dnsl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/density":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/tab-scroller":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.968735356.0_1609948367956_0.6231533149552093","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/tab-bar","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db192ff5f518bde9b8438aff371223938e9d6eaf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.c5e18b020.0.tgz","fileCount":37,"integrity":"sha512-+uMEEEWXBp8GbXrwoAfTZJXHeY2KbwAndO7n4yJIWOKZ3g6gpASIMD+1dDgKoT+2ILu4a1HtYmy4NqgKKeTZLg==","signatures":[{"sig":"MEQCIEDp42nOAmbRuElIaOVWq+S5y2q8foPsf1SUFv84YIkNAiB2hdtbugaDDpveDzQOY4hzt8ExeLpQIEbfzApsOuuVlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNzCRA9TVsSAnZWagAAm5gQAILwTc1f9V1SCmPEWf+y\nIS1Ygng1s9fI/l9ExTHWT4XnXj+w5MaLsz4aPJtcm43ScN2e0K2rqq4RfNFO\ntxyRUxp/+oH4w6+3VdNOwuMw8mnvCzPZ40AAsmvc5NAYHsf/HJqFuVVwB9x6\n4Rf9ywjifZX8phKe5TYj1FCQpGEhG8KJMKyHKEo9Q5gkNIVHm/9/LjvXpQRm\nybilhemm0dhGQQk2PM2fLa9HY1/U3QxYtdDbEUGvqW7xT8eaPOdLCza+gdnq\n3N4aEK+UlHrghCheSwCnQlJQBErj2hFEDfB0OnwAwo3vzq6l8Z5mOE8Oser+\nQf30qJtk4oBZurpYcx19swZPHMW1EICn1Jv/YhV7x3Xkd1s+gA5wKH3YuFu9\n6dzBO8Ox9ly/oEhCCNA/QUA8gfzszePLglKU4UpqVRmQMp53zSp43Uz8mNii\n/frvQjktkmtZACR+3M2UnprLPa3X7L4cek5RHFZDyBNRgcMV+Y6mKIGf3/YK\n8UhS6VnLvZsZaRsVhgGlsnxYt3iSVFO3K/qhW2uuhn+pxMLVHFipCm3iQLj9\n9ndIe8THdGTGZP78SOzP3hzdOyyyiIi/o9jqhqiR7r8cDjnnWatJAnw8W2r7\nk2NJb5vorWXgizofblbHfYesKb6kLnctFxBSczyL1IaGVOXMPWR3wmxDBqxM\n7gTx\r\n=R+aU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/density":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/tab-scroller":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.c5e18b020.0_1609962355006_0.5883867441846551","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ce0e218daed6bfd603beacddaada5cf22bc8303","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.bcff8a66a.0.tgz","fileCount":37,"integrity":"sha512-psSo04Y3oNVQOPo2RiuHYrXYH8Py3r1tKh+74zSod7cTMvCBsKSzKBRAANMzpmtC+Vx+Qq1JvKrqiPFaGp8HBw==","signatures":[{"sig":"MEYCIQCiU0d1W1M2cI+pAwzBw/+NlYtMcb9utoROP1/rb9mbSwIhANaZl/Zewa7RgTseG6uCQvtPRQjYjOUhwFBfwbPof++O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h1uCRA9TVsSAnZWagAAfMsP/jco5G3xIkpe8NdCHzqm\nl0zl3mVDOv8OrD7TFqlmO+Dyc5EXNekxWShDWvHzDl3IkQxq0kLuq/++FQTJ\nxYNus2RlkDsQ2y63sYBAcfVEh7N6E5fHpKC+kGt+k5MwMAfjyGvGsvaXmraP\nD+e9bJo/a/M24n13/s3dHVq1pgkopB4yn25OSgReH8IPd5Z1vzOV2eIR9S/s\nm/K6VQogmMAR9TvnIZ6bJ72Lpe5xDnDreB8MkkYlxaXCMPKBCGbB3wACj0In\nx2tT1KC6K1KajsfqHs3SMZbtKx7W8cilPBy8ecAuA9lhNwT1PfTktv3qn+Hz\nICgWxT3xSR7hEYjMKn0Scq4gA4dHsvZ5f1R6pJ46LIS/zemztLglLv7NlXrw\nCmy7oIvu6E0gE+zgfeT1eXiwPu71meZZA3ENLMsdZ6dY6KyxTf/xv8roZPme\nbzy6gkdzLvIn1InvR5C4z6SdEAOXtIdPqIgsWNsvfa/D2r2ycagxXLQwYjvd\nV99aybYa+omqHLZ0H7+rBxrPTNmiiO0JaIHqYej2/pIncHBDNpWNUqKMrUK/\n0LM2a9xhlEjJ8Sks1lQK5rJxEZ1UdwxEM0rVRZ5HcBr1Yx4vm4wf2cV1KllA\nzz+ub07dFDV2wEaPM7jnfos9e9o2ZV6hQangFBkNH/l0kV4g1iVoo/2mNy9R\nwWgN\r\n=p1ZV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/density":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/tab-scroller":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.bcff8a66a.0_1609964909591_0.5663494635575728","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/tab-bar","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e012f5ed50e272f04f29a9b4718d7d37600e72","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.79328c9ff.0.tgz","fileCount":37,"integrity":"sha512-mgDg5ILmPdhDCD0Wh9B4CdjccZSIJvyNyH731h3nvHD+o6Sn/vKLFvFi9pYmSoG7wpS7g/RvDsKzj++bwxtb0A==","signatures":[{"sig":"MEQCIHZxeg7BN3v3uh6dxzU03nF551OQcbyl0IMEkmmAfAwdAiAwCF8MWf/yXKMIbEgnRwEwS96lVLi27Dcx8GxWUMaqqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nOMCRA9TVsSAnZWagAArvwQAIAl9smG4k5i6vyQX6Tb\nxqlWNM4Usvr0qugpY1JNKIGr1x7mVoDL/4wmpqSco0oJJxRWmWdLVjKPHBA0\nvdhm8tNlUEW4w40xBt1apKnxQ+RlSmgvoDFVtoihYR+iU3/BDBh2o7vDqEn5\nlBhk7IVkLlLH/lK3QQi0ey3ESOWBIQJE9hdIftBj/KqDyG7nWm3QfFwZJM2V\nKTifLmu8/bEduMs2EPibHBK1pLGBimuGDwg5d14f582MIcm01OV22YzCjwr/\n+1x+ABV7HVaoYekpFlWM4VQHbE9pK6Kmm6Cbt/VPhbTwti6omRLbN8xAbAp9\nv0yVnfhz73h3E0U8DAgphPNwQax8ezbEBqN6dZNB1kbwhKMilgw5dE7OLYaZ\ncct+3AtOP1A9DNSzGa4TIgdGhohsc5zWNVWPkv74v8pDsku81Og8wfEh4dHq\nVI80dfSrV/XKX86VbKAuYVj6QKaCb8BKCQ8cgxJpIapXjx264DpB1FZEkNRB\n+JD/RytiNpysT/MsAsU/soicMHJS3RtFCJTYq0yfuVKmkgJpyn1va19lYXLR\nNHcdDJl/eQqzotZkEyzpjLs7az56XAukhaZRibX2jZpoiHF1Aq9erVyfVRNs\nZwajIuTH+oKW8SirZltkN/CaCn6wXJuVVZaiZ7WKDWVhBebBzAV478jLPNJT\nNKHC\r\n=5kgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/density":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/tab-scroller":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.79328c9ff.0_1609986955870_0.7517177125235948","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/tab-bar","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48735029543c16ff2223f9043ae3f43580876bd5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.121e1f303.0.tgz","fileCount":37,"integrity":"sha512-4x88hv9KOYSNgyYwI+LTXtfIVcPtepCV93kmgkdYLyIpeJXaLI0sjqkteh/e1tRxPpXmEkCv1ewDHJ3IiSIL8w==","signatures":[{"sig":"MEYCIQCkCcZLV3yLsPOt9hLHGF7pLBx+fAlEEt43KkxHo0YtsQIhAKvHxaScq97uYlMAtRwY6XlVexDYTa8ILyZq/uNoMRQG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95d+CRA9TVsSAnZWagAArnIQAJ0u5AUHW3YLABY+xzkA\ncHOO4FwihatfnaNck26Y8meVmETAkWIHYlW5ygSxJOmHBQ2LCiE7KU5PmqJ1\nX9Ym9CrzB4Gl/hcSkeGeE/R2NoJ+e/W8Cs+6mVieeC6m6s5nfSVaTnyxuro5\nXpXQYd7ZAldliYCsDM5TdZ0GWBT7p2a0LI+3wpmD40zG590WHH1FZ0IuVV/2\nadUIviUxyySG8JrIUraNEtbfS59OWau8nK+TlitXViKYGQ/g1FmmVlXmwxA6\nqFr3Iaw1pIpua92lcD/Dp7tH+ry8QKU+sWv0AnONv4bofLZN3bsqC0lG10W4\nsQs+BMO1Iwbqpg18CFDKMBdGzrOtMSbAGgriUcjUKZ5itNyYQ2u3vdLi7jhr\nopRLQHBlSdg7GpvSLNaXkOO3RYkIRbWLarwGWrxxh0ax5Lg881V4VyIoL/7B\n1tJJchaAj59igx4LgnWfEtOzpwdhlY7aVEWhR6R0jKT5VB2muJz4v/u0i9KZ\nVcUF7T9aIpL6J2NNaABYBTNjcP7Ql70OV8+HXb4hQ/gKjl64sPYsWgYqTPR+\n9JQoRs+B3ygoVbTuvJfm+GJiB4e1rK/AAvTvrgrK7SkLptWa9XCHMgDCkqp5\nBcXwU2gckCVr3fRXeNYBYWlxI7kiS9ilP2dSLgw/wwPFrE8w6H9E0w+Rjp+M\nHLGh\r\n=EHzC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/density":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/tab-scroller":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.121e1f303.0_1610061693645_0.6125874054723208","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/tab-bar","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e625fe6346da212d7765ff0db1d69f45d8bce319","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.abdd10065.0.tgz","fileCount":37,"integrity":"sha512-/d+HVTa0ORw8jt9+NMrcZvq9jzUuIbRqxuoK4Mop5je2+ZI2oJaX8gwSKK5+8YDfpJXJ7C1zt6+Gkzx613bbyw==","signatures":[{"sig":"MEUCIFLohlLW971f6WJjfDX4ScLiqhMk3CmkZplk6tyVHfazAiEAzmEE6a3vHdFujIu+NhbPmL3VEvgz/k0Nev/GJOcPxMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JwVCRA9TVsSAnZWagAAK+AP/3xcVmPhRHWeWkzNLwjT\nSYFbgU/JV9L8QoxKt7fYmDe4gJ+P1NKibNTgjc2ve6Mxi2UYP+dc/5LIsE9Q\n4u2upd8CNAD58/tjHdsqcf4WRiaFMuw2AuXvI5qgkB8pAeCeqxRD6805wL7i\nozTuVLfzDhA486UeglE8w7VvARajj4hGt9GO6gCWPD1B2VvoQM3qIj/zaYE5\nzTqn5bT6cwhh8PXrDf6IanTI33ZOulm27T4bFL0ZGjLf0uiK/jwsHL+13Lk2\nPwiHKL19IbbUQJ0xT/MLweAgJy5MNkbVn5WmvBeuFrVCcq6z+crq/HwfhEo3\nucGJy244PxSPaQ36waKFGWowAZoFSUmkP9XCF58n4s7saZGic6NFKXj/bp4h\nDMmvqVdIHp/PAOLcjKUqHoKBXYP8fHJIXRuTaOnD8vGbm6R9T3nwqjkxowV0\nY+3Mr4KB5J3K5cXFfRvZktvcNI1Sz8RHHmGgZTy30adQgkhjoqo2wVxyK50E\nDTN0ivamgM9xggT7HMhJCJvGgO8hGNEqBrjNXvSHnjx8XWSBLg2dlN4lP/lk\nOCr0IC1H6iPQLUSOp20kpTWjOriYdEi1YQcDT7IJl1u7nXVjQlcHFh0EKn/Y\nUUPc6zWOW9zZELFD1LJ1YfkMAIoz36J7vrY4NI4XlJr61HvYeWfCKxcr284/\nt6vf\r\n=QrQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/density":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/tab-scroller":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.abdd10065.0_1610128405044_0.8465349501602257","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/tab-bar","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"269aa866a914ea9ce01db3a558ad166e12c9f374","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.089de519c.0.tgz","fileCount":37,"integrity":"sha512-yAmH3yrIRqD/XOiBc1YoDdZWV4QyyrSInoAnKjaBXnmnCO9bgdWVqssoLPcOXOL+/QmvB8IeKltplOnsNnDz4Q==","signatures":[{"sig":"MEUCIGgT+X2O/JR9H6y1whAafkVhDWHaBhvVwM0QTglaqZZlAiEA2euZ4OMeTXgvNboIS/QPMIF6pmljn7jWpwbGgDodpdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NscCRA9TVsSAnZWagAAn2UP/j1GSWrg26+m9A/8qitN\niX5VLK7bhyMqSUpM4RjRi6HfK7j9o1DXfVdfwcxv8iCCU2e+QQCq0GSXNeH4\nskI6Z2eE86Fz/ot7Uo4X38LsEQm/KhVD6PMaYLSAXM7UYMzv/6tx+Ddrd+dU\n3VN2vDRv+sARBgAMLadgDbw9xZKV+FqUd2+VgaQSz3hI5H826CENvmvScjoU\nqPdZVd7PgTRs7ww89mHI6xKmmoAFH6wk0fdxEBMYyWr2EUAlBeMmgqJe+But\nuaY1Z5DVf1IDxD+jYZkeQBC5tJFkbYhBYOIjJXuEZ03svOB3jzFO6JBqn83x\n6SuAGVfSgSpinmp9qEKiYmAHYRFNrr9EKKRQUM9tMANWEiwU4W6lSpejJtgZ\nHklhSi6lFNIj69H2dCSGGZOoqdlQn9eFzqTovNCy6BIy5AWTh28xebGt7SYx\nrPS5+jtfRx56OSn/hBiKtjhmseSV0UnPC7hqSokVqiDhIL25opmARnkSRW2+\nyOA98SZVAWSRQuMpcICB6E3qud8d+I5KymU9ke1QS5r+DAxiS9iDoaENr3SX\n9+eYUJSgrmX+CqmUobvu9w+RksO2rxek6jSR92DGPMaR/p/JOddeGTFWdBy7\nW9bH4AOQvCMByvvp9qZD80yztiNrMgZKX9cji58Ntn4sd5i5n+V2AtcLaM7E\n441J\r\n=Zy3W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/density":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/tab-scroller":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.089de519c.0_1610144539989_0.942490484650536","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/tab-bar","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fb2f6c034a50a16bef4fa333043ff9dde4c0341","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.163119837.0.tgz","fileCount":37,"integrity":"sha512-UNoVH903USusIAJzJa8eOjXeG7uJUg72AEwB55/kpP+VXXb+IO/ngOijDWGmi9nCq5YpnsrouR1W/B42jL2FFQ==","signatures":[{"sig":"MEQCIBcUEMjjgYwc4VrC/JTDagfmMZeYR/9GZbJ1ehFFcXQwAiA01pGJI4l3bd0k8oH+/XTjXACew4ZyW4eg0dOg4wHRuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7yCRA9TVsSAnZWagAAtPEP/jp5mY15MVzi/EVIbKto\n9JaLB0VHW/ql5taOKtWLeHTjm1Wou/CA1fh+f9+/8uWhOp92IOvOh8VNtoU5\nLXkDc6oM//lMveXHMIsOLkChWkXHDhccQqZL6YXeY8f4XKxipiAZJ9zjUujb\n0rhhN4Y/3Nu8rHDmbMOmDUeqwmiNUa3UU7YSIVSR0NVcFQpFvK7A4undCcLz\neSN+lCJCltiK32i7CnAhWI4mAf0FZwF2lSsO+aiXdgzh3dC13bS+ccFlIJG0\nYbGlq0RwwxypMBdljuTFEFllIo599/pUyd2CcCpEWrxSCuMC7ag3f1G8iHIB\ntCK6XFoZTEwdlNuDM0EH4HSYQkQuyFb+b33qiSaKa9xkG9mG9DKTv4iGtZKg\nMWGIHkdOZ6+TrPEAaGiYwh6xV71BsgCnX9NcB+piipzCT7Okq0075MkXApyE\nUGjJwENb32K1Rm8ochttW9MP09Ak74zMw0Va91YJmflXVgPwAvp77Ilx1bZQ\nUIN3BFbdrDr20qFDnrsBAsFOZaIfNatO1LReZIPJ3oQgQOdlAJLZj1g4+hZf\nBr5tUBX7pVq9bN0+0fgIYmUZ+oVz/K41iqY/LqcpWjzLbriPfuLnQtfM/fIM\nl5A49YaGnGyiLPi96NC5nkGFZ0vsGWFreQC6XEmaFmA65gCiT+rDoVcxwS6p\nG9Hb\r\n=zNrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/density":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/tab-scroller":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.163119837.0_1610149617622_0.03994732555852698","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fad0a411a82d1749ee78d26932a5fa236132cdf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":37,"integrity":"sha512-9rq5aCx+1mGR2y4ziYv+pBxONKgvtvGGAoCzA7YFNIsAfEk5zFoFGVWWfaIGqx1jL1n+aDZG53xzDV3lw/VtTg==","signatures":[{"sig":"MEYCIQDhWJ9VhBWkvtvIo6eL9AmxdKg0/zSatlR9lwuD1sP5ywIhAIY0UulKAWoB+b8tAFM7S31fGEWq5sfMvjdPGkCT0uQI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwuCRA9TVsSAnZWagAAP+QP/AoN9zH9ynzFA8qr607O\nTo9Z2onqHyI50ixdDO6aMPEWorB6RbOoK6mJVZAyR7Ya7m/XwJajSdgYfQyL\nAfXz5FurG7XcwXDtc11uDlQGw6mdqizRImkItBDMDj29sPFrhKPxnHgDePYZ\nBVEoblmI/zGlId6v7YvQ/o0sh5TrZgsnJbqXKcuKNcaqooj0JKlWCTM7nSe+\nlvFtPt/Ni1u9ORAmFl5eR9jbWNELaiDnhXLjnAYsRnoTS5CW5Eav/g/RH+k5\nz1DcgjO8nijSeTnnUSPcrl468EYdzqXWpGx1lw71xNCA3zk+BTsBTcKxT2Il\nHDtsnIl4iARvjxF7fnqITwucH8j3S1wAiKOM7WeOCmz6IIgJ/wp+DYaOIKZI\n55ilnocye9syEq7+UcpKDh8wS/tBGUQx1egj8h/odfulqcWKfJLsuwea8I3v\nB1ZcT63YGSwt1o2+3cQa8Gre/GYqmV+mAIXGyOVnrT/ipm+KEPIYa022u3kF\npFoaN43C1Gwj92OCeCsDoGVArNt8mZ+ukPoaSdemMVkUHtdIkcSq8H78HAvj\nbd3e+JgjNslwqCLz7b/OfM8l80pmqnRsYzGPugSIP3Bq/Q6NO0hfIJKwY9zb\nRzvSub38sazHE3lK3W2Dvp13gpOgfQMkvzxEYRJI8+QNeZB7mrh+df2AXCai\nk4cx\r\n=zSFw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/density":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/tab-scroller":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b8a1a58e4.0_1610382382291_0.8990253204740413","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/tab-bar","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f764b267bb7dc94434258ccaf5dfb53995d5825","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.7584267ff.0.tgz","fileCount":37,"integrity":"sha512-WHaArlhZitz+T1tNV0W+fvm5aEn9vSgMWyoQ4oq9gPoszv0DlxcKd2MIWM3FJQzW6vXimT0aRa4xjNGCYvFsNw==","signatures":[{"sig":"MEYCIQC1cTvoKrSSG517VWJ5VJK/9rl4vYFM6te8LIgJabiiwQIhAMJX+m+qBkPZn+X8TvL7FTwQThfv8cwQ4VINROPSbUtq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PfpCRA9TVsSAnZWagAAs94P+wesPVdN+uKK2yYu0uGr\nhC0r1/cQ2kUVpCSERhgkdgJtiDRSC8yQa1/BEZ4XMUNYZR9Lnv6ACUa76NTf\ntLJwySd+B8XhhnboVtGV3NUPu0cCTF6tfX9YrJSQhEIXK9icNZjMaAGWg4mV\n0q/GSHzTT/aYa+5w1n+slQoO6yUlxGxUPVQ7aGZH7BBOPSgF59rEr+sWLXCw\nicU4dU4y9Z+h4gBqCmxiFQ7Gc/d6pe6ecbh+zAhsWa/0fEzuYWAcOQflib/n\nBBoRkeuUNbejaBUw+IKmKyB40InrDaYGrZF/8M/IrLaEvYEgnvALstjEoYnd\nv0rRskDq6rM9UYpegZGN6x2yTVHLAjzI99H9X2MPIzrCJpSP9FtYke/GmcY4\nPdQpmCBWIwGFyyCBWRxAm0As75gwD1lWryNnXd5vv9UMo7SdEI5zLU5XGo2x\nG7scUIqmFLEjk+ZFbu1wHK1HDAz9Tn8dYFOOH/52ykQoG9kpoy5T/EaLgdT4\njK2zcDgYjCMYEtcqZ/DXRsgsZsXA01Ocwr4I9pPSsFLIacTARg2Q7LFzK3qm\nBlMULSq0sb6sIsGn4vLvMGygcfLoXd6/OKTlZE75iFFjckuXmnNohECdymWV\n/uuiemLYaAnu/r/buq63uFMecID2ywd4Ozfj4gdXdsKSY8oUCyq7TZs1rq2t\nSTbG\r\n=KgBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/density":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/tab-scroller":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.7584267ff.0_1610414057376_0.012893544221021624","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/tab-bar","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0878e0b4d64d1438c6f36d69f7a8f1d37905c5a1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.251ac04c0.0.tgz","fileCount":37,"integrity":"sha512-jiw7kbcQFxXILGWOjo0UXoWY7IZkOnZlo5+pB0pBYl0NkgpC14tGiT0cVqW69GfkGlXPck1zpwJCgoFNO1G2Bg==","signatures":[{"sig":"MEYCIQDdtE1v9mxlZw1FwTtTOFKf+aGvYMpCAp1fl3rL+r9KKgIhAJCDWG76TVmxC+RKkDqfAHolFVcMYUeKf7z/cejR9Rl+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f8UCRA9TVsSAnZWagAAjCoP/0oYX1aGyZTVuZ47wpU2\n0ZNw4THvehOckvAqSHiXLcUwSMjtSSdc2gnX/4JAv+iRXteknOiZIb0OVIov\nOKMcDrgQD2N/ckLWKHvYXB3QHj7PbmK/DyCAXEwYflseXGj8r3X/UtAIXbwO\nRps2FdlE54LgRcYi1aYb6p1/pMc7qnMOnNjhNjnHlcTXcvgWwzJ6e+Ev5Xkn\nQNF2+J7fKGZzGGl7leGAQlK0VOlTnGaJk4Xb70sf4gXrGljHsVMEo6B0uado\nj0VEfBFH8edlU1aQvuYft+3DvOcPJzUz9zmce6BlbcOSCfhgf3RbB+/n9Xib\nQvNPou4kW1XF6ICSUfAidWKXRya4qs/iI39s72Wkx+7X/EgWedhBcr/6zPQc\nLRSnclrFdXCGJaniQTF9sY+gnTm3AMfXqRVICGT77ARCl6vq/1oMUfjSN5M0\nkiqxKj6ZAO+zpC5dQfMHK6F0QGwGJTmnNpBIo2ZSBFbBrTVzKcZVPnmhkvT5\nKDD+uJUVtUVV0YHiggCrNKYp2ZBL9yPb4PAsU75P4gwwmOCBbokKgPokUsaU\nkWJTMbk2441sLPyBnaHd1j8I2iEcnOIBcNHhtDKHHpilEoVwNdPyFbFGiYGR\nk8RcwWh1L1b4KHjSWc2ctnWBHoC1TexBcWB9j86Vd+vTlPPvziRwYnkIG07S\nvOY3\r\n=R8xU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/density":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/tab-scroller":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.251ac04c0.0_1610481427518_0.4617672602123788","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/tab-bar","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cea081d41505a1f6783fc83b76caffa5d1d6f429","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.772cc1068.0.tgz","fileCount":37,"integrity":"sha512-GFaM8s7uxzUPhfUnqXEYJaF+f7j5vFXoE/fIuafqBP6gzNmxJDIQdNI8N/U8F+WhvB/F7u4nbU5zEQfwl9Q6xw==","signatures":[{"sig":"MEUCIQDFsPOJXqmJm+O3R1F6+Rp+YuuOETMpueO3KpAejNkhBQIgY1pX2F6ao9g0fhaNY4rJWYoeVVfIw0ctN4ux6T4Goes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4uZCRA9TVsSAnZWagAAIV4P/R04hSHpKVUSV18iHy5S\n0qi85Jr1lSe2D48y/B7EvjBgJZYizqA0Gm/JG5Bj0hDzuTIeNjZq1YrVRRaF\nNYZPQtzB7HQ4pC5rU74tOaIG7L/wvvQZQ9UmWKqONAOv6brXAIYdGTo4FNHd\n6xwenEL+coCdDiVZC7jC5XJOPJu7vniwH0UCjwnjueXEmVQzEZF6s/xovVU6\nZk+ZQG+/3HEEbF8IGwFw0pOCsXDDhY8x64qXIu52XKND+kPfNcSjvLLOZLzP\n9Gwo824ndy3L/9AHtUrlni8uiUMKPkJKtTpaqTs9E8WeSUNYzTzzpBygvloE\n6JMogrwTw0Zsa8aAE0lBQ7ru0Au1UfPx1ERrYAO/IPV8cW1jUHxL4TXxAlpr\nHVE93fqGN8bUs8ImD2X6+y2vOKAvhWzgve4+7W5GPU4PWSwDHQ5dtxWYx9CW\nkax3cJrhQM7DIkKbbSZwzfmFcG/K1MuX5WzsB1Y72QANAq9CVauOoQcoQDpJ\nUQ6qmPMEYLFYSCbDb/jQhKcUvdQuP4G0U7piwYbTJeie9+yHOxRuny+rBKaA\nyJZc9RZsZeHNHKUCJkUnpl/2lEMWija4cla472OPEOC7oy9HSuIXebkZ/fk7\ndGsou6MiRGeAuQJkvjuBVObxkIyUwBBTlrlWNuIp91US2ogtN57cJTccQ6PH\nV6uV\r\n=gdsZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/density":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/tab-scroller":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.772cc1068.0_1610582936780_0.35213721713085144","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/tab-bar","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a9cfd19f283e6c1e3310863980fec0bd0564c4f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.fe13dd130.0.tgz","fileCount":37,"integrity":"sha512-BjorRH9CWCgKtk1+Snt5G/te8+KKGatXNrkIGBRdHKN9t3PY5hymtzhQhEKOHc0vIReD+vmOURH/wQE0ZssjlQ==","signatures":[{"sig":"MEYCIQCmWiBoLShs2T0cbwlmVtFRjSs/MoJNvmH73fRJz0lruQIhALcCHy0m+j5rl6vsNbiy0t++eN6EyCnX9mDUeHyG8aGT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pgCRA9TVsSAnZWagAAf0UP+wcSmiUvBsDNEAa2Is1m\naS3gc1dm5HZ2jnrzlmhFMTgZwnSRtD32gPc9EBeo7wNJVrncqvm6+GWLgwg1\nhbJeT0AZXXt8e1gW4eLHcMXuQjcSB1R9F6KbG0faSI6poXwN0GQX9cf/jtSj\n1GHQivLUA/kxWnFEl5VB2oZ+LMm8sD3NqaUYEEy5VDI23bJiPeCIcrLoteIc\nEOo1SWG3hYCjn+MIgFNQHScAw1o9IUJ1q5A4fcvNVSorL4oCTJq+DWUIvoT7\nkFT3E+vj8s3Pv/o/SqYrVszM7SxsJkR3ARMJu50WJMNfcbvrCVfAYBTN1UTP\n/oLeVLmEksrumRmOct6QPsw9ON3BJ2luaA0qNEJYgcQuhScHzyoYLV1m3r5F\n3pLyRF6v0bkD0tkqJBH8F7irw+SAToaAh9fW8+OWztoofUsh+XiF5QM0KsG+\ny8XqjXKBPg6CMd0QNVzKHhfrQvOFPzyWR5YyHS5ZljAHHS8vAliQ5ubNRy1R\nCI6Z5hlhLQOqN09AW+zyUx0FX/Q00DKitu8Xv/DcPy69TroicyfsHLm+zFk8\nYNSVLCODAu62TBh+pjkwOrjACI9iZYX1OXdYUIyvB8AAnexnMH2xOOGG7BwA\ngtCkPmKoF56svxtVSgUQHQmH3KxuXZdInQ5frVzK4U1lOXFH5eY9r86OQy3C\n+jeX\r\n=5ZZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/density":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/tab-scroller":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.fe13dd130.0_1610586719538_0.7741259067216455","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/tab-bar","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31fe7cbbbcb1bbbff1e3ed088bc037e9482dbb2b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.c7c5da28f.0.tgz","fileCount":37,"integrity":"sha512-r+KrtlE2lugIbQ9r2VTgH80iVPKU01F8gzzlQdjHqCPM9ZEP2eAmYyyQP+rV8N9NVPareV+k9fhzBLTeyVknQw==","signatures":[{"sig":"MEQCIDRLRgbUmeXvQa3GcqqxLnX2B553EWp4EYRKxC2IxJoNAiBAWwzfXBqXsCJir2NkJk1suq0K4GMbaLj0OYF02nZAcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/+CRA9TVsSAnZWagAA64kP+wYEuzgGepA051x/6V9c\n5n+mn/P7FvoLRhGwZ5dPWX6aKlpwPGxHViFg77I2lMFEIzAwZbPtc3RuVEpO\nwTJp9Rk1FYsa2qhAJdK3zGeNF/JmwrY7Pi/ECYUAdVnRslUsb5uzPOsFpX4N\nzvaRZ7n/nTosk7FUAhmc5YVNcaDrwzuCACw63htaKeYGz1GYWWTQkzWrH5Jd\n+Xs04sQz8x8XCKwp7sl19HUPd+AgGg5wgHDTrtFmsISd3BkTs+cYQ/3I2rxQ\nFxcNlNpByIYSvUeaBO/tbFHuNbZrM6knnF3U2hlR8sStGr02OoaqHzXfVKGS\n84w6q6xE2n3ABBfcTypkRLyUmHhaYYklt0y1ExVSlkB8NnlgMVfLI8eXVwi/\n1rA5HyqMVXvO6TZHnIhOgdoTRJthEJnjCb9GJCqJWj7uJHB48U7IjqUE2r5b\nzWVcmVf3xgFuJFPGxLx4oWBu1gX/wR65AiQ2TUe0pBvksG56xETCVi2jd8Tl\nfAh7uup3pio9aWrrPCp0mRLWuKfHHlHw2kMeIHiV9qdeGgexugr77EL1GfDe\nfarspgt/k+WhFb4MMlTB2D6/HA4+mzuxU/bX/mR5WQJyr+4mgR7Yhh1ubX7X\n0A9j5YZQKFBgcTluyKEmYqOtrjZYh+EMmzAqY3XWOVI43fKVAK/buUfCR+bN\n5Juk\r\n=BKZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/density":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/tab-scroller":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.c7c5da28f.0_1610588157717_0.2168149539266364","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4677c755ff85298ff359357a5056c1082e49099","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b2faa116a.0.tgz","fileCount":37,"integrity":"sha512-jI1MQlkGQ/Teyun908EtT9ih2WCsfZlWKniLJ7d1MkWTXW7rtZ/ELbTYAd/wg/YldMReeuSrhqg3F5N7lHq3LQ==","signatures":[{"sig":"MEUCIQCf41U7Tjw9TcX5zXLRhC8zrs8gxtWXlB17DwzTUgaLhAIgUYJrdCI3wcgFsO/qa+tpf/Bp6xbWTlJeEsDxvfatrJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzLRCRA9TVsSAnZWagAAAUwP/ifAo+n/C/bkhmyHSKDX\nraR/SGahduU9gj5OYgKnGnmRPXwe2RFyvtEjMg7M+V1LX90fVZsiGRSXMg2Z\nq3ZT8VLG1zrWDxjIjbVek6KgNmAvwvKC2lQmXoG6ntoTw/0eP5ybVeyorLaR\nEf6BtdmyUiHKAFGNpDzoYxgy/koIAwYLAkecUgWzPmRDsZFZvw9oLODQJebU\nd/TYi+7VBrQNX/EkF5Nnt8io8dN2Q063NmEL06jkrZacU/WHRZt+qqACzw76\nr4MFdxsPU6o0TOksilmDv31sWmk15fEWPAx/OBjvzdLFYcXPC+iHuZZf0EJB\nfC4VyBIrFerseLrGdnlC0dvdBQ3C8OwmZvPOFBNyu3OCav/e7P5f7jJjgom1\nCilaR2pKd8MJtN7rYYK0j37YhEZdjS314txpAXtKO3W4/ndGouxpxaWBpljj\nW+ansTRKEOAOCnqYKy+HidYZipwv5HzbvjMrAZnWr748yj5tAFxTy4HMVdG3\nvoKsrl3QPo0srttCWELPaAx9Qt98KwXRjpkab7GbRXUN95rHX3qhRajLwGGh\nUr8sMT9F//BiQT0tBq//DwJbCuovfqs1EBZ3LfeVScpG7NJgb9JaNtArvWJl\nQr6XIeQYeRrm/t+XQeOS+Ii5bGBIgFLQMnEev5HW1UXe6m3cskqF9iJ8Yj9P\n2RVq\r\n=UvIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/density":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/tab-scroller":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b2faa116a.0_1611084496905_0.6122913185612806","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/tab-bar","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a574ea4b62ef9e372e951d5e4d1220202487a357","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":37,"integrity":"sha512-LZxohvmFQ3sE6QU/OkOeBYI9X8rPWORG2ixLsJQ1X5ua7JNggLIdpj+4xwXSgaV08JlXkP6+cUVdFuLkDZ0rZg==","signatures":[{"sig":"MEUCICWRqvUqbCtDg1qKkhj+TmMDE0Ndx6Ji2HlGco1c9UJhAiEA4uZLktLRFiMm7WrSEZhscSq79DmfCYP/BsOKY/4F1tI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NoCRA9TVsSAnZWagAAZhkP/1veSTYSeZpqHIIihqT7\n/LlZw2xGBZnyGM0NWLUBBPilpv/2K2mrnHnx7DV/Xn75ORRsmx9gpL6TQ8Kb\nlWxBYiXgiK7NKSscweEfVaSivo44BrYT+S+5C1NG+HZQZvRBoyTsjmVJIK1f\nCuIQx1+5Qt5NWdm4QRBfJLzKodczZJavqdwOKbLiagUphQMhvlqOXpZODh97\n+uig0aoO58xKg3FAchPt4fDMYxiE3NdTzaHYhi1JG9AM3qpxtcgswVopnw4H\norxOH8zphCtEoKUgzW9pZhdjnDBJbt77XLH09BZ4EorbJA11sg+oBit8Tay9\n2GlAqR5wrLiZXPGmesOqG3qWyn/SsmznOcJvWZBMK3Bw+DDqplkYbwHP6e41\nqmSFBY9h+fE9uSuC5mbVqK6L442WMkj10dwTRPon0bMKIByxnAAVv2cgxfZF\nOqDLI2zB4X8TCVxm31L2V+RruNUx8UHdNThNyeIVzsGFcUoWtFRHoSd7gFw7\n8Yhc1lwTU9t+vjJI4iQZgb5IWEQYF3U9JoYYGjr3MEjl5M9ugb5EwCiru0WA\nJB6Zu5x2zY1M1JEQ1uDRQzVxRSifKxbhQpElsQykamz1KPcJjVxii81Be0cm\nL8PxBB51rjKGWaIS0HrC0QJAwxTIbfV+lOb0XET0xfgYiztQc+BwG4wk9hfC\nTKbs\r\n=mbIg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/density":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/tab-scroller":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.0c95c9f7b.0_1611096935774_0.5467738630907857","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/tab-bar","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0fa462cd8807356cbffb97b6afe6dcbf66ebf54","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.5268222c4.0.tgz","fileCount":37,"integrity":"sha512-EVJKdY4updX4lYAQ31OoY5wFombXymkyL/0rxPwkyJTxdXl+1hNfggOKhshCRUU5P0W0Ms9/GRrhAzUc9NzWKQ==","signatures":[{"sig":"MEUCIQDn/97VovkLdRW47cJe8VvLL04LslxdPMf9e2hAcNG+agIgEnARTeqQ/yvrgo4p7t1p63scgXAOWJz9tQLA6LybwPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKsCRA9TVsSAnZWagAAqpgP/RvNPCPwK8f2iPGEN1qb\n5ngOQMH/M9vDBSLLdtuGQ6v0dyW8jI0qrHxkZq97vmSvkjPQf5j/8AySAoeA\nePGdhM2Ebj/0JLUj5qLPUfxMlECfwzRi0q1laJMPhkpuOL/ydr0xLU0307db\nhDAWZBf/bAgPxWG0i5rFxlLqQLnPBUHMRTs/MbBN1ZPefZ8pOuJNhpke0ij0\nBJq/u7c0ja2lra2a8m4S0GPf6h5KKWAeDlG+h7MTEp3o2iJ+Pry0YlXzkABI\nU69UtpocsXiHca1q1qdzYFesTqnkeHIxU3P+quNc9bPkcbOFMxIxgZnrS4Tc\nMnUwdPhw9g+HEfaq6rIsrre97Qu5sda4hPZvcjwTgRr0trquTbpbhUJQPNzi\nwm62eaDIA1hANiiEv/twrNOwUFur3v1kZ4yKC8VzPmRizJza9xaecRBX3ZfK\npa8ukK5KYTJgLzP5MqhRFbldmezuqG3pgAJWcGHQvSGxfIzLdZ3gJbjYhMOp\nKK9bwizTzdabfvuKzXhGa1ITWtdDk9/0FB93JmV1vH117oV5Jh8ThxsdHrct\njjSuPt9ClhTLfRiotVxc74R4m6Lir982x/o+vTJ7rPIvqC/glCxPocfJ14Yp\ncY8MskBaV+LG/EeiX27pXBExtEGKg/gxu1wx4Dz4yLwsKsBJO4K/vfObobaN\n/Cvz\r\n=txcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/density":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/tab-scroller":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.5268222c4.0_1611170476203_0.32021461166342347","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/tab-bar","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97626416712c89586402083719f94c74bb0fb8ab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.2ed2d829b.0.tgz","fileCount":37,"integrity":"sha512-rQe2xTfAUTxRS/zsYnF/dYlK4vmsGKDGMqHcj2uTLxG+dYYHyEdP5M7gxF4WrthTvxJMHpQhS5U3ua4/yPrUGg==","signatures":[{"sig":"MEQCIALSGcfs4NEkHSO/T4mHd/UifH+FC1mbAGeZrfvV42bfAiAbgJ8HC8iCa1yjCguEnytFcWHaZQhjDYU84H9sKps8Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLhJCRA9TVsSAnZWagAABnkP/2FxRCd78w+zwkmZ7Jqw\njJF6X/B9HgauRAPFp4Dz62ud0KHRcEL9npdT443eT/gvakmaxGoXSn9d+hpT\nWPWAZ6cTByxBV7ifNRwDC9XSzXxkoL1rctd+Fxg1uWyBGorOb67xI6KT7HI6\nNHV1FAYDNGDUxZMmaqUyzb2k3lwxd6DARcWlrpx5j35xJ5u6lV5xizahYBz5\nsHbyW2/+Iywxnuq+B5RnQChwsaor41QokcnWJSkGat7ApSX6JJLTQngfnVRc\nQOGGSZAham6ER9UWrWRuYLp5ZOvv4xk8myEMw9yqFTGD+82JKsgoMGGDaUKz\nWj3CIBT2gouIu4T9Yq7KkDW8PtI77r0m2Xb5zDdVMEPFv8yWKKdkxlkkEiiz\nC4iSY8/ZiYtfgj7BIAuG92HV7D1frlgK299K9Bl9XdJrccOCYsi96E0+wMp9\n+t3Rbf2YsGl7kZKcOE0WlhL7pX4p0Eo6dPxeUDOM8oUc87Q5ftMZG7JW85ud\n9gadQJrW5aeGR3Z4H88SeYUr2ykw0Qk46tX9VcgOlwG0qHdwFWg2h1+wZj2v\nfy7aEeZtMIF11JDLH7fzkS+k9ErXjkaqlMO7mu74Upsw+e+7ITd0WLWrZRvW\nNqCghgUJw0+4Bg23qAxUJVk6CA/yRWtGfzhukk4UOzOEepb0DLc+5MUCvIk1\ngqnl\r\n=I2fe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/density":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/tab-scroller":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.2ed2d829b.0_1611184200588_0.15374010162094187","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/tab-bar","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e805a5f3368b01388dc9c8de7b12db55c7db0799","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.df00c2b30.0.tgz","fileCount":37,"integrity":"sha512-jgS1rg0wrn2mYCqBtWgMxXOMCb4ZufJ1EJ1n1ed/MrYia9EbrbeO38OCfkxJOMmQIB/0urwMtRcBdYX+ewswvw==","signatures":[{"sig":"MEUCIQDozNCuM6jEeib71SVkvrquP6ReQINN9XypwV53LV0/MQIgH+MMa65c4lirBXbVsPp1XzvkF5duOtxVer6Od7B0jU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdyBCRA9TVsSAnZWagAAPW4P/RabeyCVbLjMda4bIRkx\n/2l6mKUMB8AVBB9tE3Fg+f9BD2Z2pLYLxGkLVqYpW7+SsYN/WP3+GY340jhI\nGGZR+USmOCmAKQo2/Bu3SjapcF7Kbz3ZftyQ/+GsvD7FUBG4MBfKxoBgycIk\nizHW46aMI0exp6w+QsHM1RCsv97/wPIl6fOixDObeyl80J1cl2zL+P8n1ocm\nhxsBkO8iOZ/HcC94tRszKgnRsG9nIzLd8huqiQKgKVS2xdZIq2frS7IMrx9y\nrNK8Z/cGoEVY6P3nebP9ZZDmV8bOsANZtM1WCozF78S3sxjcBhA0xtgyWYON\nETDeI8SCTaFxlH4XBnR5fSDvv1AOOVqdjDMF7VPV2I4Kq7nHznqk80T+v0jB\nEqzzglRi4EBW0rdztJECLcqoEqyB/Cosp4GS0oFwRBUn1rfU1SyfUfCASnY4\naFh7y3P6xfdhDuP/V51gKuf2UUuAuGupM/mLmcxnOpPTJ26ECeJbGI9gXkpX\nNbM/3sx4YpFjKDCsJSeSEDGS/25Z2TgWq/6aW5GCujpU7lotS2mTRWZcB3au\n/xtMfBPumGJQCW5tjl7G5uz1Gy60Rk+AfgtV9HewPLPpeXJkfxZEzzWLffXZ\niJd/EKEdfgbY7hAehWCVr3lkQMlshZXquWhl9OUFZvfozHSMB10Aa4R9sfBF\ntFf8\r\n=NlTG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/density":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/tab-scroller":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.df00c2b30.0_1611259009360_0.6817660991211221","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/tab-bar","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96cc76124c303480b1396d93d65dbc0499415ea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.fd61b0476.0.tgz","fileCount":37,"integrity":"sha512-o03jLqa0miqRzekLH5b3JYigis4NSpwZoXsr0xeE//9twmy+p60XHDFvOpp2P2aZ5++BphLNNJuzcOHnchDSig==","signatures":[{"sig":"MEUCIQD6qhXEns6N9bN7BhP0Ok65PybRfydwPh+fjBxjAGtb7gIgAYBLQ8BLAYoiAwOznaA87S81+FKeOGTI1jDu283/yBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/rCRA9TVsSAnZWagAA7mgP/3MGjyHPqx02MCcJYpjb\n9+3c4deLgKxGOvG3ad73qY/8PDvUiI6WGzQfVJHi46UJdcwPqrX9MzA1iEOW\nQAJgjxzUs+uoTI+SWO+U1iEaH2evQCVI5bWRGWeqB3RHdq/6xsKHx/Ncddux\nhlk3crfgZ4YwqM7neuFeeNZowEABHBVkYtEVyuxKmT7FAa+RBUGA77Tsyp3I\nqD3n0EcrHzsEnUXsMOXGjuACsBSIJe4RPd3kTAgn3vgPWhwKEa6erCL44LaU\ns5BHHe5uwH8WU9iA1v2OVlgCnuyAo/WnLGBwziB0BCcPUx29dEMOHtK5Y2XN\nKAjAWZLyrXPp/lT0HuWc7f+vYQFPdIfuJL9Ia94/UTaWAuiuC6P8hE4UI57J\nEpofiqUm4oz9sLTXSdMtOorGhkxZvmay2RBdVkHl/kzykNtJCJLvq3Qoo8YU\nkBzbp3I14r/Y7szdDQHBCH9TW3TbIJIw/vjkIJtOXFyT3cw4eVlHUR5qwVdM\ncJ7yNJcMtsUW+IxXg7C2OYa7qiwhm6Voo57eybdEiSEH905BNEIhIk+4ORPJ\nf+6dpuNnT2sfRMWkpR6PD3dobt+HBuZDz6r3M+X5cA5TIpD8eJ0JPq50gBfe\nE6ksoQnZLRX12N5q6ECDX/BLW14t6NLKvosXhX28ZuELoZpykMLuzrgFVBMy\nDRDk\r\n=VkxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/density":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/tab-scroller":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.fd61b0476.0_1611259883261_0.037798591907702184","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/tab-bar","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24331af1a652f08fd3462795db8d4f64d107aecc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.3fb3a0265.0.tgz","fileCount":37,"integrity":"sha512-XD/CQqGh9LtnmM+IA+rZfooZWNM8ProR///v0JRHWU1VKb3jdSpLqohWPIfZCeyH15+ff/9Vhl2VribxRFyqvg==","signatures":[{"sig":"MEYCIQDlpUtJPH8bX2NYsyiTAcg3mqToMjrNO7OmIBQsh+yklAIhANrSDZPsiB1/eoHDwNuSHukqDnHnDnjSwbvXre2lheXR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChcUCRA9TVsSAnZWagAAXYsP/1uGOeIPXoKj2JPWodTh\nv9CVZ+6Ahqevg8XO51dq2fddcwSluQFG2jz0rKZLgkxHbqZuPwlLHmUscYwJ\nX0eYehWOVcu2byAPlwJjY94JXvSBF5lwJJ3d9SwysOwLHPUHfaXVPFmgQyty\n80VBWBX0rMp7f2wXsI2fOjRa68VSrH3I8VclxAfCf7620yGPTG3rnaFhGADZ\nC+A7dd8hwLkDcHtI1wkdiedxQDy8Jzzrgsly/lUEtvTfNntFkiZQxroCtKYO\n0NYkhLo2YYbvYyzJ9zuxmUnPsrpGSfTYh68VjScZdTuGYYD8EUrxP7QPXifq\nrrWEKoPpCNFp3GQbEnSMpESnqtsM8LuNZDMSIncJg70pYaPLS6VQC6OMKW5q\nu+yW/wURE+lUS4o5XM6TokR3HtFYbEpARkrlVr6wiFOqTN2wqDb2+mi2LVA8\nn22o8DZXqjyno9FRoGRjg3up8fkeGat+MBmLbBV9bOBHJUmeMK/ozGx4U1Qc\n0J3PMi+kWi22Smr6xJZlSJs1p+EUNstpooLuSQGGiwkB3D8leUaKxNsvQyiu\n129cqQ/Olf12cI2lf/fz05lzgzWFg4woTBLd96vlBK6duwUgmDAC+KVMrGXi\ndS4vr/rjWY7ecSaA2jSR2JzsEUNMamo/zalTF603MyxmqR8Lp+1m/x/l8VsH\nBph3\r\n=GKo9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/density":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/tab-scroller":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.3fb3a0265.0_1611274003457_0.7519200692193166","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/tab-bar","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c4d7172444acd87cea36915dfdbb4c5bb0b7e2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.07deaec27.0.tgz","fileCount":37,"integrity":"sha512-3CKGYQMt3TCY4G/YAn2/A/j2DsNRv5Jd3trFq6ywmklOnStJRNzzxo6+0kISqgnA2woBNP2q9+JP9PrsFmcOwg==","signatures":[{"sig":"MEUCIGjoM/+Qh0JQDqzEcBgpRnEjdRtTgm5w09e12NGbwMRIAiEAorCMambgVM4LCWckd4GVf6nEx3KelcdnHjBVh7yqupQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQjCRA9TVsSAnZWagAAivMP/0InVMQDl+DhU4BQyeCp\nP1iBo9TOaCosN24BzMeJhjw7wgwQln/qwYVRrfehLczvM/frbNAJXy3P8BGy\n2aM4r3BRriCeJS7e4Zq7K/V93kuADKe5hjgjawfO/wG/+lTIjl8YQOGw1jEt\ndPLKMOcndNfDED2LmEcP+DuYSSZlDr1sG7N9fLGa/dm5Vggtveq05+VJVU3W\n5oXr3bsebbs9IYPHY0p93Eraxc6TEslq8S5TuKIhxKJDb+HqXTRygzjN6VMY\naLoRBJWoSamvlDWg8H9+HHzgGNtTte1SKGZqLOMP9UF24Ie9uaoEzylpfXKQ\n5qrM282+oFknGN/Tt/ctfPqewZrTSor6Ia7qLxFoJI0Hb40BDpBCEnfPFO+H\nfzKNZTSgXqS10g/AipNfoFfwlxQ8EDilhSm0qepy0PeKJkm+G5KEJnKBiwe6\npb2biOKKR3qrwuusVdEPYKqXn8LxFIcFPBDwBtxz3RRAs7Wp+1qpNnEaXnBV\nY1UIz1kEtwxqIl12+vBdZXs/BLWCpOKVDqCoPcNaaBiGmLDhtLxV2nkYz2Xs\n8VxVOD6aCnzLaLfHaNBEkrSKcsoZEVNO/QHQuxsbAFDdwXz/lTgj+qc6n11H\n28dBP1LM70v/YhdH/6PWMgfDWTOlI2nIKx98y5xdGM/uANrGfS/e4wm1RoWu\n4etB\r\n=v+VJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/density":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/tab-scroller":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.07deaec27.0_1611334691172_0.45899789478133","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/tab-bar","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f472a456e363278fd02ede6fab8e46aede507d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.d2959b16c.0.tgz","fileCount":37,"integrity":"sha512-zRu8Ug3kLhkpkRN90vFqfl6hNbhQyqWZ9yKtKwPnMeeIrno0iZtLuem0BinCWT+m0t4ResJo6nlm6VBYadkYhw==","signatures":[{"sig":"MEUCIQDoZ/m8w9eiNvpd+3YuoG8V+KAKj1+iGyqVF474UQYjDgIgIHnwWVDInqUF1AaWDaIah4C0cSINaWosZNBWyhUQ+5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx9BCRA9TVsSAnZWagAAdWgP/RmGPC6cAVeADvFVgkq0\nh+yxl3rh80Qm55NKbftP41fd+vFSddbaxTb3kBM5KhnQCkYNwDZt1wmAQDfT\nUJlqqhkTiVtQcfBCP9Rc67oFmD0ERDF5xGG1qY8/VJn/ZHWoGFRiAJy0xxnk\nB7A3u7zJq+wWMPnWHtqFolDvV0MU3OTaPqu/t4fo0866H718VgkMs2T4+dOW\n1J3bk/9gR78RYzUhkMot4v2nqymFpOXZNX5cwSonWvqPT/UZK/7B3UMTCpzC\nmvSK+OwGjKxFH7aqXHiciC/EVakztU5V/BVnssvOr7TWHl4SJhFbGFTag8vY\n5DGl5vqF+eJ/wrpJcKpfRu1XKviCbKzXNLjiT8cFyMMQNESI5uvIhi+8akiW\nfpMQ1U+PcHlM4IFpnTkCXLLjxa30zSb5EFxdlmSf+g0wdkJroRRJ4WNOV/FY\nNZwZz0FTArqAkd//EPnjYQztzHMmqhV1o2HBouHebRrZqNuHz18mdVBIJ+K7\nOEQfU4Vx27Kq/X2M7gViLxsJVZCsZFrL555PGQFvl5SmvPjB0L/dtfUN1iiq\nE/OL0UD+qH3uwuLqmIwYdCPCs0TiIbsgVpc0LNj6o3iGhHWVUQVbqims5yye\nvkPBa8MCclMFi97ceQMHm0q3ihBHLaMZW+OW6ZH7ga+A4Wd1Rg/n329r8iDu\n92ol\r\n=yjGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/density":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/tab-scroller":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.d2959b16c.0_1611341633128_0.10368778727601691","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/tab-bar","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77dc088b581ba0977673c23a0748396e0de81f94","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":37,"integrity":"sha512-n8oIoijzHc8LFLEKdkBTtTWGGHAqjGhoVFMYWUQJwIEABI3TpTdp3+6llrKWvO00T9nbzSrRK5QegjhdKc/ipg==","signatures":[{"sig":"MEQCIEy+4DuO8cUJZuaZK6YowIF4fu7SSJASpLUrUIXzolTvAiA8QowLh0SD4+HYnxF+15hLhPBwqrLOkC7bkxiCmuLCzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1ddCRA9TVsSAnZWagAAD0kP/2MF6Hdj3jSdsnzp+Nl9\njw1if0wqI6BFU0XjjXZOKb5clzOqoOqvdFpVpmkC9appGCsYetXVqW9j6784\ncP/1R2Tln3hVr5iahwjzBTW5muhYYueGafivzVCxnKN+Lar30jdfhXuDbR9e\nEd83Q4n/CA2qVvy1RXkVQTJzdwiU5+QmLK/NWHA63l6p1ERS1Cqbx+aP9OH2\n2B/0wf/9fqYyRUE22IzV8+zWxDxxA9MLYPrD6LpgoxtzUo9HkHurGbnWEDKe\niYfvO6p3F4rlrrrPHUuK+OIHfEH7TqCZ/DIc3i4/S6habW3BBdpb3guh9jjE\nmaX+a2XapdckSAISQzT/JLvYRcBandyACkZBsvbGl9VORJ345xFA6k9/trZp\n+ckT8D3iABLYWKplmeJvfBkqCDTReZMnLc/J34/dchEJ4DlG7KmGbAuhZ5I5\noTH1QfrI+h26PPWj5IQmILmZYtU9+ivaEOAvbVdCZyl1QbCSbRNciohXCIva\nJm5Tr87dWMibsYFHhbE/FNqEWwkiB5fcGuAlaw6k8NkarXcjDtXTUqesByoX\nuNz67Afs4JvqES50JpgjBRar7t39GY5MdfBDPl7YknYsk4XrknILJ+T+SZ/R\naJ3eBbMDMoE7R6FNCkKpHknGb6mxwBEVHYFfMcDYTzsMR75MdH8b7Xp+v5D8\nZXgw\r\n=/u4Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/density":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/tab-scroller":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.75f3bfe7c.0_1611355996461_0.9365231306928998","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d43b483826dc636865543e69dd8879a1eb66267","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":37,"integrity":"sha512-VWCP2kMlhOsh01Rdsj55K1sItbuArCX+1+o4OnAUTYqTVu07WgxS+CEUfpYr8gOWYteYmiTdRSFE9ZxFCw1wAw==","signatures":[{"sig":"MEYCIQDZZHt7fNsJ0gQ38HAuCKYoUfo8D1Gdqin4pVbCdfKo1AIhAP5EmDqOmgQhxh9D8S0MQWskQ/pB32/+092D4NWWQgp+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2HJCRA9TVsSAnZWagAAh4sP/280YwmBkXoveL0DpXi6\navE3XOJLc/jVWOKkZrrBpIbvLY5G00ijbOB6O7ZfCXtr4qpzEcPWQQk/VkJi\n8fD7GA4jktnytCkYsUmeAZBUM3ADRZ+96PN0YprL8naHhdH58LeGqUlPDVS1\npAzQdJzmwzGbzoPFPsSme8OyIeG0fplAY59aptsG2Pjn3fr/DgJLRsb6cdwj\nxPCpHEMmPDB0qgmunVDmhF46NNY1zp3zldDF7+RMfLSMQpoDPePRvGkOCM+f\nerAFhVy/iC9c54oO+15/iM4OVpzr2Ll68dss2jtlrkg4GXWefzBteEDAO3Yx\nIQ1crHpnT8uJnB2XGKABvhRFia7epH90a8tUuwSfe/jxzkxqe7suI1U7zS9b\nRtpV2fITsCeN8EpOHK9dCyTSEs/ZSeLYre6+LR/zxqU7PN4Fjj+gzoUGMoEv\n0pQ9fpDn3YVwkQ8RJwNN5zozFQrVw3DhdR3Y59DasLKdGuMznPdhDCkYMWIY\nRk9Og4QocNGsPtpY4wLmfu6UNyRhQ57wXyxR8qt7VTeZFtKjGuu2fhDDOu+e\nl384j1vkRqqNCr3qB+REeg4CfiC9LyAoMBkzceiAxwKjO15D1aiBTCPGXL7C\nHnP41lGUbyzh+HP77ff49TbSh3UpY/FDRRllK4N4KeQ/8pQUJyB1hmo22U9b\ngwSc\r\n=R6H9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/density":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/tab-scroller":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b9adb7a0f.0_1611358664971_0.6806141982392049","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/tab-bar","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b611e2e389b4d07a5d97020ef35c930112a9c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.d29ec2862.0.tgz","fileCount":37,"integrity":"sha512-dTmZD3ySZvpVoTVUEbEYCzTwa9PdeGRF48xmtAtCsR2LuTi69sbrAoY9V5i9NYsIzOfwlQEOjaC9ZRh4gAZM9g==","signatures":[{"sig":"MEQCH14UNAPrIaLqOb9uvMcBmXSJ8eKAd7mOlAXXymaC/wUCIQDihGGv8+UveTZ8ZJ4nkRz09vVhqVLpUcilnrCHm3jFsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvEZCRA9TVsSAnZWagAAoDYP/1+WGybT+e45ABztfcxs\nocxIe+yqVAIgdIubpL3Id2q4REjqXNjZy2EbC1dW/avpfttv2vJb2R6Y/jjT\nIbQkoX5tu0jr6aIT4nNKL27AKpVxCbTJ9ks24KcxPRH/g1fif6tBiRtbLsPi\nMNirp/baY8KNvhMGci8UbZm9xyBbjCkhW2OtnZjft6yheb6GZSj73CE0RSC7\nzQj3C8TbuWSQmf6nCD8Sd6OFtGk+3fAavWUlPvy1rt4DGHpQwgLA6pKy/Xoj\nIYRJ9VrlMnH8wgCOWz/1Bhhjr5FruPEah/3I/zzs98BeEcas+mOwkr8GS6sF\n1g1F3PFlNCSvJJEDTsYW8Zz4ievWql7E1EQPCX4+X0oXhXNXO7WDXbGc/8Xq\nnIq0ZvUrOTEmD7W7uMxmJ1N+vdLDUQ6jA2rWno0Jo4uFPxpG64urJOwkvTMx\nVXeXjRLJf4tXm1NBbAPCUP2zyIvuvKXZjx/vF1ZfmSt/1k0R2y6iExu8xMNt\n3QDyNUORsdLcyI19wqJJJPvhCtRRbT7Zgqhl6IBeZTzcCIzfEJyYAEi8POFg\n8ZOAowCb8rEZpjRFSi2dUoMnDpFMyLSNnL81vvy/gpPkyHAnq+LtEQwG7K4h\n//mCuZug47qJDovCksP03E80BjoBWpsO6UHXL1YSQgaYgdd9j3p6391K8kiE\nTIfh\r\n=jndp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/density":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/tab-scroller":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.d29ec2862.0_1611591960804_0.5883637541446316","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/tab-bar","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"901f47d17f2bba8502a30067957bda7112fe52ab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.96be07c68.0.tgz","fileCount":37,"integrity":"sha512-SZkAf7JXXahr4UQbkTwXCBP3J/uuhg18RngAVrA5LxCyigg9Mnf9CYRuevVuT19AMgyqKAFMoeL1jBQeJkn+Cg==","signatures":[{"sig":"MEUCIQD0MAQPCTh85tUi1rS5UmTgZu98E5fpMDP/JL+F+KXXygIge1osNqf93vUhjs82vjIhGuaFHQbK+JWFwCWHddpAbHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD15RCRA9TVsSAnZWagAAqf4P/A+qzI6j5n7ygLigcKWh\n617L0jOCtPIqdkXAydy4sJhtX9Njx6XR55i45F6tTb1ZPeXq+R71QlJwvSVo\nWRSOTuPcIWxjs6IrGoqAaD9xE0ts7jdW/NOyt72xoNzwT0eW6132lEMK7jTy\n/k8ktZP9+POJwZDJXuB29a0sXSOCh4smiLHMcmj01Bd6Z6+2k1O0GdYbsiOI\n8yxR+fT0zc8usgSxJjN2ykJcGFlEHRjedggt7949OIFqsXhBvry8WC53ZISy\nhMNu+95MR0M6xqlKjLXByesOQH0pNUA4bSlj3oExc/KHIL1xJzwmQrJln7RQ\nJkfcGNTxrRZA+4i/YsPXCufnwZTrH4967EBa5OCCTfX8l1zelTWk7SLjET7k\nKGXlatcAobyeawjx59nqQNf87N176+ofygRuWjkgm2g530OEQv1bN4J/8kVC\ntLdc5ZRo/d++HtvAJlYgla/XCF8Qhxp5FZKXbWBpOl5xv9UlynpEGI+iLKoj\nGp1Vh2TvInXdXOz0YxHjsEW/Dzvvfo8Tbp/9UDepH3JMqKVjQZ/wjUH+fLRf\nStj1Agy6hPrpx5JBBMR/NHhaSZ8dOQzCp/ORQl4DZPh7PByAZB1stdlMqEc5\n42UA5heteoCAVggo1sgdBe0geJX4Ag+Hb7ehpIr43QlPkR5l5aZlHQOGCjdg\nr7Rc\r\n=xORe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/density":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/tab-scroller":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.96be07c68.0_1611619921437_0.6597242273534705","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/tab-bar","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e132d5d703232291830ee5dd6aaceba95842c5bd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.e383944e9.0.tgz","fileCount":37,"integrity":"sha512-EOrir6cDHfxj0E4PVhVG63wL4gk39jogfWbDvI35X+hxKT3ZakKj8a5nxU/90Yrzi7byVMG0FL1ynChCVXPGVQ==","signatures":[{"sig":"MEUCIQDpqjpPn443iyFRTLNjZ+TLniHv9ZX+LsIEuPLr12LPzQIgewAhCH/Cyo9/4IvzYiMTI83G4/WRArd9c8ihkq/Pz4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3SDCRA9TVsSAnZWagAAfGIP/iu7Dxl3zUzHIAMyyk3l\nxK0wHmKAbP0U73pu0MEeN0I11YNhJpndoY4JxdX/gDWLUAJiiOJ/N3BECG5N\nOMS3GJUGRUqBciFRaG9Rz4iB2sFOqx+ok9RsATlindOcgPyw5hHJWGVDp46g\neuXd3ZD9aCcaFcXtAONwIS8eZPkLIXXYjvgRiuo5jj7O/MqZeqC8n4Y03IHj\n3TB+pxRSVJmrE+O/Pho4bJsQMsz7jPNZhiIySF4FrFT4rHivM0UKCttRxEis\nur3p+5NQ2SSLtPrfwNFzZrKq7wuhnL9xG5jzQSmy5YeEaAXILb/V4d6w0l+r\nncmiv0pqNx+hMi63Qusy9zT923p4Feuxq6DYTHgTjCLtaqjzJHr66Gqm5Xf3\nW1mX6zYTRHVvhUSv8qnoGUnYju9isMPEW4CqgCfpBT2mVBR7yFijrqcF9bHc\nGmm7XnMjjG8gEaLCIGC48SSRAnHUGbxGUPsYUvCl1JObq+zGU58mcBVOVOev\nM07BuNAQrJZJFzFs0+onReZqf9fmu4AHkUe8gmHXnOQRX3oEiqA2sp3MRSiu\nZSX/oV+kHE7LkqnPVEzvtFVy6JckUia3sZXecYkfJYreEIqyIlqnTWVAQRgq\nYtfszufUQ8fa0FidGLcRXCjAK8tRGCnW2w+YrkT9lTtwiDcHebUY5CdBOfwG\nWvMi\r\n=8xXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/density":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/tab-scroller":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.e383944e9.0_1611625602484_0.8667280851635539","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/tab-bar","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d405d539421834e764119c36a27e97d95cdd9795","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.623af861e.0.tgz","fileCount":37,"integrity":"sha512-IZqzxoHKsWrFePNd9UWC8pYHl3MeKlS1IKDDm21zfMlvlw3rHNWqW0jRJdTfQGH/U8nQLmTDrTudLTRhJWLCsQ==","signatures":[{"sig":"MEUCIQDvSuthIZAcvYu3AMiL+jfG8yjMzpJEMf6U7tnpgJSOUAIgBJvMd4QNtBtU1xGbgU9H7F28vk6fssnm49JkoJA0+5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CuCRA9TVsSAnZWagAAyrsQAKGLHMpIuS1XvRZ2uyTg\nJalP3sdmEiqq1HzinSu68KZBOfX2V2qoQHHj5Iu8K9xsnE6Dr4nhN2JvmLU6\nUBi3XNn3yaG4X57jhtYEv7d9imqS9/TJgOE/r6RhalNO3pQN7Kc1sM9JP2D1\npg57p+9/EQw4ymSNhZRDhIzanYJW3Vouful1cVIkoFyx+V8TwuYgbumG6Pxn\nmAqj0rAuYPgH2dvx5Ox5K92hp+sAf8xrFrFmM46WYTEy03tL7Pg6AWDYc4El\nleZVGH8xPRMYZWxqTNTH1wJJmQJenTlauMM9Aqs87XF+vWo65wrN2xrp8fYA\nap5sUN/VgdbX38mHcO421MbD7KId3yZDn4+u2jDtjS1g+TYpqTvyI1Jt/KfK\nGHoqlOs5rctsMx7o52dVU+7GGjpHOlejYBMUWude+0vJkteACNmEudOF8U/d\nlYZGLGiTr62zzsgMl8RQ778bCC3Ii5R8sFugJejT91Mb06wsa5rYui+wJYrO\nSEw6K5Lrr+dt0dn2SQ3q4ZdauIDk4KnXj5HEFgaebfmf6Uz7zR2+zbJlP5OG\nKvCjioJ8jqmOaqInS4wYySuAorIopj/AZe9Oo2x6YuqeNl9fVz9wk986NxDv\nP/yosv5foe7FIWrKNC06EESnYFcZ7db096Cxy3SlDCKOjl3fUEDaa8cYvLk9\nMcAP\r\n=nOEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/density":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/tab-scroller":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.623af861e.0_1611632813882_0.2876436461278322","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d99810f89f963f18609a05cfbb4cec7de176dc5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.6863fd43a.0.tgz","fileCount":37,"integrity":"sha512-RAk4SYLTPC+rSaiQmi2X2Q0w8HMzit2RlkwBqe5h8EISA+xYX8qQA7TMqeiFnycDqc2au/W8EqmhNtl4vBC3BQ==","signatures":[{"sig":"MEYCIQCJrRVGtdgcxeevq2FBVgtyP7IBYFwA+wbDAT4u0yGjpwIhAMUZ167PqjXD8UzwwQs6eJH9dWgteomIzGwp7vZW774f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIsfCRA9TVsSAnZWagAAuIYQAJgaat1B+kQFJhI1lHmz\nr+IzR5yrVSOYE1YGLOHGNu7f94i43jjEfkMdJO0dQ9oiSd+UZAX2alMLZQvV\nP2UwsEDkdRt8UlOSl9Q7DDBFip8ev/ENlsv2//lo1J5sCiRtPKgIJQhoqyDa\njqBJn04sfyiDn7CVU5AYdMRfzYEPbaBD2ZPOj1XFHnCYOEJJOhXqIy4j+VTE\ne21Zg7jxLCaKFaTEfpoKmbcgaLzPYst4lE8HRTq9thulL9WGTdOxPvNHg1/o\n7dDWYqsRN9u2D2rglpRg+Vin6WoTBIfSfn73NQS6WDI3evsbKK98mGyReU4d\nNPDBlVdD30IfrRU+4SrBkz+KB2IRR5UP5ZM923RenePB49VXqhTV1S4NQSSC\ndr8GU2SIY4OkE4bRFrN+JlpekY9N5KAILgb0cBIhoS8uOIhsZTu3S8PZj7sB\nM43EDOvVxE53ErwAe3DiOoB13cvmF33BSFElTzwtDUw87RPpr6vZZkOn4Van\nDk3u4clTZGwp0wVbu6qeGJbHNyBMIuUIkvNT9rb/dDNa8BFZlr1OrYjogV00\n7i6E+EEQmf6tMFkZaLKcw2M4NrOvyGlF95Rff2YVzghNRUcApQ+cRpJ+rXWN\nNyMmxVP/gzKnDpCMRODdFfKoreNC7CNq5omjn0NQfuBYPM33edTc9FRTbqrO\n0i2h\r\n=3ZuS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/density":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/tab-scroller":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.6863fd43a.0_1611696926504_0.3887002077563839","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/tab-bar","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c5451f7e4c7b58fb9e2535e6f8a9d8ca209b8df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.ea55b87ca.0.tgz","fileCount":37,"integrity":"sha512-F42/7DwMJTqN32Ls8Nntg7wudM9NWr/BJU3Z5DG8z4E4efEv0Ql642qmzF7mkDY6t7aSZ5t1dX39bI4fezO5zA==","signatures":[{"sig":"MEYCIQCdenbMjC1BUIUxzBxFla6nRBpkfdGn+r5n0DJU5wgmIAIhAPovs+co+0DeCvjqKGVpzpweqxSaQBfbu9+BhC/VQs9+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoqCRA9TVsSAnZWagAA3NkQAIQW56kgywIed/2s3Fdd\nTm1HMjGv1K8OEx2Ding8yH3xsz8iZghgciITDVG/wI4dRi8Mkp32sknUIHKw\nMhQPqjpu70HX61nvd8hbjnrbXtcQSDV+pctoqTKyOjZe21Af15MYLlb3eXwz\nmh0xw94r6CF2+6R/4XQk+KnGnUsrTdstl+4Sx8EhJXm5RdnYlpsV0BePHego\nSPd8r7nNKcH6tU1tExc7OUTJ+dJuMtrFZtCcDFVQ09HelcfnxMLJ/1T5mn4d\nCnKkTeAJGtPeFP309uxB/Z8BX60hs9ODJCS2U3jIBI53XRqvIXKz4gQdkIvA\n8hqznnIof3FsGwg7xJBbyf8iusUPKKdP5gbswI3TsjAZfolb8OGA7OYQTEqo\n3OK5SyGHWvxHYWCoffQ4icR4gZYTMnZus2yukIHd2Wnc46U1h3zlGytJflF3\nkoZD/KnBRNxOhrbjnFopjohFByWHrLIaMDwsItKHc9WSCaEWqJsMeqVpSYBa\nX/x50350cjfT/82XV16pXdSGLgKSJua372UzCrHCOTSc31U5lrSqHCyU0SCw\nDEkrHGrvWNbPNbUqL5bzEwoz7LF3G1fyu+9uDReVgYE8cEu386OY3vj/LzCl\nonXtrbCw6z4KSZj/U9mdKoI0ZDgYvKSThqzKEEgKSt6jIk5T0jt0FLafqXk0\nMT9Q\r\n=05pq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/density":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/tab-scroller":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.ea55b87ca.0_1611704873712_0.41676697167095744","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/tab-bar","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffe261f7bda3074e9b9da0e5772c9da2a3dc2ae3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.e902ff05f.0.tgz","fileCount":37,"integrity":"sha512-nCslYVelusoB03B5wioTFYpHdbm8t0XzvtoqzCnoM4M5Z2wkNiWqHbRxIYCA4ko/71BoRdCMglSawxpNalFrWQ==","signatures":[{"sig":"MEYCIQDxYvIYajS38ZPfjvlHsK83069jTOEy581xfh7N5lVMtwIhAPZbM3+sOYrtJWJEZt3kA1yAN/9hJWQRQ5M4v3qrK6h4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5oCRA9TVsSAnZWagAAdt4QAI/fP3EZAYzXCE/qscQM\nx4ItgLzvrSZMx0ZOQtcM+fLsN3EbEt8+srs7/DPwGZHVYEV4q5yUzZ/aK3P6\nGGsUeMLR++2z1Yqulhd+5Kmnlt/NJcfqJlDoj3Jwji4/gJU7Se3H3ZWHGn/K\ncI8d7xpKKkd4UcmmxELbYo6Bh6NY23fL07+XxS1BXzpZCWYUqq+KrNpI7CW/\nS+dXuapAGgEhy1LpXS5jjfY4HjGTX6YuFYYrNWHUILGw6tH8qtJTrnDCrvFk\nT5y5ImQ3MiCrH5pjm7+OA8wndoiHnq8oyxf48/CMCOi5MtUKeI/obCjGDbK5\nSYbvujAXIfgOaIRyndKM9FLb3FkOLt1SybdLh96isAYbuEdaQOct8Boj1WjY\ngGdl8F93U7/k0jVTru5vkFNsyf3nSjI5rCXbrPFGrf+y6U3JVpW/i1g6kkCt\nCKDquQGo2Asw5ujbHAJK1xCvT+XK9X+ReqkDmKfnQDRKyMxRiWT2vJdbpih2\nstidC1PYfi9IVsRZvJnfKgoC3voIIrMCu81wK61rVQ/wl5x/RLFgQV1plddW\nCsZ0Kz6tJbZUKGOjpEK0z8+BPfwtInI9B46SoHyvTDGR6RVXp3p++TMvCetk\nVesfTKRbz+NEeKT+wEjQIyaUslQ4jimuNPDxi73cALHZ4Yy1pYQhHGh+XGBe\nYlyN\r\n=Migj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/density":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/tab-scroller":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.e902ff05f.0_1611705959910_0.7387604479547987","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"851baab4a725258a1ccd66f3a728f853cce5440c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.2c9fc538a.0.tgz","fileCount":37,"integrity":"sha512-+GqDooznSfChWxBNkdNqwFRHYCQsxOPQa74t15TIRXLK6JlgwNYrGvbIlfAyR451boRS0Jhk6yP/t4LL/PbnuA==","signatures":[{"sig":"MEQCIFlxLpiLdWl6TwsXPJ9AMg3HFydsnzOjt2++ZPBqJCspAiBv2Ok4oOeqWphLz0gohhTqrHi37K3KbLWnA1o8bkCwxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELPVCRA9TVsSAnZWagAAFJsP/iBLv1nrHjqtY44raYet\n4inezFIVKqiYreG+3OYsOq8NjyxOb5lSjWVluomeS5x7nUB9k308i8rlni3V\n1tjiSY84+C658cWJR0xB7vcG3Ym7biTurKW4Wqw17lgzVeBVv4jGnFUAK01e\ntzBw1E6DsaqvFxGLmd3iFfH3qAdAwwT5uFjUkr4aqov9/EHxQkJzBOXtR7Tf\nNKdYx2TMw2i0hb4ZX8JYsv/Ps+u/tWA2ypPQe48F+eXD6YrPeqbGB3AeQX4I\nuVXX3g2wndakTmiQjZVDOy2iUZ6lQJM6j/nVvc6S8vaRephGo9LEOY1tGdXD\nzTQYHheDIJPRwVm81l0kuR//LI8DP8lD9oxNV6037RkBQlhZOiXmTHe8pF4O\n4OZ3CfQXWGL7Pb3nYPbBlE62U5a0bdi+ZKzrqN0Joy5O0bcw1m7U7xxaQvKi\nWMdGvRjukyXiwD2Yo5iSEdGL15laBV7HvFE/cZpXAUn/EM2wRJfRIsZuvtj5\nhip+evG8dncvak60XqfshKdcacDUei2AfC9082gjAZOqp6WXXbCHRfrdg+Ko\n48sMpBmt7GQWDefP9NUnCK79hpr7fRjOd175fzH/1csTm8lWjXF/BAmDn9+E\n2WY2nRyrQM0uHsj623Xkm+xMU2klUDMkzHYvhfepycUwyrSNa/ujog0Z2kwM\nN6Gd\r\n=fqJL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/density":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/tab-scroller":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.2c9fc538a.0_1611707349103_0.8212923542284527","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/tab-bar","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c2d5c68da834dbece45c42b82df01ce9db443dd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":37,"integrity":"sha512-YUe2dwbYqlkB8HwVi0jEap4YF95JIEpECxUv5Nvcwn9zmUJmkKMjTQ54P7E6V6SaZEcitO10oW3xyd7Rt7IXUQ==","signatures":[{"sig":"MEYCIQC9TmsCSRaLzXtw8Ax1I3ln8/03kYXXBsdXZLJhS6jvlwIhAOyZWDKGXyWpUpAvy2EwHYvKFmOxyMA7nIT61swxWclo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMA7CRA9TVsSAnZWagAArikP/A7TILjnzEoZntJJuLKO\niadLNjngfpgtI4hEFu6KV7HFIqzjI0wOM4AR0FbbGuUSNz6cd7VW4vyvvpF7\n1jo/iNDUNuUo17pYprGRm24PLk0rONwz9xyPz//LwvIkA6L+OZ9m+4jUlTgB\nn+QNCp3Mm1x+e+1lyu212FVYLxTNy/ggNMOIOpHRM7LhFP30IGiHvkQ9B3kH\nY84Vt9D7JRIngvWEWDwIKqImqTMN5x0R+ygcqh0TwcQImZRMGl4gcEPpqDoh\nO7oNmU+VR6mV0SWf/T4yjCsEV7HvQtJZNgJX3FxQLMadtgL5/8EiXHATzfU1\nILyW9ZFBxDGdSBrWL0waGOgmktZB6m9u8nOAfxKfhLPSA8dILTgGWFgaFDr6\np5n5HnWTh6nsAv0vMP/OpLKAME9b2hf54ooVzCebla3tp41lJd30k42HlX0e\nVgfvmrxT3sj52/E9r2yc+DftuTfr9zZIclWWvtMv/BwpAm1qTPa8uGfO6Wbi\n8lMtY4r6YQQSDA++qh5ebVxQLVhgyDef5Rm01Vau9QIBzYcjHBarPOR8BH4U\ndfzBfKjdWKQbxrwXYON+55rYJFjGF2jO1zQ04yWqnxxnXmMC2Zxx7luaAhtr\naWS6GnHeweL4gf91xMzlVCof2bbaqOv93zrAuF/w2ZD2LuNVptzaNhemRyUg\nobBQ\r\n=49hx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/density":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/tab-scroller":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.6bf56aaa4.0_1611710522838_0.8202884636394672","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/tab-bar","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88fec3cf257ef74a08f731bfd207106f6932c7e3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.994873795.0.tgz","fileCount":37,"integrity":"sha512-T9xKtppQ5RHBtoGKqa8lY76BGL8xzo7E32xYmXw8n4Fu+4M9wTjtQJUTyiqJIlijdEYzKVgQLe3mwaT29uA7qA==","signatures":[{"sig":"MEYCIQD5ejWrqS53lGZx6snqFnCscXRRdlx8fpvYcA2b8DC+LQIhAOIssdnV7q6Oxa1qGbhSU5eE4OA7hCOp9AwXvXVWFjWD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX5NCRA9TVsSAnZWagAArbUQAJslDsgxGieKFr/EO5NI\nHyroyC5cQSjYtlg9hyfl5YjwP7WnWxwqI7IJjvCTQApKMhAiZmdGfBCLQbfx\n0XC84KOUJkQEErHcpttrzjhAf3vt4/al/vB3Jfn2Wmmefqvb8G9kAp4RfxFf\nA2BfdiaafBYy6ajsdKkXQn5t6IIoFAawS1ep96Q722KxjWpGcRKGn/9qbWbt\nBRMELh4osqbEe0ln8IGySmpf2bSu9gQ351olUCNxLAxNlFKmfJv+jgtncpCN\nF+fVJyNhUmY83mamJok38cpbAr/eNE3xD6rfFzwGBd2/P7bP4q0a73jQaA3O\nlP08u0xmx4BTrAoHRCOrzEr2IwJCYhHUYLsCYFHpSrMe+gaNja2yQOfLvKew\nh1KBWs0gAFwvU6q9p45lfEJ+zrDP01gAKR03LRUzjTW5f345UIGXQ5dwVfxg\nhbMAMMPDMJjCRN8uytA9eaSVlH+yEYHa3T94twjikThIyEuzTFF/nUcGl9ty\nHVceYFQdaxaWk/kf823HGMvV0V5D24MvIQ6DpbBM3Qv9Dgnf0YC9XfUGsOQn\n17TQ2vQ9uc6CBSSn5p3CvNdsxNHchTtLL6mzCSKPBxIjt7vaOz20ngAMn30r\ngD9P6eCDtXLVStMwYz2WtkEQ+5leLFbTxhQCcaSNmGPBzwhAQqivYrea7XSr\nkSwS\r\n=GDkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/density":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/tab-scroller":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.994873795.0_1611759180552_0.566746222659877","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/tab-bar","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db49728892ceec7062d1fc73caea01ed95920d82","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.96878e1d0.0.tgz","fileCount":37,"integrity":"sha512-pF1ooOGEBQtCvIVHyt/0qUrcJib2nPi610DFquyauDOV+FRxyu+g/c12hVYJYOUP7eEp38W5sryz7iEaCiwn/w==","signatures":[{"sig":"MEUCIBuLw1iY/n5nVY+T0sIYYHuhFcdhvwZ8ViyLE6G73XuXAiEArF7/bVCWj7bkX+FrLZUSqk8LJOnQOFrnsq0UyG0eE0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEasZCRA9TVsSAnZWagAAsZ0P/09esxduzKHadn3jyU6c\nAWnuMdCWgvONuluaqHeAD4NELCNkga2zmvG1zZSt7PlgH3KtM4ETme2B5gGA\nXaYzdistSkykAMk61wD9cWhGEkffdRQKa2rRJ66pV/75kgb23Te/hEBL/wId\nxpsu4+iRcHcCl+qPn4xdk+7VhOIU0i8kdBAvAaZ5cCvCCU66zrSBpg3rVZ/T\nRgo7g9e5UfPn3iSr3NPQQaucWCFvYiLyR0v3oLOO7CimdRaqVar9fqWhNvor\nSnqXoPmFMaKLuhn8UoY2JznQvLVFFmdw9pFHPk4h+9d+/Uld/8Z2CHK7CloO\n3p3XLY3z5w+COJaRgzlGQmq+eGCzhU2o+rAd5xG7FDgw6Ldv+ke0bfwIf+Zs\no4nYG6So0ookMvf6Bpmmi1jw6tkgaGp+ZcJO+6QTDsP74O9CcQKZinOteznC\n2jGAkC1yhaBM+9pzTNCuT2CYICeYqoTBEyfmikQUe2Nn6Ck4sdaI0uB5JBne\n2uvFnX+6HXEOuF0izyn6dv1MxYs6l5XACcEer1rJ8YKXZe3sECJZFgrtLWYF\ndpPKkQQN5OqvmBZakBmoTGfF4ZQuZeG+GDpX/QuLUL4tuW5I6mhxNtkCiflM\nYLgoImgQWCYFRmQgr6M6rRcmYhDBERJBBGcCn9rGx08scRizZFCD1j0Awq7I\n5Zun\r\n=C+1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/density":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/tab-scroller":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.96878e1d0.0_1611770649351_0.02848919013531037","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/tab-bar","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84c05cf993176456732a07f67bb3707f105d17e5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.3c117cdcc.0.tgz","fileCount":37,"integrity":"sha512-id8pPQaiAnrrXtGTPzsGJkI6eYvi/B8OCOIN5sF6qZtBFTJTLlJsDjKanO/RCiBkTnuSVMFi8watBCRST9Rw3g==","signatures":[{"sig":"MEYCIQC9HE3Yd/TwF2iVxB88jF0vzGYKmpEjCRB8//sCi7QSjQIhAKU+2WpgovlABlsNY4nNLyGmyDqI8L4KSmKgxLUUvqQ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbI4CRA9TVsSAnZWagAAAKsP/10MoVrclCw2WhqkNcGZ\n1B+JFm9DWirgveSQbYm5cD7TkWgCf2ycazjYrmfOchY64RxZK/DD5AFsl9UW\nRyKpS89Bux2dy3foZE4eJaslIADI1DVE5xJgzQlWNq60eVk8uSmUf08A/lwt\ns8UbUumTPWxzVqZwafcD/qk2mzY67DQlNkXWhFDf+Gff3Cb5aASweKWDXXiu\nhEgq2hh+8xxLGJKctw4FiYEnP3GNbtAHroy7JmFjiUenbcvoRxh+O3AfyvCZ\np93bTgmIHvySmaYBGX8q0WALH6UzzznBLE+BYlDH5tHPN8YPLKGp9yqdbUpX\n9aiq307Ik0JAVCqC5YjjrZIX4Irhz9D126Tuy4b/5gsiZsjrtJd5zIUnnBGO\nbGVM1fZmYPSZYK9gPu7Fe/ohDJxMnF5ObIbyhM54OGAIcheDKjsKApmtk8/c\neyob+VFdY+2MSIgMZdYn/RBHXZRMNB+e8GDVOfnaa3TXDv+QYtWv0vR2qc/s\nRYzG3X+c1bjFCPKrCA0Fe9M+q2JInAOY+POlgkq5xuOzNjRi1256AG6bKCop\n0CFPhERlaV6mSjw7AktMo0B6jaTulaUYnsY73y6wiDryAbt0+atLFal+OlCF\npa5XF3Ay3Zc4DRaJ2hHzKBOrxNZps6BuZqcFOIFJX+PDhsGUP5falXfZ4Tm3\nLbv2\r\n=PZYK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/density":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/tab-scroller":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.3c117cdcc.0_1611772472426_0.8440702427208178","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/tab-bar","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"547234bca162e404943ed6ec487e1bf3d9542d07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.b411e7033.0.tgz","fileCount":37,"integrity":"sha512-N+tOMOgGiaDRnPDH2U8tY60WS95MSO4QEuXTU4bmxeNuTtD80TI7fovmL45NdM/Rl56vGDPZG51Ej1xIZWnUPQ==","signatures":[{"sig":"MEYCIQDhaumaBxhuZNLC41JWNwzWDkuo1hQMHw2ziet+en/aBQIhAIzCOrqXrCXv7L0IHLMZHFeThVzBO6wRiLOlNG+J0HJd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeO5CRA9TVsSAnZWagAAxxAP/3mmRFnOP2O5vpsFglSZ\nzuuSTbx4bXS9+ScWZ4nDw1EeTDj+eeyDdEtIX0nZjvlsHPDarsq89dyfKe5M\n1KhVBV8O5UktGvacOradz6ChFxr3wMwQb3fqFKz6C/c72mqMk1lNS1FZrJO1\nx+hlUrzzDeqBu9RrvaRETJePritqQiGgbnlEJLAFHtb0JODoZW1SKQO70ZT8\nQMCkT6IlT6rvuJcjQ1iDAqnEikyU2EA45/YK2WnsNmF/LHNPsnKuSvWkS9Zl\naE9hf0+AkZaZHAli+8/6ZGtiqb4dhDtF4r4ehWhR3v1M2B8fS4vie/nEJ0TI\nm8NJzz4cqYjCZFRrl6lk3N+6+kyXF0KjmXkcXTq7gSPrB7RqqG/OYrASfIf1\nDm7fSnS3h6jKL24YvAPfSRuoTxnxvzW3o8eLplXRyHaRWSGkzJB8z0Uj8bI9\nlxfqKAapKPjlMO9159pb75ZeE1SiGNaWKeiT5buoOBxnh7Pt4lT00X77F/On\neu/u9W68WPQcOo/8h46WtGazG9BkWf9k8sacI4HhJ3TnuqOWEGrAZEzBCerW\nb3BUeq1NmQcLRnyWw+m1+vd2U71nchVRat+9hP0+bluTSvLqQtzYiDgHSZMK\nktqrEUTVSlkFtCuFe19w0Xo1VDHRsa4YmCCbrUqfAI+K+TxL4Q+m+smszGL9\n7Zx6\r\n=nR1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/density":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/tab-scroller":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.b411e7033.0_1611785144813_0.9332301239323555","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/tab-bar","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b5abde477c9c70df8b9340bccfadd6b494f0105","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":37,"integrity":"sha512-N1LC1woxEYiHHmwHXDGsh8WWKmKY+ARTzyDCKxlGL7OsvhCaxPNh2fiJfrFibcRC1didWp2fDUgf3t1rfca9Ww==","signatures":[{"sig":"MEQCIAN/BJDYUWEEJpYF3KvC4LU4XIv1TWs01yfm9xtfWEXXAiA3LC1y5AcBgbvprF6Mj5pRYF5E+5heF+oolnVF+aw/GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfG7CRA9TVsSAnZWagAARnUQAI2JFt7m8STffz40hQBX\nMJ0f736G1BNWq8Yyiv+ucj0pcZVRNzSkB9XIwm3FoAiB+Ud8B+t2JvcwkL03\nKHgMS/FcXNVBhv/YautceqaJOwU96uRwxCnIEeVIrvCVgNMCP4BMQEu1VI7v\nOceTILfPMoi80NMnR1kySCu+R1oJ9XNr1Bq/KG9qZ5eJvVR0yW7VRyUlgV4D\n9rguu6S4xyJsrwVx2CcTfxk2l8Imk8L2PzKO8oHzXiLn1a4Ll+nLKVRgO+Xc\napxQPSo+YhLi9ljQNRAVG6xnQAoZzOS1/C+L7kFnqFUqwIVYhscnPZ9fRAOU\nvfefMHwnuTrKaWkVRzz7D5nqS7V2I/kqm7z04Tu9Uh/D+u8LOn+Y0wEhOpGk\n8jSGR1Uxt3YsWRTMQvkHCtpqRiMf8SxAurFAg/5EmkMuaStjvZTb0LiXWzb+\n1P0mk7sg7ji3PVtuNMFHLxLpKv0o7yP4cnY5OD7TJqLt/1yyEWnviTnzB6BK\nlDCA44PhUmaHMut6JsLJHSC/dZ9LeSkVwJ9Ti3htm5UaTQIIjUgYLxeB/sSN\nT/2gw90P/zRbRLg8/3D3UZG9QVIqI/8BgvkPLHbfHhzxOHJ4gtm7HJf+rsq5\nzms5g3M9FYArduzI0+yEnZv0IRFOXBQs2Rs6jUaX+FSixV/O5wlFut4IjbtH\nPR5x\r\n=G9Lb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/density":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/tab-scroller":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.a9ac16b4a.0_1611788731291_0.567600307587524","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/tab-bar","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d91824d53eda30e29d57605c8809cb91c8a3161","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.fec7b42ca.0.tgz","fileCount":37,"integrity":"sha512-IDAwdOgKF41mBpMcA17AE0gXlQoAmgE+ET6gT04Fioqrn8TrohE2UwF3JeD2UQVIYp3+CJvComakcvwOPpiH5A==","signatures":[{"sig":"MEUCIQD7wMFY4Ax6W9avRSsI6KjqNpzmVes5ulv5wHvkCrZVMgIgMiOdDUbWcamlCV5/1TCj6AGUPfGZ+IwAKkimWMxGlt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw2TCRA9TVsSAnZWagAAGwcP/2g8L2Yeq5ersNhS4i1Q\nEf+04vGlg5wjxbRkBbRwlAGSzRyRhgf8mNs5hNFKU6N3/I9V9uluydVbHhEo\n3NqfVN29f6P/syovHoo2/6CRV0Ik7EZyDBMB8l7buGhGg5hmnkcpoIAnzPG1\noCGDW0azrSKoDUe4feAAzboEa17kk3RIB0RpaPwKGFI37aoCc7TG3PoxzNHm\nVZ0TH/RhFP9kuLTACxJYxjuCPy+l0NY4intRiIDYVl0WhMgACwfRi7kGB+0Z\nUSFyNGnjpLIzKSTwjMVoOmgv9ipsB9qkBND3xP4sikI+SnzJUd+8GP0FVmkV\n13bgbhskD21JnAoC1876iBMW17z9+DPCpW38IKWdhRpr14shftTgWuic0Lmb\nNQ6pz8Es7519aIZ0O77vV3byDgUixyzo+YB408k7U84qcUrMS+bnxDh5LNax\n9ZkYGSeNndICK43IiFk0CQkV+OgGLcCZUCDyn+j7RusC8DIFIhgECMS76pDx\nuN+R+YCzqHZQr+opTDRQ+lyKtERYUYeI+fjuNRpY6I1wCSZ63pwKhCUjmZNe\npFFPXVBI3Ym3tBuBS2QRw7OOnDeNHU+7GcvdzPlEENQSpHxV++VV6DibISg7\npgdPnPgEJIclnfjn5AfsJgryMkMFX5rgv0y6bkTvsEpomE4VYoimrdgsKas2\nnlZb\r\n=jRIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/density":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/tab-scroller":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.fec7b42ca.0_1611861395249_0.3621913648735675","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/tab-bar","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b057dd3e17e07584858b690ef65061659725c49d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.8e66dbfee.0.tgz","fileCount":37,"integrity":"sha512-UojpaxbfHa0e1iuhUIghY0z8/WCJLagHKXb93O2GIqEvKCTzVPFdA0ck0ts2E/QD66h9AiFYYvwfC9HJIEWQDw==","signatures":[{"sig":"MEQCICuUFPOrTY/FRCB2uBmGz/rXbeM9vAt5VmQDEtD4++GFAiBERSVaGopqn7YQb5M06c4IcuUm9vvH8NHjeOQypa+mvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0rCRA9TVsSAnZWagAAcKUP+gOs61GU3WFyoJ7snTZb\n1/zeB3SoIjCZtiNBLhrklIUydvNQFsug8vjAD9/20SCemKdtcC91u3YEAHPK\nX17UKlYIUlER3GIrHoaT2bH1WZB7AsWxYpL34HUSWiYV1KGmFi1NbJK/T06r\nkPITHJkpVr+zMB6Wwe/jJE45TAbMgseFGFYFwVEFQf8xmnOEk+eQMwpeHskc\nXXmpYBmaoxQQKQQcjSnLiuEL5YSH/u8sK414oBt94znssabTEJ1ollelM470\nQR1CoUxn36spUDE5h0d5Tlkru9N8Z7EHX8a8+1cz6r47MS1w0nda2C3TOJdJ\nddubR8Tm7fs1yzKatkgvy0j9TfmsWIMBp9gT/waGWEc10lqpSXqcPfEcl0Lj\n+t9txnkOhvzN5DMSYXIJuG+QIpmiwFCh28a5vwuA/jJ3x90RLl0EIBZYGNSd\nc1OTdvZv7gn8py85uPnVKuA0WhdyOS/otGmXw/VhcoU17dNRnnEwPzyw6AZM\njLa1N9zILQ8vwpbio5z1+/6udb5esNCa6YmE1tuTo287/6jTi188UHZOaGfo\nYrzyTMA3dXIq8TVX4boX6HcbUv0ggLhogU+MVIAEdP7zECpu1ip9dEdKVvp6\nYwLyPqEHXTNeRmnEJ/rkzKXLZLoMa306Q0M+G7DfcxRqMQxtpwJvjfcsukBq\nWhPN\r\n=msp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/density":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/tab-scroller":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.8e66dbfee.0_1612221738884_0.31774599509005363","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/tab-bar","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d6aeb773789a3884c7b0e590b9519b1e978b853","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.637d15da6.0.tgz","fileCount":37,"integrity":"sha512-qwcdAmcWdqaQjxddxD+/VqJ7WBiMdPn76UyFNDLiJ5faq1nmKc2VtiDGaj4/AI0aA7JlBUu/xDkH/4/jl3UwAQ==","signatures":[{"sig":"MEUCIQCcOhY4Z9OXrBCFif4iFukWgsVSYIjN6gswIEQlSv0RswIgfygw9Qi8Q782iuqBhEXsoGPHdHRTTkPd6UFB8iVxgs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ8gCRA9TVsSAnZWagAAm4AP/2g7tEU/JyYuaPSGJvGm\nmcjFbtAct4OtqAPJ8AUXRiQRcQvnWwQByXWgiwX8ytJGd4JzOJ7EL2I7maQi\nEcAiIK0Y7dQJ/gRWUSA4o3GRpO9yPklj1SnOGOvqs9Cq+pEbLE5EWj2y28zi\nOuSYHAMhwblvnkuUIOcIiZXQ+Et4Yu67ChEZu6IrML9Yilo/RKs4VBpOBgbO\ntP1648mWw5CRJqKPw5+JSQpw0lF0I/Afxy05M+EyL4GhntQ3PPBpwaCwoD6h\nLX2bUcjLBTHUS2rolLahUxHxg3RIk1nzLgrwqWKpswDuJO0EgO+TBIgJyGvW\nfExSU/NgIHuMG6BjhqqY6ZNGVpsyWDA641ORckoAfGDhLRtgA6wtW9MGlf9A\nPAwJSXcPgVHPaHGc90yp7ruvMHF/B+nneqt84SUuPT1hCe+ouB2mpS2Es2S6\nMuKN2X5gyL3axclyu1B6dBVMnycQ+pjxOswjD7W/ZDAdETgGrBDNWlKo3D0l\n40VPj0nx+zFB2EEz8dQXLE3BJNSWiwIrkMxEFUUJhJb9QkVYmEQzP6+crpzV\ndPX70L3fkPNKzFmlz386pTYPIdf+bJLULGHJWQ2LmQjRov3zlKqcWuFS29af\nMovoZjLvSVQYJlKr2GRKuhmT+gVY4WzTPzrpIGM8ZNsblD1ikMcHFOOZTRmR\nwiCT\r\n=4YSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/density":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/tab-scroller":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.637d15da6.0_1612291871620_0.4562731221001306","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/tab-bar","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f68bf7204e13d6277dcd7658a10fe2f87132a1da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.fb793939e.0.tgz","fileCount":37,"integrity":"sha512-1epvoZR4ZPPi7hybpY/7qp2xsxNPmunjTOBD1LTXAMCTkbmkiMUfZc04DHUQSyvpW2LLfSuE/PK8qzZWxX+SxA==","signatures":[{"sig":"MEYCIQDX1ve4v0BJBgzeK5sXItaCN4ptAt6K2ju6qwl79L4zrAIhAOgIIMa9NRzpIoxQgiH7nhSTYBZy2/iZHtWavplGXVkv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeP+CRA9TVsSAnZWagAAo4gP/0JQ5AOOMdUaB+yx788W\nAy9obID9TcEUi35PVxA7+Up40y0XtOhsXrIL8ue/fSodXFUDJrrgkPB1D8QI\nyTWNnUCOKnJPXKNq0UOyYrO9XSZHAi78k4aMXOHcCTXJLCcIxySyq4iTdBWD\n6B3JMZL1ghW4S0TSQKIuDhGIk8IuSPRzviqC0l+KiskaBqLwS2RjmFXIqh8s\n3tDA8veElh+VSNkGyGp2W0q2CjtwGhKQBmjvk4tKtphraUwGewioHHKPZYKo\nvqHXLSK1LrHLoH+fd9rHz4ooPcsM1LEUq8oGxQmmGRyC1MJlAVi8LSU6zSrk\n3btc01hH3paQniEsge+CbfV1Tvbeugob5ehOCTAaYJp31w9nYr4FnJsWpo1k\njG1fHLzq7gIWNvMMESCk9ml8fWzEoMm9gEb3aTvHa2N6q7Jb1AUnFSq6oIXq\nVYcEHRLkUZ8nWToRVv7mNCoUE2vS6igEs/dvzuaZ2SKWKEMtI1UK7Ba4vlu2\n0D4S0UxhpGFlcgI1NeQlphlzx3ll0ZTY0qjWD6skwdlZorP5jWOVcaIshLOC\nEnf4NqQSTb3OaHYrsDKatoqCz3RASkcUCjw1+s1mR6mI8gk6UjQ3wLsyAEik\nYc5hWJCgv1NhveEBjv+bibKq6F9iKvRB7p2bU0LltB562sS+kbuc0EdM0ERn\nCWa/\r\n=kx1t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/density":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/tab-scroller":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.fb793939e.0_1612309501723_0.8457891236374557","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/tab-bar","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833259780e2071920093a18481733a5601b6bd07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.15a4d40dd.0.tgz","fileCount":37,"integrity":"sha512-uEduBFZXNJJfF1zlthoigigCUlDTrP8EfwKJqhTFUAzs5YyMpBLdcz9Q0BC68ZHUGCJuyiXGUnpdPMMXuA/9bQ==","signatures":[{"sig":"MEUCIHphGeKfKhOg3W5/QBX3+C30mbPbSxKY2u6y7/cuNRfvAiEA9FTxhjFJcwN48vJV8vxRo+DmqnhiheU8Uwn0nUqBMd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghkCRA9TVsSAnZWagAAo4AP/3boq31p8YYFyw6s7jQo\nWgg30q2AHgzYiNFQwno8dHAiKbsTCEZOZ5lHdRR/pR9/s/066zXKfFt0n3W+\nq7Kaowe57H9E6GVCZEbA4eTj/CSW/l4bYdNqPHX2CTinxlEcZjYFnG+im+eJ\nJt2AvbGFkKI9rlNs2Otjb9vxMxiIS4PyaSnhoEyc4gugQPrcc5LyKRnXuQrC\nSlIJw5goq5G3iTATR7ZS4dtrEXWN1aUPMxYdMmGQqesaWjlhPsUNesboSGUl\nsUvlFyRLJlvJqyhf+iwZ9z+xHAoK3U7KtqV0WNU9LawgHfcpbKl4X+/qojm7\nZe5ruUV3sR6mNT9HfrP7qFnJfmWwm7JqCqxAQGd2kO41UHZHhoo8vSVXmJNe\nUxgAuMkKIrJFFRQbfWw5FAQ1HjULsxD7ZyeZLij+RZD0Hq8LLFReKV/CNLOB\nSPBBmSq86ztZwyg3ddN9HjIUsEMfGsA677NhS3hJK/HIGyRZCgCZXVYkzYYE\n31ov9CfqfePWdbt2AWYBsJIfNDMIaZjS1DP1r+Kqa5I4FM3bRb1tu+sxKy7s\nLaj/DcLYawUqfqDXaqevTNnugDxxAYogOgjcyOaqfdayocfqcgaoDJcLavF2\nb4KaSIiBE+BI5YXXevmNQdLhXNCWXhtZJjdzY1FJQird6iylnbjXYYsA1d6v\ngwCo\r\n=27DG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/density":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/tab-scroller":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.15a4d40dd.0_1612318820031_0.9506493537978478","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/tab-bar","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab59dcd015252fd06630d97afa6d1ec53a280bc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.7a003acf0.0.tgz","fileCount":37,"integrity":"sha512-m3NklR4EedJnaCE56ddDBuptxUyI8jo4jyN3foBeTsOXVagFLsBe+b9xLABLTOKKx1XPeaqVnsLBHEiHT3a2FQ==","signatures":[{"sig":"MEQCIFhK1tdCSleL6q8lvd/68CFCuhWo+PHlFvrpvHi3PwXpAiBCl4NAMWXF0AkgTxwNSfLqg181wKEwnhf5evg6mcpQVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG12OCRA9TVsSAnZWagAAGPkQAJurAPeiZyYoEBlQbKZH\nA7Gncqkww28YvY7ZUvjLIhXLW3SyEeDN79Kg3JCHDxs5zgn48ch4I4EvtU+M\nHKuCwfQs6RuU1iG5EbcBnQrTnWadawdusH6gaxWPfHK0LMpckpK3w+j40b7d\nk2JjKKWpy/N/pn5U3YjojqB1wyxjpLc+/pjTs/iALDvIBaboZAGyWG36AaCK\nhUAfisy8uVtPVeKr3MI5WtHMxNAcJ0WUjUNKSjF0xuMkMJeT1d5BvToFbL4s\nLEHpHO28gs+XTc7kYdY99Pu1Wg0+2ioClnHRzn63JkiJ+9j45aQjERhK55V/\nc5susyblwi3UwHXJfo4i8DVC7R/PKlVO5Ytn7+W7qcdxKDYKTM7HUAWfSWtx\nZNRdDjfyQCXPmJFc0CpXVzibAGcNC3P4+ryIa3wEG+df3nGBVHnJH+t8IcWu\nOkLaAIYl/Xr47JKd4wwNS0L/IDz47IiBLSCvYTCu+JSIQHz49QWfaf8R45X6\n60xaiqxiOBDrcCi/OzYH3Kne/p98h5mw1/VQuULFq+nhQ+7aXNfJO/8/7U84\n++McizpfSJXBFtD8VRPVpSeyF1n+cZBrEPz5YgKQLpGnbdIHLvst3E2MsRdJ\nkFI0zs20HJLdbJsXbcjDvt0euY7pHiz0/DS+AQuzMwkol3XXDxKfk/mUBr/1\nulrL\r\n=sUfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/density":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/tab-scroller":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.7a003acf0.0_1612406158020_0.5108951892188545","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/tab-bar","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30c2e674fcf500a0c932d6cd049645b7735bcc15","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.05f249666.0.tgz","fileCount":37,"integrity":"sha512-s5OuDfPKXREBkPmNy8CW+thdFtgmixBWDZy5rD3unTxfSSkLh6HK7dtykToFpEmjBPwHzTF/wP1Wismp9uyF3g==","signatures":[{"sig":"MEYCIQDUFGPxuWXQUbjhFccputGDsskJ/YL1dbAuTEAJtbE/mQIhAP4QpwjfJuXkqAP9LvQR3peccOLqGTFnzoM2C66h+ORc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDRPCRA9TVsSAnZWagAAuJsP/0wHPdqR1pWf4LPtY88h\nQ+YIYpUgUb9UMdwt1cz2JmZUgIZwcFwGH1oEZmf2gZomAGQhAZbz+Bt9bFp5\nmTzFVuSCbKXu8xRh+ZFAhtIuTKD9NdyO/UvIr80IlqfZbHzZK2nX+Z9OtBSp\nkWQJw3wS0wqAaLOJjWCGGZdmdy1bhyJTFNMLQPkO6ih/gMEKovp4hJlW43W0\ndTd+hEGZ5lHWaPfaLbI5hPUuzYwBKEEjO3t14oVQMfsBo9orSbRHwpbnAoy2\nFOhe42xHmCpOEs2u2uYCbhjdAv10JXSY5Hj0QGKEeMiRr4fgRGQsVGY16pzq\nfjC/cHDivUO6PV3O++aa1pslcM9jxJ5KhbzhE/zroKFVWUZG4kPp9DtgBWr0\nz5wew8Hqmq7FoKlaB8qhcAHO+I2rM4wEpwWoQoK7J1m/oSpg2DF+561hI+YI\nuldQLHklPmkToOtty/1kfTncvJulAnpRnLBU6rhrAvPIm8bKS7+icDHI1xA6\nHn1WfcU6+Itnu2nVgpXu0QeLgoeiXNbdHg4wXtpBw9/yS5iv4T3i8xBbUnAM\nzfnNf9tnyudur+UQ5sLQ0wDLembefSPqLrbFnuAXfbWqvGCxeROKPBlrQH/x\nSII0/+R6lrzJqeUw/grKHi7yLHPDTPUkJZiOcYOrX3CpPlowt+lYvlr61hLi\nWDgj\r\n=gv8D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/density":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/tab-scroller":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.05f249666.0_1612461134608_0.890553901748631","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/tab-bar","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c766208f09b5bd41a1e90a08b8d87c478448e64a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.1a3a39629.0.tgz","fileCount":37,"integrity":"sha512-b3espTAhCjKcZTDqmfql2EJizVBkrSAp9TgNh2540MfJx6wwJbqCb5/O9QcCkTiDmDwvSE6uTiw7wrAu5vlg3Q==","signatures":[{"sig":"MEQCICBUYHNXjlxg/+9KMG5DEO/EUzL+hTsfJTF7a/7UwS67AiA3HTZZis/Qf2UdNIEoP0qifZJeqV96dOE5COtjZ+W/NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEC2CRA9TVsSAnZWagAAInEQAIYy8UskClROd8+2GXBe\nOl01RzY3L5ctF/NII7JvZeBX8OfIvRzdoulqbnRrOc986TgAajXRNzUufwCl\n54d1OZlth/6t6WA2SWm5voY/EeSuV+mpZDYUWhP8s4MuUtvLQAq3v0Y/yZA0\nmn3ZFnueG6xD9UZgyRa6NLgRo7gD8O9kH24oKCEKIobiJ+oBuobwpK5sTtNS\nbjBYgEKFuoizV5vBUZsqznQXWkdqVfy0rqrlm+PQvdEU3DP/pB1+QLFpXovi\nzmvQj9mNxd0nJrGkq0bYDpOvjeY4M6/4Z1tdFTFS5/engGdeTXxuD0xFxuUY\np6kj6XxKx7Xg2c1TXGBE2ffWZFc/vhepOrDyXeIQS8FVOzltUmVY6JWKNUyy\nbIljAKUuJ3Hijr/6c+JaUVvVjWmM6wZSmMgBSU2BKBTVIttXfUInQtA8D3Ev\n3n9MTV4z90BozsuXxGnh3Ykagpjxe5UKh6C3lGWUsV9xSFQANpnSwBu3aiuN\nDpYrDd3GdYNSOQfhsbU2zn+0bRYGCNWu48VHDezecmAsRWaSPNu5fCYRFp03\ngavbv/5nzJdVGxCETCfa0j8a27YDKmbv5poGRFslWf852Hd9BgQbXwElQAnN\n3KzFEijsal0oa9MPAC/NGl+Cy4zwBWrRL/9okHvJPUdyUtETEtyEyilpn26p\nZ9tE\r\n=AXfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/density":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/tab-scroller":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.1a3a39629.0_1612464309171_0.857914996964168","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/tab-bar","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14cae130e9f24db9a20116e908cbc60af3b03e63","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":37,"integrity":"sha512-T7eMqSXbKvLWwfCOFF/+R3uXpMeLXl6rn4Ku5Y2dVHhhRQXL7RRlbbpz3Kc/fkLjASpAz4cu0fU2bbIdwSZjKA==","signatures":[{"sig":"MEYCIQCceJX1WcAca2Zr630Ninlpd3sqMj7mHJ5Ikpe6Zm8F/gIhAI0Vw8Qj6MAX5V+fCGxk7ow842brlp0HwjSK/UKEyrQw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHb9CRA9TVsSAnZWagAANYcP/1Wzc7jBIznjrjiPN42B\n2o4QMS5itKG1ZNcPrhjSiSuCOGTmFQZswsFztt1cjQsxv3+snyOnoji9rJkR\nL8qehBXtXvGo4j+KJbB622ZryAcn6zD43AJcZqQvmf11GeovMeyRKG0brybW\nE4dryxOsw5eNkPpbAYnzrcGjPKqlx5lyJZ2LAl7kc/Zih71OYAUgKQocBE2J\n4m6X2Avf9d0PkaQS0t63LDrSQnL1a7TzuXJDYB5FtVs0Z8tHqjG3AvIWeaHG\nD6/NTCLj4S2zwZfvl+9jdGbmfLFtKLI4gL5ZT0Ls+OeCHBEXiGP724kMn7tn\nIlVUB9qBf7wNbfBm+G+Jg8jor0QAW48JddR+6nE7BOWMyVQTOoZhV/5UfFMO\nXOe5r6RPn7sB+CwszFHFjfvI9btmw8igbvFNnBJZNGPuaZvtjplFcqZ8iCTb\nYlBD8iEBxdgJpAuZXRmLcuT9mbNrf9zOf8PkmWelmvT9FOraZdALw/FUZvet\ndQA7IFrxNFlvFoMWNeP6P5bveoUYblDDt+NfTN/1WexG7a2kgO2qNme1LbSz\nLiLcal6zMrCo+dkB+JrhaHygvM1LW6Q7Ga3AVh6U3hZ+D2HH9shtpECDHot/\nu6Y3tPEXO22ggvNhYtemKtq33H8ua8UW0wQo9FWH+hoKhor5/RgqoI0O0TEl\ndAD3\r\n=qrdu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/density":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/tab-scroller":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.8b1cdb1be.0_1612478204738_0.7353934881986983","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/tab-bar","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf6920f127add36fa250547d4bb4cd2d4919953","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.8271f00f7.0.tgz","fileCount":37,"integrity":"sha512-Z6rTvrlZ82AE67gWdS540MBOuHxBlWyf4Up9h1KR/r1tIhZEm3WeEWe37OLE1+DZ9v2bVlnp1rogTOiWNfTloA==","signatures":[{"sig":"MEYCIQDPZLT/L/1HJVdVsewnd315do3wCBxi/QnXe+29NzqUZAIhAK4P+v8lm8mOY9x38fFwlH5mAHIcEJTqjkOG2WgH3iRh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHz/CRA9TVsSAnZWagAASN0P/1D0kNc4Zl2NT2uEEQaA\n0IOdUyK1PPRreDYZbwta/tSrGFbgjbRXqjutDtsAePiKIC8Uq7hd+Vkvg4t6\nL0uNgbqRh4cUIpY/Xk0iqPybxKOGyFtl/75yYNvmAs+ZS/aZlm6VWhYoe3lt\nRfVd2rI1rhj2rHGks85vsZMAKYAWVqOj0EeQnqS/65hA3VM1gdm3f3I2azh2\nCvacKpr/zgH7akK07TQDHhBZgz7VlWs4mtotb0OXlptxIG06+EH77cdH6Adn\nK/7vU6fYt5Q8GSXnCFksODBy3MvnZ8EtRa5BCtOMQGzBq8ydD0JYdIQwPV29\nGg7BkQbjnFn2ccV9IbsMDdScBvRhi0V1t0RdeXSrCaj3nf+yb1cJBPvRfgVR\nSgTzNQiXBndWGw4lbqsbRa3do9glv1UjnF9aJByf6gsldVwy7FbALUOxvoM4\nc2Hq7kqDSKwAUBdd0uoph91brf7t0kF3mt4PJAZ5/EKGC78BOKu6caqJyx7e\nrYLEg7A0W5t7IAz+ndOgTZrt4x5ys7JT1628Ucpkt8c/TdlqOb/ubfVXXMkQ\nc8GFpAFgrf8tSbWKrt+nuxWpAF47SoAlbfegjmxxqXwPOyrkXBghZukOqJJG\nwae+BsZZMG6VSYGcajF35lkW+ez7P4E9kbuuKxJmZm4Oe5Sz7mBXk8wTG0kI\nduWD\r\n=cmgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/density":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/tab-scroller":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.8271f00f7.0_1612479742824_0.9620418134041837","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/tab-bar","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a36861cf1661f872c8e37921760463fb240bd8b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0-canary.533092a90.0.tgz","fileCount":37,"integrity":"sha512-ZdGy2xcxPkRrihMGnJRmqcOM5F4fMz32wUcEDP+2HGY03lOt9biVBKhyzNjAOFy9mbJP1EFUS+9yUAAZTB4SjQ==","signatures":[{"sig":"MEUCIEVMA5DrW0qcK8XphEAkHBhqlx2oXcRXrtMMxzt3SfGyAiEAuk2BZZDouSKwxUAhcVQVqPhQaduxYWh79OKiKfMVRf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHMANCRA9TVsSAnZWagAAyj0P/j5eceEPX456eZQuM2Ap\ncKq08SI/9tUzrxT+rpxvJxsF4QFCVF/m3slla4QwHvDTVp66JUXsAglOI79V\nCLYllXN63pz/WobvBqqWH5y6TrYJI1E6eE1sNK8jF1knqle7uv10k27GdD8M\nKCrc/5fyav4LMg+PoLKoLSHUPWGktMkfUJbBBDRAV09tyR/T6JsFotekZRLx\n9UnTdkjW/P25kZGeZErWjP1iL5FLLtJMDlDCtnaRF4XVIKxnXaynvlp5Luwr\nx/ShfZyLH0Dw1gJq2ikN1gtq9b8OhtlihDxP9+RyskVssR0rheg+h3zM6Wau\nnhhTJgf6uGEO+gHsyZb1kJH8W0xn0UCeW/biEookcma7898AKLqn4oJYp9s5\nUpAZQZq36f+4ejogYhwuTW/PsB1A2VsEz7SuenBWgGUaNmImfFZ3eDWrk2Tr\nQgQL4pjsuLqCt3xpqv5nsFm0O+003PwF+je0alaAXD/+e3joasTtM1s2i2I7\n1z4aBe7I8v5iRI7ljY/cOW00yCESG6NJlxxpH+Bb6uwykOpS5XcD8aRzFNHi\n0nwhRO0hy9MU91bqYYSKfRlhjzAygX+4mc2bBdINuCBX1WV0besR/z1NDhNo\ngF1c9vhzZIDpvUj1bzXTs+t5TFslEd/6CIPT27Ttf7Yfo7Lc9YyXNsC9bSQy\nPlHQ\r\n=2q5E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/density":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/tab-scroller":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0-canary.533092a90.0_1612496909228_0.6878377306645063","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77630c274dd0888e8754ce5fba2a036f15e5458","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.633a9fc7a.0.tgz","fileCount":37,"integrity":"sha512-acquAAQlkfhvPPuwoSLIeR1hUhi8ebuatrUtwOgyQ/P5eAz+BpXWmXi7qRqD+5/GBmajvWV7v585WL0hvA9Olw==","signatures":[{"sig":"MEYCIQDbTXpnbzt+ZlNru8owlNM5mpgDj+l20j9S/VrtBT290gIhAKB95156HkHfQRbGAkOU611F4QL9LI2iDFEJPpkd6Goa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAbCRA9TVsSAnZWagAA09oP/ilM3OGADDKCVurcx39T\nYn0omANvuMnEbiFK5iGBVZwGjTNsbu3l0/8Gxuvym7BVvRO/dZLduv63+JFF\n/jMs7BEu0D8Nuw/Y2CZGyq9cNOMsyOICW59L1HB2uNZeAo3sxxIy7yNy15Uw\nxg3cwCZ3jJdwiJAB435JxJsIcJbZRuMBbLOxzQH+nMonzA7VKLpGwMRQ01nQ\nuhs9Jd/5c4CnpcsTqL2TYHJvlfwCsADHum5jC8ciYN3/g5EocbxFAfEOa69U\ncfsF/oCBSlj3BJ9hSbCnlff3DmmMRB5r6U8pBUIBWsrfCRMG/Yc5HFEam3co\naEAyhe/QNNEr4LZ0/clsRjBVPGNP5ZPfEg5KLE+HIRTIzHqmhwa1Qemi5iKn\nwd/iNagsMLxUmqkWO3YG2LO56OZaVawxh7qXf7Co/yDjKO9kMTY1HNB7iwAv\n1MQHIJzCfbMmE69vH8PJwgOUSqqaNQkok7Z+4U11C5cZyU49tvTXJA0mif9G\n2tpFV1wGPAiKFvjYfGucE2mqeXS+sPDFTYiD8dfagpauWeJzmwgOMsIVMA4J\nRDmONpT0coq9QtvcnglrVeiXgcSBC7ql7f7Cw5X0QNAKSGKewBZEcvtVXidI\nf/HEobRFBdkuyeRuDiNk8rWJKTd0qe72ni8nbTg2zcIuKsuNeBCW1PPLLi4E\nw32Z\r\n=cJ7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/density":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/tab-scroller":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.633a9fc7a.0_1612541979107_0.9755133700543916","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/tab-bar","version":"10.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5626fc2a967bca01a3827e73c4a7ddc13c49a872","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-10.0.0.tgz","fileCount":36,"integrity":"sha512-C0+Cc4L2AbKKkmrv+DF4d3UPfjIDSQs7Iue/X4q4Y+JmOPb6FgUQOYAJOx7V4/5YPUTECAa/lUVYoFMqDxdRRw==","signatures":[{"sig":"MEUCIAWlotOo8sXlRjk1WYdE8iHA/laOLtfZ9BYLTFrZ9dZNAiEA/2JqybnitjlFqvmkLEGoZ7ulu1XsvvDl6WPMad/ZmcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBpCRA9TVsSAnZWagAAArQP/i01J6LdednslDx4psOD\nyj76sN7pKYB8zkmoaVieGE4lmEqjpAvr3szaB1kLVEAKCgcX9FGyfOarcMGC\nyvRysbit09E8wuDBSxB2BBn+IGkxgOXV7K8omDOqyRDN/DOT1G4INjONTmux\nm2kc0OnVyUjeDf7WaRDXUqny6ELuCQKltxqXnaEfk0KI3sL8yIpVILOxV5g8\nolzB6k+RD1VHh/e5wn/Tf6dFM5RcilVgSpIuDmsKIGzkg+uUbpunttWfa5O/\nCJtC2iaIWH0nrXUVySJzFsN3DYn2ZJa9wXRXXS1Tt5S3OtXw5R8cRSFWNRKD\nXGUs9svEuhkckGH4nUoKosRf5SYnqY4WrkxIWHxs5aMAhWgh03A7QppJqLkJ\nuPcU1+xgrYqJ30+PDRdH1SdzGaNeWBIkC8Xs4YfqWEQAjqNWIQGr8O7TzF2n\nDmUdG9pu6L+iqNUI+mJy14bp2odrmPfj2nSYFRqy5rkrv+5/ML3pH8uPFryh\nT9X5/1AtnosCDvUg7yGav/cnfnTl/HiXiPG38AQPGllJP4d2urGgmKS+GuF2\nAFlTjd8x9eY29LRsDhlTaoVuDY1MTWLE3fLCW3aC29nuEciapYw+QoaPfEJH\nPuq0vxM4xd7XPv88RovPK4L4nBqndNbQlILTtMqVDo8v/aWSRZMJ4F4tMh69\nZwMY\r\n=o8/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"^10.0.0","@material/base":"^10.0.0","@material/density":"^10.0.0","@material/animation":"^10.0.0","@material/tab-scroller":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_10.0.0_1612542057156_0.8155726241605963","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa29c333a9df4bbe8817f891f6667958cef7523","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.b5227247d.0.tgz","fileCount":37,"integrity":"sha512-/kvIVg3l2KT/EA3pGJUlUCQjPpKT9BLR7V7qUElxFYaJnC+tskrREizhLig/shv7vbMkp5tDrUJ0w1IeeWoi+Q==","signatures":[{"sig":"MEYCIQD06mOJEnZgAOeatHVjB10Teg7Y3vqWnh6Exsty3S6koQIhAKf5OGR3ZWx+lrATLl2YFo+xWwDh+X1FgWBR/sKGubgV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPlCRA9TVsSAnZWagAAx1YP/059tmf0gm5qmSkE/8Kj\nGqhWaM8KJjkkiwUm0M7eBMIkYHEORVhIrQ85bXCLA3oxr01o3r2es3LtEtcl\nB1zLGPpcAnx64wPA1Xujd5AeweztRkQxdoZPj5LesmjM5hnqS14E3ScA0lri\n8gOYxz9HvirrYEjFSvdpsvxX0csqLkjarTrYK/W3DxDryEO/2/ga0zM7AHjm\nmrJMcZ8II4qGVRS8eotV0f7sNxvlVMsGZHcF7AfQr52nMTIZe/v+NV/+TBUv\nmB9uAHCDQ/MlKGVCnWxRlEPTTVgqFDBc7AyVNfcokY3039bavdB7eue9hxBn\nVfSPbampXQpqBjGjonlj7dfLaFWyWScHfRmI/NPLjyEm1g2QERn+XAV2Na9P\neobPvefRt7D46ep9fW9LhoNQ86w7X8ukA3D+97a/vIk/GWnCz6EwisECjr7X\nTci2U4VBByhy31CtD+lzLXFCGgA127YimIRziGrw8stpAJr8CFlCXsmDoXED\ngQvLfOqdKik/r+3AzqjqiktI3O4x21su2gmOrYX7Fq4eVbqS03hOa9Hd3FpC\nh5SWDw4yF/sfQX2wTuHUdpoOnuqc6AcCYAj5xgrZXbMEASGC6Nr/pVdbr+b1\nyr0oHso34ineYQPo8GSYXHyQQfCmKQoYGFEu2EK9/8MBBE5xu04mXUbVf4YX\ncpTR\r\n=uXWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/density":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/tab-scroller":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.b5227247d.0_1612547044548_0.04341808741408615","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"688f6b1cef015e7826223e2864a0133b4927ee3f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.95322b11e.0.tgz","fileCount":37,"integrity":"sha512-GI8wHYB4NhXinEfipT9QXak8nLpNhwQ4pbC/mVUicuWEfe8Ikak3ALhPe6SxXU8CBS4fENRKWPBbxmQd169KLA==","signatures":[{"sig":"MEUCIChOwdNKL/euqWDuNw6xpMQ7YTFcj22ui4dxuTyVOcgQAiEApjLDrKGYwAP7Q1dXrONi9gUVfOeWVdbBfNSKFFuatIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdXHCRA9TVsSAnZWagAAzV8P+wc7dIU98gP1CPd5h8y+\nJ5Rt0CzSTRbD+nlDOvEfzSNUAGzNerbTCJ5pzRvmRU0yOUI1XVF127nTJNrH\n7baOqaEmOurlsLPGImHRt/ZvaYLJvP1X8r1ehrAIv13leZAJuUx9QKKJHH71\nqXGTAf6Wyyqic9s5PdeZ29NjVbosq2n5fv76b7uCJYDVFVXICiOCXXYxG76Z\nrfP1ixoY53pxch+5/niccJ4CFEM+CV9ZAuVIJ208fkqN26gQYDlmSqHcFfgC\nr6aOzz/kOlKNCjiUJkRnSKq1+6sJgRWfX1Q7lXqCMKf6JQNvkjJ07rSyXT79\nA/xrn75VxC3c7CJqhInrRAD5iZyVguRMH4UM5RPJR7TeqK0f3wkILAvCrLEA\ncBMkpFMHYUdIlozL83T4zILYYORE0U7LnYrPNaIEza5HAh8RbdYWc6Zv6ayB\nZr+r5M9gEkia6OZ65M92q8B4hzQ2a0oEP+Aiyv70S1FuhMkXRTQJ5yZ8qjuF\nBhYvvo0Q5Hmq6vp2JWeCTSQiyNV50iLlI+5bztYakFEEvoc35HWU2O0XqVBm\nYkatNhM3y0mw7XM4MiXBHfBLSfKVPayQc5UPKyVH517SpTvaJtyf600uVMsI\ngEHOfSpvgc3nLrjhrgCuaSK1KCLlAmwlPD3h6fHIlaL+g6MwN/0U+5t9NpN9\n2IgB\r\n=aQTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/density":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/tab-scroller":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.95322b11e.0_1612568006987_0.999039863970536","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/tab-bar","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5caa1a605ccbb406cc58c8bd1ddff7f0b8615aa6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.1f318ff0f.0.tgz","fileCount":37,"integrity":"sha512-NOnaDsfa8ilxVvlRsRsw+loA2g4p/DRn/ZZq4Mp71I/kZtLm8rpuUclFf6LFtwKag4f81ogQ+w+5aA/c8FITJw==","signatures":[{"sig":"MEUCIQD4va2wZJd44NA1h0FW10IXLSCsnjn7WnIoFkvkVs5sDQIgDVQSa8F7x6y8hN6xUgS4SxvF0V0izAn6kkNAsgq6ToU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd2rCRA9TVsSAnZWagAA7QYP/3UWHdAgmJPKh0thBPl2\nRFshlyHGm13+Ihi3fHptsg1ACT6kW+J9FJ8mtk8r4WlWge4ZdjJ3x9yqDW2J\ncpfly82IGut7Fzpt+IiSYhVS7Bd8JyIFBxufPMH64tuuuEMJYmrXxtq85cO2\nELKzsPRHAml/sLLA0WQeVmudrVpOSZnqnhQry4qg5seWf9H78WGG+P/DHyu0\ngt8UgC/87hEI7/WNMsOMxs6/urxcCXBsqugbvZCalZaYLFyko9HgrZSRB5f7\nL3zazcdRDLrBgdodxH9gSTCu3YvqwqXdp8yELBVHKx2h1O8AzRHbfydR9A08\nDy83saHfUO1XaFIamtTgd/xEnsIQS6DVfwurE+4Mgl/WPo4vwiZzYsMXqvts\nuH2dMhBRgy253w8N5usjkR3DR3Kf30HET+eg4zHH+pNRBSwDX6NVR+HC6If4\noDDAC8vYM4+RJjtiFI0I+EcQt01J/eVqjSviDMbajcRVThH2NBJHy1Qf+lpP\nD43VIAGFzu3qsJJSWK6VBz5BX+02Q49axhQpDsOWIJYzYVl2cVsej3lwZazg\nI5yXg1MLc6q0ZokxM/VRy1/MfV0nKsTpMbQ6kgWy380UZ0zIa8ifT8RwzZln\nwYMEBm3rEdgpuD8elgibJYhXazrzWJsLYKa/NM780a6gGF8p5QBfNl0Xsehg\nTIGA\r\n=GAbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/density":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/tab-scroller":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.1f318ff0f.0_1612570026914_0.5483632104961715","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/tab-bar","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a803dde3d3de4a04fa2391f7d6468ca1163e5b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":37,"integrity":"sha512-XGyScwoU8IY/sUJEAG6OtYmgtWX/sjH7Tsqeuwm2aDHRTVYFOuGqxVDx1xOWINP+kNxnTgxG4pSQOVbR70SHuQ==","signatures":[{"sig":"MEUCIQD6OQnwTFUIY2V2m2N3+B2DEfQw7KJsKPt5bRBGWzKMxQIgAJCvFNWjXi0OUD1lUZARFe77IAqgxKUvfySJxEiem78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVNHCRA9TVsSAnZWagAAKvwQAJafiIl1sP0ZsTVAyzO8\nuMLrn5OWLcCA7S3EK19byLH4oC4ZGOZDbo509b00Km1myM/9JYqQpEQ1ooXt\nDBn969yLhcg1QG+tD+oW7QE35djcALTZ9UM4eZkZ9YGeEiCtYY6VHESEimkg\nC3w0QqxeWiTiV4j7uuqjncQBgBmeF832YVKsa+OJQp1yR8nm/G2+Zbzd8jym\nOrHbjsDtOjjVL81nH4wks57gm8XNbwmW+dNHQ/r9YzDr51vQEzULzfuQ2AVy\neP0QQLVtmeFb1Qw1nWrpzhpY5JIvyKtyn4oxOzj7rwKYyUp+quOh/wxN580/\nheThpMXZ4LSUs9tz2si6bao/6NbVC67byLV41oXoSPp3HdPSpcwAA4NgdV/Y\nelSldsFqLggc2CfY7txIzzE2HDwnjaB1ZAnEXVd6u+DXL9KDOC2ISbayORO3\nSahQZd1+XvdXI3C+27ynfvgUqkIcHkVLZPAuw5OpF0GE5oHvhOW+k+zxGtX9\nQpuLZi83KhQLapChJ9wOAmxfzPsOq3s8pzoI0kOrEBAjxomM3DfBq4YXEhiI\nrf7U2odDKnH5vcCeN13b8v7Wg2IAsnoEjcuDT/9PtEd8w9Mo2txWU5UUpe3P\ncAkldOE91j3Es3jQbJprn+r32HS+8euRWDHM7NVxk56gWlJPOdxrJcFiBCWr\ni6YT\r\n=fC4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/density":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/tab-scroller":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.ab12cf7a3.0_1612796742689_0.5702448994813427","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/tab-bar","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b87b0f8397ed0fea96be9e3147c3e2e14e391c81","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.98db2c5ec.0.tgz","fileCount":37,"integrity":"sha512-JGULX5GI5sgDctJ7+J0D0APhhT5pbSGOidSfulW+ohtdBj0vdvHriO2kdQN06Ssk4E0cariPv/e1qpUffsBLGA==","signatures":[{"sig":"MEUCIQDgaCZjojpFOgdM1a/FUti8uGxMP2Cj/mUTdFZvIzmmSgIgPMsRsIeSecRqUDiQ66hhmeWfPWwj9JIsR4uGbq8buzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVqGCRA9TVsSAnZWagAAI8wP/3bUVYgP3WTu0BBoT1Np\nTaAbuZLhb19HdpYvUBawksCv6O2hx1n82jhROXvah2NTcVrzmmJxReUxqCsy\ny2gieoOjgHZdO9NHZ0Fn6EOH1/Slurols1752EOQZSj2J/SybCVlb6plc2dR\n9v3+axk7nQazIb+K9/xn7xnbjbtX3DpocO4jURaPI7lvp6XY3VqQrzuN/2H2\ngsKokhrMeBek6Q5Wdi8VNX0RIIcKIs3RCEc4s9IcqXEnHAlZbyz0YfOVrNgB\nZAUePlU2nJlgmq9/+f18D7QYaIvW0Qb0LRG8FXB/w4cZXJ88NmdE9nvk42/O\nwuZMYLCFzX9N3W5zh7mCjWaXlfaNEdrT6cCjbwF/4PWiWtAd1SM+o6nhazac\np1PF7zFNbrgOnlaiakeTs9sz4DYy4EJJB3FOZTbUVNfxGn8aUQ/IK1ph32Xg\ntTymqVJCL5syIqKzhuZQsgJjfVEHeBcJhWjrAF7+AVaLQ96O63nIStWSsEKi\noUBDwL/WQ9nfqR8NwYANuESHyinDJxTg3MsswLmPvb+wVIxKvhbThl0CC0Mr\n9zM5cciBBRvUGvKdkjKyYzl95P/Fco95bmRWWSUzVxsEMFicmGNSehzW7FsJ\nrUL7UaTnhsFhmE9TL3tVFosOtm0x05ZGO54m0Pl6f0giy9DmXthgATQTeA02\nIBg3\r\n=dZkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/density":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/tab-scroller":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.98db2c5ec.0_1612798598206_0.6400294712517571","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9228a8f20b9bdbdd737b7354c92f740e1be44cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":37,"integrity":"sha512-vwNjoFV1PmGSR9nuKKX1szvUyWdn7K8EZRnPyfM/uZ+5tlqkIR9lhJRGT2ljuSXB+rlVbWugr3/MYOCYPgiPkQ==","signatures":[{"sig":"MEYCIQDxGoO1qFboKdkCPp4L4thviE3FcnJ9MGhYJEwmUvou0gIhAIQLh8k5PEraKi+rAKlulEOtM6Xn6ppghJYvTrXlyNeL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXKdCRA9TVsSAnZWagAAgjgP/jMki+eqKgeZfLW9IDM+\nW7GlIybBb3aBFRhREQropsOdahsPLSD5+t6izkq34sZ+SuVOpdjcUfuAPxpx\n22P/sTWQR3hw3aGMMvwtUERhukR4ohGAZTqVTfqFyxi3EIftp4mV4PbbMVjo\nGk37BCJ7LAM8ihCIr77F9/c2WiGH0fAMkBzPtnGHBas9mJWpj73cy6+DCxzo\nCdzDXXnvb5S0OMja5tkLV0yI4hIFvS4MnvIYyAyFCRK6lkrLX6woNyMFOKuN\nuTx0hNUoP2HlDDvxtci5JH6jj1tusHMBrLfMpModvPXbcXCnpmYBTfDIZND1\nikuFW4tc3+iZTnuzTl5ZlNBHnJvWNDTtsxdDn3IoFydxhgnmMoUEbJ8w4L6A\n5N9iYObBglbYoJ6yaRfJ1dk+weCitxXuJZtgTeleEG6f/uyOFIR5o5d0mIm8\nbeY+xNwXdF7tcfpScLZ3a6gfRgioMdMy/1EFmst5ladxpQimucK3s0TFKQHt\n8dBp7fMveaOzR5nwToMxLulsDUjgRowA+9EczAGyoFYW0VIZv06FU1H7s2mb\nU8Z9OrQywKDEWA4cmnjjyVIyuZxdrI9BgZiL/xg6io4Oliu+wdXwxmrCs1w2\nZbYWPV0DI64zMOTjxFiRTgUkL19b2rlgBTaH//8Ie4DASZiu6S3NqaWT83HO\nS9vx\r\n=BxrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/density":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/tab-scroller":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.1f86b9f6d.0_1612804765086_0.17319316668031348","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95d4ff3a2d0f10ee67e7ffabb208e0f76db7f99","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":37,"integrity":"sha512-prSNbD737eWZBjGRDvNb5Oz8NeGWEHgI57+bSTuWGVHDREo+h7hqH1IYAcAnZyXAWUuzub5YMIkIezSPDsXtHg==","signatures":[{"sig":"MEUCIQCQCE//ONY9meLxAshv7uhLEQ595Z04gLRuWFckVtyioAIgQiSZoXL4MEv/07B5bgZwG5OWRknIQNtL0wYx6BGTibg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXy5CRA9TVsSAnZWagAArEEP/0QYVZSMPzd+OU5f8W/i\n2UQpp24N2Ei6yCACICyfUCXgjF63HvCDAlBjDdAOaonI9eOhuCk+M3RhkDXf\nKYY5qzefuKhOwrhTxNmHOVjBZCXtSmYaFS5j6csu/CGhIfQQaVngMttEdccW\njEUlEuh6pTY1ifbzmgQJjjxqgoYartq0mOrVR3uiZuLv9WWAC9XXgg935Z+J\nyexbWP5nmEtlsycKPqsLJGdMu3quowyr3IrZgJJZbvcb+jCyR6FrKE9REvRk\ni4O58yr9y+cPqqNFIYph2EqE+9mIjfDIfIY0y5UrIFLi84L9g8gdkVpVquk/\nibEP2w73NO3x8P0cbhST5ML1RkZtKxgZ0vEM9QFuCCzEtzP9qkexNrcge242\nlyDf5TF+7FFj2JJlhrCc4sIJCeuFISbAOkxWZCqklwHqBy7GXaqkGPqPnH8l\noK2jhwH/6zN2RYN0GNSdJLWA+H7goAh74jj4/ZbaXKRrbF6WxGYR6G4nxJM8\nPdWeEOAze/a/eotlP0S1Dt+E0s11VLADhDRh/gHaQ+ZdWmy3VtnzamqUJ/qg\nmS4U5i9lwU1bmUoxhmy/NaITJrU4nzi/E9a67TRNc5ooS/y/LU2jdALgUvP0\nXYHHfpVJkzNn6L2Tiz8YMwwrRk+QKIk+DphLSl00YA1ePmbMMVlBMwHRGcE9\ntSvL\r\n=/e6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/density":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/tab-scroller":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.aac8f5d9a.0_1612807353232_0.07807672024921652","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/tab-bar","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aca43855e2af70afdcbab1513b48cd1320a52dd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.750e18fc7.0.tgz","fileCount":37,"integrity":"sha512-s9RT3TQN3go+q3GmdV4AZZ8LhUCgiPDiM0Xecq8Ygxoc1IgTOm8tYMpR11ksb69DyDwQF8Te7EeTw0cRoGpSpg==","signatures":[{"sig":"MEYCIQCK00u+5lnqDdZr4tTUhsUedUPgCVn6bcFK4RqoIOdtsAIhAJtI+GTxIhTevzJ/TCE5VHgXGNRtvsEgj3txcV/eGC7G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBuCRA9TVsSAnZWagAAwTwP/jfHtqZtJTvKoUeC0VQ8\ndJoudyllXlxme/CxeLFHa9/WKhdL0vcfissWsbUjFvu1u7+J3FfKrv5gX1M6\n0zym2jMHswHx/w6lHbDV0tZ2RT1U4onOQ4UGC8bI6Dm6iidVNHPp9rOqDkIT\nULu09KeeeRzbdrIQPYub+Hu0U9HTv9jflyajyvTIOnB0vHVKyhrpKOMv0qjx\n1hLmS/td/YnQBVjuwVfKhIpfK0p0RmBOuiBjGNBvej4Mpm2Ej6toQf1zY5/r\n7HmuzWLEn860jmtpgLgtqskNNtI//F+/HFgtZ2JaPY00SQyW7zY3T3FSluy/\nFgYlUOMCkM+pOMMEW4qRAr59AooNHrh0B/Wj0Ud6rUIIRIe0elLuQsxPxPYo\nLiDChAldI+TwYG61lJrWPJoaYhy3ByHuXIqKDG3Gz57wL5ynbM0bE6BzZ8Q9\nZ86e3/NT9XUE5UJmxqIS/yFEURyXBntr9jBuoH8RaDtXExAQP5PVBF/u/p7N\nFkV+KhaH+wq1JUOcl0iYFp6IVDLc0/47KbH/W4fGwhSIPOOie9/2GjR4KCrb\nPW/M1m2UyVh2yPQYSvb0gcgyHoElchrT/cTSheTWe89kPjrivp5Y/207IYlf\nL0fB5xRtJDfk/T123EaezuUe0EMbFWgdAPFr/2+wzj6D3TWEMFiDlhUbOl+h\n8Xx/\r\n=lWUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/density":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/tab-scroller":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.750e18fc7.0_1612820590088_0.6314380697379713","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"783b6a33fe8f98e1e2c76c7351e3523460e6fdf6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.b62b1266d.0.tgz","fileCount":37,"integrity":"sha512-A0f6kbC5UlQ09QVjvGoPGNb4EKUvZk7GqjiJaxz2kacJ8hbKS6iwbd5QSpmStuGEbWmMv/8GtX1LdKYnWojIcA==","signatures":[{"sig":"MEUCIQCtK5xJqMZNvU7HjLlaAqFKBWkt9q3XGni1ebRbmtLVIQIgKvKzZiZwov00cToYrqycuGuuFRVIeuannVHCRGKcum0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwSiCRA9TVsSAnZWagAAfDwQAJOXjYeR1ULRondtggk+\nO5ix+P6j211+3Yx+R4WUJavRxavOede96xY+dnwXY74mMmxiL2S1i6+RTa0Z\nw1B6vzmrYCxoEidXTtwu6TtvV0UO/ArSeup0PvTj5SfvMEkv7nO9IpdX9RFg\nga28qrEhbgJKfrAqvKe7Yq9MzKpxzMqicLmfFSaevTksSWCuWXq9RTUQBbcr\n5gYf/VGmFMbsi3TXZOpbjL9iw1//WzTjlCtmRUvcXfM8kWnPFPsQYMuiFbWm\n1juxiaTmO0YWhFp+YIQPA5BV876kpBtVa8MDOFxcrD7SlcKNLo6FALhcXMfm\nIMwDjWmuyl3PyjUG5RLPadXV5jjh+m9xbZlT5YXxSJUsXq0NDXcCEZn7BXAG\nQcGnsc1242SrayN66GYHZsmNS1DsfbVa1JNaZic27Hil+oqL1aRKTVGit3R4\nGMmtolylH2K1UUmtMGeG3dCQpNV8N7JAXenRzTFTI6RUjWNs38vGWRreLs3x\nEGIcr/toDPetczPoIVqwKrE7UTD/i+J2sfddNhqp8js4zj0muZuCtCyzYaQf\nRuer2VCipG/Z7sA9b4GNHluGX57azTfZY470z7swOgAJW5skHzQy5uR5gIaS\n98DfIWXtRaUwyjtC82/nPiE7gZglGmMQinrvHKlIfPjPgsz9BRGEq9TrOtHR\n97Dx\r\n=Sr/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/density":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/tab-scroller":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.b62b1266d.0_1612907681581_0.8642982264738788","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/tab-bar","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b5920d99d240c7553113fda4ff3f97cb9d7bd0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.a6b3101fb.0.tgz","fileCount":37,"integrity":"sha512-Ux2eF5m2M4wMEYdopGm+qRw+VquuQKo87IXIcu0rWDN2GSrfvlOr/7IPcEF4dtSzNL0oeZA2MiwqmICECtllpg==","signatures":[{"sig":"MEUCIAPQMttmrro070tnUZ4aq4pQGk5VjXB6pQybPPBU/1t0AiEAzpiSnGUFqPdG5GH4cH9NE2WOjy6MsfX5TUC6xnC53NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbteCRA9TVsSAnZWagAAEbEQAIAH/LkwFdWVKCCiCgQY\n0riRasbSYYSAuhIxQupKmut2rxsngg12v7a8C+MhZun+2MDlzB2JHKId9+fU\nh80nltrsq8VnvlC/HeoaGspflilhU4iaZj8Xl9SpamIqdWzoAiLYKijuuzVb\n9P8SFMPQWZJJqJLTKO/HeDJCKSWqYsSLMAuWpLI1NIP9hoqw6ZGR3+th9Nen\nEhWsOrGgiMqhXcv8/45wcXHjZiGYD9JyoiF/4VGTS4XWLcR7i2BOYvUBaTeR\n5C0CV0M+ponTIgpefOoTlPZW1VWtRzMCFbQ/N6hbvB4fhYHjySvDWxMM0lt5\nSXUiRD1FiVhVM4w7z7Txp/ym0+uBRhH3N2u6fzVxKLTNCJ+/RkLWpVNsMlZu\ngbB+hxbwlNl8C83S856A8VODqVwgUfu0w9urGKQu+g1mVHGNzmXG6k/aT5u/\nPkxlLnvYsKF9LQ+OBOILHE1B5V37koT2+uuiKkUt/jYf13TaRNfpAlfY73mZ\ngNN/6zkNxT4VYVm62lJWmAGjGesetbH08B3snSINEJO25Bzibt5xxl47TC89\nhf6LLXl3/+F6t0sZncBFl9DLsJg9Jj9mPPdX2WYl7VpdGki4v43VNj7eaCJz\nieLWN2N1HmiJ2ORqIO+mwr+wXPsXjdO57vfzFOr+kw4tRVVd+cPSB4NGlATU\nXvrY\r\n=WWRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/density":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/tab-scroller":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.a6b3101fb.0_1613085533825_0.35629534336350144","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/tab-bar","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"469fd0a3c8d189dbe6bbda1803a347611485c007","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.ed88df700.0.tgz","fileCount":37,"integrity":"sha512-odTGU6XVyVnm8Dc9TEle+dS2ubq6W19RhqnrvwBCCjQom9JMHrsf58BIlXy4LWdPXauHmOy9HTqe8LThxSLLLg==","signatures":[{"sig":"MEUCIGduPDHGol7bRVixbWE4QpYs4N8WqAs0cR7+AOe/2DWOAiEAvgxBmmD4lGKZ5Rxu9gXNsGkuUYcVFkO1IjXhwI5YX+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJccPCRA9TVsSAnZWagAABgYP/RyTIMWIlgleBLp+lrTm\nPhFzYv6hhf7g5SFVO79GDn0vtEwh6yjhI2wfYA7uQ6F80ZHZO58HV7EBsNnE\nIfJKBISLv7Q+QbuBCALtQ44FvENHMBdJQZFn2X+iz8siKpvxxRexLFcsXPFT\n6iV8a1Uv9gSrRksaXAosivbd0PvtBkUmPXvqEYaAuoh7VhDsx/VXAQuXTedq\n0hX5hkKLKCSKJAiL4NN8HtKaUk65N3xlC0bHcgZxjaakjbe4QquUH+Yu9IrC\naOtYIsFg1OpyaOiZEB00YbldnuLHPYpwITfBdXW8s2LM4/5c16DeFHGKlfIM\n2lYzMHY/8Fz3Yh6cifNdNclA3SMp6tL4wDrbYgKu48ZCOZML0QOyNqeVng+l\nuwyeYXKNQTrYv8rCaY5qqby1S4LTSIJqnOfQTnsv8tpND0kej6T61sDRyWr8\ngow6/9CMeum4hwA5+eQgG3s9D5106HoUs+7zasu0NQlY04eUrJ2lNhVEsTzd\ncd8buYy7/bZq2CwTCaDAn2Z9eKM3J6mmbku8dtAQsMTxwWFc4d4hRzd1njzR\nsXeycZXUJEeZSB284QGvzhRHKhYR5lZ7l3maeOsq+W8MsjWSM/Ch/5jvE+fC\nonpqKYk2TNMg2AmlpmJcSBFMhLrBUnlUonRBYrDxU1wBnoA+QtCDwTifnNOt\nJR0E\r\n=qxx7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/density":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/tab-scroller":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.ed88df700.0_1613088527044_0.04403963747028561","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b0bae378369442a46b84cc524f386cadb31809","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d30efe6b4.0.tgz","fileCount":37,"integrity":"sha512-Cbcm5B5borl6jnDgbVA/z6oXPqZv4wyCI1GIQxXCJROyewGAMbZxO8xzOOfoReghdCdX8gCF7UdNf5uSAOBBjg==","signatures":[{"sig":"MEQCIFYvOuOwE4X9/ojgAIaJfCQOGQHcO1J59UXWzoxuisMSAiATWq2/U7qKJwDogpxmT8rUy0rAuimGrvyxKIb+tE/MIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJetcCRA9TVsSAnZWagAAF1IP/Rf6fuig1XkKGUoGkdEj\nbX0C+inp0d5CLoVWrf3Zn3d70ieVUsyHTwCxWRHU7IfB2xLGVotkpg4jeyup\nX/qUvXtnGwXN44ukk/Rg/HiZm0MIrFKJEFrgOZdVApD2Kl5cqO47JjUw9MzO\nDDPHByYZMkofqn2kUxhCnoXLkEOJUo4aFBd/HbJqayHbK1KH1G+rd28WFNDL\ntk7ek2nLj8KBSvhFNnYo5OSvA8XuFp7I2xl0EioHjPx8TklqaBdzfwtfrMRz\nZliQNRC6c3eLq4XHHs+8VS7wh1JZH59rfiZhmLUG6Ee6ktu1lD/s8PxRirhn\ngyYZhEwhlaAFPg/TTVRarBGvCexg8PkFleBYbyPBaq/Siiv6dHPtAkIgZv6d\nPKRvqhzV/ht5aOE/Cy2o6jj8QqDFEYDv96Fh9Es6JpT/tfzq0n2M4dZZgFjC\nUA3zQ9x5SPmKrg51RIAnSEfW3LJZmmWYrPvDcKOFy9lie5ZD+VASCdUuVEZa\nrYQiUaKAy6rrA4QjwI3XSE4dRnCCSmfIV+Sm53YxGaI2SpbcVJf4R7qepx6M\nI1coOVs8Z6NbbFnuD05U6zxVwQGN8fsaFUErzbOpjtHro3WT6nRi2diiLE1q\n5AU6uNsRXdC6YfJKrqJnKXlHP6yAFTfZSYG8KSrVbnoXZJfFy0ZgQVbl9F50\nUBIV\r\n=YCvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/density":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/tab-scroller":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d30efe6b4.0_1613097820055_0.010908145430225114","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54d392ec12d52ef5a09721c29207b7b33fc314df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0393bdc4b.0.tgz","fileCount":37,"integrity":"sha512-1Ojn0O4NVgrziNdncpR4egkK4wNxFRe3r4UzielrNdUVg+WTAjqE+go25rSTCCbpEI/BxD6nhAJ3PlvSzOO4lQ==","signatures":[{"sig":"MEUCIQC3qh5h1nBzWS+szcaDELGsreIlnxRkXp3cGlmz7bSx/QIgBxIg1UFRxbDKXj0JZQwM3bdt32HIiu3PQwMLuSFRkeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTsCRA9TVsSAnZWagAA40wP/2TQM3qI5N0x2ONteqjL\nSr1mBqGtwEU/6F/FIblFZUvP3BpDt/4xAL1mnzuq302EvvPK9r/DsYDfx5Zg\naIwApe8WDyKL7g5Kwtzpch7EqYsmbqvZWkhThbEuLo/RCPrFq/8i7n+z7qSo\nHrjGnoCOtxWafCRKG9WNpuTCYfWokt6Umg9JjS0mBEz8G1801qWDbGQF1+is\nFHf3me/1FTNfzueTscn1q/VfNcWuRjQIWs7OMTc399Az7IGWJDMQqQSTzcLK\nzsC8Nlg4kHljdeIj5XZsBjYjiaoGSchJTblL9J/Rl3/3Hw/nfSPa+Bqacb0A\ndKjoe3WvVx/vvGeefKlvVzFLbD7K0+uBy8qJcsZIsh/qkfRyJ7w1R/xhoJjS\n9R4UZ6krqYWjt+k7R7pndHsVsKjTsaUmyAXqlFkQmzFB4PemA34zLrvzIYF/\nRo+2j3qF4E4Q2xCqlyl3GG+LV2ofzAkER5rLaaAZJfJ7K2iZQ7Sj3pjanxVy\ntE0QNckgkTlYJbJ93n40BQ+SuaM51L6bcVVk9zB7fimjKqabhCRJdmsmrz+w\njbxkubW4wpAKM3zkV+TvYnY9Zjvn344R9iYUHh2iSVkl/AyEkyouuW8KKJ/S\n+7c6VhGJIMSat4OBe8MsV2082MKmquTt5B/8avFhj2+6kGd4zgk8pVEwfUxu\n5rU4\r\n=eQHI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/density":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/tab-scroller":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0393bdc4b.0_1613104363986_0.16045724705704512","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b7559835e62c0b7dc7dd18293fcf9c19356cdc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.7cd26af4d.0.tgz","fileCount":37,"integrity":"sha512-BNy6jL5mLQeCalxDAGqx0XTUNRR03w9iD7/A/iDxnLSZAMr6YNqlLXMFMod3KvLAY4TjZODXWrGMvcHaSrT5iw==","signatures":[{"sig":"MEUCIQCcX+54X6upiwfM0FNrhpzIQApGbYWAKJlI8qQJ7ftieAIgNQ/TNbNpPHLw2SwcQ9NTTBYXJaRHz5DkrgmlaO3DG74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqZRCRA9TVsSAnZWagAArQQP/0WCwi8zwzZYh8AXt0cr\n7Uq88fH5CXNgPXp8a7YHa+yXDy/33Zinu4ewxRGTipcy/nB6wrZGjkl9u10r\nXEwp6LNREKLXP8UKVAPhxhBrv3MI8it+DKRoFC2ULHFF5vaKkweGk50UE/Hb\nI5EQcPHf/MJT5FwkpAjlTLAMmJPdlwydXA4fjJtu1pZsjoG054kmBV+Ip0e5\nnq+9u2BiY9eij1zDhfGeocy0QDD8Bqa0Mqg0E9SndyAGh2PTf0IE8AfckBs1\n9QOxo1SCRn6/FndeLVdyeFs2jYtPA1jexS8XVKVWR5xQ/rHoqjwk+V7bYhur\nm8qR6FEPu4LJlJ1G0Tc5VFVX/3Fap8rD3SHEXM8CB/UXEDqfZc+74JPs5t+0\nrle++QDyqW9axOXvq3mc/EIjHX4VMvphfzplTQltD+NOangruNjI1W5KDp2o\nVlr2BIrzKb4BzrIbbZ1MtwXSOBO9BpKXpJIH8HGQ2WVWOxfwHW6qKkUeHBDp\n0VRtyHUKitL4xsWfnKZ8T2So4f8/bDKGHLhBNGoyY7CnUN909HR5UzK345Ef\naZ2tYv7ll/oaD5ZHRh9RJH+r61ysS2tgqkcJBoH2SX9Jk+gErMBAbPkJFNwM\na0ilsRDpg/RSvW9YF0k/N1bwuQPqZLk1epbWFrfX0D5jZHdmITsHOwcv7rTJ\nKgBZ\r\n=pEC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/density":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/tab-scroller":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.7cd26af4d.0_1613145681136_0.8906306934588326","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/tab-bar","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d0e3e9090b6f2bd951ab58601ae02a7537c0c9c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.71fe9a067.0.tgz","fileCount":37,"integrity":"sha512-MpK3K7yIPXQ5Ok2w8pzYyLwVwFooJ6QjDt+xrLkDtj5Mg9m/RiZ4SmNyjfmCrul+VfMjcrwSe++ZJhk4pWu3pA==","signatures":[{"sig":"MEUCIG9UBuANvZgLYsd1VNDSAYUeoUibSbsxRGkHxYgFwG6dAiEAv8cNIfbzcUxwVcJtI41/LSs0cenIhMn/n/oHDUuDlMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2wCRA9TVsSAnZWagAAMY0P/0i6gA9Snh0duByH/M16\nIJxjdY00cbM8jPwP6gqlbEdq7LyQO1QuwVBJEN0sx+3t0rtcOTBBFhmoWWLV\nMXxryBr7TxhbG9Hv/Ri+PkASIxJs35pC9UL+E364TmLf7RLC73imM9l4Ta+M\n8EAqPv8k22hJ26tCYwyEzHNKVOR7qi6imZQ0AwlfZFkwJOXvjH7GVPgO4VpZ\neljdvUQRKWVCeHL10qPpaEcIdob9O3MV12yB9xRN9UgVPv//FmYgYt/VVeyG\nO1qo/LlUaEVWLyK0ruLT8wvq764oADeqvHRh+Xnw/leoPbsQ0aWm/tIZDDnj\nTAXkT7LdYiWz57ZXCJ0tdTOV+yP1aY//vpnFSsRA0YqOdz7fzqXccjPjPIRj\nhmd9H3DHGyMRyitrVhRLB9LlCwUJfjl5XGKuQ22DghnmZjR7XDKmUWQ4QJxQ\ndktZt6FWLaOV3LoamAK6JmQNS4xjM1mmjmKPa27nq3lawBNNaQZzCR+0cGiB\nfMSmouFG6GFqdzo6foFWKCf1yU3v+K+CSE2FgVUIaom8b+1G7OQxViRtg5MC\njWm4cAnvhNgl97u4kD4XM5PqSJnVMld/ykEGJzvFkEzm+ixYedRd/x/kkZN3\nbbUcE0WCQPAzmkP9cURdfxptF013M5nlen5v3qutJEtHATrEahV+A0IPnYNW\nnaHD\r\n=Tpxm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/density":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/tab-scroller":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.71fe9a067.0_1613147568054_0.7542874793844818","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6988c3e036ae4d89d1d54e8a58303d91ed6d28","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0fd56a86b.0.tgz","fileCount":37,"integrity":"sha512-GeYxolP2pW3siWzKBcmYAEZOMf5dNJrcJaI6MIyd4es4MgAISrm2F+tow8E4f1qMxu2XEMNLjbCd1SLQl/rXfw==","signatures":[{"sig":"MEUCIQCiWyuDcT1xoGAdqjE5XuXUKy5+7UQ3jK9dgAkUmtkQAAIgUADAyrbKLQGd5YqO5NXWT11xJlpBZrLsOZo4lt20VtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxm/CRA9TVsSAnZWagAA0O4P/0/yWLq2C1fp3CXadZn2\n1J3CDQRk3e5E0dxfRzihhzXTrHRRI01yVHtI2qJBEgX6djN8vYg6s/FAOcmd\nvOrkBJ+RAJqe0NTd3gEpIjCTOQOFHijVrXZ6Lcmcbg2OduvGTV49giWUY7lG\nvnNdMo+a0/2lT9Jf82d08x3FFCq81q9RQLpJPfkCQv3PhnsCd/5Cy8oEEnpD\nWqeTFQ0aKOiBUywvptRQwRo+U6khJhW8x63NE8UlrhPb94xYJ/rVepWMNokv\n6qdKys3wRnkN7M/6Ayu+EOYruKk4NhlCOCFOvEDtqL7Ds+kOLf0CXMW1LlAo\nsmvB61p7kFxPtK72Qmod3oH5pW7Br5BxtSzRV0R0NRngOVqPb0k02wgyftNx\nCtVMQb1aFZAzK6pAEaix9btrj7OQ8hzzwDNqkdNzOK+FKsXpB1frXdc+lpAI\nO8Zk3vd1lt6jgpfO49CVejJYS3Rl7l6l+2DujqvieJKePegRrV1m4TON7Izh\nZi7mq1HdezCT5GUHVR7FBCy8H4cWRaSz2ydM06cQhzGJRgqtVRT/b1r/JRUX\nt8JR8nC+0yXxOZt6TDB3MGmUpxc2Qt2axdbWPeiJMMekpbh5d1nyWVEaT0iw\nXZdUVy+l+B/eN79WBdTrItt5Kx/gwZHLbF2HYe6wCxbYVdJ4ycf+MYgnGbbL\nPlU4\r\n=3bst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/density":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/tab-scroller":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0fd56a86b.0_1613175230886_0.705126349289644","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c472484529bdc66c5aae8162352921f6e1f9b3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f19bbc4af.0.tgz","fileCount":37,"integrity":"sha512-RRVNgIpJHu6fl85JcGed7EPJF99BZaZQMEmJKKikvwgfkJBRXdRXbxxtexTAuZJrgpbl6TH02gut2Eo/GOFQhA==","signatures":[{"sig":"MEUCIDngvCQfgbTJuLTuoZMR33Pg2RFcPF6NenTqHbFCiAYAAiEA12l9Gyl6RLK+pgFrpnAT3zkNlomXOy5jlADLnZGMoUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLESdCRA9TVsSAnZWagAAmggP/2lmkNC21/DAFHmgApjq\ng0QBIwMt1pgX94zwKMLVIqaJOTdPYYAL5bRE21NlA3rFQNirXdrZxp9+Jjpw\nLI7XpYveUAp4snb+RGNVeFAXFvlNwVT66Ypvo/+oug/H5l/zDYQa58ebr2+G\n9F2VifPt6UQxj4UqLY2y0gdKBBy0CTmCHrrh2YMfkzaUmq5ePFDKgPfszvS+\n7sLQOFnx0t5tqcZamQ/oExQ7OgKaR1V5+nyEj+uvj+FecTLBJsJnOcZKcQ7Q\nAbiqc0cV7REgOznfLLWnOz+aE4VWos4b7FWDyyuFKvp59r/WqRglsY0EzELy\noJopT7PM0cmdvRwVaJ7bIkkeYHlRWq7+zQi5YQrmvcwzxp/rX1ZfK331Rd/l\nWyISosWYzI00pi1S5wq9AcOjofFDfWj98BLFl7AuXObOkHLGBxnIlrywIPFX\n/FzVt/cTKJTDAbSJTFuUCoQh2ATy4g1eROo0PHeCGHT7ftCPdeynv1oFfVqJ\nrAGYynJ2gdyqOR+Qo+uxK3aY+3g2fvomRfXDBBMX65/Al4qSJ7TvuIUbHbWY\n+nZsyf55cgOzhQ7ArPMpuiUbGcZmul+JTRLydWX/rJIQ1jCOTNcS7HJhCUeP\nKeO2q60TdrI8w0AMj6RwFYSRxKs6IGUZOg/5jvo1aVBJ6b6P1FJE6jaynK6O\nHyr2\r\n=UGI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/density":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/tab-scroller":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f19bbc4af.0_1613513884965_0.5612484476364383","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3941bbedd668225a21e59e539b7e7e36a6f12774","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f9cac96cc.0.tgz","fileCount":37,"integrity":"sha512-n5Lnd689dIXP8GXJmfPQ8z6lIKOy9NTGxDlwmxZrf2rIiMo+1gi9iyX4VF8L7mTrhDV78J0kN40g9eVkfF02Sw==","signatures":[{"sig":"MEUCIEJ/oeUzo+9+gy9ngyYp4nHVOsOAtVFR7v8VIlR6hU2jAiEA4EYPPuhLEuE7sJvTDwysqzoD2q/dQ0eTw8/3VBdZBSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUBTCRA9TVsSAnZWagAAwwsQAJLiqHAjp5flgyiV+Jkd\ncjN2U8JjfGkRE2bNKh6LqnHknCVLNDGgT0i4y7F3mn3N33RIUDMhamlreNvG\nfaJAJnpDVXaDpduxuuGAkhbmFQcoOFUszPoHFnwCE6vrkENLi3bFHzL3m85A\nLvVlYX01S2pXdl9hF9V/sRtdjdHR8c/vljSBAUiBwB/GUYn8VvyUKjumpDt9\nRp4XuP6Pr1QBB8aLj/YCNjuzsy+Vo7vh/I8CQnWBr9AtwVpkMSPoDD7X9mKY\n+ScmuezBTNu7SSDgAaeSFS5mJ9S9RdSAnFfUiIH88+9CncmKMTgF/CQSJ44V\nuIUiAKxfUBFyGcEqhvZp+hQzEUMmu3P0nSu1gzzs6UtYnflSmLf1YJ10BTZk\nHqMZBhAPIBpVSkztNJgF6hMAOohCgag9p9k6DQES4hgPX2W3faAlgTHttTKR\npa+G+58hbpDuc05XhvxHFp55hcDaXrvAgHPKva8E6E0GyoejJuCOSMqXxOIj\n9TW49+vyroxXlBye9RAxSa2oViIvYJefFmgHXWXLMkaQl507o38/fcU/joh/\nNuo0GLeYBt9gXZMORj1Iq2cdFxgNHGN72lA4e4xQXxFOaCvfRi6x0LYoBNw6\nsKaV7cGCyXgW6TRHW0qhQrebWwSIDoTf01YJxUHE1wkJfap87O9ROEACuZTu\nD3s6\r\n=WYxC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/density":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/tab-scroller":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f9cac96cc.0_1613578322489_0.5447862842383944","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9461ea786829e8ba2558073df985143814d0c9b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.79ce0878b.0.tgz","fileCount":37,"integrity":"sha512-Ypy2eUyT8wLsGnviTT6KKXxCsJjJhOdKjwvmSzvUxrubeJJp6ks5dz4WLgT/qxTMB1kxlCrpKZ17OHDau6yDJg==","signatures":[{"sig":"MEYCIQDr0TpWevGDmT1Pj3Slq3xVY8K7NxywcjTAtv/oGxGp0AIhAMbU0Rwww7YDhQMKB/ABcSO1YMzJtjv9wpybHJ0Q86rR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW4BCRA9TVsSAnZWagAAUbgP/2+Rv5tlHaD92x2kYULM\nMptFuHevnihPkd03Wvqh8vOGsDaOMUDW0X5jmILKDbDeokurcK65yxEFAG2A\nPSMN8mKIWcbRpbtB5XeUFqMwAhGtFO0WrnYdmW5GVVDowwcs8sOCsGB2xUJT\nOooAYToAe34x+MbF5JBaZshpB9ZN5v95pYNvzxGrTihu6hbI1NwNhlccKflH\nmPDgXS0PZZx2Pd5x0Bxf1/trNF7RAk4msM75PisCoMuRO38lSnGuR2wmlmg3\nUSJzUWPEdtxq2Y2WqQMSsjf6jX9KKq1FLjXxmfzVFeIfh7HxWYLSRGxaK0Op\nhhK+bECJyMiogDsn3xi/kwR/ZZi6LxgF1RhemM2af36gghp5KxTGnhXjj1MX\nkQi35rmaQzh+WW7Yy+pMhNrCuGqfhK+r4/Q96oWO6EMNPC5am1mm7D99AO51\nH+lSrsLhpIR+E/FswFi5eW6QRHP9WDTamrqjatABIpsKiPvvtnFgfw5piplx\n4gu1Affq9HJ8ZUHO5anbDpAZZO5A+VZgRCMtWsuSiVldNuALtT7ituXzWWqC\neOlNptCk03tRQMZaZqObb2AAzSEChm6LqPUmF1o1C+r2E1xPx2REZGOZzITK\n8EVxSr167tgDBf89IF8NqKMhlwSO/U03HV5810r1Dh2nipHZN0CZV0sMtVPz\ndIad\r\n=gUqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/density":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/tab-scroller":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.79ce0878b.0_1613590016620_0.7036928489983163","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58113fcf495fca70ad2a1a58a5addf7317997d6a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d6e507b5b.0.tgz","fileCount":37,"integrity":"sha512-Thg8x8q+MIJ1hoHtSB29yDsKh8HJTDH14MnU4/0eJYr1UkxUm2u1ltwOWfbN6m0Noqn95RyRC9nt+gdECJbNqA==","signatures":[{"sig":"MEUCIQCooohyrelSbRcj4WYZ1OMJ7WobOMlPbvOIJhk7aGbDBwIgKF2unpEO9HhiqQBR/0qsgvhToopvUvGRM+ecLUabTB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXW9CRA9TVsSAnZWagAAJdEP/R936jshRJus7Z4PcvHr\nhMwgnI9i5NbjdEkIXJd3mDRZi1rCm9NThuRQ8vnVl2MNxKwjUKQoOfqa5t8X\nmGsY3dG1amLDp1ihWtHMdxK63M+qQ9ZhyyOPGX9PFXFs0PNjQiAvstUmI5fV\nOUxCKaAo9Zb74+mGfsHguzKCod19bI0+COaXaLdJTLJx0/5f9KHBcD/SSIQW\niYwJpOf9liftBqpm/ticTGE+W5KjSXMWwWJms2QMBuR5D/qoTGAwWWIi2j8i\n5X1JBB9W46UH2anRZIYPX6M8Q/Ff0hlGwAJoBzCpRznmfgogXuR/EuqyTtB3\nJCl1omtRCcO1dt5vvAl66QmYtmAzO75PxVkyCkvyqUalnnpFGxfBxpda1B6o\nG9F3IaaxHAF4aOWK6m3wGyy4xNXlN5CngdTnglg49n9lb9T6q/MdpHsUw5CW\nn5n4hb8nUPoRfHLweecvNYbe8dkoS7UlXlou66QGzph4AQGtaqx+IW5pj5nA\nDHGusUT5l7YCviTGn6YpOawvAM0UHn2qLEudtT/32Kanj8ERkBeecW0mmpLF\nLb6qgF3rzCKnpk9lVaOg46NMfvFZ4aM0DZpgVoCLYeCWmc0ix1NLxutZyvR8\nrYyKFxRa/g5vMm7HnmGsGWu4YJFupKzLwcSb/xK7uVXIbCaQuFof2CJjN9CG\nPve+\r\n=L3Qb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/density":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/tab-scroller":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d6e507b5b.0_1613591997095_0.7999543133796228","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e387a398c2b96e1e3bfb6e1ee664a46cf9691942","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f2658381b.0.tgz","fileCount":37,"integrity":"sha512-12BcoqWOLMuqqAAy/SGJV5uKPD5wY/yMpR5r3PhRcUfJ2KeGFqvthK4pZlyd1AfCTWSapOCR4BRBYYl10VDWPw==","signatures":[{"sig":"MEUCIAR4HscGbn2TxcMY6tEYaZLWp1U3dy49IvW2O//GQM0yAiEAu6ERL1UVQhIihHSwGbRa5O4IGn0xIVh2rOgVoIzd79I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZzPCRA9TVsSAnZWagAArvgP/jW+rAop/0ZJAn2CcalC\nJ55h/4KIO+140FbtTK2WSnSKFYG2lPn3G4xXB9oGB2gB9SLgnLK5XYtgPKp6\ndaiz96saFfIf4hY29mLcRyF+F0bWQD/wy0EfcTKlX5t/dfxtAMM0NOG4kciT\nts6jhX2vmtkKaC2pvk20HrCmLFHq29ZtoNHdd0VQP2q7lNJfHgG5q7Gt4Yat\n9nvyNx5jbn5P58ATRzEFleY9enyUHPHqYdRckicwwzC9x/I8m6OvuIv0yLFq\nXwSiMMA47Q0je1wC6DVHt1CJ9/8W+dyVDaNaY1xHHbWxmDzOThpzYf0sRiGH\neDEYE9Yg/eJZ0gRycZt4VEKy6s3kTzdRhMy+DyXktqWqMpTU2DCjFukJkFOr\n9dYP7EqCVMdBU2dB0LsuZi4ToSZIdnp88YedsExwmaPae2Pw5AyRChVDzuqg\n7JSueP6cKMkEv4wt3DPieA6zz2e6dDppauHojpfoa6s0GpSALw6O9ITFZDnB\nWgvwyx9j81g9tReMkZ4Ap25fVHIjPrex9DfhKWa78rLpT8qYgI2JIcYkMQoc\nlpVsrDGMfGj5KZq5SzlPB8X6S2tW+KsWsPDuO94GysmgOyl6mfYAGA9J9HAg\nFrbdXwETxltzZBqPfvs2YFcn3m28HvtkfPkICQy5P4FzxME6pb9Q625cYmuf\nigjh\r\n=U4gK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/density":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/tab-scroller":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f2658381b.0_1613601999226_0.8815397525397635","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/tab-bar","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7261028aefa1d0e33169ae92cb3290ede4d2221b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.97c4d4035.0.tgz","fileCount":37,"integrity":"sha512-Ed2L52oFF/eIHxPa4QP12Fns/nJMqnCn/bUSN91hh3L+tjn5eD3jliG+jwHtTLVCqpjyWF2dHepxHj41QTBADg==","signatures":[{"sig":"MEQCIA7vYxrSBmeY0K3GEvlh81l1c8bwV5iV1xzMQ92IkRRcAiBuPi6/VbT9T3UoY4X092uWZiYqPutz5avwWd1guQ2wMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdLFCRA9TVsSAnZWagAA24kP/jj5mzIdSaJ1LogwqvPI\nqBKUI3T9cyrD0TsG6HYprBE7oNM2T3m6NVAdsyPpmid31HK9zSJCbtaFs73S\nDYAeRpilYMQY5OApTXlvSebJJJGCsmHtMuz8f1lNhzOcD6712nexd4MekrZj\nQISPgdKrb5E2WfItOqUD0Hja+CDBuqEduEuM8ur5HAcsPIRhpsgnVtHMlyZ9\nXU7din+us9HSYcFHQQrw8WAlVGCHMzW7q6SAb3G8vlj35VVANq+O4/t1RaTl\nV84600SMnKbUTHjBAe8O9nyFb7fKxCWUs6AgpjStOkBQSlpUah+WXJQqYIMp\nN/hwxZuOIVR5xs7MMWut2kNbxp0bYlL/+D54RAJFOF8AttD0jewvjMqOrvKg\nj/Mpv+c0DCh8FewJ3S7B3AVWbYmoemsW2hN0WZOD+Y4rhtyrqjgcSjyqOx9E\nU9c3CP44DvslP9xdFMm+aRzwwCKu9VGajiEBh7/hoC4517M20VqHMBxxiWv1\npacQeGuQYkwV+aC3hO09kLGb5Qi4Te3EQeCjUpmEj3ktuJOI7lq3ZsjHtIB/\nJYCxeo+J3Kl63NMBUdwExbJrqoZMMBY1pcvJwVzEp3A6ItPPp3EKAB5dOcNw\n/Cyx2Ju350vXOO4YdnM8xpmQ6ZXjKmBiUL/+9ZtzNmnU+j5/xTI8aT6amVez\nJLQf\r\n=GLNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/density":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/tab-scroller":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.97c4d4035.0_1613615813301_0.6416825624298226","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a99853d323aec41a0d89ae07e6898a029962a5c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f5bb4648c.0.tgz","fileCount":37,"integrity":"sha512-xz4RZ6sJcn7VkUGv3vSAbHMzd1HNF2+xvSnUkfmsAHx6iNoHgKC2cj6YZWRjW1tKpyDIjl+Qhd/prL21w8Npqg==","signatures":[{"sig":"MEUCIQCg9q3DIi9ShKjepHh0s/FAl8/kbkcIuq3ZZAJ9X+2NTgIgGliNLDizJjA9Jjcrvrkr8KvpWgHbQtfDYRPzwTembOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpDBCRA9TVsSAnZWagAAC3MQAJW9d/hV6eOC23bsFud8\n6CVbVNtc9yriKxL5SByE7LmNZ8GyochW5ELmvt1BCPfeEewz542i9+9MnpyG\n5x89OocshZo9WrGRNFntJLv5Q95k9rc2SNAy03vdNLXPz7nyrnXKy4WrLJ1T\nxZaYVNJZ18EIrkBOUNmWjjY1tDPR1YXs/Md7mvaLr+6vK7ED49ew5nXVwlUW\nbYSnufz2iLYfFdxImIrdq1BtxdODTWpIzfGdVcZ39+H4rsBw5TlbZNTVx1vA\nNJM9bcfjOCXzyPuXnfcY+OuHd+ItEZxltavYsvC81YWhRd1WMVrPm80zui7A\npZKBY1Pcc6+lIrXR0s97wde1y8u4jTuTXz0VRHRJtvndE37zz1KVVz8VN9OC\nAChggiHq8apsXP/0oSCLSafAZ+U94hMRYNzZ4XKKB6wY0o3/9O8T66R5ILs+\nRmOO/laPRXGDAu1elaEU5MYYlp/EaXi/JxE/aEHwWrf3iwLYg9cdDCfPTCW1\nnViYpzZgx2FKG7GbT+yHExeBYg02wVt0k9nGosE5hfgoFUIJu3ltw1rH0MOH\nP4B681NdV1L2K4yBKjhphIaKQOcjQmDTZI4HFdEKrOR/oRgJLht8Oht6ifBk\nrdLAtdRwKaiH8lyfJFOJvkGukRwNIaLe3cJ145SS2V70/woHQ+4mgmEoXU5U\nJTfV\r\n=1xYr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/density":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/tab-scroller":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f5bb4648c.0_1613664448921_0.6075025229788633","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/tab-bar","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b3d28454278aa0fece7a0f5574d12b59a22162e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.302c7a960.0.tgz","fileCount":37,"integrity":"sha512-2xwtz10WeMHL7e7nDMG+aldueAka+HzzOZFvs+ni1BBbJ6ojByrY/9DFTRwa4uW0VFi2y5JePJiuWlQNS1xCxg==","signatures":[{"sig":"MEYCIQCPLCU4ZUemQpK3VTJQFNTs4VAUKzevqLFVND6lFgVo6AIhAJgrFdjvZhpL0H+h8aMMy8Ng06y5f+oGmlAv1Rfkkb+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrSKCRA9TVsSAnZWagAA9UEP/AudMX4yBuJ13+6qryG+\n/yv/FBcAqnLikgN5jVAQoH6nIbAnk3pbr2e/6edh+u3r+jPQ2YlSVQFYTwyC\n7wsn6eRF69gXc8hO9xswC+Zq6aibvc6UgN1JPwdT4cgF+WeMTkAEbZ8dAD2P\nvtk6nuOXAy3tt+Wpyowb9h4UKHPYyxTw9qF5K6sHpwkc0SI+cxHEFk89kwoe\nkPmdiQ7vf1SPvSKSIs9FZ5UpEIIgNX7hgljuS/Xy3gxLygqAoW9vxCmjgch7\nlhwo+/RYA/F0H6FFoDiopYsNuRpRZIscdoXrbjUJUKnI31UErJ9erkCE0+fq\n5K+lJkvKGKGDZCRM6GsedLiMcnnHf1DB2alUbutfk4wG+fc+XHKSRa8XmjAa\no1SrN3/AZ/WIctu832M2P8snZCTs71dtnR9aSOh0nABLDAdgYrbw0/vw4nMX\ntk7nuwZipF3xDSIE17TeuL7l2p1/3Xq4QRVWEHObcoKaWKZM+2Bei7tL5v4D\nHZC6jQwMshF4liASI0MoXivXo/K6uMrjIvyhpSK5f8bQqEi8tA76bTUn01qp\nMz8S9pXobCNUysOgrcYrGSQD7T1YQPCmKGd0rM8vMN2Ob71dcVztTCg5GEau\nwmhG4E13/UxhnPbcxIc8mN3JzJsNoxHkxSg5eMCYQl9SwTLyaNS1HunrW359\nHGFV\r\n=17P4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/density":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/tab-scroller":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.302c7a960.0_1613673610266_0.07647722641734345","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/tab-bar","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fb228450ddc4b351df43d21e471c6af08ac7f9d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.aa0aaf026.0.tgz","fileCount":37,"integrity":"sha512-5GSQVbZFKpuR6m/NvlItGnUcRCgA1/DapUaAK7jMSjlqF03c2yb9v8DBaoYDr8MG+eGKPlrngsRLZguGxCqplQ==","signatures":[{"sig":"MEUCIE/r7bmLVsZ56OmCQ66GaJQIGfcdTJs9yJtatE30kbBHAiEAlz9Usyqd8PYuN9IRqeVLBHn68L1972D0lj7ugeTFU2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr8gCRA9TVsSAnZWagAAFt8P/Am4K+ObCoBkGskw2DuJ\nJFJI/hkoiPLqY4DenlWL4T+UrrTujDDkN/315lhWEsRnkvWpqUpcLkA++0i0\n2WcckWHT+mZiTwayayXn0uDSPuF8hVMyUj+5BBbpVOmvlzi5HyCZTDz4YyC/\neLWrwPvZiu5mfJeKtJ+moEw+YDvwfw+RTQy1Geo0TCDgvAotNySJmJuVbNb6\nZluohf5jLFICTJjxvZe2xaXcyWsjqlLY14UVhHrlPdLuyhvnrdyDyFNq/qHm\ngzp9tRGLkJAmo0+R2FBrEhPZiJLui9AHD5hHmVMTJYt56pgt6rhFOcdXDo2+\n208cDhCi62TwgbdSWrc3cguM1MbyzIIL/+c4ui4efkKlO6JM4uh/9B10TWPm\n5buAAZ2AltcobbF8kNAOyKimHozQnpCW3HFuNSD0sTqyJRR5lmmyhD5Xeseu\nQ3taDYgoOGux+GskimVgxCzEsiFmpaCJUty/Wy9n9CYfOaf1CTwN+eAz62qz\nNFVCKXr2yTXNKHd8BFpVpitMhlfFjZR+qxXRspGEqM8dOIiyOtkVivJnJjiY\nwTsPQ7XqPQJ/MGE+gcJw3vIkRiLbHgBVvnVC1XBNhintIPkNZfGkopgUgIGe\n4tghBEGHVc6QZqWkY41qQ8Y6ujXCURIBK4aDDqMTXKsfsv6cLEaR7Xp0JN5u\nNnhu\r\n=5Vhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/density":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/tab-scroller":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.aa0aaf026.0_1613676320213_0.46528924576947395","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/tab-bar","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b667cb6550e9e1d627b819572ac93c0ba04a0ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.07ff0c452.0.tgz","fileCount":37,"integrity":"sha512-hcdpig5VAzv9UslHqO78jDaeJqA4H7G6f6XPqF3BBzhi8Vr+ar+83Mlrneo9vccsKHiopsNIXfnUXWZExO/5sw==","signatures":[{"sig":"MEUCIQD58fl2adQe8CvM1wcYDsg5ZpgWkqMVHm/fd1h+PjcHDwIgY23MpJbi6Sr2S1fGExReATJd3YcHBDFPhymiK64lVqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsO2CRA9TVsSAnZWagAAJAUP/0JVwmilb3s5fWXK1O1d\nK95+PwDLSJ+2DZwECNiHOw/653Kbk1ViN7noh7Rfnyn3nElO2GLECQoIlyqC\n1kk5CRdjc+5O/ADUHDWeT8b96mwIjpOlUW6YypuYQZi3ubgtap1BCkg5GCRr\nxACMAlAoBzHSRbcRKV/ufonkVec3Og6p+3JqMBsgTxTpt9tSGxFA7+OV9XIH\n27qUlZ6RASEwy80rnX17yuecd5kJqVvsw4bpsAcWFX2lIyVxnaafdYllY4Rn\ncd+lFiCZe9hV5MOLUekxgyu2vb60DCaxx6ui/4wuPhy4i6sJvctVPZRlCDA2\nmme4Y7yMl9Ec/ZosmkTdJjkRyeNsg4QmfVSHKv3/OlGv6IiMN9Ao96z4crlV\n+7pl5Ee7YmxwQQrzLjV7ufBOElGNndxfx3b8fF2BQJeb4C/cXRPlsIto9fvp\n2au6hIJ/bSG4sHLHIu/e+OPkJKY4ZcL1IxRJEcN8dQcZa4X2PSxlOQ3gWpmQ\nYZKjoQi+2WQgRKqR4Prf0l9QxdkBNXatyNR4m0z+EaBwJzLLoPMDLZuTdXH3\nWqThpnGYqJmmdjpeepBFyy0WAgjjOI/JVnWr5SUa2iYwQIeRiu5Pz+LmilmI\nSe8Xso4IasmG1TIJcj0T5ji7xhozG0So3JwlFBzNOhf4vRjhm4VNM6z1ZRMU\nS/QD\r\n=K3by\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/density":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/tab-scroller":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.07ff0c452.0_1613677493739_0.4162460039521405","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f92c8b8931fa6e897335f008c4ca2e86b9fc542","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":37,"integrity":"sha512-rvj3DkGKlQHJ34VK3rwqi66pOh7Uf6ghCpPwJFiaq46zv5lb8XNTlBowQgNEVi/Ab42c6A07HrxyA55I+iFlVg==","signatures":[{"sig":"MEUCIDC6JzSWJLRy7c9+HOWwTtX6bXrdq8hy6DUEqgUJy5J/AiEAuri6KbzyVIWuQNEF0TTLlOjBIOavIUcEQjcdKeiqLII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvhUCRA9TVsSAnZWagAAZe0P/3uFrHpgA6pjczWho72i\n6rOkmTEe6ZTQ3r2HnsVivyBJRV7Q1loN4vxWnOyWyZLw6WfFfTzwgtsC6hVO\n5HPQfOdlIgyj4NkU78IeEF13eJw8FZLld81ZGfatX41tjweI6W9b/2/5akom\nT6HMBj5THBT3wE1OvQFT8+yOFqvP3QUGvuqq6JUwpVXG5tdEaL9l11kM2nBJ\nQL1f5hb48uidLhZzO17ytzSJhZioaeHQSvXaXwaY0CkGdbJJUgGhgUNRiaC7\nZA5A95yKzf/fZ5SymGS0q+rsSwI/M6qFgAq6CFjG1PA5bebD8pLXAeHbxXUp\nmF7v52MJwwG68E1vFzubUiPS2gbQghplg2X8Dt+q19GGFUimiRh/acWAtQzS\nNmkTiAepDQ3STRSVfBba6fFXfsusqy2HQ5GZ67rffUXh92NnHZiBfc1V+GxC\nTSD4bleGdYFO2zpfpSr9igP1uURhcQ3j5c0zoraoHoy4lGCSbDcoVhGAnHXi\ncW4WDsXTw/OxcZrYSWjhWdEPMDpORZcnePTstaVoBKbBhuuvZ/NhVMtgEDgt\nHFyqxbP5CVvglmzE4wOMB0/TCeQZwJOxuGmc8lf7fJjTd6qej2diedH0XFIJ\nnZfeGLugRVAgfz2OWUU+GYzLVZM9KH10Z2gF14BaBeo1zels85SNoLmWQbMs\n9JQQ\r\n=N1cX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/density":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/tab-scroller":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.bed7ecd3e.0_1613690963923_0.9471379874490087","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/tab-bar","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"385c24ec1725d242ded0b88f0021d58e5aa71312","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.06dead2d6.0.tgz","fileCount":37,"integrity":"sha512-vw3+PBvb3Maco90WleBU5TLtLusMR7ZDctTcLrHDQFYV7UTgbBlIdYXx70LDAgcfq9G9HnkY3/LJ0XTRJQqIww==","signatures":[{"sig":"MEYCIQCVEr/tw6zSHl2HMUI2Qs3hDZMnYmPbdXAV03sqnbqz+gIhAPLddUEcWGQU+65FW7nWyS922UO/GC1MvZD2VjYA5vTH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwiVCRA9TVsSAnZWagAA8DkP/RZO/UNV3oskppkYkL+Y\nOwpsBE+RqI2ihVRHrh7/LLALQiX9W8M9RIbbOQaA32z1+6JmR3+9rZbg+Zai\nv5v8FvHKPnAir1MXFz5h4gHDqqARonssZzNrC3js6cydPEoCBPvHiKpvn4xf\nzlP9vQyC7wko5mf4rT7OHxGBfs03fZJplNPozFA8DH2vLLHL3NdW5r2iiV+9\n9OjqRDw2pZC9J7YPZZMLhjtTvfATETSf28pGnTTVeLcu27t/P2upOS0E2/I9\nFV7C82eWiltTTJypH7WFB4pGL05EJOWLpBWATl/nruPCV0sFSnMBgPQr4b5q\nlSKtgnaj9tejR6QmuViaFMYLsZe906euZgG4glUU7giqQ2hb0T1OG7iOa8yk\njaxOlE75LaB2qv+ITJd+kLP4C4lG4gcWQfL1IGvbmmHxAyLwSG/buLe4AHvN\nVWsIj1wtn00LOGlAP96ttofcWVbR4VWQj01ksUF97ZglflwCZVCZ2L1MgDDy\n+XUaGYs53IwTKmzfsHaqioLm1J+l5KdcYSr0kewhFNSKFVh426BMQtEtFJgV\nqbq9v7A8THmVLfoqcwps9aoY3tAvzgb68u9NbI9X1Xt3zAUP3f1pEWEjfLiy\noedFiZ8A30bkIkrlDDkixUqbnEVpaAOGz3UhuC4tIk5epSTQQgB8zb8pk2jp\nnlf5\r\n=Ju1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/density":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/tab-scroller":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.06dead2d6.0_1613695125366_0.9359336202650759","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/tab-bar","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b222a3ffe97436a55b3970b46fd1facb3cd10a2d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.cddb03553.0.tgz","fileCount":37,"integrity":"sha512-gt/zA8z4jYLaYeEcHScW7jBC9W5qOInJNUGWTR7ivPj5iryN2p4150VTJ2xoNOn3AzM9LPEJABdewUcfBweTrA==","signatures":[{"sig":"MEQCIFbt+2Sm1Uq49Fy58jKR2zclj+AvME7biioRz7NsPpwkAiBYNpaRDh1FDzh2wFw7m+ohMdODBBkXDv98+ON4j11eRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0sCRA9TVsSAnZWagAAtR8P/36YGmBvNLVRaNNw7RnC\n2tLwrF4pr4vyd1IUND+D6Vsib+S1QiDvn22WIKgFKZ9eNd2kJcQiItZH20Ke\ntSQhkGpicp53hCyFH3hYa1fYbNVGEZCs/mYWNcnLjvO8Uxn7Xxf2QSUxKdyv\nB0X3d6wLkcLusOclBQyJCGonWO9jlcZFA3jKpnZTJVq/qm4eroV009Co4veS\n1lsBC57akd+oZHe7seQ9a29GSKQuIcwSby5TQy6FR+jXRixz2awOpbCmodMh\nQJSGuLjVNJzUScMjUEYJSzrylyt3KJOD0W6Wrud2ldK7142lrsDBNLrmPGhM\nHhj5fEdLAhSAs78OiR73sIbpFjwcvJjawB6itrErWR8eibgrAcdGM66gcdBQ\n0qNLkSbsN7oopdJg+CtjbRwbY12JNq3h13G7a5jcE3Mm14qZgB1lVKBNuMrZ\nROz94IpsoeD41EM93zVuGGXJt3Ucu1w2iQP3izl9pB238w9lHsRY72HW/gWm\nmj3kw7vTO2HaSEnmWbLEX6r6uBEH3HaIsR/r5ZTsUsIA/FeKmmGymwa9Fob8\ncQZrX3V7ZtItsIe6fzGuP7pqEPzyivxgwR+cvmTnsLov+m0ja5Ak5j3SrczE\nJJ9iFdMVZiwXRRG0kM+RBUnO5Mlq9ziM+7GBqJyyd1kVhBV4nl5jfMBvAWpb\nJraK\r\n=FgTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/density":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/tab-scroller":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.cddb03553.0_1613704492033_0.15357019052943888","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a30806a66f98514d95fbf037d5182c6aa7321d56","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d6d8d0476.0.tgz","fileCount":37,"integrity":"sha512-xDTPxpY4nt5UdwaOln8LrRq0YUC7Ep7vl1fLkzDEbwl/95rkxdfd1Nkgt4hQvLly/cEPVPGDACx41GnzQ2Hm+Q==","signatures":[{"sig":"MEUCIGsBBaVIDSCW7N8oWou9HTYJhFY1M9Zn4h6EzhYfFe0bAiEAvU7fCVufvspUa8X/b3Lf7rvRfNaJapz8gBZoejBanvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL07UCRA9TVsSAnZWagAAvAcQAJBDFhmB2450XhTp5eG2\niAwSvch5nNo9OX+26iB8gw5Zqe6u14xMHics12rAnCGIpPPSZH+XwMmrsaFN\nwLAynkD8Lup248IJFjGeWqKcR3mBOx8ztoplcQfzDpDZtEBmDF8klKCqvEkL\n3SOPcCCXj1ihxYgdq8sAHM8WbpkmBmvppz0eFJmetXOZm46zFZgnkTgtTi1c\nlBbOmbWqJnBjbu5I7/m0w06vAmeFhWU7Zph+UCKs7dWcgka3umT/YyJ3mhOR\niFKahv7bhZM2KWyErqnNYObrSPSFu/lT80LHthLoiuIaiYeqDyC1YoR9OxXH\nu+50FMzzd3dWb1JPmbatkEGERoe0uzRP/flQu5d7hA4O+AuIDyxRV7Ru4Su+\n1oxsWJWPyZAOWx8jr5u8HvCHTpTFOhIuE9pGnnglBzn9adLMESa1HXeB8m90\nYfCE9EU/Ye0xhQgirjEivlRPoPhVRPsS6U9wRME9W6AQgHNBGEz5rLxdgIi3\nXxJHiUndfgLrbUMgNGfON35U0Z9Ci5yUgviX5wF8EDZVhSPjVCxgey7vNMhd\nrIjr2e13NSppo7s8jweAYa+7MS5tZJ/YxSY3pDiuSZLya3fhZhnCM1psC287\nDVqu3ToD3iL8WdZwy7ptQTOJ68tJcA2a475MUc1jdmVoVLO5fjU1jABfSMeD\nr8FN\r\n=ZlCb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/density":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/tab-scroller":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d6d8d0476.0_1613713108284_0.9814987082796494","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18119d6f4434c60598719b960878232bd3b0c9e0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":37,"integrity":"sha512-H9ziJ/NM0HSn+bHVHxAndhI8Gs+KZY+FjNhU5KitfzXwVrlXOI2W07UR/QhNc+C5guIyUlM0Foe+a1s+vFtj7A==","signatures":[{"sig":"MEUCIQDuK4qFfh/Rxv/8szYZNLC32Mc8vV7Oy/WJR0nZtuVBgQIgCtt/RskpN4Cl4d4XLqqJhUquTlBV/f/JbUBaFeBHS5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL92bCRA9TVsSAnZWagAAGI0P+QFnndW37JfY85LjHuwB\nagFZ9hX/AXOSsgnJsL1l+RsZoKliMW75xeYcyBcl6B/UX/aFtq/E4/ljL/j2\nZJIRIDjLru+PVDU3MnPuarSjoylbS5xGgts2dn8uWZcr6aqwUDSw/HQ7wAg6\nx8T2zQiuVuuyo5yqsEKj4Cy5f8YMGNMheqzWKz3QWykW0YJa7fFvVB70V7vJ\n5Zdlg4sYnGFudErf5mnF6GHrez0vy2IgCv4tH+rOTdGf6E6/0DUMbyLQi3b/\nraQQ2gQp8TFfT8vZDqMhGBhGqruZ5tkbrhAwWZjPxRK1fayVffnlenpH5Vur\nhioE3QOZGqnFM+VvErx4l6O9bPksrtWBQEhWV5Jn7E+suxSoriqas6IzDyTb\nx8+G6wHOoCSF7xi6kJm/SkNc38q2MhWwuZL/Rc5988k7zx4MFkvB8ufROTWR\nTDaXmwzL7fNEwRi8tDTa+JtaJufOHQEn0sftfd0oxDSLo8P6MpQpUy/XmLSI\ndq7J9um0mLVc6dJ9Be1E2eP2cUhlRX1dn16/SA97W+SKynuTlMep7u3zUFdY\nB6fdB1YYv73IevcGJy47Q1XdXYfMAciFtEN6sDLKX1PxI/8egg169nTrgZi3\naHz23P29AgcRIMug7GWB4NQQf/msrIh4Bo72mwcyA5qWE7I6yypSq4B/HylC\nZDHq\r\n=BE1/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/density":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/tab-scroller":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0b4a4b2eb.0_1613749659120_0.5803424583617258","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/tab-bar","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b53bd259797eed19965f5a0eb4f2ea6259bf42a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.3201cae47.0.tgz","fileCount":37,"integrity":"sha512-vrxA8t8IpsjJ1o2i93NRLmbUzRzx4wWuaC9+czYspJxUJDM+7WPdIqTOgQwbPlml50zduhS3AAANIoqi+8LGFQ==","signatures":[{"sig":"MEQCIFY2sBJVqY6/v9ZesvTfIcHgzZkCWCWvKrB6eOatEMOpAiAVr6PiI88cUd+Bb4p0oTD4ztJoO1yMekB99kS3UJ7zCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEOJCRA9TVsSAnZWagAAJg4QAJHT0cSETXbugutwduNl\nufqsVgASvWdw5GzS5PtDfsmAVSn3iBpMO9UZq3QugPJ3lWYybkmFwkxJtd4c\nET6gvET77WBjCbPqr71JoXJ05wpZEM9e2hoVkRwG8lm85TKDPDkCtwoQ5U11\nUhpWg0V1vglo3G301l10YTbv9LqDujin4aV+Kdk04e1m4l11zjVuZhJnR8pc\nhgGbtWILEzBP2oj3qe0yVleQL1aWtpU6cUW0dhIChUiBF6jGqn+cOFcCumCw\nve5RyLAgzpg/XR7hwg8EDt0zcbLC9fVx7CPxzbou7NPNFNU9I65vUKztlyiZ\noTlqqHTzDMAKj0gwDCydrZ2qDtrChJsURF2aGTD7lxKvqO4jZj+PouaGpWgD\nmXf2sIXwpHRVrf4+yiVdy2X5AeoBFy3/JcDCaGeTkFBnJsp2yeQQ0z5VwjVv\n2CpRIqZwTW+JyLx887PPUbKXurtmH1F2tOACJqOlR287LgYQglK4NU8lyiH8\nd/5l/XFFlFmwDKN4iRBSeVfJ0Ad2FGEL+AE2dEq5xvQTMunmIxuKAdUOTvjw\n+2qiHHb9BUOUPirenF4E0O18IeFjrKNC7ghGlux+98bvxAx9vWttm/qg7Pwx\nI1BboHhaS/dcbTxsZmCWmHP8p+OUgKGa3h/RI/thjD27ElIUorahoQ2bkwPR\nXDpl\r\n=5EoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/density":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/tab-scroller":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.3201cae47.0_1613775752599_0.07315025643645279","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b64dd0a00eae60cf7e00f56547ec1f4c26d218b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":37,"integrity":"sha512-Z1qGZMrFTg0zxr8NUG0nUKyRiEsbz3aPRQmXlYLhrQzn+3qc/oMk6X5BZw/QPpZGr+Qh8ken0I5bLYgHJtmcwg==","signatures":[{"sig":"MEYCIQCMThLC30Az0tF6JIxIrJCSjuTuqFGBRruE8bINQ6gMqgIhANRdTSPA0nyB1d5zWRjTwVC+UvSAYvJnp3QHPOvrqxn5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAs7CRA9TVsSAnZWagAAvhUP/RsgVgUMSJ7L6ckg/hGH\nAUHPVsSdffpNwPK07zrERRw8ysC70gp2s2HhjHc5oXb84j0STGDnSAmRs0mO\nTiLyQKpT9nJIbV3etciEWKLJJam5Zh2OCI7f9W+6cziT98N6lTtH48sle2dC\ns0/Gvx45xHKijhD0inTVHw2IkWHSJQw704u5ufnaRyU5DQ28zv1Cr3ihEdHa\nTRxUKkmqXpaluKy18P1mCpLUDFSGcYc9Uf0k86BOyQFP8UFRpYkIjeE8P95I\n9Fd8HeWrMW5YYgi7lB7sGSmftJ6kVSQNYqswEUr+ebrvjXKa9TY5tTX1cAWN\n0HPNVwH1nhKSasX0xLOjpyscaweUzYvS3YoTW+w/rmgxgr5Oa6xCHPYrESCe\n8JlBJH/kx1C7FxnfmHS1ayzBre5G+a+xzBlcoPfC1mORfG3YyHu+wXA1TEFi\nzSmzXWEsK00YNeiSuXGFmVvIRT8tM6DT+sHNR/u5PYA1p9AqvRmlrLCsNEzh\nvaHFL4SFpyVFIszBu9nu8TnckHhYSKPAFez3ICuC4rKm8oOSK/m5fGRhSuHv\nUxuCoDGgQYRDpCIzJ8BW2g2e2QiSIU1DyLnha8nM+IyPONw3ulAbg7iPXc4z\nc3mQSmLXWa2Fj0M9xt7ItY1XPAYkWRyxVdb6hLAjOMe8ZMRkDffK1j+N5Dld\nPD0k\r\n=NiDq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/density":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/tab-scroller":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f1b1fd5d3.0_1614023483072_0.6149756300934635","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/tab-bar","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa452f4512e1822a6383a64aac4db38be6f02018","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.7899e0fe0.0.tgz","fileCount":37,"integrity":"sha512-sD9nfqWjKmoeq4hnkuwKOCMsCDhdnJw9giHaLHO0rK9A6ACHm6azzKa00Tf6/tWjZQdo43DVW/lgSiZ49HdEhQ==","signatures":[{"sig":"MEYCIQD7HjejB/Nj6oDqYV+4c9NxjW3tDfG+PbybvJTvnjkE5gIhAPTSgMAIMAMEhTaSJXomxlFb1CNWkh9Pgn1VBw2xgAuo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDSJCRA9TVsSAnZWagAATI0P/AonMbeKHbrQ3WSoSzdT\npoTJIP0R86129IDzy1+EFSK5dcjp72pZ7a9Msdz7Cf1KKQIXvFceDEjLQtzK\nlv0l4g+D1lAoz6c3hduQccP268/ZsFQ9+JFXlum0nNaLxxnHJHXugn4v3x2B\n4OdRAyPhOfr/FhZoxEDaLip02Rt21VF+QRJsm0Co5C1cISuf3ImiSxKmAO3k\nYzIpTEJ8TJ40zETJg9sY0EF/tLbpqbdu2PDJYOTjaGrytlBtT9Q/qEZCAaH5\nnL/7GR3IkBVysPZ2/D5IndK5FOWVn67KshIwYF3iEMc7TRv6heMqx1ghBYG7\nTJUfKgFyUBE/s0APj6/w7FddOSaESd67FU3EVu4y1syMn3LzlFJ/gPjD8tKT\nsXvJj8DmqX3R5myPaUlE+W+1gBkzTCfWfBtJcNeNAwBkFHo8QxpF2PSIl4TB\nvuGr+we/IIdGUS8yUHO8i8Na0bD42lmgmcZnoVziZK4XVE7j/meZzOLKTjSo\nW2apQZ1LLJ44u0XGn/fj/M63Ww3J5bAVKSe6oIRRNB2caIWZ/j42Suar/HVD\nZUSEUtzkaBYmSMaGg/eBy70pQL01Mh02jC4tbhA4rP/a8nV3rRiqWLEdRu8b\nKue2bUIF/CWSR8ydiz+4yGHNDAgnJ9MNQ/ksdQzSAm+6zK3/4uGFgCBBNZip\nESw0\r\n=Melm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/density":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/tab-scroller":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.7899e0fe0.0_1614034057035_0.04716098940165736","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92fcd010c5d84be537dc4e0c4b7b96459f0971aa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f19c86d13.0.tgz","fileCount":37,"integrity":"sha512-N44FToAV9EptcQB8GhnVRiTYZbkg/q2dYIlDoeooaspPxaPMpLjuSFWpMfBagoxHIsvr1ajl8Bhwx0wjoysDEg==","signatures":[{"sig":"MEUCIQDTegqR78Mpp4MZxS/MLTQZBfvqy7/CzLxDwYnPvgy/bQIgWP4IM4yIWqoyMOOTZMaOOkIiTKVzG2UdkNNZs9b4ZD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND8NCRA9TVsSAnZWagAA2rEQAJQH+tpV90FGVm768T0h\nBBlWzi2pdVChvH6mDvcZTXLUwq5/3a2XW9Ds/JCiX009XMyVOG2e9QaHzfJm\nK/zqZGLZTHJUl4S4Lx7cROYhhjdGqGP5JItJJcmVdRjRfZly9zCUhhNTHTdl\n9JqRK2U0ipy67X11wBk61SUzO/MEJf/SGUuxhiPZe11e+qJPEWjHGnDEzehp\nlFD12q3375g95gAkr/auNHkba4lGGbNzh6JYOE3i5aD0xAkPXPmD+CqtWs5R\ngihtCWFWc4gi5WOZcozdPiCOmBayLPtzWT+J2gTe3HYP4TsuUyBe/UFXLKi+\njHPzfZ6dV9depBtOXLSFcONSoKiP7d2iNwRpa+V7xwHOwcKGeAjgNTZnOd1G\ny2wHfTz4gk7XIdPQesZWeYgLnRw6r0ddRBW9s4rAx58DV0/R45FLYaCs7FnS\nb9EN9hR3tucoHIbmw9G2AR3GAn1oPr6EIAfJzQUM7WLJaIg3X7NCHQ040/N/\nHPW+SJTb1WV2nRAbOsFFQ1EhT38iEu/sV6s09VuQ5oTrXFdl6/5lasEiiEXD\nxtYB1+MMOPZSWPrPfm8/M8uxhzWVlhho1mKRVauZQwIDvvC7O/Qc6/0wyiCE\nSwMd/351/lxx0e/3c//5CoaUQ8KMuajopHrSkI+UVgm699qmfJrRFhoRudUF\n8jLk\r\n=776P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/density":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/tab-scroller":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f19c86d13.0_1614036748408_0.27756236409661583","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/tab-bar","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cba82ca4269743186999109039e6ad702cb700de","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.60e892d79.0.tgz","fileCount":37,"integrity":"sha512-2PCWIl8eSQTYPwUDuVsp6hJUD8PcZLG6RoIIfhQlQuksmBrpy5/bI46YLKdQTP92XK8wQYjgYyjuysxft3S6zw==","signatures":[{"sig":"MEQCICiDFZOolAe2UgWXZZ8RXsAIP6PaHFOGzdgrf4DRMr5JAiA8U71Mz9gWJDzv8ytqOL8TtzJba/i6BJUXZGDjPoA+6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFdXCRA9TVsSAnZWagAAbjUQAIWEpbHKwv9PzayY1FKd\nndNy+KmzF1qK9gjZr+B1RKCrebYua+fQS+KLg6xTG8fCFwi6x1hLFj0WxOYM\nhRroKaC0dOb7MDv5wFewRN3feDcQPhgD0IV9S6rPG2v1y8gJYjE667+uhkow\napluoH/BDHnLsM95FOAdvdl3k8XMuG+V2YFN+5chDU+7yQaqLrCh4eYLiDc/\nT4vXy2ah+8SEd+ZbctWv0csavl+fkFRz6Ir6lTtasK5lMAK62ZQW/X3PaXa0\nodeq22aXSg9vvVh5ysu9B+nUCA7Gokfyf7V8zNkIfi6ygeOISQyxTTSw1ok/\nprb2yrbzxt9PALJs6/5WXQqqeCUSNSERVOKxbfFRrwbk7L6+CSIVDMBBhlIe\nXZZHbGbVjU+pD6Nyb1TmQ1i9danzt0MM9MN2tuGvE6xFx/PgH0KftNs3qqnH\ntHozoR7dlcXcT25gH9cmWrWfg4F5a0i9nqPaJ3ANG0RtOWlZ/58KUUjH8lzi\nwqomVwEwnl/EZ3QLr4lq6x9arXtOLyUNVKVicK9wSPEevYAppjDkWPfjIasL\nTOamaw9kjbn75Kypa6rfyxzQDWrNd2rRArPV3GFJYnkrzv58/cKIzHJyIngg\noq2e/3CXVDLkOQKRBJmzU7g4KYf3sZz997hUFeMPsTCLyp+ARolKMuKXU7Ik\nOU0E\r\n=AXAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/density":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/tab-scroller":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.60e892d79.0_1614042966915_0.299882236704313","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/tab-bar","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732159214fd6f1174453134882b3cd3993849ec9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.c96bfa495.0.tgz","fileCount":37,"integrity":"sha512-4K7RaRACiqFiTbF7HBTPGGr1B78HAzdDyxUYVwzJyuD6K/rOlxbFJOQVGjsdnhFA5M+sBpp1JcthEPGD5MVZMg==","signatures":[{"sig":"MEUCIQDh9IKMuhyzy2PBhtJ6hV+ROvYkc8VMZRvxJGep5P+PIgIgCWNoDwo38ZivHHpoKThPd3th3LGVKFRDjnxW8ymk9/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjtCRA9TVsSAnZWagAAvvIP/0YmQaor81F+SiWG5CGE\n0fWnWJ1klCWietPefdQr7H3nDOEqr/773XXqh0DlXV0pvzV9WtwHJiLe0wNJ\nqSD/PgRve3eCNzdVMKog1CIg9RhJYD5s1ngKfuVT35ejnCjO6ym+hEt31kTI\nvC310whJsAXVtVkPV72VWuCvozuWj4cZKO/kMEQeIQFHeztzf4CKAyeUasrq\nkGbbKfhtqdVrW04xrDjtRfwhG1YE7Jw2+LKcujeUFJBNEN8Kh3kJy0ZUNxtZ\ntJ1TdO/wvKH20f36aEXkJWI0YgcUVifHGBez/IA77oF6T3P9bu/Yc7e9QqY9\nHWjSpK6AE8e/Giz6JY1VmkLoBfUPkN/ipKIKQgceiQjeSvUO6bUE5OtnKw0q\nXZoUX59+hhXAAj5KhYXGQqqCuvbO6iZKzWJqvT+Js8DmLy44hdgFQXeYUS6f\nqQSQ3kXJ3/XxAjL2GYUGTXoL+EBkNt0jUxiJ1gCFeYdpTPT3goX5AqwZFyyO\nB4JmywcXkfQ5edkNHVCxGuJtFuHEzq8mnYLQiO5fmmLjexTnOa8DsSekyzgD\nqH8QvGtzqawFd18QHKBVCLOcybCnJwHE10p45AypA97Snk6Ts7DDwNSq/wJz\nUjQuNcUEntErx2AP1aPgoaNUI3M1JqhC424l7kPt5EsYg5L9wyVyUvbksC5S\nWtA5\r\n=6Onh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/density":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/tab-scroller":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.c96bfa495.0_1614108909342_0.5246515289848632","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/tab-bar","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac229296af69b83c217145e909dc8b2510f6f16","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.fa9b59f67.0.tgz","fileCount":37,"integrity":"sha512-6gwWEM/tVyF54kvE+9sN7GbzXluisPlJqniWvILNcSWo5kqaUi2ohtZiaTIZT+Gtq5Hyr1elf8Nvl0j6S8LSlA==","signatures":[{"sig":"MEYCIQCBErYKB7iPMDIY2gtJkewvgksr0gTP2M1ysYF24iv+dwIhAJtSq42xfxn8rWHMNySNxmVhQuI/1oR0bsIvoM/ia+rI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVk9CRA9TVsSAnZWagAAg/4QAKKMfoNsJ4PYi3uacPun\nmUG7ioYPzoWMRodSdwnULSbGYFqxYsL5zuTryhVwrpTiUkalrlJtMbCDtl0l\nR6X1GesXS859Ov0XETEyqeIhc8zvE4Yo3pgBXYmz/RVxJFp+3mlCG7K7JPtR\nsmPz4R7r7zSlHt0ZWeb0Ehm9jnvBuqeFusjWV7jAAIVL6dd67i+dBZ+8B0uS\nHO6GUYcHvyv8Mrp3DpdCPmRZqIKruOjRakFPbKMKz7AccF3GoD8fW1+xMv4B\nFuH50Tv4BlfvC+4ogUgAC7UC1Vkuh7elqO4CQrQGXZUJnIHdCobkDTakLofB\nPsoalw8mwHqBFTaYwrGpZ0hw5vJBLavq+mdJ7m0Iw9PpPH1Ci7xGyrCIw64f\nX4CmZ5HGmMYgxcQad15SLJjy7VWzQtbfcK9SrIF7xoU265Ur3JiUFiKeU60L\nmc6DTV0E81LzL0sDetIMoZ+wNXmTYtZMF/L2j3HnwhsDW2vAhdcs9xqcgSQn\nHqG94d9m+JFiof5rc4NCK6szxXo4B/n3XSmMnWqvpZveldkhnErDDy0GvjwY\nt9xr4V7a1xdYw1MTpOuG16N093/hqwyaNENanZH903QteCAZtGRSxp8lf6N9\nwHQhCyamHXUv9TnM/oqgxy3Tv0VyXVJInoFdxFtPjQFgjfR2anO7hBtKCwr4\nTNof\r\n=zr9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/density":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/tab-scroller":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.fa9b59f67.0_1614108988996_0.7365488450179174","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aecac3e81fc409032c6bc99f5161613f864908b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.869e3497c.0.tgz","fileCount":37,"integrity":"sha512-FirtHvfPbC1Mtr0XOq4AyWqlUNcZ8PjIh5ue76v55Ldv4ub2dsEgtOXxfz9xZTPRUk0wbUs7RaY0jkhtuXMFXQ==","signatures":[{"sig":"MEUCIQChFHNz9AGOrYKTx0LCy4u/tDT3AWjHrigscHWpUm78kgIgTyVed2JnAQ6MnFoxbTw15KUvvJ8izkRRbEJDURAi3Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVlsCRA9TVsSAnZWagAA3ksQAJUnQ7FCRcqP2Va8noYV\nEVAuTceevkN4zvie92FrdYfx1g0QqtV/wI7qvdIN7bAZJmITOVzZxFWCRq9c\nhL0hON2wNWtIYjgMskLIehsH4xXw/flyYvgaqfzEmvrgJZvjXF4Fhhzi79vR\nJTX/KEj2WnQFCDnFH1ETDea41c0Oiqkii65HlpZFVhmlxNnD+OnL3+7JDm+u\ncfw7SHRC08KdhvLGwKWa+Z2IBUaZdJRfYICWPlBYU7WAlgVMUakxW4lJgXHz\nd3dMMzEGyaWqyb7ZY6kVo5NGyDKq7u/9oXuIsxBA8nJZMp1hsf7y+Jb8dSnF\nnj7w4NnYnzwKsOWAjRbCgxZx00lUPDemwfZBVZ8bFEH4mTIFJN6vvV+6IVhO\nKfGxGg27lQxPfabGaP5XXgsIgzSqmdEeLbcG4PCm8wX5iXZSYkdAhD8lh4hw\nIFhz3QB6RwNX8IS6dPxP4hy2olqhDuErk5lO0aH1YS40UrLA+WonPiJOMIL0\n2Q+PywoucrbJMZRcVOP1nZ+XH0lRYzNwLpVhsnn2Jdo6v/4raKcsPPwwd05e\nCEasu0eVFZinhQNtLn1YT/za1q/PYtOi4tvSQrAVcen0h6bljSXx8XG7yqeo\nPmnaF1FKpEedYYhA97MM+UxlmB3OqYrOWgxUlezfldBC1OLzWnAmmwHmLM73\nhYJf\r\n=SRgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/density":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/tab-scroller":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.869e3497c.0_1614109036195_0.1969061288616485","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/tab-bar","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d7603c30036ecfff516ef84bf1ba28e5ea87e09","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":37,"integrity":"sha512-8ZQ8EaU7LpbRzQPlUci1QHazKKazemqWNH0ePjGq9VycrxTZHy7Q4yhpMGjI5/57PJY5x1APQh4K4hfTwdvopA==","signatures":[{"sig":"MEQCIBWJsIES/6ea4AcjAZVz9s5KA+viJet3pFllMJaDvzDkAiAjbo+SugIl7Uv+lI0mytPCUynawoZzrNVXuhKmEqXjNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNV0BCRA9TVsSAnZWagAAxjcP+QB6Tr1516RMqDNYGdxj\nU199W6R3wqaufx4KT0CIrcZobvwNIy5MDTVI85tzCw++hREj7XJnXmPgwBAj\nodY9BQPDRaPO35jVW+Rg3W3QJBPV/mjaioal7W5ZnTAojg7ypwq2+FYoY4qp\nJz3sYKJozRRQHKpLXbBmMl3dw9lKrsEjXHqONOXZQwnQnBptUXabA3J/yZ4x\nb2wMc7OwcUd2LmkBO/QgIUvAccfOYNCEgC9KOh8k/btHCpiWxi+bw5aDOvmg\nkM9n+vC2S/GHTObSF0geMAZhxAL235+A2DKqNULDtWwspukhFBMHqUbLnVQd\nx3jMfIQpR0/GZYeV+TZ4Bbua3vYeXIh17Yvs8wsSRYrLKWQBj8ZM80iYPwXg\nl8z7cN70yz9gsg+ZQyNX15B5xpVEZU+3G4SG85GxRw4w0SLsSiRRKi7pzTxW\nDO7filP1+sdiV2ClTLLEUPlNEMSfdz9mvsyxuxQgJBhNo/vhsRCh58c2lMiI\nJLYBHjcDzWRBintverIwDWzEXs8m2yWHAh+GP+J9+N0uYjyusRkJI5xKfjjh\nnnbBt0Z1JJBtzWnPh1XRZ2Gyoe4JfNLhbEqEDXNlmQpiWf+ZBJKRmKbSSPm1\nn8+fLhREUzsxWbmBwJRWabLReskXWSOu4Javo5TLLaq0BcnnUxwVcCYTSLOz\no6/i\r\n=JuOH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/density":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/tab-scroller":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.8ecd7c9a9.0_1614109952729_0.3649114903108879","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"793ca318720e54a5eaeb9ab9131dbe045043c2a8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.9c85d505b.0.tgz","fileCount":37,"integrity":"sha512-Anp7yssobUpL3VOrthoaXg2bjw8j3QPAR7mgSJBCltbMJyv1l8Uy1Z116/vBjKjFtPoTkMI9DhZIcynXJE7/9w==","signatures":[{"sig":"MEYCIQDRfqgoF6O5XxQ0TrGk1WONVXvXfFl41xgG+b7udua/oQIhAO7SFMk81SNtFf3zXjLoH65BddacQtmDj1QK3WgEluNP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX8ACRA9TVsSAnZWagAAHNIP/0kLc6G5Fc7TRlYESd2N\n4Ysir2zI71/WyOgoVpZbX68/o/DlwK7HoNaCvEieCrV0nqCasPs6OGLYHmpw\nN9SPE7KLaeerO1nx1tfPY0ZftQ1c6+W8TEq6QWAyTN0B8M+S34IAhs8aqRTy\nTPup0/rtWG207mQghh2RE6wqxsJg7uxlaLNEX6sXQeLGfWgV59VB6kYlDe7u\nODgnFRKFEJ6qEzdPFvoAlRkZc9PHsTIIrIrwBOjjYMJ+3v41vgr8NsTr4iJ/\n8dp3Z4oLsgVGzc2HCRoNlb7zEfXVLDknqCtNFoRHihfMgMp4pCNxUSrcl0Ip\nCZsIjbYLf64hOfvZSfKAYhrfw2N0cZzLoyU/6BsH59y7oG2U7YhjwfbtuGis\nIjqehYyiHCzyD1rcPm2yAkCRIVnuPopgitcbiarESed60CbMQ/DVcNj+olne\nfRVLxPDEk+tQBmjUYVYYFbzLfo6gjXSefEudLDBkoYdVjUgOXQSS0hxnTnws\n4hWu9D/9hYHbeXUj/Dtsr5ntZMLRGcrcGbRarZG6hB81YhEuBnj5eyQ+/NKo\ngGMP27D6OQOsnYHo8Fl6uCxmWdKTffaNDt/EiVYAlHk+U4pkIO0fjvqF2cxw\nKqvzPpIlM2b2hgAJXwTXC9u0F5xR4xRpO+X33bC67XkZ1Qz5DLkNU4KdYOh3\ntZXn\r\n=Y5qZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/density":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/tab-scroller":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.9c85d505b.0_1614118656331_0.7945948041170459","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/tab-bar","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba7faa4d2b99ed779dcf2333d29916380bbe44b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":37,"integrity":"sha512-TjkOvnR1xjP0EnZqPeG5ZFP/WHJOJjgNUGXTD6BVEumYrKpqTBTUThwBboAAxc3u5iIGY9YLOe/MQc7fb/Bvsg==","signatures":[{"sig":"MEUCIQC6eddGuQb1YyCZcFAKWePOvb9EEclLPVP8p74kRKIb8gIgOpjKHjEalnp3gr9sdhNlru6AiNfjuguFhseKJ/tdECY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbDRCRA9TVsSAnZWagAAZOsQAIwdxh5qU406tzTg52fz\ne3+2ZpwAV44bNmC/bGrtA1HxSpK4lpwz7Q0Zl7I6jl539fPPWPFKTX4AnAno\nueDSxRWCKlINlPqayCxq1VV0VLPvtoQTLBh0pQvlo8iawefTf5yCgQG3POh4\ntHL08tMKABawce5Oz7HzH5KrWGnJYbjkclIQJAvOLNh7KIeGHnBeQhanfOXx\nGFKhQmSm0RxNQgtX5WFHqU4jIwu9AGi3uz26Lgyvk5J2jurAYm40c6+x4tmD\nWqcVb8FmnvVcA1AX5QKJXBbmyPHr2Z7ODElDUvZ/k3rfP5ax/RTDb51LFlSd\nog1GcVFcuS3peKKfOaqrAbVEb5i+YMmc9iz4GBYtDcbFnb7P5wLMKr9sZh8H\nvSXUYaRA9rPoo5P+t9GPYn/Vr4RnqkG7pPcF6wHFh+b6ZCmjIttwQJ7GnpGL\nI5Q6duRR11oUJhhBINLu48J11jf8C/733hMdxj5ClfoKeAAxbaMmFCcTfiEB\nFYPcGvxNvarFAWTy4RCrErgSgXOiSepKhTALYtKgfXCjHoJ3oZOSmet9EcqR\nfXoGSRCLYnHn7qA1PZHAfTy1sAyojSNKe1wjCpeYDJB4ouKWQlOyS1+ek4OH\noFKLswRMVhLzCGk9Qm5rh0qX+ZUo4pxQPuXF6VYdp8ZkFnDU1HtcgPyQJ16I\ncXfY\r\n=6YRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/density":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/tab-scroller":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.9f2e85fb8.0_1614131409301_0.08905361298182668","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/tab-bar","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e8ca2b90d894c5a084e1b58b6f1ae1d6f58f997","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.19c4f29ef.0.tgz","fileCount":37,"integrity":"sha512-WotyJWbDDUcLlnIneUp9yb8yPqXyLOWLDt9dn/RQgrd+XxGMiymZBlCHRv8w/AelO58+CdlTMuxdKHuYHemc2Q==","signatures":[{"sig":"MEQCIDQrbEKC4HZP5fn5ASy90maYaWc7X1s35iGDv6eQKClmAiAwJfku0E2YHM0kmTNfBQjV9RDXucvrsaKBoUUcBPUfpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lmCRA9TVsSAnZWagAArqMP/1z+xvnhah57taBuxg+Y\nwZcQ/n1PdAyGy9Me0qZEbC7FEKryQ9KkUJ5jHiQh97DkpaCOxpIQZEiyGlsX\nnleptd02mDI0f6YBHOWF8+Df0SbNz56TswAuOXMOHda6lawmM4niCRsI7L2l\nKJswyT8XT+pImTNCN2oQKyGsTnJeRe2PX+v09w7T9Jm6Jdl05p0zNtbpmrn0\nNAnPkfrwLanWAOkYb4/D8nKBS1ukbsc8KBkWr+fZSQ6SyOmQ2xUZk4IZX4Nj\nTE1K35GIq4EaUrEujtUswHj5udi7QXT9XE1nC5preWDQ+Vz8qN9UbN9Wmy9z\nyrM3g/AXTVxpd9ImjwfVIriVpggx/6LtSFqFWQUsRFIcUPHAyeT4YVRS23se\nKT5+3hWJH64z7KNeFnMgwmsmZ3u6jY1sj30Ve/aKwET4Y84NpX4M/z4PVG6Y\nfJqq2hch5H2dW6/uMrjLPOCZQHIT7eWOCTGCu4pSQfFy14IJ4o0t7lP3HQvs\n+KdgxYTL04JhptLeLzlYQJbZXUwHhxJvR/+1F8ijb/cjAnwlFQJ3HP/Ajg0P\n6789qIKFZJL+s+s8o5S6J3drfrbvqX/bwmJbWdXkUXWk8yvIKosHSEmvE1a5\nT7RK8mendb+5+JMPLEs6Mw8oIPYztut8aP8AGFHe1EkmCjQHyJoCzeI6pstm\nKsTE\r\n=hyZl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/density":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/tab-scroller":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.19c4f29ef.0_1614281061505_0.5242267163760161","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/tab-bar","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70210baa59b7da48cd277e279a275bbe55eacba8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.63df6e9bf.0.tgz","fileCount":37,"integrity":"sha512-2UlvO4Lw9KTLvDndDNXNhs1dqri8Z9E1Ow9Wvrk5ZIeoU6q5bm5FnDvZlRERd4EsbES/hxVlElQSqAviblMJzQ==","signatures":[{"sig":"MEUCIAO9/wDv0hB0+g1E+zj4zF+nd8u2A1GqfCQgmnPoDvZpAiEA1lx2I7dO3B02YZ6JmKlkGRNuTDOhexElYtJJ5pqWY0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/zRCRA9TVsSAnZWagAAMOwP/RHD8NQWN5xYMah3bGlF\n/+IDbPfXCQ+2CJN8n/q0moNBx1/B9ug6tzEHGXN0npv7w+WJZ+b4WqQFyxL3\nbB9wvWpr9jU+73GFDsptBfEkMwgAKYzAoQQkQzASIS+OKV8aRVZu9EI3hfeN\nEg7FFGtuoUZVepRZELV4tdjoSxcqO71VP9bmMjo1q0700yT/sr9R8yH3pRLW\ny6MldnMJkAUSlDOUvbS4VXNSeOvCHw9aW3w8UHCzlDA/DtB4RQlZKTjERb7K\n/uLT6+APoVBhEmhWq6m50vtDCuROyteXM7wOjCAtSfdQGwf+AvDV4v9Dhszc\n1ZMkTaJw+YCf1W7OURLin5aZd4ZchjojQAXlNoNyvBuf6ADTwxFJiyQKtGiz\nWHwb6FThFCJr/eXNhceKNczHUJfyzjCBAPKCCFvqP/7bpu4OV6hoXXlU+8tS\ne1DT8hCYEti/WYvJBctlsWw6iyiEqFQT4vCDFxpWdUqfRYfGTUNSQmuX0OcE\nBsrYB/b1Iv08mHJvnf3d7MCxxZ5R2nk1Px4Ww0fv9uosY+w/AO/S+Pc+vWNz\ns8OY9P9sGyKLSBCFekrt2/qWlxS3d+b73uYol1lGVh52UV6r/4T3+lzDjM7X\n/ogdecGet2seQrVsRrqFwIqlNFO40OFNypAlXAcpetsKP2qAz3JkfEPNYZg4\npBAT\r\n=hnKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/density":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/tab-scroller":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.63df6e9bf.0_1614281937294_0.5309203715962212","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a1f5c5d558742a2c48a74266f603d0ae7068a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.981ad970a.0.tgz","fileCount":37,"integrity":"sha512-2Ml8DDuBWTn9brRIQ00u95+knr/4cOrr0JjKq8WHBF03u4cX8vVuDRYkZrIWFraPhlP75eJPCXljDOm2WuSTeQ==","signatures":[{"sig":"MEUCIF+6TLX35PAPuWMcIB2ceiXPxYlPZ4MDF1bLaf7F96v1AiEA20vVwUMv69Vs86BnUaRT3NgI9HfnV7s4HiAXdWG2um4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODxYCRA9TVsSAnZWagAA9E0P/10vYEhKhM9zNC2PhC0e\nZdNhKMaAEs9FqfcZb9zY3YyxmmrWcjrIrmAEmClR/yJbUuD4MzWP9OSAIXQV\nVBNnQQtRi40qYwdnntYFLiW9rxykTNLVAnqz2DxLqghoUaeltwuenbfh8LPd\nEjh1SOT8xn9Zvb2YVLxDNssk5ck5DTeT8w+c+CW/DJIxU8CouwNUC6mPbnqM\nU5O2/LJRlOLH1O2LKG496H44TkZKIMOVr+yE2VLHm1bZhD5ws3OwuCw0xVue\nO7jNaiY5GR+RAAwEy8nBBjjZHjyT50r/CYHY/sQzUqBztZ21shQevoTQBpDL\nxnr0GGnX2jnAkzUMKTJWxf3E7Q15zUZO6bIOVPuNxzzokuIG3kUp+Be1JvKy\ndtrwrC/nmbpbKmJvSIVu55ZEr6yfRUZjg9lpVOfBsVV6Uh2JSDwAkItN40tY\npzq08JlpZMrh0oA/bNeEU51M7cc7Cnh+cT3srgtE6QGh/9HK2Dr492wU78Et\noFsD0Y+nEOxFy2Eu4mexFCL9ZByFSWzqT9czH5UUfRfgvhTYOVMzhjHweJJQ\nBvzJBbi/xows9fPabQSKc7DbSIEfLzKrj7OKBrB5hJ96GGgBm5vilvj37gnh\nVvy95qL/C1QKCFglHpThaVXxshdod6E1diP4HYJpCQQuZuDQrfG48W2/LJ9o\nSNHD\r\n=eMmM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/density":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/tab-scroller":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.981ad970a.0_1614298199972_0.6407578465146495","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"573d4765090b5c4fd37f2b1e50e086b8ffa90cbd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":37,"integrity":"sha512-s9ooIRBlygh16n9+m+t6b5PA0kp+fi10nb2T3BDQsAesPSKB5f//nJwezvlKIJSG0n8pf3e1VkGX3lMYeHtZcg==","signatures":[{"sig":"MEUCIQDrbPGIPF6vlEd66HPb7COt3fi7kh57r5sU22k8o+NH/QIgYtnxAWLQ7uWDzD4gKlOrDXVvpKxdep1rbddvRLmGpXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUC5CRA9TVsSAnZWagAAvbkP/3ZSgwLqFhpoSGHjFGRL\nHIS2iK+6sYxAJ8TKWmZi6R1MbrkarXRmAYxmh/U0OekmWD/INC75RsWE4yrT\ncM98VuD95fegz3lTvSmAw+K3dW1lTc24SC5nVR1EO83yTw6R+eeCxFKhyiOz\nMbbQwhCdgVftq1l7x1UGmRhXMw57x5o5eA23IHmf0ckyem3Z9O1g6N6CbzyA\n8mz6LU0aypN9eAPE7fffDBFO2JmMRbN2j9ZOeVRp/bgfZb8DkjE7p3jpmg/g\nkswPEJkpuitXy3Pt6WLsBE5rHt3kWrKK7ozy5eISiY6uD3UaFD/XTtyawxWU\nHJwV6aZhL+5lqEOsp+wgjh46n5Br+y3acuXupF1pCC/woMq1wUMebY1FZePg\nft80h62zbB3FrtsTk5w6Vtf/L6lfPnqNlHjoeYdye2DqohHuAQdtPHtm+uhf\nVw2ZhGZ41FTyWHHRqHn23LbSmXv3UAvbh0OhoVe77yxUkV2wEr2pGsrIbR3W\nOvQYKcr9YCc2s0tYg9y13zbdhGFyOs0hktzCfaCugLjjm3Dt6WwUaP/A5asT\n6RRjM7OnJL4h+HTg5HHqYWNRLcgf0TSiVunOZxr8xSLUwFOrbcvZOPlZwm0t\n2ar3jPNVpm6L3bpV4JDGBcrtDo2NkAxr2gcovzWKsDejG6tXYISETsNeh3G5\nhNAe\r\n=JOGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/density":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/tab-scroller":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f9c9e39d6.0_1614364856816_0.7775533814451536","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/tab-bar","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac8879a40f650ce5453e6b42fc68cc5081ac729","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.c97d7d881.0.tgz","fileCount":37,"integrity":"sha512-z1Qs94hxEpVPOaNfVi3K/11LoF+hrJkATT5lj2NAEJGKRFaUAutokmDY3PWF1UZxm7p0nnygWwQ4U/CGVTArYg==","signatures":[{"sig":"MEQCID2lgpHaFkTjB0qv78CKjM2BLgc7A29sKb4oxmTKgmU9AiAz0/6Svfk63DkjvMfFuXdlXKYfheRumKpNEh2CHVj+cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSoCRA9TVsSAnZWagAAoZoP/Rm9soSBgzNSzl9adIQH\nn+gP4LettJqAr7NqYqPnODO85EfKrM8w904y1otTvnV3oZc585wdGeeQ+pAM\ncGsBPHPY34tdy8590tKeWwLUO7hYoPw6o7PIoEGkRxQZzILGroErgM/2aSsU\nuhzZb9u8LklHcnqLCSDaNiwyZSLBMzjEIlYo8T4YBiVeOZc5k97UGcWkGp2E\nljNKfW2pgNKO8yYir3dw72iha8DFC40TJNUiQ8655oLKqWA8IZK3eiC7VFPg\n3Gc4Crqb7L7ODZOBKIWu4WH8PCzX8uPEblrkqDNlUSnu5LhMzlgRCMxOrMLL\nXc9R6lApaUTxhK5F4L5OQuTrYNwSMacSgBfJECUA05B4G5i+dsfZJ2Ke6d4P\n29siZ+SsuAaJBO+H0cRWgimg71qqmzkf8qWnAF+ad3VQ0ugRA9qQ7tpRV9xg\nFAkp2R1bE4DrwraGkWys+wi1Y1uNm4RP2fsLWHUo3AePs8M15VS2PVSgtjh/\nHnwJzCmUmTsE3o3Fw3X/yVsWfpbfZj9LEWVQWDCEivZ5BWTDZEaPk6hwiuYO\nymW80XWBxLuMUIiBaad0PS8qroTjoHXR/fFSPNXd4KYIEs+j21q9V26SPQes\nb3LnDD07b2igc3V+m/64dYbv+d+3HqFCwAf+HZL8Ay6JUfensr1XH3pUeDPE\nZjjD\r\n=76Kz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/density":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/tab-scroller":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.c97d7d881.0_1614632103965_0.14430923055527645","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/tab-bar","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49ba053a8036e8fcb981b6cf4ceabdb0f4a9e5c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.bf670dad7.0.tgz","fileCount":37,"integrity":"sha512-Qh4eV4O/iqfiCcoM4Zrvtph/YHrKVpNIa8vgsk7AqQbVRRYW2uEaqMX7kWjmadGu/X5v23hm0yp/l9OlUBC3tw==","signatures":[{"sig":"MEQCIHbwdeAP7Bf4MUF3ICtdECP1QJrhLuq9gioX3+PPy8vvAiBdfZUx6QVcWh92iAjCylKEKJc+TbRUeXbSJ0xUUxvLKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtbcCRA9TVsSAnZWagAAT+kQAJ6LpZNLxY6PNkzNpLBA\njakpId6j/Ro6S0GLpwyajB69h0GPzhKWVauHkYr2kHWqfRxfiSVaLJUVg2Tf\n4e+UQRYKF0VDxflpIr9sjj3sOALTgTQwxHnDLZfvSglfOV8XRRyAutjQlpPl\nDXrtNzG7tT0ZIpk5DnaidDPhgLPZN/le5wgtxASF1c35GZW6eLQtWYo6A1/q\nA1A2ycjmfP5TNt2UiD9EmdEy9jWJrOaUBS+MqdZS6FPFf2SHG5nwh/swSzZo\nEcLgfkUpCPvqcd+EmmLmbZQYP4rnAjxbO2UubSWQF0rQiwTfp1yVJZwQoXUq\nazJ8fzlrRe49jxx0kPy8vRMrrVVx0iNfOYgh+iqXFRxcl66Ced/VTkrRTAqd\nF1eXEI73t1Bba//Kfyp84o/NL64i79syjU5lxkRfbNEduC3ekAvP4FADGMAG\nTc+0ljnm/CMSproKUxCVRHF0hphk+Y1oQUWv2EDv8E3UCWlege1Jq25TZflO\neXSlR928Ljfyyg5bvXu3dn9yEAiFrx7A6uaXlzK+jTRYBmp9YBLHc3pDEbUK\nKd5gdBepgrfaPRg0J7FioZfoEPIsRVJUNTf8c43Z0dGLJCmvaaBHQ1//kOLn\nWXI51yCNKQMNh/A72gefCD+aTGtsi2tS/lnQSEmbgBlKm8HsugMNU/2VThdT\nl3+f\r\n=OBKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/density":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/tab-scroller":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.bf670dad7.0_1614730972338_0.5785117310433965","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/tab-bar","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4e9a9035fcabe52ad59a00f8c596c9db23a1409","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.c7d98fcde.0.tgz","fileCount":37,"integrity":"sha512-uHql0XgX6lcwbEfEYpngInvkcZHQKSc2AxPJmEXQUOo2GXtRBr51pMSRcBmDGQSj63zV5WfcXjMesfKDFqCNlQ==","signatures":[{"sig":"MEQCIBvf1qYgCWgbRKhOCKuQ5aJ/bZoN4Pd6VbiVZKmOaOAeAiAwSkyJhxvpk95p+QwxOFywNENad9oG8xoC+iHMFfTXiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/K9CRA9TVsSAnZWagAAWKYP/jF3ACPSJxgH2t9wqx1E\nZSoOIwRqrcuKj8rK5p56k9Wrd1NbNaQCbVEsdGdACVkv9hygX4xzvpIhWpIy\ni1ynx1nE/mSUTXvx4QadHCr2sEW4vodHsPvy0yKDk8R/U/OjMpy1lyNDUnXM\nI3WagLD9RQrX9+jIW1LlE4QvaxU78vigcyXmu1mQL7vt+wzQ2gAuk5Xgz4rP\ngUZjgkrV2Pmfo/7FO+H6H/Nc92GDl1ZZzwnKOO/bQxUQ95OS6rweHVC+YZvL\nkBUI/pRc90xMLiifDTsQitiNrSDO2NwPKVlWwQIiFziN7arkZaApfqb1wd95\nQZm7BfLh3D+RItR4jdWy+AobDkpDqN16KQdS8UBj380AwNGNs2oIL9LgB68K\nhONwoosfOzYJy5/RDAkalDT8HuTW7ksANOH6dWeAmst1OipsE64xvX1Dgfgn\nbucPKROjcbus26Xmbh3jn8ctzeTOkoX1Ee4ACibk0Qf0B48fH3QgDnByJNdx\n1uAToO+j/khto55mmTWRqiott0pbO9eqDFWQEEp+824OlWaWyEEDpWR5C3lk\nBixxOqM4XArfCWMTO4AphJ9xz3AuI2ZAQQs52lCSBizpxzrYFTaoQb5j/Yg9\nWE71VcjhaqozS4ybWqsyciPy9mANvTihzYOUE9InzCmaKF+qLi6XAyrPXc3f\n2w3G\r\n=5S/Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/tab":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/density":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/tab-scroller":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.c7d98fcde.0_1614803645401_0.16714649071745669","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"198c9c45f843ed4d14e9825e7cbb834db8573d4d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":37,"integrity":"sha512-SpKW6Sk2nFoj9IYBEsZFUtu31qwjQSJKkOkTPV6nXhqM1B4iIyxMkK3ojOU9ria/TSOSHTIQ5o0y1ai/gaD0nA==","signatures":[{"sig":"MEQCIBJ87uYKut6iEE+mEa5eDl8S2dF1SnEYe2K7kKVDkvSrAiAm57Z9g6G5+OnR80XnKfY8IEXFwEKBR+smUYwPEA9Jjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBsHCRA9TVsSAnZWagAAdZQQAJ1zbAQiiWahejvNbeXh\nnXpUUmp6v0FI329Bce71gKbIGVhTJwsyEdNeluV0VQ21BpmoLIUnQ83y1PhR\nwBfnNoaOyOL6oGBLGVpYzRpQGXqk4U9cWNOJss0kMoFUNNJ1M7IKvd3yOS6H\nmeyp9JFWo3OEr0lBdxyj0Toalvo7OI76HRx+1sKFaUN3G9evpUXwu0xAGu5V\nbBAgYl7+NEfsNKTIBUtL/N0/FzuBI3c8Vc+CMq7uyn8FbD/h2SI/2mTqIZSe\nmVxZtpQ4Fgfxj/O1muGtYGNeSzfNuP/1YNdojgVPymPo9m8b3TpX09RfqV0v\n0sW1f0odFQayhUIloECimz7iiAIu5sDcL4cOxJMI91SgZysBh8xz+1hg/CBb\nOmp2foWjnel2jvdcKXpnMjsSGgsNt8elQI3NG1m8v4K7ShD0fqZNbuJp+73s\nH7z6m3btJQjTj2bWwTh1ZzFpmqar2dH2lomrDhmSq235YSuIkqrHnDTeo7t7\nDOywg6nEIutw/sIob0oMOeyXFVfXE79jaKslA/jEQ7YYzW1QHyVfx5LlPFzg\nnZBhr352TyZMPQL7D8y2TesiZLW+vZqVqqY+lNqcM8wEyPc6LckHYDzQjrMj\nPA9yH2fm1AEl67ZF4pZv8LM1F/yiLbisp6ykAogmXlyvuV1XWtZjCPlSnudr\nPLzF\r\n=pUDp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/density":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/tab-scroller":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.4fef8bc1e.0_1614813958605_0.27523648911706866","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/tab-bar","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e159747997c83edb17041e14aac4141942f55c30","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.afae3a3ec.0.tgz","fileCount":37,"integrity":"sha512-OOcZq4LkOvy5yQK6MBfPak2HdWS6tUVf0x8wN3+jB7GJIWCM9FWaBcB/RShGCuEYdBPMLjfC4t7YpIurQgoF4w==","signatures":[{"sig":"MEQCIFUlbfo6o0yukFieRwo/V8gPYgAX65ljK8w9DhviZwvMAiBbJYFz6+sB60EQtQNXjyRSIuqhPp2S3V8u6DyJry4Klg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB82CRA9TVsSAnZWagAA3ZMP/RLo0R155jQ6n+5us0Jb\nmBLcDkrzGhRJUTFVE8kgkpgCmKjnfoxkqDX7AIBFdf1AE+Q9cG0ieHxY/vMD\npbabMbNF9ZhfYJr5bgZ+0rAmhI/1yvMXQNKkyzqIS/cT0a5YG6NJ1fK/8UDP\nA41k/cPLPSuCEksEDVM94QzKfqg0ClppippkUkbC0YUrZNtyBR76hkHZ2RcH\nPiOIpGPhIkWJ+ANyZ0cNRSEVqC5QcpKeP1lMm9JwLXaCjNePr/mp9BeWRDP0\nyK1Z5nkLHY/hBz4PSdCGFa0kaB8+qYHkOrbrZkdaNJqoOX2PfLWzkb9iJai6\nvCy1rbBpcEz9FPZMJpEOaHoEW19JCBMyrqYf2WuW0h756YD5CMVqWeCD3d0N\nsm1ikV/t2C9kOtGXjbdhQBVpjlQHfYg61lWemXSYXY7h4PXlu8Ifbqj3/MEg\nyR6151GF7vT7uZhlw8XSqkxmRkAh6Hi3Hx+GVKOh96KU1YN8cpEQdVo6B07a\nLGjnaF10Ccs4a91Vbobe5/JqzWtuBI5ohMg3yLSJdPI9MYwVMMGIR2DXUgiJ\nnWx/9ZVaZiPD1OaugkDfObfY+bJmeSVlhGjqGhIZO4cQLurtN5YdjmIwJN/3\neqqPWfZfB3q1xQ8mCdGGn/tRKl20TnGZ1HE5S62/jq7W6FLVN1/rflf04CDM\nOp+I\r\n=gsWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/density":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/tab-scroller":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.afae3a3ec.0_1614815030214_0.8570828759723883","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef8c7e12113d7c72ce92b41ff59c849c8b128c99","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0a0b10f22.0.tgz","fileCount":37,"integrity":"sha512-hia8V1KWCu31I5AbS0hnYsKnt4fAxBHDvQR/9AhyOHK1HlRbyPynnT1TwsCNtzqCqeFNPFaKDxxVcsr9EGXd4g==","signatures":[{"sig":"MEYCIQDMkeiUiKtpQWkq4vp9jyZzsxESowWLAVZ94ItAbWPMGgIhAPsRd+FZv73rFT5uhVRBLnEFUYHVEaGf8FoMmK66BAcR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOvCRA9TVsSAnZWagAAm4YP/2QZANeqhF1pKgtdcrgQ\nwVG3ZLu4oISBW9YLodbbQUcmG8Q6EWtc33NpLmoRXs5Ung6y+XAWfS7f2Xu0\nmdZivS+JsvdWe8mpQcgEB+yAZHPAdVQcz6K3+OSLzdQO1ir1Ks9yELMSOYSj\nvUKJEBh0FZzOT59ds3LKrXfpCr4aSWphjlKIkFd4fjoLc4bSzgIteOxdJ8W7\nFM8oUSfveEwT6Rxc60rfjmnVgsbsoXSIKZhLz/RuQqHnP+7h6MRQEYRKtQQa\nawsWEbdmmRH42zaXtcoddb5auHv9V1p2v+mpHe38nAl5F7IIdouYrKvKXjc1\nLnTTbxVnnTo/s0E9VyZXKwD8QZAJbFLAFpHxh5Pk21944ZcNQ4uuJLKSbfuq\nX2p/tkzQzffMgcOb3jh/wHVvygWYsU9exlzzMQEi54RwEhAWuq0pYFa5TF1c\nTQgbu1l+GbmwrI1Uq9QIvNth9mkW5stmxUd23d2nrf5HQBrtPID19i3nPO4o\nr/OtnBxNgWaTF/OUbEG88nSRPvpcaLb7hJtplJ9OMSvGlDdAwlZH4gMY/NvN\nLI6Ce7CI180BzuNJTh5cVFcPlzUYwVLNpUhQ7gVhygjV2fGpas95x/t3Q/n9\nEZwFff5EtEZG9JdtOMIxhIqpsqQRhHuaCjWoguhyWcPWgkM4907ELlML4+eT\nHt6R\r\n=aDtM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/density":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/tab-scroller":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0a0b10f22.0_1614816175220_0.09602657081689348","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a212929da301c507a3a29233355f177017775b3c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.6f678a91a.0.tgz","fileCount":37,"integrity":"sha512-ZiqYKGsCTKpnbWz9Wmjosw3kjMx8E62m2T9c+ndBj3CZQFQI58Na0vcTgbbXv9GhVXY9q2ciFbJkQ7KeqwjjbQ==","signatures":[{"sig":"MEYCIQCigj6TDwcNoRqohmKcDMxuO5c+/4lwbBTSbgYmIfw9FwIhAMIsd7MYuwrjCL2crFU5ZXT1Kz/gEx3X6eozwMN4dVC7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnuCRA9TVsSAnZWagAAreYP/38YnycF5twLs8v08qG1\n/duFPeAo9ii8DKzWo8JmNocZ0Ut+T57z3P1kpNdrRj0JoJZ1TG4lj45ks9B1\ninum+YLk02Y8Cxt8u6eVfWFokOPZ90KjW1T8pj2S6oKg5KkgvKf8eElJUSzO\nYYi0anAhbKzClBc/ZWTf2LpxHA4yNL44LFPbB3Roy++q+4cstyfd8w6FdzDM\nDOStQkE+p2lqoRdrtQyS1ZA3iqN/rBwFlNuom/+JCa+bbCCE68mWdjYTT0gI\n46HBoymxlN9xdn+DaA7F2E9cSj5vOHPMfajbb9kifchUCJtkhvrmBuN5xias\nlIMGMwrnXir03Sd9zzuI+fvPN6AfholJOlG6A1wmoPIWus5MXsUba5anoRTo\nS6XLPjMfSSDY5zGukRznZMq+iESknF6FXmNf3s0u/2vEX202UaS3BWCZdcuM\nfG3zBa5+aet4YxioZt2CSDeqGnZ11Wtwv9dRNf9TSeaBPOPrKqp71mA4SqTB\nMGNoaOfI6hAUDS44LMpUm+ZnpoTErqr0FyaplK6Fb7BkITn6UVBh0ZUAL3kI\n++BUmifT2LvBKUdvMC2h3FW1mjxbSErZathj9+YHPlqSjkwBVfBObfKh/9IQ\naGYpEhoDENbIuVTIOcUDqJNnPr+awf3RrB36p086BNJXakHL5d7zELqc/E+J\nnAv4\r\n=r/Zd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/density":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/tab-scroller":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.6f678a91a.0_1614883310121_0.7965709534078842","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07fb1b6d436493d1d4379b0f3e69cb065b5c38c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f5f1b613c.0.tgz","fileCount":37,"integrity":"sha512-6vekQXHCQfZwpbyJ+ol+lVc1tT6jPHMnx2Fke96NM8HjiMTymF/wr2wAHJdbEqx7NIadGAB5pUADS0dDLCL9SA==","signatures":[{"sig":"MEUCICi3XfH7miqFPPd+/9SIi/i/U8nuxbLypUltT1+OQC3jAiEA+dqke0BymguFSMg5i/1+otxhnGZlRxf+3JqdEH1Ju7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUhHCRA9TVsSAnZWagAAvhEP/0JHLs5S+EOUAWYXczMk\nzSeNR+TOdoQaSkkJ++MKBpnZhmlm8P/q4eTdLtHI4U3hyE86YkJmPQXy4ujA\njTP5XFcN5Q2XTnMAx56CqEIVL9f7BWTeuN3mhT+25GKBVZjqpWOdOcSkKONj\nE9sGc46wj6DB3vnD3afWnyzEmVf/Vthnb2HFIVuq5MTgMmhRKKWkUkW2vSn+\n2LTnpLF6N3vmtI5pQWRSUTOlyOD1RPN8e/KRafLPf1xS9bBthVW2rOmiElcO\nNq582UjnlttRCk+qhQlR0tUwpqmv0a/0AlUzQ5OVKQ904tBiwUAM133rOpzf\nlNskEjftnmo2pLT6uu0fiawvXEKbi+CcCTtdZyH99dTTrK4XsOR248sbQ7C3\nLE7k0ybjeloRZQnoIzw2y3rWEY9SLXp2XUOXhLAJJBS193BmkXNGWXw4j7DR\nxJU5larALX+A4Tce5qJyy6/+3Cc0Zr4JXxHMTrA7sRyT89b6cHUCC7IHogpQ\nskClU9OgE7t3cw9zdJe37fmnpKdV0S8x+7wuds3Uas5YZWExqQAuUDYAhRNM\nw1/O76VdBsON0kzX3tyd43muU9lo2AmCnAVUcl0DWy97ZI6fbGwij8oWDfy5\nD92CljBa16v0NLET6wPAUjwlLh2b4qCh8rUrd+UGp1HDYCEl7IRmw+Qfhiju\nesSw\r\n=vMa3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/density":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/tab-scroller":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f5f1b613c.0_1614891079434_0.31511811019746805","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/tab-bar","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09f01d9743e0954288f613baec36881dd95b5922","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.606e767ef.0.tgz","fileCount":37,"integrity":"sha512-NRvUcKMrfPLXhGucuiMB5zsjf9m2muETzQdFWNcYgImJadGaX+YBLmSBXByjc9QQrA2Gb9c06vpN9/Oq7pUrcA==","signatures":[{"sig":"MEQCIF5prWZJAp5CELqAzhqT2YpWAUVXLe8RMaOng2ghcUlYAiA1zNNFPF60kGN4aA75fHgEbRR83xFdBbVdTvIfLQmebQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVwCRA9TVsSAnZWagAADc4P/joA1ZUY1CiI2SFWyHTF\nKSC8lAxsphn9s+PJUaHw1yMuPoJfXod+fQFW1/qIBnnMOUBLaGoG2O9hoL/D\nBnDRKN7fJ4RrnZx97AHqcLNBoLQ5493MybyRQblwAavvu9l3g7bj4gA9Wkl7\noduv+4gRsSnzjyyEaObcyojTA7D8phJEfXaNm/PkIkek8l1QOORYdyAlGAcz\naIfNdUA4O8Y+uZoa71DE3OcwPgiJdJHtYuz85MrgTTcxpCmTdBhg/fKHCeEo\nP2nBJeH5/9OLAEmkdje6UbRLvS6SRQ+UJy5fCmGpD1CgCCoORD7sETr0OSq1\nuCMq16ryRYLORQp2mXlu/8/TlaHRwgvhGzxOvExxpU9yIXB7rdgZx0X8fA/3\nNxVvsE3q1fmFo85i4wTWwZ+flk1+dXJuAIkFUT+Kg7QVQIiF3WBgVjUG9Tqm\nwKlp4i4ek97uA3ExhlkFyAG2Fl98iLoE+g4wnVuGXOkctGt1brJpJr/myNMO\nFYveRkirVgsuUISvgfDkeWNvZXichS+8wTMoVpFORi5b/SaG9yUGSJepPUMC\nkOpumQL8tz5a/NNsV0ulLbxyQrQ/2noPCD89iXfjA6zp4J9zUi51R4ho7Dq2\n7ahfV85Vs8sd1/pLe3K4wcI6B4gi8HooNvpysmXzkPrsHQdlc41rDaorSiPk\ndPGa\r\n=IIJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/density":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/tab-scroller":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.606e767ef.0_1614894447725_0.416279828344438","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eb074f59f5890a0cc230139e054b609254a2672","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":37,"integrity":"sha512-n496maQkjeINgy/CB3lzcD/7aDPKU+qfTaWihIOMLaOrlaVX80/7exIVzyHKyZlLsXJsEmb3xspDSjDlWzM0LQ==","signatures":[{"sig":"MEYCIQDnDjtwofKmI+fx60JDhJbzRNcnbt25xmVX4R3/rPLN1QIhAO5Mu828tXAkNsm6OfCLkY4Q464uvLu4fqM4jK/9qbOf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwgLCRA9TVsSAnZWagAApo8QAJz8fLbHicO9NK5q+zru\nSi55nDPNwq19ALpPRGEPWmHW/H1or3UtnaihWCpQRhCN9zMo80MHtvBD2K0M\nY6MUMFEbn5eCgZswcDKPIB9MTZ0/hp1CI52RBlh5tF+idEibdn7i1vsa/Fms\ngm4cARJszQGR/PWX6pcrnvAsq1QXczvWv3FzriFHGa4jtKhp8lisnJgXaCi2\nJhpU1oE71B/UJfg78yCCJnw/RQ5/ifEzO9BGLbns6D1fkTYK3bA3AhR6xhZq\nlqK8ulxqYd/0Cz355N0ES+Bm5uvMneLWJ1fPnLMFZsHPaTcj5BLQAM7dtei3\n59kr1/79H3wOlVN242+EtIE3c8j8aCGpjy0mAbigXw0VGkmGDGzA00j0Fo6f\n9vuLyKvtuUSH0FCnB3oEN8HXme1GfCy7qG4chVF7gPGxTL93iqp1yR0sLsM4\nDKUsmDulOW4BCxqHXr+1z5ROw2qLtUuiWb9i6oMQDy5TyRf8WtbnzHr0gO07\nCI4DRRURgOqOKbzrWrW68n32+BvFebt5OnfKksWfDUbO8aHjSOFIH/Nylvw7\n2eqgGGUuEtGC6OwU9cVDGe2O3Q4qJfLATW9Gjr817UDQQOhCMFc8QoTXFB6e\n9argA4bE/Oq3PuJwhfsSaCLSLvRA98ZbuThRZhsEe0fuCpix/ZCu7tNHZMpc\nRFFG\r\n=amhe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/density":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/tab-scroller":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f77a4dd1a.0_1615005707295_0.6110175578051782","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/tab-bar","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f8f8ac0cefe98addb6b09c1d090f4468a91a81c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":37,"integrity":"sha512-dlITOodmt3+8d59YV1nGMQUy7vId3bPIsUulYP4/hHrmBlqpTOgObe9jHgJ20vs5zAL67btzLhX/VNdCL73RJw==","signatures":[{"sig":"MEQCIEvMawzZSrOpP8sDi5rlAmG6o0yyFJi+AHAuD8GAyHuaAiBBBJ87CFK3vS+Mx1X5nJIzk9F/Cz2Mchw0ByG9xEJJVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkjCRA9TVsSAnZWagAAwWkQAJtCd+2+Y5IJWX73TUrK\n2KrMkIU5QoDhB6aFTN/gO+1o7CN5XcEkWwvzvWwEGo7xpjKkse0fjnn5tMZG\nh3hP2i2Cmz4rTHymqIWL1x3B+Ihwsb3YE+bGNQCQ+lMRvSMLAv+Yyw5mQ1uh\nybIcxCWL0Pj8oC0e6i4gYgWwoicPDuPvmtvDyFmVZxE/Q58kRVXKMa14kHuV\nUHSF+0EV32xT1FKwcr2phoWp/yTul/fBsihohOJt3RYlt/OnzlWzpTPXyjHA\nCJtsDvR65X0HnnnMzw1yBr3NDxaxyzeBmnndCghd6H8W6Hk5xem/bvW+++G9\nNmcwG/r3WB3hhGr6uvGJRn6c0497qWd2c/ltqWjZH57mb4dPWCblo2BiZPGY\nqeJJZJtHVdRE4qECDg7Nl/w3ebuLLL8WfxTZlXMRTEx7PhokT8QEqtkNUAjy\ncVM5WskgtnUKC8Ux8fXoQOcCIGVYsxzOswN9uLfJpSyyEkY90nj2pYW+aKkF\n89GzVk4DNDkWZq0NVwQuSF4EtMR+8lHoxkk93i8AVWIlgJXYZtBtw1J59Lwv\nQy1BYMcg8v3405S7PjPcR8pnwrUazvIf+JLF0zJ673qTOPWhOJMF5WAI0ZGw\nTE2u6LD3JR3JzE+QIZl6hK58wWD9quh3VrInfIfaNqH3VW5nEFjtpDkAQfIy\nTptl\r\n=LPuh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/density":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/tab-scroller":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.2d6ba2c23.0_1615243555175_0.20195535825553002","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/tab-bar","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ce85017a0c586fedc1da91c81185d04079d6df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.7522dcaca.0.tgz","fileCount":37,"integrity":"sha512-+BlVAC3IormR7xrSP6238Wkrxj/tmrHK2JFdqqeHv0lJpoCjvTVmM4HXdbqkjixFID9MOsjzolVDdCGz4RnYQw==","signatures":[{"sig":"MEUCIEOIARefWCuPXG126TUAfFXrkcLUP81DWyQLgU/Zg1j7AiEAmbQImhYhx26u2cCL4f2Hqk/dBibPk6Pg51PwblguRGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsFfCRA9TVsSAnZWagAAGHQP/2Ts/uZn9OI8uk6hbi2g\nRU9PWuXtXbKV2wCB9fXR4afiYG7ERzXkO7nSqpEnjkSBlWQ6s5NcZcnMeu9T\nCKGkNSoSs0Bs4vOTHvYzDgcCIF4lIH+aoJFkIRX5rhjOIryaBxqtKfGtUjGp\n6j87lOF0ATu5WtnwRe4SkRLhUZ7rln7nabfQdgjFsL3pcYFDL02GOI2C8C0g\nu+JtZnCBewZ3Jd7tbK7VfEiwpcPGf1n0UqZVM/JEWWR4eUSLrTJXSX5pqcuS\n8EpIC2p1cyvdTX77ssL8roO5DfW/BbLSkKefAgKauif8E1CX7iof3JpMQmRt\ngzbfvAmX2V9G/eFFRcB9XTS+uY1un2PsVU+PTfZzIsFAgIOmXcdYJsJNJhkm\nI+wJv0/b1UeyebcIKkCX1pR6StLkm4EGyJFQSYwpBT3I5RmafWVsVX35OgvD\nO6aQobV7m1aPRHNk26D9lim+xiLHJf1gSFmK4r/63A541VKxKNVb3D+RGbPl\nMHlKx7EZiCucvzXrdMBgNDfg2l3R9jj1eLSxb96SHzkOvgVx0K0W/T4I6q0w\nPTpivbTRoCNeptE4xQ3ZjqxPNvuwlSJyZra0c9D58SIRL2dKXbzccfwk4duB\n/0LfCeWff+OWbbYNs+DpyAHleZZsiUcOq35Fab8BL92EtjKOAsC7DWVSi8/o\nRq8f\r\n=UQt5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/density":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/tab-scroller":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.7522dcaca.0_1615249759327_0.3800574383259747","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/tab-bar","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c187f6618765da57b6a2f546cdcd2f630ef4b9fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.5c0ab7401.0.tgz","fileCount":37,"integrity":"sha512-84P/vdsaVhwlwev+MoVuVRq2rnuhBQ5bGGhEMyZF+jclXD9PuQR/yHjhjLwxf4wxWD7VrL77k4e/DyDUo/B1kw==","signatures":[{"sig":"MEYCIQDikYCgwNcuevOn3PnJs2H5VOFkN0fpO/dg1xQPStFymwIhAIdpbrUH8SEoKGgM0WXVrYeThBarDMBZDPZAxokAUD1W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/yRCRA9TVsSAnZWagAAW+YQAIn+u6Z0tT40c/G3uv/r\ndL29dTywFa3zsyE4lFS4eWVvep0S/Y6nB5oyeT/0UpJtevDTbN/aSwFNIyaW\nLMIOmqRxrdbMGoZZGmOAd1LNJ85j+5CjPRw+7AtIgcAxNUeKzgvyg15EuiYg\n4KKYgnjjlqkllm59SXwCj9a/e63+yrbgVU+yc69NBpA2o+xmL3AlZCvWanTO\nQX2uckFAMV7x6Bir3no6r51hE+iUmH+YXhsA5+KlQtVg6D/wn0XYODL2m3lA\nn0eTIOBsOOKuPH+xNzeX1rlK73r5ACHJszEQnJzn/mc4znwTsZ+cNP4Xdg6C\nNl4LgrJ8nx8tZsQisnwpTGVHIGnA2KTtzHJE9pajR/rODAiO7yGUqjaiGwCi\ncaibUlJCbPYgW0qACF/zJO2JE3IVtmTqi3hmawY8uCdpmeWvZ43Og5wHE3lz\n3H7C96VKXwuD1EUYEee7HBjBbEbWp6nG66L5ojFu5Fx1m+MPRiqWjDnrNHQF\nKUpET7TEPzSEgFwpSbRo66qrJNvLYysoTuJ/KR7Oqyu9fkAVoljd5mJqRKou\nLSE/LvKVTr6d3dUGikZX7zrh/mUqyBpEjqAwDx7GFoMvkpITrvfBUWo36ttB\nYTG4WTHeklaQGAlK95lWXgmLjtN+sddjzG2YUoi7OqNNSfu1LbdzzWYNGGeo\nQdBZ\r\n=f48l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/density":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/tab-scroller":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.5c0ab7401.0_1615330448978_0.287242906146991","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/tab-bar","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311ad20a849072b639879bae970d0d2a61daf370","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.59010b6dc.0.tgz","fileCount":37,"integrity":"sha512-T0FQ4rFfXdLwXYFOmricjsIRln+GZQv8dwLt1Hr6/mYEu8UswoZ7ZK9fH0hri5nHMD3I8leqDQ+eUmmbw1e99A==","signatures":[{"sig":"MEUCIQDUGktfIe7iWUZt1oMPL00sS4LQh7oHjSdPOVqi3KIMcwIgJ+BG3PThR0UMi2PyjoUhtEOKO+yIdb4p1clyjRxGVIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrkCRA9TVsSAnZWagAALU0P/26EE+X76dqJYR/bIwzB\nNSvz51Qqd4GrbbK/vBhCdg2DzfXDaUG1HnlKCdxdcyZgxAe7JMyoysFkhgo0\nDHVrwadqCoME8zJhMOas38SCdqL5BoLu9DDvanYTDYjIe9TTd4NstNlKxae3\ni2Ujv9qOJag3TJ3G25DUnxyqNqeZWU0e4L0Wepg0AAKLE5uOpzk551Ptdw4T\n0vHicQi0+62NkATjORjfjctBsFKhdfO1JSoqxAXRcKQKUUqp2hzibWFBLl2d\n1DGMuehAxvfcCWdliJ/71quakYshzTxDTdPWq3/62GNLYndZuYmoMmH5cckq\nDVMYq+qgKzpyRgUjcssgPBUbgWitLzYthtHqZtsBfEHlin/PIQucwwNcPdVj\ndcquHteIyM5YPDb6ZBc+l6T7PrzzUta8HikT5q8fnIs4+4DZ+3XW8p1YutlI\ngFK9mRaOgxI5l+ND3/MLhKlIWUoUAiA1TzTVkgdGva87dRFj8OzfueDh2v9M\nlE01pHgii6lHNyJuhpohZz+q8t+M8/BKnwcA1RlxmcMlXPjaCwCKJ58der4H\n0Hq+HTPAoZEHrTsl7zpdcPim/1H68wWb6y+UbwkX+cqUCY068ustLbefke4s\nPJ3pLnF+hf904FDkE6rTcTn+iksrEQN4ByRFgRPysnh0Xi6UcMp8NLK9uDUZ\nhr8T\r\n=PvTf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/density":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/tab-scroller":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.59010b6dc.0_1615395556204_0.7600473374434138","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/tab-bar","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a74370405461cfc5fedb1604d792fe31030e61","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.9e52f5544.0.tgz","fileCount":37,"integrity":"sha512-6OwKgM6eDtfyz8EQCtQL7ak51qVvmdSNrSnuZcoVUAFTr5MQknISNbBrFB4tHobvBNyZ5TiT6Pc10UK+DsLQYw==","signatures":[{"sig":"MEQCIDmWbEKEPQqKu4xP61KtdnxBpnwlN/OkfH75C9Q+eQpvAiAeHCo3TnAZQcDpdLgHNQ9QRuYx+UkRH6noxOowkdNJYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVW9CRA9TVsSAnZWagAAARMP/iLIvYGqV5hvHnQFESl9\n+ZtQCqgTB6jHjhh/HM8bmh87wA9aBPfTniB78c+kaft2q1HUop5j0YHb+0PC\nW2oUFnZyDofbaMrDvbvGCuluPPlQ55yEaqd1nF5r+GXuwbhib6dLJNRkw15u\nptvzB8IxXUkpuN539tkHPIRwiq5f24+SCMm1IGbjx+EJ+NGykpDt+FyCOda6\nxnL4MexKljJPMp+zO/QblnwYpJTb5fwXMW6IBKD+3q7ZGfk/0nhog9rj9wYr\nT/x+iuq0ejCW6a4pV+l6jp3lvwVKyHdjgff2ca2UAjAYITZxTmXB2UV3KT51\nQwX9SwRlAYy+3uRay3IDh4BSPR4Ildc7J/i0JIXzvJibUCSJJVE16V/RKPdB\nMbE3/XWf1gwUfiwaLqSvv1yRLopg1ItTlF60PCkru23rQJujteqj1v6EriZp\nkVatEEPyqRki1AsK1MyKohryWOLL0yyASMY24TWXFhieHGeSnDurbe9ImZNV\n7KpI1yZXy+vLv/faRIvCMKGqja657OaTmrJpN92gfn2NuH5fCX5EK+YFC7mU\nDqmHbt5H+PRt/Dv3eZL98QLuXslPO4sQGx2QXxL9XvU1biRauO6S42k1PLhR\nmeLYdhTbkPEL6lV5dmDZXS+tnLhhconyOmwd+D/Paj5D3Xt5WdrYKB4vGLib\nULPw\r\n=fvaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/density":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/tab-scroller":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.9e52f5544.0_1615418812866_0.03128159721984458","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/tab-bar","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f385fb839de386ff8d6d504015366c43beaf5b63","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.a678806f5.0.tgz","fileCount":37,"integrity":"sha512-H+pbsNouTRjq2x5I0Sh9uBYWwUHL5ugYJIWPM+apFtF72SUIHCeX5wfHBOB5MUxF/BCmqn1I/DqRJUtj06u0Ag==","signatures":[{"sig":"MEUCIQDWmoveHdWVA96eS/atfqlVP8PVoBO73KiHh0aT9gMY6QIgBY4AqDGgOelPP9ErHOroVrO6AZQ+Q5ruEcQKJHNc7d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXesCRA9TVsSAnZWagAAl5IP+gMGiqrd27hi02x11X4b\ndwBOeO+lEsxmzZswAwY+T4Rf/Db50KOSPfTAv9DgoLsBg6jtefuq5k4/yQd4\nzM6Vky9uwptgAQnxFMtU6QoVX/E0eHCyrg7ZhQbsgcJYHBKuBXDeV4T5/ltz\nnO5I/A32XKMZEvfzIeJSli7Mn4+egsi5373CulXhg/wYKqTpDsWhccutA8km\nqhe0P4lQoZ051i+l1VnQrkIXXXtE3PQ6w9tO/eh9U4B8rx9v8Qgj5+2qtUVU\n/86SE0ZSEhmtqj3Yhqsqtm8HFdaDoL951OdndKuFjzTvwxJmb16uIGpSnd/E\nebjpoMtYC27A6kFlu5DptARAJo8WicaHGGGR/DOMgZLjUjipR/zvi8cMq/Bj\nxCeEL9tL7nYAssQ8nqmVbY3SXp6RbN4lH1cdUp8Y0jxE3XcaXNFY6BEfHB/Q\nZLqQagrySHLgPFdTDucti6IceqGs2daq7U9QWv/oV8WvOLPBdKs1L2EZ4nqY\nIX/naXBV8WUlAJJoC2qgqqcNuujAxWyI7j1b4vx2Jog0D4E95mo6nQnz5s3j\ncbxYwNmCg0Y9tp/AvlyKq/fjiySDN9XqfAPJCAmvReVAS1h0sDHfzqPTpQqv\ncJhFR8wFTXFU8yKC2JRqfskKFg4u4GQjXlY+vkdUaUWcb3LaQOpZ8D/LYA6z\nKFJF\r\n=CcVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/density":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/tab-scroller":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.a678806f5.0_1615427500060_0.48435182107511343","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebedc27552cc134b756c70d176e7464cc3a80131","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.b2d22df5b.0.tgz","fileCount":37,"integrity":"sha512-/tOf0/nuGkt3RNiPwDtpAdl+iO127C1NAndOvNIiCHuSva+2UngO9c5mtmBSlhPDRtoHk5lCvkU3q+yegdVS4w==","signatures":[{"sig":"MEYCIQD1bRawgeZ425jMjCJtg4/30coc3qdCaAu4u+qVRqDeiAIhAJAnuiKLjcX0kZ1E5e/KKRKQ7imZQNypXE1t36EHhEXz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk27CRA9TVsSAnZWagAA8S0P/A6iVHPeeVpjYtAfhkpu\nDAMVbHJwEhqwnUA44dyHAlwWcWSbqnXIrgmiXsDtG43/oOxqY9uGulVspEac\n50Osa9DvuQmrTIFmkJ+iEnE/mTO4WKtOCLogwltzhnH/C2Kum9LUOryYDwbq\nCol7f8uVA3tXzFmIT4Y0i/EcKL6+4TFMRfuoFiF4NtzSeYsJPGq+XXjC6cBU\nNhWFopRk0c5l5hOdVQ2s6Unb6Ffx0G/N0LZrEkU7ZK5/rMV/TKbLa3VQyMIs\nMdzeJ3JitUzH6SiSyj704OxZkh3T7h/zIeYIk1ago0KVmotJSp7u0cnhoLcU\n3KbFIH8VMMHHBhGcc2jowRGCXrl2YXmDJzSSxOOmv5KU0FBr78i/QuFEsVEc\nmAgqQRwX2vcQTqI6wwe7FGXPCiaVHk0NF6UCp9mK+TyCMW6L4fDbzZqpWYvW\n6LXuEaMBuB4D9CpqxjXLN1zk3/9nXi85wMAuOsjx3TmTrfvjP+Y5e2yIJ4/7\nVRhA9yqGp7ZeJVyUqw/8kC6E9xizPuesdD9QKDRlWf1Jju66yZ9+8A7My35s\naqhFjg/zZ482wp8CAeX34o8HXSA052axTeSpfu/HIctPVlYXNKpbR70nUCSb\nQbE71KXgItBDG9uRWa8DC4A6VEgiN/NE8vOz20tRhUfDi8c4zh1dmUbED7Qh\n0kuH\r\n=rWeC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/density":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/tab-scroller":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.b2d22df5b.0_1615482298603_0.4115209596511762","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/tab-bar","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a7ef26a327558efe3ffd6fdda31b1241b8d3a5a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.81911b707.0.tgz","fileCount":37,"integrity":"sha512-0tOO1u9DH7rFfcm05SULjnu3Hixn9v6XzfaG6uEP4dcB4+u15/PqnT/1RZkUISb7iHKb5TLfzptYvgB5P9u5AA==","signatures":[{"sig":"MEYCIQCkj6NZnJ7IicNroBkXs8duKzkYqau1IiRXRZlN4+PmOgIhAJt5MPzLIlFp/otNbpj46v60w8tSlo61CAtVAXm7SU0+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmCFCRA9TVsSAnZWagAA7tYP/3wYxFXMmp/rJHXiIIFs\nJHdb+1fw/7nmT0zhXow6J5BkJ2exAVqhJEEVkxv2RE5wITN8dPl3wANngta5\n4MlQp1n/kTz1c3MdsRqqI5FqXx6spJ8Cpy3noZeZeLMSOfyWwJ81YMj8Myl1\n93Dc674HO68RAwQbI5xgtgk4mbmrbMYcXfuONjG1aFs6HFIR4a8Y2k/YChsW\nWznL1VfxnC1BWfaOQBz5iQH674Z+p+aI0Eg0xOweVxd1sn79LXcdx/LWHUMu\n9JSoXE5EBn2uowWgmFhW1v4AoW0WgcIK0BUC/YQ3P1CSubIL0lBWajIlcL70\nD5/9c6pgFElpz8dcG3v3BcYVu58+66VlS5oGixoZ3+QND++L6SgyX6KndaJy\ntnYq/EJG8uS+pBz8kbyaLyCqXmTnv6kESTXu7GWqBWmXu7kIYF96e77u4kpN\nXOLIH1XM2Sea3Nvx267HYc1Y/5BkijICG8k0wlNsCUt1GS6UIHmjQAvIyXOo\na6UzMRqSq58muE6XdaniyhGVeDyvAlwuc8BW8wrd165C0rkDL1km3A+iCeZp\nSMyzijazvVdGK74jBGvmu8WBzVdEJI6Hkq3ObmwOWAbaQTW/WCUH7Il/GPlp\ndurRtt7UoWNysRxsnoaUEK2DvOglpyiEpVkDi8RII57eWh+AOCkRReSL+ShC\nY3Gq\r\n=lL0i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/density":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/tab-scroller":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.81911b707.0_1615487109029_0.39617033758295905","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/tab-bar","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec98d6ba2fae795731d6383210e01dfcafe40f0d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.9eeb35c38.0.tgz","fileCount":37,"integrity":"sha512-P75D8J5AZtkb+oTLp4QFa8pn6AW8od8L/twzn7PURvzaM67XxgMLdNlyFl7W4Nyt2q5UqG0jcoar2u+1d1M28w==","signatures":[{"sig":"MEQCIATqCKOBdyViJdfCc1fzuBlBJ7rMQxavrOH4sq7lcm0wAiAxjkJnC69Ef/P7CJyF/0g5r8AKtQylSVW119EEl+DgYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnG6CRA9TVsSAnZWagAAJi8QAJcNQzRvkipIzHt4WQWL\nnmYrQv5wqEPwXFtOhX5o1XfMFepg72tUYU5alC+W0cb2iwHslaHd+GUBWwGd\nPVDzLG1aDUPdjedb0lkQl9QB4uuMAzxP5o0WrufEw9cKKiSgqKbJOL7mhJ+x\nwzzlSp7bqDUl+EKsvoXdSwQp0yH8PPOZg8QrjFk5DLM3LkjtSAvtlFUJOfzT\nEx/mi/kF2SNoYsROeKBWVkcE4Ypi1+V4goO8H1cX71alSIkn3Fgklkm/QOEJ\nhP/94lH8ZO8BP80Qgi28GQmOYKycpubjNTR0afghA4B0TJJwe6xIAjAFe8Rt\ni0s/SpVYzf+vIju+QWg0DQIA8TN2QagCqnqBYMSgHT9B+1aZmz0dtLF8BGo8\nvGmCOkNbS0gXxquAMecKOtrdaeUYQl88AGp8jgM2up0Q4TBz9/8wCG7AdCdn\nbq3J0eQIuTPCjvgMZ+1rM6+nnBbJVewZkzwpIV0HWpw0jJ1iV9fyj0kaiXqC\nSv7jKhBeII8wBdnwic/vVWhs3Lc7XhWffu9O1n7LHMC70cqvCzCWZeGVNqKa\n5l9yCdcoM02A3/2Px8p7fcLUEEGCtVks2zLDSeNH7BQsvRhxu5/29DkFb1k9\nTxG7OfJ+hdNDdYXIXIyDonES38SbFAjaqa4mmcrg/Kmd+jroSIakc6pc3SOu\n/6g9\r\n=veXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/density":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/tab-scroller":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.9eeb35c38.0_1615491513529_0.7789470746980067","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83282c63123f4fa5706e793624fa1e571661a3d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.12be3e95a.0.tgz","fileCount":37,"integrity":"sha512-qXHRNVdSX/WqF7427K2HIvDC17k7HfSNYkhWBLctIpNZh5iIYrT4EL/Rq9nPqkdZ/FAHZnddFK8PwnpfE4JJ8g==","signatures":[{"sig":"MEUCIDLtreoTGV7csn+s3uCEqVIv9e5159cJZHVNmQKnHIW6AiEAguU0G+oYytmKDsGmiSRDEPGvsHXIKRqmFRkVXmKRQ+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSneECRA9TVsSAnZWagAASFEP/2+Mh+S4ySz6EKhwBut5\nKUIZKFRabE1ePVRtWY/AzKvwEWTCPOY5fhHmVeNC2CvOAHRUjj7taOU/jD91\n/K9jhzUFEe4pKCLwIhlWFwqrXlClkyYdhhhqkfPN9bkwuXw/vVYZI9Ahb1Dz\nNbMrkmIdDBehuQK2KuKngZE0rUncftJtsU9zSz40SSGKSwRJdLVk41N8Gd4s\n8WfFLhkr1UPRS+mj6sxIMd7XmHz7a2kNvKPlLobklm/HCddPXG6dsHf0t8LB\nUSAiN3T/O1M9v9pXD4nyjmr7nXzua0grRmDiSOUovKzKb8HSU8HugYr9uyyA\nwqvcDLDGHa9Ag190zgnUHPcZ7TAaa5jqxUjtwgcvSlNEPM1cyJNgqxRS3YjU\nSLOg3lxV3a2lAHJasGWsIV4Zu3vAUw5n6jo4i92pyAkEKjlDiV6+9gZ88pLK\nQYZvD+dZKeRD3j89AQ1RSG/cRSDFCuf+yd99yIupJvEZ97ASYBdGpI4pjs6e\nbI28g1TKkMrm+YxLlnH3fPlhuFWGh7gAqmQXRmtpDx9Xf8w3G9Fwy3TByNux\nZmfJQQTCsT4Pc8UaPw4RYecQTXGK8mgHntkep0uuiJx1ywYbdPfIXTGM8fDT\nRdkDStShBw1lgMLjcxN9SMmsKe9vz0N+hjKU9QvtPhlkLngQ6uRRdCodx1Mz\nr8CO\r\n=/jmE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/density":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/tab-scroller":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.12be3e95a.0_1615492995791_0.7521422107511384","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e7bb5900266f241fcb371e8598e4015b9d4467","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.e683bdf4a.0.tgz","fileCount":37,"integrity":"sha512-WZriVq0h/lTzho2MUIPrMx2p/dpAzgTmea9fEyBUeLdUGCkMi/RHUCjsZvTKalV+9FjAlFH1tCAu4KERGZdeYg==","signatures":[{"sig":"MEYCIQDTl87mjimYp+3vQ5o9gxWwa5WFsFuu92tyrWwtbc5ZKwIhAIdr3HvbdN1i46MnB5dEY0Xq15X0txDif4tveSE8oEsA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnlRCRA9TVsSAnZWagAAxhsQAJfUirv2LErEWSmrGdPU\nQ/uWFhdwF37KKp6O8diBc9MePLBSADNZLA2/Sq1oZOZt1YfGa/JBKvqDcrzr\n3zZ9g4cWtt4bldTPL3NGC03BKHnCgVUp8y5izq1lcpo8hpGvE1xrPa6wSX5s\nseT45Ab6o5ro4FUaH3O4fXYPJWea82DmRx6VMD6YT8D191XTJOCi378IKAUQ\nlazi6qsJHz6U2KlL4yOE/3r4NOJfPgIZSIegHh0hMo7s5tWdVQ4KwRLIpFBd\nsFHqpkiQeOyAdLkQf8wm0816+AcnHs1NsXI0CF6kx+HD2o7dZFJPVza3ZKea\nr6UcqSGcjwzL2VDGJma+zSxhIRcC8EpMq17GzyIYBFYE7ac2mv+hoyzDwllo\nkG0Ufz87SDlTlxqoZlNDy9rDUPhD3ctn71KUOV8+T8SFjrxNCtKFncbZri8c\nOozUTIxVg+Joy0ghXK73Tyjj2QzHaWqiDXVouul5oX7KZGnEkGwc0jOYpB/W\n9a9xc/d46hlc0q0MFnUHS4wzN/3Tk1XdH8DWz6fQUuh1GXVcHRutna6hoJt2\nSLhyPn6VqSbvchAs4bv/0Y/A8RA7Fb03YcMy2dFHKhIrydDSzdWBatT2cwY2\nRXI9iYgMClp7wdPE5LdOhkyChm1UCF5sciRF0gRxMi/gpEAYnqU2oJJS2Fss\nZFyt\r\n=QMN3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/density":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/tab-scroller":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.e683bdf4a.0_1615493456794_0.35903121664334936","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/tab-bar","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a81d9e6a0566ce45283724d84ae10c515197bb64","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.a07b6d486.0.tgz","fileCount":37,"integrity":"sha512-1VqqQR7AX1MG/iGov9etYGrHxQ5J3DtPPlS8G0A+ndNwJm2RggX21itKr46ZjkYrQ/2tIkOWctUpTktW2bKRWw==","signatures":[{"sig":"MEQCIFGIPUYihI2sulDHmfl3AINbweYY/G49qed/1ThjQ+1nAiAdg9nVlY45Zn6yT2qfw6BExHG/8X1Mtdj5cTOrouzO9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn8FCRA9TVsSAnZWagAAcOwP/iVbyiFd+i8aQPfbUsxc\nsZkeNGYeA33pLGIYvcqOYgxXasklOxTVAaG96+Ddzyn+zrM8sG6HF8ZT/gn9\n7qGyvpwjFa5vGk5kg+8Vi7vFp1sn1PC5cBOFWI5idrJKNnyseoUjeBiwi2hm\nYJlUa58STPUhMKjzE8z46jQqN4UvNNr9xpzP+7IWXISkul+24PPAki0HCiRf\n6n8ckFZS5e8uJCqhzkGakAKtebtIN9UBh7h2XjL68isw0nPcK0tam44wwX5a\nOrhFSQ+w3z8VwqyxQE5rhJQb9pEUwqe32+4hjVGwDPpgyK3p0QqgVb+LJE07\ntnPgReMahHlS6pkKxLDAw3x6K/WHxiAIxcNzMrGgkVlhtPuRm6xD2hn87W0s\nRr84QNjLmd0cY8torsq6UEQbu1hR+IfNRCQD+i+68cgb3pODBJTeyyXeDvNH\n30CplNy0/olcNsuWOC0eITUG3FhSAJp5RlIpp5rjBY+wTlNY6TnVFClcEP24\nJe94+uWL1r8JT3Nqtl+3aXw9XtTiBlaUc6aUOYqj2jbLaFiNE8P4NKL/HIzn\nncQPW2ODntWT4d5BkzxPinOkz+V72fncZ9Np9UNRh/hqtkObqooSmQmORJRD\nfmNnjQ70nbbtwj3KJZk4pvPx2o5DuwGBtgtYuWgNlf1tOUzn3Uw6u8U9YwyU\n24MB\r\n=2wM6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/density":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/tab-scroller":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.a07b6d486.0_1615494916749_0.4102093384303107","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/tab-bar","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11bb30c40c1362043ad1b456f62274521e13983","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.1e0653477.0.tgz","fileCount":37,"integrity":"sha512-/zFRWfjDrJj2iHdfDw4bxcvLZEA3DZp9YvmPSXsevXFhHMgI1Egg9faQhXNaSJSikAHoCEDvvEFsmiwyIzbqxg==","signatures":[{"sig":"MEUCICOgley4fnsEW04Y1HP1rzxkeuB2QfiDOsE1U6su6zSzAiEAuKsc8OT1gyHzaDYnA314tvsgZdNLBoIrz0V3HfZb9yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCqCRA9TVsSAnZWagAAnYMP/0lDixRUaMN+PS9I6wnZ\nB0iDNig2nP2BTdABTkLFzgOs3cNqeb+HF33LLSkTuXyP83m2FTaNHGtOch5l\nkugQmree72svFuIZhq0P2rxWY45Xd53nlxD2qHmJbikpP8AbAjXMFWlakrEv\nBz5fiy+OpHFJu4OC1Ixc9G6eumya4OYNNag4cy3t33lo0UJe5mXVN6HNp0qF\n6jRe+sfn5QoXg7hZfR70uQbv4XmS7rh3UpPCs5Am2l1wH4wVhoejrLNbv3jH\nmhyZlxVBSmeupIRbgTTecQeSUXORXUib6KP1TEkSfzqE3wMX0lc/m0piBeyb\nF06c+qEdsicUOM5zs1UpkGjFn0Mx9F5HvAhGAnJdyFZOVCyQU0laeiZwc+CP\n4t7OynycyGscDtrz1Lg/CIHPrnNjtSh6TPlCRaYBjH1ouj4d9oBCKBSzy6zR\nPUysD6G31hA4poOOScRAtI1ZMaI/i4rPJip2KCcFHkVvu8HjahXQ58D5bbep\nMcxFuXuAFNjdD0HLdmW4urMncG932m8KGgg/3tJ2eGCfYXukct09PGz7ecfJ\nguSg9aaPa44EKeAmK3le2KmmId8mG2JH3QljMyvcJIaISA2CM1Ci0WhD7Oly\n3bNV+12fAIStJ45QrV+mgUmwfYy2Fnf4Kb+4cRefVEXiFHESrZOl5r/H/+bk\nq3+R\r\n=qPku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/density":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/tab-scroller":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.1e0653477.0_1615495337569_0.9987395277634072","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/tab-bar","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dd85f3372ad766ddabb7aed5339cd16469be714","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.148e8cfcc.0.tgz","fileCount":37,"integrity":"sha512-PZg46wh4OTUaTLU1rWbxaBCIKCQeRaTBvRjC1kR8d8bEsfjaXSf9gS+OTCaFKgq/3t5OJxKfnnmAePHrxQMZBw==","signatures":[{"sig":"MEUCIQDbqbFhBDQgu/qTy5XYD2M35+rEegetYIhu/h2h4+a+KgIgQ2W3Q2g9XWsuiEUbHz1pv6WHLzXwqcHya/t+DCAeTjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2qCRA9TVsSAnZWagAArH4P/jb0zHu0Ym4nHwFXLFaw\nyFQPKLBfzdZbb6uj99laQ9YrOFr+p4lLC2ACIhevO9OJlKeAFJz/VV86wfDQ\nDexxpiHq2etszxKLTZiAAv4XDIKrDcSLFZV2rp11hGgKb+lITHz1MCF6Dvqa\nCIQXaCcs9AY0JX3APz/qL57QXrYYdNF2pqMAcpbuDonZRoJ2gR/F8iywP2+Q\nq6aP0WDP01CfWdZvkVA/rKncE+mX69Abb+JgpAzUms1YEfgbFcvuSyvpFLcz\nyBWseSKxFokLUk4uRrOja+XG5hHQbpG59J2to/P5fxmYckokxRFVheIPt37O\nWiiAithPCQTHl6ahe/G0duDLxCuE61OHBf7VM3+XIXeFHenMK6iScIQ10/oy\n9IXVZpJv47Q8B8L9u8md7kLT6EhzbMPY7om99Jwv1pu5WEF3GB0XHavDhIN4\nBAwUcSudpD+Wsw9ViFNImy4ZKZQXReOkdIMHYt4Paa5I0PcxOWyxfMfjS2vM\nmRdSEQbC1P3RHESOAqlyW3ZzSlo3tSrtYxvSi1Ums3qq7ijxZp5lKBBGS0Qf\nV49kxApSC7/rZx1sgcMUU6gvZDvwMa0dlhSj0B5qKXX6FS0JZJn8Sx+HPm5f\nhwsBMhaw/ypC9JWleTJPGhnGctsjmlnpqcE0eCsn7DH09KqnTkg/QO4Sksim\nXBXl\r\n=w/PM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/density":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/tab-scroller":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.148e8cfcc.0_1615502762300_0.02940179619076777","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/tab-bar","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db88e61697b34558265b24394170a4c7f1883a1a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.73a227194.0.tgz","fileCount":37,"integrity":"sha512-JfF0uOrcidN93ZGPt8v6EeIxGQt04GYzpXHK6VF1KAKwWwksduh49B04IN5c/h4fsn6uwJhchDb6MfBh7mlQhw==","signatures":[{"sig":"MEQCIGYH7C2vJsOT9OoYPlt8MkDdVBFQQtoqdpoiKF8rZ6asAiA9hgRi+kQNs85BaWkYI7TGI9sG5XgRQyjjDRiO/0lBww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrURCRA9TVsSAnZWagAAMswP/jcIDrxhAFhKhZzpRUYb\nF90V+hFEv9EGqimhBjIp9OnmbKtlqcYze/d0MibXpS8xH6jnsdWh9GAoWi5J\nfuEGprDMPi65qBM7xKzDQd+gGQPNNFNserhJ7nBbCZW81m60qmDr7AeBR2yU\naQNWf8kn6AoH228sGIGmgJbUgLJ/jotPtQzdMn4hmOMXa3/LIvYZ/bBGLDW6\npF7GLcQaj7X0T0fON0Aa4JV9xL2BReH3kMMyJyVRoOU1Q2p/M1KzVeLtLQYX\nOLLueKMQAwFgb10sywPkThCTDCaHVFWWhB6KPBGrYNIPB+mAnvNmR8UkDO7N\ntQViNaWioLmBETKkaLJajgDZb9f/4I1y9W689G7gToROfpFfqgw+T1dmSJYa\ndPqn5vcRAdCNMwG9LsEeAOueXvOO34s9ezYyilnppXjm2d4OiS5y8rEKgxl9\nmSL/d/HDTfLTR64yZDwzJaGTxBZDck12Rq8/pSY0jvcThvfuxShi9IfDVW8w\nMG3W85Nqax7p7BPNsC3oTo4FxXWHyPgS3U1HpeXCao6oI4HfyTx77YlFlcua\nBfQ/0pEWJNLgd8Ti7VGIDN2okxqSkSivPGrSJsX91guVt7hfyTXZ/Ph+KjHY\nALg23p0YiMiTbdsO0srDtlEzbyhoZ9svCad9rj467g5TTO3pZyvlOs3OBChU\nbO+x\r\n=rcR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/density":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/tab-scroller":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.73a227194.0_1615508751920_0.2205977577945295","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a62526ffaadbf3c4edb0de8c150391bdd9d7df19","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f8579b7ea.0.tgz","fileCount":37,"integrity":"sha512-moyCEPL6hBHjyHsTWWCL7HQCt2dGbKe35id5/IIw+favO40x6IApP7dmgH3sdZA2LltxHwvKFGzoomPWRrbFqQ==","signatures":[{"sig":"MEUCIQC4iW9puYzFfhKvloBoptqSbm0plmd/AM9X31EkdlL46AIgMmzpworSbC6eQVAY5H1IboJmF+hOZd0cVLCLRzqdgGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB3ECRA9TVsSAnZWagAAfOoQAIFWHxBaeRQFZdPCXDGx\nG1aXDFH+iYYDpkZaFYuZWC1/6WtNpr9gxy2qkupPy+mjJE8v3E6cWiVvfZ8P\nff2xBl07SWCP0Xq1bLkeQjGuq5x0AKzgmSl6Ab84oTl2JEIywq1qhHr7a+fD\nhctP7yKLe3/OjkgPJ/X+VZCpId+i1VbLX7DOPAj2qm+tiE5Ku2QebTfhfjg4\n6XoC6W4nfm2pfoKDwEQXnC7m/boyFo1hNblh/Vd85NjuuiuLKxJaqky5Z3Bx\nazHJ2jcitew+lKQotJ/mh6aq1kpFZsHFQe48Bm0sz1iX6sHI40T7O7+qnjp/\nuAW8Kth+qtgIZkiNP+V7WwzpyENo4SKxVOSG/bEZU2GUVu6AKj0m4bfKnrQv\n+Nn1ommuOA8Q/tj6k4mrDAto6Rg+yCZwdj/82eHq2dOfXkX3d4/gWlovKdoA\n4hm0hI2PUcseiGURpKSqtYaFmYNuTd8EZq03bAzlqhDxRCFq+s3SlkIV+vr1\nQm+syLexAgDDy0YMJeFyGSH9T8W5m488txyKsBa/Rt1fvM15VQtWYzmilA05\nxpx8ySzi1AVc9wYzJCVMv2rebWeKFi/YZ4GGppGecz39lX72HD141cJSQgzZ\n37UA/aywhlyjJG6OWmQPXgeYQ/wl59F75aucFdYgMUm+zmOa0A2lAFU2UONw\nyJfC\r\n=xhtJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/density":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/tab-scroller":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f8579b7ea.0_1615601091679_0.2655135435102478","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcfb098da17260685e7894993f8a2ce328868a8c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d2a39d300.0.tgz","fileCount":37,"integrity":"sha512-2foPsnk411QeuvCYE2ibgQSGZvKMSp9mvO7e7JcF0QzTeAhqF4fKrNhYrOYsYkyAw7gjitWXmUcXoSxrpYsKrA==","signatures":[{"sig":"MEUCIGc4/KyXKrlSdSkoRhUCJ8WyJ34HkKnfcAK/RhBAO331AiEAyVHlVmZ2MQ2xvSJI9Vai/F/HwsGN+CoJ2cF82q9k8n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/2eCRA9TVsSAnZWagAA02UP/0DdbX6QBhA5fCtpzG6A\n4xq5mhJ8QFkQI/C1X8s7EnTBrXahZaS/RRXg2gz5SrV7o9mvYlDsbho2OnOz\nPrpIuZMYBgbmFWbYBllpgqPifMUcN/z0QJBX+hP/Ljhr5fZORQdSwsBnv1bV\nNvcOFwc24LS82Vy0wjI1UP88o544tno5+404HIaZcUSh0kpbuDW4HN127AiO\nmJXrjNy7m2Z96I3fHWZkQrMU2KsnZX4GAymH9P6VnNzYVIzHJkv3FAoS6xHp\nSLqbcqVX3XP2YCQUG8yWyus1rGBrvw0Md5mX/q5N9gMR+HXu7ugA6kN8McUF\nSk6hFWmHRs6uvywp2sKlV2DWVJmlv05gjSaOkGhruvW7gt1+zwYcYbJfKONW\nGvpfY8exxLpBT51iUueLQM1c2RExvPWj6Vyj2ENjWuhdwSNayuDrigbPQ2dL\nEm0zjc6dS1egeVgX8X9UCTlnhzzmg3jFjKMRWKNaHIwOxI9a9p1Z2wpSiDkU\nAqq2QXU08fUVBmXHyTWfclG5iLKHP7BXdA/ds6GRShUFt2pWr3hLTZvXU3dw\n4mUASq8PHofqZxywu0h0s7DZdNeXol4cQzJMHW8DbJsH1me0AqlVNcw7xrIh\n90dGLOSZKx8Zg20RX4fGrOai/60lFl7JHyP8vCasMLsyKY4/Pu2d1zUzshGH\nw/XS\r\n=BX4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/density":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/tab-scroller":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d2a39d300.0_1615855005498_0.885744619716925","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"107eb7893fdcdbda0072df6e47cb8be0b1781c98","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.7cf67823e.0.tgz","fileCount":37,"integrity":"sha512-86FVtQzuj16jhia0e+EpWo/gq1hxAxwElc6ifZd2sk1t2n3qe4lj8ssjJ0TBuoiS2KJHy0dG3IdNtLhK1f1+5A==","signatures":[{"sig":"MEQCIEDa4YPWxtzJ/BAkAi9RN0HZaByyip8SCF2wgXd0SKbeAiA7ScuU7m5ottX3mENRJ0zI1s8tTHFtOAEkL/huxmBfsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPdFCRA9TVsSAnZWagAAkyUP/3d1EJZhnAcSpYR8Ca/8\nPfoRtd6lPE+4qf4LEDhWk2OwA7uOBUVrlp9o8MHfNC/zRTc9D2755UUfnPy3\no353R+2BMuUjQCetnS5+CkeQANLb/T/a22TDwii7OxrfV/WNu2UaPQt6OLYf\nzGP4dMG83qbCimN4Yomt1VTg372VtUoaoNrmN4LhYeQmf6GSlssgie+b+JCf\nG4IFNFGS15zxsqZvycx8ApfvhHjD9xiddipWxr3+sbdue1ur8B83twMnMh+f\naP71rHJVliwnnnsmu/bmxwND6ATtJo2YpuE+5F9Hc4AKTmGWDgSXb1Nsdk09\nKtxUoyXwfv+KGIlOsQbUGAN/9QpcldyMPRqXizMprzkYiypjQTsV0gdJAMeh\n25Nki6JohGCHoBvKtGx7nMn8t3UqckbzoiveVGzGzW2AgOgJuZJdwRiI/vO3\ndEZY7L2Ao0TFdlNpJ/ci+Kf8YBihFCLU1XVm+MG9dcmJkFhzcK56R+TZV7BR\nVBH46+03oGQmaxEI7XRQQnYn7QSX0P1hhWKdgMqidsqvxSG7CyF+gLGH0/U0\nKahhJ7mmZg81hJkUXZgp1cSnBbw3ax0sz+OZy47PDM0tY+MovoxqbJ1qaEBu\n9xQtX8fbz0CgO0sxXKEbj2wItcoVZVSE2sPdV8hoVjybMBr1OdMNqYre96lU\ntXLN\r\n=v+XG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/density":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/tab-scroller":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.7cf67823e.0_1615918916595_0.9378188301112294","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/tab-bar","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c9247e2f6e701357d9dbee0c7cf2bbb7c8ac6c9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.67d780c79.0.tgz","fileCount":37,"integrity":"sha512-AWn7SNVferjrr3SKYl5Mpb7aaTau3TOCSGePVd+Lma11rB2Tz+oEF22s6zN5y/A5D0oQ8hgOeU2HHVU+k/Zvlg==","signatures":[{"sig":"MEQCIEF8Z2hhp5VzJnZY7jMVP72/a4BtwaiDixrbjaOZZtW4AiA8hXwBxg+VJ5teHRS04B8AWHJCG9rKIHvhhqWhJ+LtfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQvVCRA9TVsSAnZWagAAVlQQAIWmlN7PEWY3z4R7dNZS\n1AMHZXxV3lG22uGwxvvtzyaQdkQIwej1CgE44oTl0isSqvgmHuD+VNoGFTVf\naP7hD26/MSJkKctIVHsPv+uFUC5b99dUk4JkUHZmXbh3hKheTg0h66lj4158\nrlt8j2oukH70TLGgMFrCgCFm6sdpSyAp+wTcGY2zWDX7WBudPUdKM4PYGAk/\n0Sg5BaSyOYlWkJ0qpprcnRacM+Q5hoR+xIjx8gyuX53EC09A2LS07V29UUxK\nHp2GSxujH03ZtUbaOPIhFuKEOXnIJGVhV1mMMX+PQHUJ+7ZmRHkmJhluDdMr\niLEfiaO82gzjnlGahwlAiyj79Is9WI0ILJtjJBuAVYXLp79zqMflN11PStYD\n0NnijpI5kjypEcXR6UsVEf01vn+FlF33xGIGZpX0K/MU3GPnyCXoqYPaBbP2\n41rzA1BzR8wJcZHxwHC0iMlQkiWhawyiEXQBW14lzJqsaSTkeWiEO2iiGa2i\nBFu/Y1yK/Uc5RS8PpiPqCaPkgGv4xGM7WdBPDLwIMgtUqgG/SfJWl7+Tkfo5\nQYOMN2XmIX6D6UqKVtyEWAZucfQiqPQ5TjbNAQ7I1XCxrSfYUW2j3y8cpEE/\na4Yszrvv03lvRirAg54B55c1UTafn46lGOlh9Gi1DW4GAL96I+P8fCqb+1I8\npu6T\r\n=dsdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/density":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/tab-scroller":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.67d780c79.0_1615924180579_0.5373913997454873","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44306b69dcf539d266acdf360b31f7f5ae8abe43","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0f358ddae.0.tgz","fileCount":37,"integrity":"sha512-II3NqtfnPkTTlO0Wu+A25qbmDWvds3FCUFwv1oYWgBXJM2MBaf9qq8Q2pQjg1twiUpbKZnOCmipsVFkdnrc9Vw==","signatures":[{"sig":"MEYCIQDC5i6A0XWO6qXeZ3tTgSNxR3vWkTSmD7QBR70KcxTsPgIhANwH2j1sta+EkNPmJoT6ydEaeJ7F0xOSe1zZkzRxucjv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2yCRA9TVsSAnZWagAAJmoP/AlxHgGn8lsGQtuWug7b\nkpgQNiN40STbPzzDFspd6oAp9kGBQREYmmKPnhajUjtgl9upcvQVwJUGAp+Z\n4T34mqrelrTw2HG3FEe9G9QaVZjdHGSyJ4CvgptpzMGDy0lfVfRIFCAez0V7\nrRdCwoCcAS/pfpsX32zgtimbNL5FnjSVItZc0aGXBj1C+mwkjaiCPEEgnqq8\n9q8rarttB87MGFf3DihK4Sw8FlUQtNPF6tYbPxi5gWLCrShkO9drJMdZGNbQ\ndsDZCKdUN68PSK7rQ9WD2EiSt53rJx6QZMH/QW0SqaaZjcXpenHMRjrc8NK1\nVWQrFQgtHBSQVBor7gYNnXP/ezbTWvvpB+ILJGjEN5YbZMadsPXu+w+L9lA1\n9JLO9AOcLeWdpA/C24zdspDeMeccFPMrdYVhKKgV7vkegThHJdjva2P06/n/\nIDx5F0JlP3nq6zHX2C4Ow0XMh+eUtRCYD+TkEAsEL0gU21EquTx01aJS5+TF\nzknCKPtb6Ijy04R5GZjTAQ+uYTxQ1n662uRmNiGImhsbxJ464bf2kfSmLgQ1\nXuIb6XvFK6YvbeOCFyGVapI0qQiBjZGUViLvaaLJwcqT7ULsj8sOKsjU2VAu\n6Ak8w4AjWKdSV311SGxqaTcCWgqHFj4Ecchmilp15JNz7EqcVgGNDsig23M+\niM2r\r\n=fXzH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/density":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/tab-scroller":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0f358ddae.0_1615932850433_0.5169900576565665","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/tab-bar","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c2ca41d189fd7206ff5c565649bfcba16c8dac8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.67eb0df80.0.tgz","fileCount":37,"integrity":"sha512-tKLBtRw8TEf+6MMVfSotj//WqIQZ+s5A3kO4tVhB0ED+wYHPHDvOldTOhg5S7S+PKq1Aw74R9iKqVVr3oSB9VA==","signatures":[{"sig":"MEUCIQCo0FAjGcp48sucKtiox+jSbRIeFw1w80iZR8Klj6TeUAIgMolCnYzEIy47TsjknHvARsZRqrzdlLlthlh9qjAKsyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQTCRA9TVsSAnZWagAA8H4QAJhzXo5YWX7Aa6ZgJ0lq\nEobWuXzaxR2XR7dmewVjFyQQnXjJLZV0M1kaOGxKsCH+KCzq1PrEvz6YYVLb\nTEBjiVkgX+Orh12Jzas1z5jn+TmGzd6S3Ai2DnxCaCVWwxW0gd4skNB2TOwF\nGgbLRuxdKlmicG1KrCoWYQV5/SDqRB3Z7dVy7ZLqG/FJvCKpQ5ql5t4Aiq1U\nw8HbEZS3ttnOYv62Ik7U3OqhzyNWSUTL9IMC+Bq9qthHJnZaLXCR3SDdYNE1\n4tWtTdERseMlIwTrwHbNapSz56GFW6nlG7DVZIIPnnRNsVFpCw9jdV2ZmrCE\n3Bd8CHPvhsClI12sV1MEjcprQYimxIARt5NoIVDmLle6ch5E6EqpecHDdETI\n1gq819/XBvcYimaj6q23ysjUZaRh8Ia4y3fI20GGVq1mr2DJnFAKdNGgFRij\nnv6r6645//Vd+P8/oStG4cN8WLkxqT8uyU8Soh6CovH7C1Md+NDrIF5ifUic\ncOFbE+EbhjKSrn+8uCNhw9QiW80vJQjtZAWzZjDuFi+NMOUj5ldxB0LMW0um\nMhAWvahYX0UpB+tV8p4+mo9CUss1MNL6P8yS/5ZbPghYuDzWrNrfcXD7/YFT\n1oQzjBURRjCeuO4Ik3f09QhjlZ5bBS2P2nIss55oJgEiYKDEls/2a0GMgtPs\nD+zW\r\n=Sy9s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/density":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/tab-scroller":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.67eb0df80.0_1615934482910_0.4329547272063745","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3ca81b834d84bd6950e84deb1095cd339d1ee10","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.941ca3b3c.0.tgz","fileCount":37,"integrity":"sha512-XelLTx0HPzYAiwHRfbNuiEEDu98F15xM9r3F+nJ2txI4lI359ZsFNGCO6VxwvIU4vs8XkkM4Xlbv4o5KuHOFkg==","signatures":[{"sig":"MEQCIBo4VVcl6vWDimH7BntKYH16Fsbx4OXZs30wIL8IMlaYAiA2JRU71yY0uADIZUQ0cb6KjpJ9CxPsS1xQKTfwhdonfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTR5CRA9TVsSAnZWagAAESAP/3zGX7ZuRvTF5xTq/fBg\nSAUNnb5K5d9ao6GTDRA+XWoZoFaGMib3/UTQAzNije+i3H7Y+BUZQ6wxnlzp\nBMHJeGEQ7QhTt7gbPpx9np0/roX95CcWulcs8QKnO7vpSCpqnYwz5dp6bR3S\nKPf9pZp2ZDQ6TBu9dkKXMNS8+dP2yYIHSvIABwQ0HlUZX3JWiKnatKgQlP2v\nHw7Hqgs51s7YKEwJu4cC6DSuC1PyWhy3hx+f+JB9zVs7/obquvsuziOqX38U\nnNc2Z7HBxX+QFW8pDAsxjb9dT32+IJvs2lZPg/NemsCMz0cB9RILJ91ylL8S\neMNIuWApRyxW5G0JD3BQo7H2G84+n538DZ6hUf8U34TkQZL+jMaNyQwmds73\nSirBaBxkHcdjVpptK9cFDZEMwZxt0BvtgcPaPOtjatNSgSgEc67Vfif704RN\nvHs01wSsycBeBmg7E0Xp8+wtZyE05lpAAqM2+hw9BANDNEyWuw0g+M67pMeg\nq6Fznmmo3DtY0Uy1Ait6BmccTy8lykg8mMcByBWpywkx2zHOfbk5B7C4WPkY\nIlwkWOJUpjzX9z8HfMqf6ZwL/cDbspIeTu/0BeWDSxOttfbitoUx4u0cpFLl\nK8Nhu1oWSBiDQUfsZDefnvm+rq4NJy1fWbJ2icEzD/UbVTo25KTins++QIdb\new1L\r\n=fGQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/density":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/tab-scroller":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.941ca3b3c.0_1615934585488_0.611549607148234","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/tab-bar","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2e9f5bd2e739f243a360933d173c7b7728bbc4a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.3344d12ad.0.tgz","fileCount":37,"integrity":"sha512-g4bhqsLSEqkQtvnlklla/eilT3/f0HTyhvZZZMZ0r9jLbLGVccPnV+Fhghdie6npViDoSCGpI7bsiCZZpDXIgA==","signatures":[{"sig":"MEUCIH4TqOoHyQcvH1qFE/VYfGh14uZdDoqM8Os6H3w/gxuHAiEAxz49IIQx8S5c7csfISemPF97xGOPgBJV739WbMlwre0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdP1CRA9TVsSAnZWagAAtLoP/1czO1Z2gzJ7Sgc+5Eeh\nNF/bfCmPMtNiZx/CWHcjaYo03QzRNaPTii5lWr2+QV3h8ISeVXNJt6tO/fLg\nybjHOrqt/F1L3DVTH3DnbvqhZ4VyA4E6L9nbW4/1R4/AVx0RM11JswgKETyX\n3V1MQchEdSR52Husoa0kwxYUT5RrrI6LHyg44aQNnvRZ+lXbs3UP8+wVDXS6\n11PPpjm8lm7SsQktY6IPdbaAZOFNew7hT8hGfdFZjw43gblcRiZXL9FD1MuR\nRnU079erkw0gDz4plrMhGb1PDnBYZ59638jH/veC3iGBvI/TivW+DMSbSMbD\nGGW0tLbFTe/ENkx5DAx9LrIcheJTi+U4J4PX4TEj+l3ktY/1NYgRdzJj3ycl\nHTqmvvIh41QP0+fXLRf32GxO37KyAAiENqSmdm9M0Ojp847diq3btThdeId6\nSmuGXvmJ9iHNf68hVI3Q2xCzNP4E9SI1X+gpLplEZGgs9BLLAP3MyOHSVSO3\n+jXndO78OXtQIAuvrin4nDAWG85wnA4XUIu5E2E0jrRmh2fknlijGxgrz/TK\nvorOvGB7eJn8qw8lfJWu7UOrqxaJ5rrLKzms1K7NjlnatC+jrbk3HKQO9l0l\nKPAC5Z7GXS0ZoRFYu2+uZqciEs0Q9nC2K/ycYW0FkIsNDhIn89rT43zkcUvn\nP48A\r\n=l3u+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/density":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/tab-scroller":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.3344d12ad.0_1615975413390_0.5234401387252345","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/tab-bar","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"302129e12ca526b2352a0396885c5db525236cf1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.6072ed604.0.tgz","fileCount":37,"integrity":"sha512-Ji+zzgwOpzMt9tgxsiukGv4xm+jZi/vbyJKv+C4AcApbweXhYqxYBWd3EciMg+anal0A03hn7o6KkFWSAa+ugw==","signatures":[{"sig":"MEQCIDUPXZo/2Ltn+9XwtDRZChR7cG/Iil7UHDTEmxY6lLMHAiAMLQwat9azw+JBZCJ73anGPULU1I8cr+GEIwFtppcypw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUoo3CRA9TVsSAnZWagAAHb4QAIR5HOaRmh7sUsKT5QPD\nNs1ExROkoldZCZSLbNhUH3JPtjWC+9xDdDMBkkqT4gOQQPpd5wlBZB1MQmTr\n4WcpzY6qQQpDjQ/7ZHJbIGUHezPj1RkSplw0QxStIX7YEkbUF+OGzgWELPnE\nHgAeep88EMZNUSEB0NuQiM6yL/odbCJyxWHj08JMi19rrSyVkrLc5f4iQP0Z\nlwLXYZHd/2v0E/p9AhmzZqLU2C4zYExKiX23f35918oxFATEaCNnYLa7EHjY\nI7jzARMnYWHDVIhG7bA/QH7NmURIFHi6NU+Qp9BSYlpusadz5iP8YCeuiQbN\ngzT+L7cRP/NcjNwktYexaxL0UDo6MzzYJBMHo8KfeP3F+mA9RMmF/qlK5OSP\niP3UVJwEPLMrx6ZJNgQ4D/E8NA7oBELkBk1o2jDb66Bwxo0W3tGXzodf2Qz8\nlWMgFjFRGa6dYFSFAFu26GRmkzOKoZXRkAEiyEW1Y7PROH6qWd8uB9zekfQB\n5E3GH15cKqJHtMU6ZpfB1ASOP+HY447CmE3b3WOUymkXPiLRIQ6PGhSaPjfG\nsuke8pD9k+9mt23PKvknOW3dnvjsGu2I5h8jVzo+F2ZvxIa56SboTrkGg2aJ\nn4DBouGdWVCeSP4q6h7x4kxEyokmOV0n9t0eXZHiaQU4nO0AjVwbYqrPWrFA\nsgFF\r\n=a53h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/density":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/tab-scroller":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.6072ed604.0_1616022070652_0.6679404142236862","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28d4d635200c4191379b214baaa59befa18a33e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d3a6862af.0.tgz","fileCount":37,"integrity":"sha512-9aC1Os1IyuSMZHYpqqgXbOh6Ujzl1zx8kv4Uu2BUz/TahceGjmQDrH3oQ0068pVKl40EsLLVytyJRUPvu9hlyA==","signatures":[{"sig":"MEUCIQDX01eTi38C8jnyHfMsYY7Mant/tQlRPl/bLMH7QF+EaQIgdgW1dBxA98vntdADaQlQpoTWir2ATMcPL2s+oHDt5Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU34jCRA9TVsSAnZWagAADYcP/jFJ1FcPntSGlxm9GWef\nlVk8BhSs/haAmF//isxOFraNAGzzDHICRsnFu8bh5ToaWU8go4aPNw6f15z/\neqHQQ01Kt8KBQPxXRU3MHYM9yvJn4wQ8+Ys59H6+DpdYQzGE2IQb0DNUUwHn\nL5VdfWua3Hpt8GQ+obwTSnhj9eS8o9NaXg1dja35h3Tj1bPZz2HLQYXuAQPe\nGs+sVq9uCj4epc7eJ+RddiuMi0ygFqtSg0k25d0K0uvZ7jVKavLBm6jPgMss\nvb+XaF/h5GZcXNn2gYbc78c17YbHndM/e0aIzaQAMfw6mjSkKXVQxq8xZrL5\nURQG9znDmnHDoKlPOzbDxlKcDZ/3prfVxzMuLLkmtenMDfFRYZEXavVD1HSt\nzrw/a9E575qvKHjiVnplnxuDkNeKYKvLRrn/l3vvs6JG30HqC2nXCNmmJAXp\nnju1wWMJN00HoBFrVXwA8xiI7h0BArgXmeBfF9ET7nScJAVTeGsYSSIf5Wau\nIThCVXVXkZztTwOr1eeUQQBMOcd0qZkXr1ehrEXmlKwj6slOHKTtNgHReHRY\nTPaI6zNJ58p/idJ3HTsIXU7YKjzQpfO4Ql7nz0LL9SK1BjWUnp5fexW1ZR9M\ne8spfY+NKptiqudKw0749YGe+Ang9GeZKeZR2HWrTja1xquN5ok0zF50ku6q\nJpaJ\r\n=Ksj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/density":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/tab-scroller":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d3a6862af.0_1616084515397_0.2799805928774557","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/tab-bar","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1416531559ab781499adb8e3631b4bbc9d1ade","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.40dd242d5.0.tgz","fileCount":37,"integrity":"sha512-nSryrXAHNNzdUgGcKaa+97WSoBAOlgetaeQ/fZh1PK2/bdz0KfHFbtrF9YpPaeDXTBEuTRJE4yE1eSjbLKx8vQ==","signatures":[{"sig":"MEQCIFVSsAKXZCLSPBkaZIZaMCZSr/I/ogk0dBLG+grNNJjDAiAMUotxpQMsuGOdI/P8A98Wp4xz7l+JAysrEvDAZ8OMpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8PHCRA9TVsSAnZWagAASjwP/1Xd3ZPsa91Ajmxp1tAC\nKKhovY/EJjtn6bi65M5rI0l91F0+Z1MxKy8ReLN1G5occLHR4zpwIo1n8zKu\niyzdEQ8KQNEDmLhBVqk9TjSR+kEJp45oAvFr5Qzf4cwZxAa5qUdOKGN10fuM\nkcHDSekjg9hVHJdJqcaEOp//F6NxWk96C06iZEvR4Zd+FY00yX0BUgjsdw3x\n4nap2dLcLSxtNT+vv9et+6n491YQyprHavNalm9o/MCk0HhBUPUDmxUBOuv2\nE2Ehy5/J93CoRZ/xjBgOu1yWtQ8g8qrW8c7yd+V92tWRt5S3btq0Qf8Hdg0D\nyX/FJske5F2W07cazr531+FK+AJ1NwbFcJ4xQw1j8iv1SxVr43M7gmQfgZTE\nXqBRZmNfAP4LNA2iZxHfy1LpIsxRO7N6GgzCD8N3Hdo02Lnm8bqCPNagpQtO\namWabUypTteYCbBs8KlXG6pUVdSwYXpg50q20hDFwGVWnpxQG2B+F38OVUui\nDWD71765RcVE0D7arsY8jvBBAhhVKaw2PBi+KzQf+/gBXOukwqOa8SlB1JWt\nCixOxmSqxs9uJR1vgfMw3Ys0UoqEsdzoUEH9u1WHhTQwKMFv/yxbKWJbL24i\ne9L3NwUIWZH+YfGbL4q39TSdYdzVLpDWyLNQbxb+MhlV1QcTaosbNfOM+HYF\nSafc\r\n=VBKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/density":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/tab-scroller":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.40dd242d5.0_1616102343146_0.6859152160611184","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/tab-bar","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaddab48f732cc4c8549d2faef690ef51b0262a2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.ec8f8465f.0.tgz","fileCount":37,"integrity":"sha512-UUvzZhrKhg+oQKF6dk4pjiy1TREw7gqOYtiJK3yORh/zO3HOmFwGJjP7KPk641RlcVGCxTBE0rVraPfBKKxBdw==","signatures":[{"sig":"MEUCIQDk/lwLX1yQD9uLLqpJLb7ir7qa89OCqf/1Zxgkfa1+8wIgF+voK4meEc+o2Pb1knjjxOW2xBMk60KxdJk4cUtW8Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8oQCRA9TVsSAnZWagAAhIcP/iQhgwAC0Bc57Ypecagt\nIlR+DoKxAcyPTw7hCrlnWY52XMqvBfUWLF19f/fC+HRHyCh82HJWRi3DAjeL\nApzyl3rrJHOjsIIvgipRnW2LGsiFRceL8NbV+ty7dCw7n0FQsyYZiZp0Ydex\nG9js8o8kjUJ94JuzPm5yVRvyr48cUI+Ik21lG0ysXuj96zx8Enym1wmb7sg2\n2r2Lisud9kP5Wc2wvRb5NkR9Psj10tZLOuj72jCV8gEd5WVP7ysAcSxj+dPK\n2zHRiM8VC+mmboNetPwYT1/A8ITc1unACOHPoIhl2mb/HMo2SCMjSD4CurU+\nQ4t2s9l+hWCht3ZQItT9IJxhwmRH1JmqkUYJq5np92cre+MBC8UzKRXy6uzw\n9OIMl7YEUV+++6Ok4bMTRWAptyNiSNQT2wogLYtuVwzK5HNkRkCQ7sp05loX\n0YF31CGvGxBVrAb2XjZ67yQeMoVNGT5qrwAETdDlbbkuQSzTn4R+0l2417p9\nNb73tkvazKndrOQeFItp9VS0rDSi1oTjJxQeIDyoycyiY3jMa0LL/Uu2nb1y\n5gJF2NqLA0U6Gjt1ByYJuwQ991iLn/fo0z7vwZk004QoRJzSwapJWGML/3DP\njg8sGkYuW0acDBFBez0N1C/Ln99zxdoA/UB9on5RmYxsK323fr6SBuU4iGoo\nWVqp\r\n=SBso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/density":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/tab-scroller":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.ec8f8465f.0_1616103951682_0.027975635296795698","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/tab-bar","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67b1825a364fe233cf29f2e1e8778dfc5f3e71d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.da38969ec.0.tgz","fileCount":37,"integrity":"sha512-IIvj08qB9DBiZ5T5/75i+JK5uKA3n7sUxpsXVXa1G3f/abM8TmklbLp5sMAd3WbozkN/jqE/rh/sDqyaOC5R9w==","signatures":[{"sig":"MEYCIQDsGFzD5DrXAcrcelkFa+BRXvES8T2gLafeH9Mdway6ZAIhAOwyT9kB0Zc3NyiCP1el3ENp3FxXBkjoXO2j84uFYXv8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9H9CRA9TVsSAnZWagAAHo8P/2Q7XgKY3+33lmybldjR\nO5rNY57Fh7dvK2DOFfHEARUjV/unC2fZJ+dNdSg3zV9MTx10jYD1UkiP5X9K\nt67egZgze7fQv2c9e41xpGwymwungnbmImd3tULNFijoKIltwGfC2bK/zVR6\n7CrSu+tSyS+2aakg/gXVYNT8mevpf4iTyxthCUlv39yKSeW/R6Sun4rOkKkY\nkpndtm3mcXsnIWvWme4NjTBI+4vmkvNjHUbz9uQsrH4FVJIcHLg/27ceN9b0\nnbiZwisXJd7hHnLI578t5fu/pxOeNlPutKjAC3D2UlV64ojKPqRbI92inoEW\nGWA6jg3wDut056u8fMrMfhEhgwQ2jFVxGQsY/qWvmaGFk9O6L0Bf48V+3zpY\nBu2Qw/o3AtPZ16HQOZ4K/cMbCT3srQyfYgNbQMOcPWjMLl3NL4Ch1iE4k/L7\nH5GsbDrywJK4YgRiNAUU2bCRmoVbjBq3kGuFPuhZ5tb2npI4jrYKQxjOE5rF\n3IKPLq9lnoMKfqqTpYrXOf6s+09LtOckG2JCHyM0sp1IkBxqneabZjsnbWyg\nYUYj26er40ZyHqpP7KXnaRbEfT/EINAgiqv96u1/M8zCY/A6XcacPeUlPj62\ni5pzFJacA700t2dZcn9v3VVpwJgxadQ8nS+bEVtunBj6GDXUCmJkKLPrZWeb\nsK0m\r\n=Eg3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/density":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/tab-scroller":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.da38969ec.0_1616105980896_0.43282097960707766","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4db31a7afbab65f60df0698233993e7692fd493","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f5246264d.0.tgz","fileCount":37,"integrity":"sha512-ZMPNDztce21CB5wlttfx6IrIk/vAqO4pwbdd+Ui1Tt18E5o3AbDuaMs6FfjcPi9D0pwdEaCGfUwlfcTZPumLDA==","signatures":[{"sig":"MEUCIQDjQCNYPtnX3FtYCM7g/VJ3t4dlTR6D4aOAX0mN5ETBSQIgBZ+7JQ4v8Iisr7ezhKdDgWBKfyjZCWVCUAJc3XsJEW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/L6CRA9TVsSAnZWagAAg0sP/0VmOuiYGT2HCKw9cP5R\nMraJYiZkFljcFyyJYo2yyYnS/M75jWkI3Z1RwvW+RhvjIOoqJ6rg6kr6eD6G\n8xU42ZBk45euVtD1Mn9OV3hCgIp3wq/DHOCvRONCV3OtR8MOc7lFXaTbIvF2\nLRuGa1Q8X4lnvdkAKY9M2QOuiv0HelM6i3mRy+6cBMqyRzEP9qrIeIDIs/5U\ngWZbZX+0unehg0ZfPkL4n+jgNHcbUrnrpyS2DaomZH5jNdIZXjh1WGjXfLJA\nl211KYZ0xI4bCU+d8qmTzndCIkTVHBcZOnJ+9L3araIQBDMd6odu/EgzKLdP\n00FEjWHUk3RSMz9D3a2Qq/kKlErLGV+rIitc6PPyDX4SMEu6B27f+avGWYzJ\nvDF1v51/fpPrKObbQetHCZtWQNOq3VdmoA8owkLAcuw55a4CuhwFOZjklN8j\nxhkGWfV4zuw1kPxn1ncxcNaUn38RsW5QNvfm5vrKM50NcongZ1l/k73VICrd\nuGinIMqYlyNWbJc6iyCv2KdOqGpvLimle961xSHu+f6YpHyzA/V6zZ/cf7Fu\njvb8KBPLc/4MgTFbDrZRVVTUQS9ZYavLBbZnQDoIYnQqBPs8T6tSTnjerndL\nSvVdJlnwX0U6cbSUi0LQzDpRNJFW4QdAVyBe8lgM50L46YQ1AUixMhASIkLa\n5ARC\r\n=gmU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/density":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/tab-scroller":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f5246264d.0_1616114426434_0.48052932013559424","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/tab-bar","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84fc0f5e8d4150d0454f99caae16dc1e267986d4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.03d34bbad.0.tgz","fileCount":37,"integrity":"sha512-LYQF6FcTPtjBM/zFIOglFFhvea9QUWLvfWYM4sPLB3EKBwSbGSCAxr5p1r7AqmbYBOnvQ+cmM56ENy3maKf5jA==","signatures":[{"sig":"MEYCIQDuxkkLUJFcUdOuqLn6OB2yS80XIWeU9ElLZnj2FlbhRwIhAKlm2m9FlaSPqigsZRKrmhI/T4J6UGtfLnPnDgtiKfqF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/X2CRA9TVsSAnZWagAAzWYP/30oMpHMUNp/ouosUbn5\nI/t1dap6xX1L+nPl0fg9T3G0dCMO+7zl5d15OqKo9xNaoBMTuipHijbq9Gnd\nexAwsUIJEJCtquK8uZfho//2/sD61MtfietUsDiBERHkIjFlcYctmloS97Uu\ncO13MsoCJbhRpFck8kGA6FrXxQX7XEQ11LRpO8Cj0Av7Pu/5vTTMwZtYG2Hy\nmBmLNJ5JHKXhifkRY1NMfNrg24jf6PJ0rzxihEOwX5wtzVnfERU9B0BOfS/9\nolflS6UshN9FHc6FTf3Hvs5xOWuRcm2J45JnvVuXTi3yrXt1qC71P0CJi+Ud\nzSVAuLsiI3DWzHDd0s599pjTXwWYNOMJZJ0XJMCrZUBof8G73qGp2DTiTkAq\nZajhXdGUqD9vjxoJ4p4MY36W6ro/hzkqeNADeI/m/G4TdQpd/Me9Ce9ai0sf\nC4W7720B0//mXEXZeShViwDQrt/OYCAxOiB0GvVDBK18ScHHHrYNu2HscLgH\nv84BfjZezdFJfOyRPPiIrY61dmk2pkISHzYAH91I3uLn76FdhvFSOxJIpjC7\n4P5KYKx8iFl0SKpQt4x/fAkfmYYrzg0ybAfAnlHBUDlaZyBd5VXCGX/vULlV\nY8m1BrnDIyZPxUrKyLJPTVb0VR4EDjveZHeR7KZ9Jx6RVMaHzVGL0N551WRP\nelJ7\r\n=7XBH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/density":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/tab-scroller":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.03d34bbad.0_1616115190413_0.6317620881636508","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/tab-bar","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a86cdc037ea34fef1892df77b668cc621093b818","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.cbc57c600.0.tgz","fileCount":37,"integrity":"sha512-Tm8p8DE6ZMOGoGcE7fBdvXMlpfGpEw2rzqLwCdtfd/dQj0sq8Md5u744EbmZ2qVYdDqZiP5Zav3AV1JZdIW6Ug==","signatures":[{"sig":"MEQCIEoUc212c7pGgCTEekT55ezBhznryEwqEWA7++s65FEuAiAVfHuSEdsbGpmmDd/otqJ2BQFgxYMP2a+Zk+LOOiDewA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/flCRA9TVsSAnZWagAAQaQQAImigc+LZ1QNSYMlRfqe\nUoTxLAz0Yyc8Wd1dcmmxqPJjkvXWm4DdSbY0aygmcLzT2kBphBcyv7NSCeLr\ncMhwUk2wZbWaQ//lKhL3HPx9aVZxyqIE/GlYdwE9/C0SorrIsVzI6smk/PDY\nILBJb231dqk4iLZfeoN2AnqHQgx3wXxhcsFWibH7se53jEm0l+DPh1BE5lQ1\nnoeUQhsNcz3/g2k4kzXGjg+CLDr8uCW/dM3SxBbQeU+dmCGs+R7sdsian0/U\noDxayWzzwvUIEn0KB5BneufW2tYqv6PVNpAb87UYiOKxrFxTBruwV+2FBMoT\nV+cejtRN0MqZmaf5jSE5igRrh20FagZCYpowBqDr92YIO+140yaFF/Dg9xq7\n5TAQq8xnaqgOKfkGaBgfPOvyfQiZ1e1z2oRKrs9KcNG06jqe6R6YsqkXAWfk\n3r4hl/OkxUh565l1T15eq3YFCNn01qlwgpRIyPhe7N7hVSoaqnCEMWAykVWN\nuCfYYcbOvVbQ14V7akt0DixGVDImFIT4EEmgpy1o5eGHxZ8fKa2xOApSfYu5\nS7Tt2kaoGCGpDMQDH99VPCpZ8Nw7DVGpoaxFZ+PPedm06ChShv9+O5zHbfoJ\n5ykAJvmZDXnT7LVW4uymByFQa+yd7LuXMvXrsFIK3l4N8bVqoXSUY6AuW6f+\nyGW9\r\n=bvP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/density":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/tab-scroller":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.cbc57c600.0_1616115685378_0.5388130813461451","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/tab-bar","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3668bb391e680b0903f27d2e6ad32cc7d9be586","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":37,"integrity":"sha512-WeIbaYtc2OMOyyVYj3uFG8ZHQ/2hrSeuOPUZ7qkjvHxb+pLQ1TJ57lHKDaDvdmz1m+BecfY6mBbOyD/voXMszg==","signatures":[{"sig":"MEYCIQD/eILP2smU8w2ECcu768nLMpDdTTDVZ32CYE7/cyXt7AIhAOIVojfgdodwMEd9+9clkjww9ZLnoWf5sPa92BTfTmG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/r5CRA9TVsSAnZWagAA6WIP/Rx3IA6PwUlfhWx/Yn5E\n9uJf4gB9tji5UOulpDQbTBwi3PcAjg4wpg1xwH5XisToqdfSaffB9JzwlUqW\na7lQfdRKGxl/47Cr6serJ6EH1epd/1MfzS3oo8/2GLt9Wo9iOojj9D56Q00K\nG115JbDaZ3nAOACgNbC1kinP3R/H+BoPcfGdlzPHSTDJYWE0MjvX39jemY2E\nkL7zxF+B1h5xm37PSHqbDWPUuIgtvDGKlAE2YEF6EJ+Bd5UVVLNMEXGyoium\nKOG4K/zjxpo8vRVQobmRJ9XcvFpUsk735goa8XHldPdhwizAkpDwiD9ZtVpz\njw4ZPUVCkYP6212LvT+0dO7CBTaSycVV4rh/6AtcwabAbfHcnuiv4nlv6gLz\nLBeX5jwgQhwSPRfMo6mXMGlXlXFj8tOvbf1qBJeKGkODI5mfa1RSGGgBfC9k\nTldPW6GablSTHM2oouL0PGbw9tFPVjzNbaumudIkKRLe+ByeoVThzNxp+Ttu\nUGLhwt/kbVjQouUdlVLSNKoTf12L+hqo0ju+4qK7uwjdJKIKsMLGJOuuowma\nKMsDCeAJtRn0JlqwpIzYZ4X6lv8V13akLP00lxJ0ixZbF3n/ArxVys8solEQ\nBeWisq1qxZSIHuXosewVH+B7y7G8zUo216ghpwx7URvlJCwbRg8FOmsZGWDB\nOn8/\r\n=0yPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/density":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/tab-scroller":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.d6c5bcf37.0_1616116473143_0.4887915545534929","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/tab-bar","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a093ebc2af0c8c4d46f84ea0c89d649b6e9c107","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.fefc668d7.0.tgz","fileCount":37,"integrity":"sha512-7nFDT8UJvuV8PRCbUYYhBC5+9jsduEd+G8p6keoHw8FyUDPU98N5MbzdOv9yDYtAZ8BYXJSQ4LiT/0Z0eIkKPQ==","signatures":[{"sig":"MEQCIDMDhmc/GHaUa1fVNIlX2SyOq3rU3cemO+QA53qpay7oAiBGKYc+ASkenI6kAGEy9SMPNhOjpRgFpeXNyY5ASoNegg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//3CRA9TVsSAnZWagAAROkP/1eWyBpz2CjpPoQc9SUP\nPOqgTrEYtPAW3hQjdWDO3+nx3YxiTTR5uRdAkgiO7noFsOmhB74t4kOFIpnU\ntgN11c8mCABhY/sV/7ggQzvIDCd1cPnaOmtpjef6NxBT3NujxQmdA2pfKMTN\nc3C5Ojvs0I4NlS6UnPJiEiTTQZ7YtPmfo+RWh8VrpRsuw7Mk1ze88Mv7SmeK\nUZqo751kH6Wx/CVkB+NQ29FRF/gsLYL7JihKsiRDJvVw8CaPhM0AZVQ36ZAX\nhUyb/kxOpA3zv/FjzMXgIBZTTUBiYrrdIcR9k4qtnCzBIE4Y23ORZ2u+u1N/\n2sygPsfG/RSuDLgH+lkFNcV5PWhFDRjllpOWAyZvzp5Skp88smCbcRSO2Kwo\n6MExS9SYXSsub0iJ7occUY9zvZT0OMF4jNr0/en15FbsJkJlOxblhqeCVUNf\no8KoTi+bTfAca2dxa9+S8L1Z0WajH7FEDoQLTbLgW5kLt+Zz6VqNW4YEwuYN\nDNmsBuJTztPOQZ1byD3/HYFNgX3V/+xGVpGiyWdQuksWSr8GpLZvIIdVS+B6\n9Ry58lQP8lwGkBPuo3hYyBBm0U9V6EPACCV51F/Ojka5k5FpRcKB1e0qSLHy\n2ZHITfQueIEGp/wfXjxgQ+ruZZQZclHWeR+e74dTaeFBGaCEOj8P8Ro+0oTG\nC14F\r\n=3Mxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/density":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/tab-scroller":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.fefc668d7.0_1616117751399_0.8972501221196898","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/tab-bar","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1109d5b1006f0625dcbccae68508d0d4b86d529a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.faa7d3226.0.tgz","fileCount":37,"integrity":"sha512-CJzzehbEJzIaA1sgQlndvrg0PNrQukZ/yx/4bYUmh9Hu651NTCBpakeQtixGfOgEK9bbrOixECdly5DB8GKy8w==","signatures":[{"sig":"MEUCIHXVsl6hrYZNsxbIdxXQBXP+CfucD8FGAAzQHKD5pp0UAiEA8Vz7xwSsTMTeZjuuYZDabbyFcG5L2LDYeKMNUlLN7IE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVONaCRA9TVsSAnZWagAAJjYQAIShUS5h1/yo43i8MztT\n/v/K0T0Wv1IYAVHo2reRNZ4rGYpsx8vF5XNaFu37z3m2WIqcdkZ8+lTLHAop\nECFvEfAJc6ayZOW3KI6f1R6BRlGL8qZqce050XH7tl1jyMy1wy+pX5lc+xp0\nNSs3qllpDhzHzdQwLKXOoxAmREj23Y5XvymCwWE2wXEymg0R7KdOu6amS+d1\ndz7tyYI9Vo6kp4YcHQgq5jd9yWWrjw3BNAeID+MOL5zIJOYaAL4hfeY3CnlX\nYfa48+wLLIfr5JV1SD8o5r6JaIqaM1nnVqFQU0qq5+v8vDKda9dgNewXjBz1\nk09e9ZwTLSM58eo4dlBcapf02i6RghRJSn60Cl0K7Xn++gz8YhM25FPgvReK\nTfzgVkwFedwg1I3v4B81xHcxK8goMGDzcB83/jAJr27jxfb9e2NlNn8Z2lJ2\ndbpqNsRW2NE+TuI0Mefb7nIGdwYkUiRPoWfBKpM1d8PGqd+uia778Q4kFi+X\ngsbxmOVcuc7e9f6sszhk7R+6p748814P0YfSIL+Fd1jlaeJs/FojSxDU8DT2\no9nKwDgKKIfPkUg24dZHHp/2BPOez7djhb7/9ZmE8qNBZ5EdG5+X+nNHEb0F\n2UyLQEv5jalvw70decJVeTCTz1vIpBskFZ8F9uNOkwa4CA+CJGDlaVdUZK8h\nL9Zc\r\n=p7pW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/density":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/tab-scroller":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.faa7d3226.0_1616175962262_0.12202019114947915","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/tab-bar","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e86f6a6fe54e4cc2f04f0d92f15ad7567bd8ddc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.c60449bc8.0.tgz","fileCount":37,"integrity":"sha512-mMwc/LfIPmcsfhGHOLEAWdleWUyDq43m7ydR+WR6yDXsN16ofacEQd9Qg61IDbMyiCbdEMPR/G8ZjhFWV/yrSQ==","signatures":[{"sig":"MEYCIQCK5TC4xvBqfkGiaNZsqeIfN4mjFMHqxifrBjGbUIgHiwIhAJ/MOEk0mONQDKEFckzsv1IUzT+FzwkPNxEH5dlyiLwA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOhCCRA9TVsSAnZWagAAUoIP/23CirHX27Fd4vGPitW8\nhsXaagJmGYzgDqGAdnR77Y47jRzyqKnuOtEOiHmxSiRqg8Qc+/Mef/ZmX4UX\n+StO4kkZdapFzg39CPKNO71A5LhztPrBiwgnQ4SGwwq3mAt61R/r6h0zLSAn\nwf8gaYC/SBBxLkLCJ2lvqyothh9aPf72Z6YwPnxw68pWz57h/6YrX/W+tmot\neT2CHBfo5nGEiO1RcmkGx77Fy9eMkNfhOBmQx5b09cYj7HlzBsn2UaknhSEv\nA8QxqCfpD3Nq5/XSr23eyXvznzA/NanDTOb7THb4QAOJK1mY85/7vNB8laaZ\nP5CEhUhFZmdOOaGt8co312p8mV61PzdoXCxU9R1DeuTPKVuJ6PCS9m09PWZl\nqzBs2XR4qZVB7YHfioNpyWVPz+kR3ApN2tEGI1qv9sNfLLK0uYXlZXk8yDrm\nO5IH0K5vbwQpzSNy5G3vF19m6kH9PzEh9ft/MkHfqolMHQuJrAmj1sW6GeOH\nPzlxIFXbIRIgsezTyY/h0kjh1G6X0qMThnctevaGCGpP1I/c/E+0PAVN02Zx\nrncGrg1UylY+sCS0lWk/vBL4PDrTBUvR8SFAZtEUj2hH5kRr4LfVAkgiWdtB\nEsc5VmeU8DOgV3DDbXz9F4YPLXr4F3RKha1L6Otlzk9BQNXjdytBGSt6AAN+\nedRq\r\n=RX1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/density":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/tab-scroller":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.c60449bc8.0_1616177218170_0.6538893710482949","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c1f86a0ed9a6a483c532ab11cc238a9d79b8c31","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.5f0fc444a.0.tgz","fileCount":37,"integrity":"sha512-wgCTjl6zMsGXxykTrayGSdpuRHVxxfOLBximGkPcDM9tJfMDmuYyyKyHz4xwgvm983Ixv9nT8x6jONV3MxPWSg==","signatures":[{"sig":"MEUCIFzVfUvLhAYVQaukIR0oXN2V0gewABQiUmQqSOJdYGlZAiEAodER2L4xZzEZfKHOeHJtSlW2fM0+71d7+Dx5qj/vaa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO/fCRA9TVsSAnZWagAAP60P/jRRK8cGTx95xlSwVrHv\nFOv1lDcudh+AdB4PwMmNLqLetH/zzfl1nxlogmfV7JnWLVabcp2q8NmwtXdy\nbnxD5nYdrfCZP5brGX+wv8kNs4PxKJN0ii9u6qlaJ1Rkng1PHFOf/8tMInwd\naMxlZ+SwN0NGojBVy11suPvVoevRKViJQCEtyNnPmNxgq6cQFro+BwIgq5Eo\ngDu0x+ExmFDZkAEzM+086JAG/5mNbaptEm2c1PhLLtxHebXjy08Z8par+nfC\nnJuC8O5YE6LIV5NuirKbrr9ll4CyMny/OM1UTY6KQzvOMHVhnJyYHz80xA7U\nI3QVvYZfSRLwyjcll87ROlLyCTeGjoG2I78B5Ggs9Om/3btNDxCkQwtDwh9I\nZD7IqQicIf9nusOobp3Gq3kTSxb003mO8QmqW3pZrnuGwBRN2FTPacGVKfoH\nhWWGUqYPPOtPuAYQHPAU/11s61NhAB+IVA/TRKGhEm+Ak2Ro19iw5H4lHQht\nCfsrCOxsZpQR9nAvYUgC894GLaepF9OHxNL5PRIfOj9cXBf/HkNVXhrFKKAX\naZGOwNzqJ1Uyl1GA4dYPyBVGkFYejQvSmV8SjuTLgDlRaOKoB/qbEgsvQJU0\nnbEgVSd2YauamVYgX2kUSiFxzunZK+w0je7mfePzTQgx4ytxbG8NBmGinwZ1\nI7yM\r\n=OxN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/density":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/tab-scroller":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.5f0fc444a.0_1616179167000_0.33673016363173014","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"581b4615c0c8e7ec7abebcbdb0bdd82cbe2945bf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.4567a750d.0.tgz","fileCount":37,"integrity":"sha512-fLU5iIZJqEAkFmypeEfF5RFPux5tmvoWH7XkWpcez4AHnxgezmVwG/wv43UvzkY04J/bQvr8JA0j7tGhJPHlww==","signatures":[{"sig":"MEYCIQDrpuBAheYPmyqTXQ8JYS+5HfeyknleoWqObChqZiqpUQIhAMqqMI2kicghd30KSopha/9IBowPItH+O03w51NdfMft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVliCRA9TVsSAnZWagAAsHEP/2n+GNjTiBPy/6VvWz7m\nQsG2QSP6yjuYD0/DW7lZTCqdW9fIGpPwZPH8baKcIBeAgV3B8nHc728mgLR6\nU4MPdubWOot5s8mgMrak3TpLMFbLSEYL2mvja7Shg2qYyvb0sSyEgb50kv0I\nAUT9WDwfi1lgrDdAQq4e7Qw5bkiXwjgs9wfAL8avTwfD+eagk8kA3COae+ZO\nmaw54Ur5IWNGm83hTKxOn01D7T5bafLLQcc+jnTrBwTEVvXE85kQ+7uX6a9i\nqFG10Hl/+s+5QKZBU2xy0mRZB0eDdoE3V0EZ4q8QyCrPMEXem/DMkD2yQ418\nsopRe+ScPkp1ej9IUByBG2r9nVU7/N/sGNFGF2FT+E7DJ0EjGX2jgjJ/4fkJ\ny4f4GGVRmdoW+UrfiI9qIDrbaU0PxCWPE6xxHV46/dCpXcRO9+3ezHXHzsTI\nuZIJ8JNG+ARMUFRVATxp1AdHJ1vZtYMX21SFaX6rBmJG6dh4aVm74M2SQ108\nb1YosKjDAk5HjGzSAlg5SN//emtG0M1OBxmtXklhsN2rjV1j0DRvaUkA3KNH\nmj70wVbtNakXdl32ZRCKCg/7xeF3g17MOqTgxDYziNLIl4dxdFeCobj6mOmw\niImQBb+LjWd5BBbBZRHymSjDCapgnGUBG0KaPaj6OHaGM7zeRumK2VgCl6rd\ng6Ib\r\n=CgJm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/density":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/tab-scroller":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.4567a750d.0_1616206177984_0.45495808708141006","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89e50ea9bb64f83cd28f49934b0b85ce7c76a076","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0cde52f5a.0.tgz","fileCount":37,"integrity":"sha512-b2pt/XZKbSYnNajaoteaHZ9sgHuqUNTOVAxjhbXNxQKvF+D5eDzhWXAyYbVU28XvYmG5Qx3KNaIW7M5Y2CHmvQ==","signatures":[{"sig":"MEUCIQCa5rYnGCwkYPtyLi54ocIg721xIAteykYxNJnamzrkaQIgU2NV825kQ5gh5r79DgM669R8IUbCef+PmgwHVg8PxCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTCWCRA9TVsSAnZWagAAiesP/0JlkvFkYYgQAH4mnj72\nhXT9vTUeXVttH+PCc+b1jmfSVwn+H0EW1ZwHzab/g3ggRHYxWcOAhFQR2/9Q\nH/4rfQs1ORyVnozBF45gxAASZAYlYuJ7PlkHUEu/8yTVjdZVRL8kYRD6JqSV\ngk5D62wsgpo3TRUH4zHoM1qLveumAZc/Rn+BTIBntMVwsPohI48EWMF0CUAV\nAtbzhDN38S/fzUk2SIuC3jv0zE7Li4Wz1g6IBKp+9chH2P06+ltS4kJlc113\niv/yjaNnjDUx+wwpDBto3WWO4a42Q5AXhIeDubSEgFhGQ+/T7Pdv2mIMECcp\nAqD/S0x7Uak+Al9sjCIFIp9cEApmyJUjB34pouiHxSkd0xKiCMu+Vxs7+m3D\nDBjc5jiqI5TgdygAHuGGspWzTAVzl+wFKSWkIrSB3XHtneZ3/96ueev88gEp\n4ZF0cpDFHDmL6OWmuBlhrOGQByBl4cWZcYqwYz1JlFeykwLyCnppByKtJVfU\ndaSijOYjmv6U7aS9JPV8Qd1ML+VDRuBEwh3vzba3M79QbhHb8daehR2j7DGB\nxVL4knOXzSmGpeEpXBXiqE/1wmtCt7dyfj9HWk7G/lS9h7Q90pyIDTHIX/oD\n+ms2sYJbjZZTZ5ufj0Xl0UNr5Rj8PYAgj8qn+ImZXb+1z65qwjMDMJzkqbop\nLDWx\r\n=j5sD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/density":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/tab-scroller":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0cde52f5a.0_1616457877829_0.5436818062353055","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/tab-bar","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30117695a45887f841de28b34ee9593fd063a18a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.48f4b67fb.0.tgz","fileCount":37,"integrity":"sha512-qiJH9CiCHEFYTrleB6lHqlDGWV3dQnvwGxrSZqrK4QRSMIaejfgKnsfUCCyLWoEE/ucg3YC3vXT6AotIVcFM/w==","signatures":[{"sig":"MEYCIQDCJfSp6kAF5yLPGrztBB4q2+OUHPlLdEbB3tgCCDNqjgIhAIMIc/GEsp+JifyqEQ0ffPiEXIG0T6D1zDQFJ1n0JvJf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkfWCRA9TVsSAnZWagAAL20P/0Q8yw+GYahuMc4fyBZz\nvyrjxbf0fYn5CCNHh75rKsV5AV0uMlPM4NGtI9N9M+nJcBFAm58TE8pIOKJG\nWllMla9f2i412ILAI43EgeocbV+PMgAhbajUXB2oHUEub/6FX81xWKdPa9xM\n67jxx5M9LozsEAZteIMpsbRWc1cqNgllO8Hpe0KAttj7wnkOiwtaSj/uiqPZ\nId37ca/nuTlG5No+UPtPtiJmUYJC7uMH+ZOJxu7V4kG1Qp7pKQFFce1TI4it\nEsvw0hzxRUk3OMIuZwJocWFmGe9zRMu1qiArPa2O40igSxEgk0VMLpn6Rzig\nlZtfKWg3j5zcrbWE9ojKm1SUbA4woGKPVwJ/Qj0rHPwU0GVoKgxYeO6BTKdZ\n/NXy9PugAnfNxsLej22rB4ltyBSV4txEedLBqP43uVIB5MysLZxHUaqzflCN\nKnVaZyUUXRznDCpZ3HxQbdVuWsT0zbdDvY2LH4vvh218/cPxBWwPxEaSH09i\nq7iRkf6KFzp7N8v2kqqRNXcX8D+yuwuC+zZzzQrncNMjgJA3//sxyko4wJ5T\neHI0fnJuwi78zIaU7vNY1BymupEzb2JUMIvgWZ1vZg85D7fan2cAUhHw4UkJ\ngL4piL5OpRvINWbY7waElxxJJ2/ApGTt2nhTp2LQS4YbjxbgitXkWwd/nyLA\n2h94\r\n=Ydl8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/density":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/tab-scroller":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.48f4b67fb.0_1616529366233_0.6847136555421109","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74ca1121eafdc1a4d35e27b8c13be51e8f353de5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0b8cff734.0.tgz","fileCount":37,"integrity":"sha512-Uvc2waqgi6zZnsmNXTAv7POT3qnPcvGm4yNHZnsCALqnh12xEdYd/GMNKtni2AFHSWsH7pmHEfbDHIhuskTRnw==","signatures":[{"sig":"MEYCIQCV0cksw6V7O4Bcf+vIz4biA30kK2r8YFbK/Xt+0Z03OgIhAPpMqoAMSnfMwy9jQNs8RWKcOLL8iQuczeIxZvpS7qlY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWko7CRA9TVsSAnZWagAAAP4P/2PWXzknBDzO+WF+Oza3\n6mBSRpvkZnJXmMzcXuXmD+ucRXLg5CryJktpIo2ftX8wd3ip0KaKOrPUGc+U\n1xc3TAy7vlZ7fFLTQkt9ZyS78/uaO6HPYGiCqRXqD2sQu/TeIP+3h4nn1nhi\nzVqUlntvarMYGN+0i8tl6AVHDy3txKAH7YrzNz6zwNWtqtQfwAJ7WZSAKCzY\n5ZwPv9ZA9Nf1+INIKrKzQIBctLFiDhGElu2tTxeq1WWGvjxdanjhO6wmqesD\nt4EuTwOWb/ppAT5nj8mJvqdW7eH/OaWeGNtTCYZdX4pCMJD1eGzFasVTel0s\nBBCA9BNmjLMZjBVSYmCZY4nYB55rZvetjFQWF4jrTtp79X7L+GzKsGuT+ps/\nnxbygsA9rajKIeN+mlz75tvADhOmOkfk2VfzsVkxsJ2S18FSNnvx0wiQcVpI\ndzSwLSzKh5gxm62tO1FV/x1yN8EzSXpRus2qZxIFMcGojqPLEgpKPI/XNCX4\nr4zDk/s709gKXiOLhjKHILeuSJKB/qrihnaRPdEl3QGSKyP54A+75yA0CvQp\nWRez9NFEeOfqwBS6rE79hcjonSoIUpMlLcdVU4lNoZ/Un+a0VmFHmCRcgZUb\n0hi8c3B5ULj9Ia0pWCq8ouAWGniposF3cNCT0G3W+AFy0rtCCivcQJuw5ytA\nqXwA\r\n=tL9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/density":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/tab-scroller":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0b8cff734.0_1616529979014_0.2626925990083906","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/tab-bar","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abb266084978dc8ff51f4727007210b99ffdf52b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.8943b991f.0.tgz","fileCount":37,"integrity":"sha512-ORXOzaz3ZtKvIdrbxB+f8nm74GYelDLZjFu+lZhDguqONJq2TH5NpR7Fja8R8ZRbSY5CM8wFL07voQVnEh4teQ==","signatures":[{"sig":"MEYCIQDRnz/nXKAnt8EqsC0n/ea4fGeSwdAVLaCdQ935ya4lOgIhAPb+0Cr9dknMsWeZ2kqeizL/3qd+cifistzcD4ERuEa2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWlAdCRA9TVsSAnZWagAAa0AP/1IYRXsiA+7PVrT9s3Gb\n43hwjOsNHAbLNIJamd+0IPqw0iSYTl5jC7fsJVnxItwd9D+I7XuHZaEJTIjw\n8NV03YG7e/aWc0ln7wV8HEW+Lk0i8WRyu28AYYgYH0xTPdIjeYctn1NOiKA7\nNu2mlRJFJeR5N1YPeBiADWAFQcjrBb9o8LpfbVKJh04RGA8YuaJzJCc4iw8R\nH37dqkLxkwOBY2uXFR5JOYhfaTNJOfa4WlqyzG3p2f3shaM63axrXzqr8HjT\necNEsDxOyN7t2HMy6Wqmykbc+Ynr3Dd2n8YOHQN0bPh24OQ/Ql7pRQPx8gqp\nKBmkwITd1illJvX0gTFcQ0tNrB6ZV/KKJq0v+jwSOUTqk5ZP7GOZGO4uiTkd\nq28H2eOnV7kHvHJB0BGGgZBR8n/7zyqwO0Lx72PhPAzl9XwReIOClS+frE0s\nqEtvbRPmltX4/UKZDWGt00dMOloUJUpe3wCrBIlvFUzRoGe7OKlgLIWZaXZi\n8LtbIvmXhHng+gd3yl3KfOAYISytloLA9cuNj9TPhry/zY6Ba0lkNKjK2Vse\noHDOboR86409Ql64C3aD8tq1Zg2/FvDAaL2F6FC3zBk3KPhzpuO9CAzKQzRe\n4Fq0ZeVXcjQS2Le7iLBeSbSP9YX+XvbyEtHtxRajcv9Dgy9chYY1W5fHg+hm\n+KYR\r\n=4Cp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/density":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/tab-scroller":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.8943b991f.0_1616531484873_0.794278109759085","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d654201b04be9c4ae4ffdc23b73882307eccd91","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.3955d8d3d.0.tgz","fileCount":37,"integrity":"sha512-MhV9twuHXtEtRGbaPMqfTe4H7NvXmrY3md0oDqOXIrmjluNv+MixqdqFAvZuPfpdZcCFdJ8EFrmgJEd6hbIKBw==","signatures":[{"sig":"MEQCIFXB4fsojt3g8fWoZgZEog1y13FrBmsQO8EgUbaxk1Z7AiAJDAmb8+IjZ3BElNI9UzY/GX61zmK2DPsk2onCMS+33A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5CBCRA9TVsSAnZWagAAsQYP/0Xat5HOHYuL3Ndl8IiW\nBY6yBNkKQISdew6/NR/X2aCYMyKE+jxdDTyoqi2/vBuKksYa1e7aiIu3NPRp\nojOOXNFRGWxLET/JAwFLBay6X4tozHLCjoCYe0oizDVKRh/6EG7OZpLAn0WE\nB2DGxp9SLcer4E0qoeAlOcBF61EEZp4XSRhl1ojFW9tTk/sdz0GjjpnlmyxG\n32hqccw2R4WYfjr96pRqLpv3cKoSm+FeAN6AZqTznnsJ7VI1OPsZqoZShb2H\n9B4cN43pZOSMUSv+Y+ijR5mBemsCFspHNtNoH6e63a9zRt8937aP+P9vs+Ih\nILP6En4sWQyWn1LkgOEDfdIDYsm54jWN0k5t35xdKbRwad9LD/GyBGOTg568\n4JTTrXy8H84khbJNguQamn3EHusD7QNRsIzY9sfS6DN+kBNQeMyRffKPkUzq\ncSF8/B0CrEr6MFSzkQkqts3llYSSa+iutvtjMzsllHl3RuYWudXuHga0deiE\njarVp+IVfX9ztLMwqLW1nKxTVeAiRAiGy4m2cPXJrMcG4PmxorZaFrdL8jyp\ngkLGqggmMFJnxXou9sTL7xKHhCtGAE+K9xkDCyK/lLHFp1MJ2//xVUhJhKX8\nb/XKAqJBx89TnWVgGSLa2a9bBMwIVqgGjym8YvRzN+m8rQomLMSoE4ukzpp/\nMJvY\r\n=7m0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/density":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/tab-scroller":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.3955d8d3d.0_1616613505379_0.18498364059727046","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f7ce888f8a47f6b14ab0576a090b120b62f0a3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.23ea2d85e.0.tgz","fileCount":37,"integrity":"sha512-nV1J0j/utkFiIePtznFQ72OPY7b9nDeKOrlr7xutOevhXp64iLWvEvp4siKBnyvBqHvEIjcX0JsJUAVuzm2orQ==","signatures":[{"sig":"MEUCIQCgbvs5ggbwurpYWmWQgSfm4q514o4sysKTpOu8N0Gd4QIgIcJfsQf+M69bDhzhfaQJuqeWNk+m9ESVvkVAshnOWwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmoCRA9TVsSAnZWagAAY9IP/1eDm0GcfRms2OUT7PVR\n21jk7SbJ9nuwYMKx97ucCJ1/4CszVA+5IBY9xm2JjxWBNrrS9u7mbW9kG8gm\nPYW4M92TwCCgnFwRoYWIIicZEG6IBiVpQ1viozC3qJ0ClsAB5/5O8agWZ5Nt\nYngK7R9JN+dBd3FFXA4Gn5evoAWhElfVGpk9ITYQ1hAjRrnoOAbDSjwM2OL0\nnvVYk0Z+xmdaBf2WuZnOlWQv3kDkoEb3zR/CYTbMcR1RpRlKw1PV4o88Kdqj\n5Txj36UpHOLU2LPcaef7Qx7IRwhulkxKh9QGoNd+UIMBD7X44IhB+ppvwE4N\n7Fu6IfCdc2bdObSBdksLz9nPep8InMGD0bj3erBpTcgikp9iaddWZqGKT60h\n6LxLU0250LVALIgf9/7+lwPcEG6zx2ozevttZFKZnacVuc/0AXTZzyoR0GL8\nwtVk5YUzTsTyziS6fxMwaXHkreKDjWd3MOIx/4AWyIdgO7Ked6ltmb5Qi/tf\n5NZ1RT0XiIXCYHQ399cVVvttZUcqRukaPiXoAvY3GSeb2ssuN8xkA+RfQd3N\njh0lKXr5Uz/sqzrWFzKWUT1pWV8ycAuc7XEj0cJnjpE6BCd48sBFB6N6OrSz\nHC7acx+O4D0N0k6Swt2KZnMFj+vqPRKPP3sCLGaGSgtkYmu3R9oFHDucNSKu\nO3eL\r\n=7jLu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/density":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/tab-scroller":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.23ea2d85e.0_1616693671744_0.050601804361922964","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/tab-bar","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1cd9624926f86a56c3081c5647afcb2c39094f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.4ceb42220.0.tgz","fileCount":37,"integrity":"sha512-mJw5iPB61uZB25/ia7dc5zXUEgTiNfNiQflgrAxoSFSUb0YtxHbEN79KIjMnvURAtrPRKt3WaJRVkKdcmxBJ9Q==","signatures":[{"sig":"MEUCIQDnuomewMAI9hRd9rgJ4hacjcVmOy0KWGOGFhBzBlONfQIgE7/VwBhtWcxXxFL/JmLC+gvlB5qKgbUTbdEiMQDlBgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZRaCRA9TVsSAnZWagAAivcQAI/XNVXZzHsWHCFgfcbk\nTEclja9RJjhr2r1CINfQkjKN5gaBxKegtA12viZJOv2nPVkFVrVLiAu4Ip00\n+lT2gEpqGMcBOkG79PK4w2d0fX+WGiigToVt2k134Wvdp+EJKr6wJv+HAK3d\nD0sBXXYmNdrmWHgJiv5Q5zhGBhiagz5F4qN2ciXNg6RZu1Iim2Grv5kiFyIX\n59ns/73FUtu0E7Uhyabxd+A3+OSEQ75ViKQ+Q9NFe3Pgp5zF1GWQUJIGP5S2\nJCIVEMlnKBTuBOFcK5Aoy6R7y5lRUAghXsjZCtnYYX9cvtWwLGsVKW9Ya0PJ\n5MPtrU2x7tumVddbMsNdi/Ole+Ofo62XFH/dN/O/zLofpTT5dbjKolYhng6f\nQo9AaFUGWZZrqL+sswiI5iGKBEPcO68Z8sjFIsyyiyiacc5sMH4H/ekv8ksu\nj5KWbkT9jHTp+sQrrQ1WynDQcmw69Fea/vAGA+iRcUocOIfxEikb9tCABOcb\ntu1Pavjg2PrzAsYqnB60AnUrWOoV6UMik1wGo2wn6uiu5G2SKejGfEf3xCX0\nDL7HnuHgVx3i8MIX3cJFuRO3w1GnmmwXwR/dmimnqJ7B4pF/w/YB+8PoNEGa\nVZYN8SpDPtOxENW6zK9QlBeOl/bRs6KI6WfhFKoFmfwY9/AmZHK/3R5ssXgj\n9BQw\r\n=7R+f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/density":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/tab-scroller":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.4ceb42220.0_1616745562420_0.4434835707159528","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/tab-bar","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"198656cee00899661df437ff5709798dfda2006f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.dc9c84023.0.tgz","fileCount":37,"integrity":"sha512-2c7Yj26hwB2Q3/LWJH/3w6ggL+o8ndkb5AAvZC6yzzzxb8os4SIVGURtF/GZB0s/mIcSdvpyHfVf+yZ+c9VWmw==","signatures":[{"sig":"MEUCIQDdMs+7jKB9StyML+uU7MF+X6FgOJTmxDlg017qB2bgDgIgcpqjYAjJjBHJCM2WoX+cz4es9twNKC4bWITastoguLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2TSCRA9TVsSAnZWagAAlrgP/3l2Aj/CKpx0TvBUgCCd\nt943kByt+b5WeYAfjEh8SuaVjy/YSFY2s7M5HrAf9tP0A24YGVweE6+6n78P\nYtYY9e0rxacWRozb4Xn5N6nokxskSxHBCmYBTfkANmCsO+opOQlrsqZtnjyn\nzORPdfK8lrQ4LnakhAtTnx5N/L4pNWZuIn7z9ppu1UF1sjwytaKJskKl0RrR\nmO5CXZYW3KNKwmYqqVskGCG9Q/V0FCGnzAeDJiMm5AXkLc6n1NG3RvTJpCB3\nE76kxA4lkq8G8K7qdhMi/9Hl5mxaI4OZpAljTUbvhk4wwA76qe+PhbLEBFMa\n42HCOYn4+Dk8I8yTByqaRtyCBwX5Zz4J+APfP64pXgAeasAY6geLfnliDReq\npLdSpm8uTRcGzaAMr7FFLoDB2C8VweGQYKKuvRavlW4VHeBMYtP3Ti/QzMfk\nW7gTYfCFAWTxWUMCGbCSb62OgGrEfD0jY7PEc8A+M9mysALIWooUZBmVPdhw\nPVpc+yvtEoZHFotoD3wZkThbBX2oCmY0y3w6nKEjS9I6JRODP6M546oDn11p\n3qy28Zcmgj3XNKTTw4BLQEyaAJGtLcIi3tnk0QdH31EEr+uqjGRk3Kd2LRg0\nYLFHe7Luc8vnKnTOMBepsJNVLF5s1dYi+QXWB0Wun3f+ZVhi4U5sQMkVgT+H\nv06b\r\n=eITC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/density":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/tab-scroller":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.dc9c84023.0_1617126609669_0.26873433856030915","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/tab-bar","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e73de80c6eae821da7b9dc8d52bccec3341f336f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.56fc26962.0.tgz","fileCount":37,"integrity":"sha512-xL2tT8UAiIsUHeru0Qcjtu2YbJyBPfH1/9Lz+1dzXqqlz81Uqq7WZQp/xBk+nt/uUCBBia/p+KW3fDQfZVJRrQ==","signatures":[{"sig":"MEUCIBHvjWeEzs6py2B1I+AZs/Eo4x+cT2I+2dSUBMksAR6+AiEA5PILlzehQb9cOzI26EM4OVeIZmRrWWsdCXCPtn7XWRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8C/CRA9TVsSAnZWagAAzBcQAIUxMVefuEySx5PaC4nU\n08VxjGfjVwqeFzdzntFKC7Q9AqA7VBZDvXPOkxayzLd7nduDPASrxS/cVaKJ\nBTRFVA2/WXAlBNPRMoofWeQ473V+0wraNzWqIjmwTnj2uY3vAESy9b4vdWRh\nA3vghBnfo/WmIXpy1sikhk3Chg10PoKalf5TFXwDWC/2CYfK+rluOx5Ek6JW\nIKGOcaK/s5mI2lFgO4q5iFfLQRyHDzOvbo6NArvGIcy4sz6s/ZN/+WPdtpQN\ncN4sy2nUuhoJBw16GEYT5yon9gTTq5Tr3WhZ8YnBwXdkjGA3B/583k1xPIRS\nXaOGnrcMVn81MgMCcQ8WsESafCAOzi4avXGiWa2ow9xXBeu4qwl4LD1BmhFx\nvjud/R1LCve6MFj78YG6EwXwDWFGU0zU6kRXGYIyJjleIi7ThOY2nx5GI6Bl\nl2Q0c3MA1nmD01ZhT2fUqUtH/NBy7osAtwEs47rgbK9fQCYo1SXFl3VvbmCx\n/sozqm1JloBFozC7dfYsnP92CoimHtu6Th29TDjgWQ+IKdw5HrdRw4P6K0bm\n5xE6Dt9zUtH2JtEovAKUUsX8FrK6wlcwUQm/lFMrlSDTLBBmjm3hd1jXP8zo\n1i6gsOd3DnawWBXZSdGrRhK/qN9Knk+vN7aOU8nJqG8719+3FaNowd9Ox1mk\nR4LK\r\n=4w7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/density":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/tab-scroller":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.56fc26962.0_1617150142782_0.40977026894085067","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/tab-bar","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61568715267defc033a0f7710def9ab5fcb9253b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.bc318250e.0.tgz","fileCount":37,"integrity":"sha512-XwBqAyHz3hrupW59MajQusld4k6zqVNsyJYFj8koDJ46QGCQeDQxNRQfN5Dx2io9IxvkcVoTxoI8NvwtoPnnVg==","signatures":[{"sig":"MEYCIQD51kmC0YmkrNYeKXGDFhPMWwYTRY63wDAstpyyTDLxcQIhAJYB+BV1q/F4K1HJsHl0mmvwA/q1qZZNw8WqbmopCv0f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9HTCRA9TVsSAnZWagAAE70P/3FCI8b6cQWnEfhLLy9q\nR+fn1TPXY2D5vnDP0ogNJYa4G3ORCy5uLJTYUqGJK953w8jqrlB5DruVmjiC\n8PyX6LuVdf1+IDYtpkzYTtBxePIPZAqtMEKCBVKayMBfBkf7g2T3wmS8XjgX\nVSK15boKO/geggiF7YA5rmFcXBTqqsPSq8FiDe+3YnQ/Rnl0NU8LRLIS0NOH\ntqdgBQawgOiXghP76syHpffzh4yxc77KVnjvTvVjRwQ5fa6BbVSLJVsCLdnf\n8JLghVCHNKtgkJK0zM5ahVH5SUdf4O7XTewit+NpKKC5u7fZyISHK0Nf3cVl\nD0RKIB13y15aYc1y3vwsNAf91GZg0fWM++oDxK12xRuJYI9NsU53qJEeURAd\noPOxCuJr1EhU2xhunH5aVMyxLLYi5Eed0wg29ENC/EbIQTsghi9Mg8WV8zMy\nnQA0IKqdfPmDlILvGS1jgUTmb7huXXmrbwbt1pQZCMOlvw9b0NDzZRMYghK3\np2vxSVrlRtPwKjZlOqnj3SkkrSTVAzlvEZlflOJ8jy+zq2pSKnlWGYK7UcT8\nvLCnA8W86To25il/Ezao7CdV2ZDr2kger34dfaYwxLsJvwVdlxLJCPwo7q+h\nIHPGeCRHvL48zPkXTod3V9JaOXj+/IxK9MHr8Ff+wZMrEwO2JsoxNLxv8kIu\nQwdY\r\n=MGtV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/density":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/tab-scroller":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.bc318250e.0_1617154515497_0.07345629248262764","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/tab-bar","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0e0d90e7ec75a245dcdeaadc828c0189d981f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.edaee19aa.0.tgz","fileCount":37,"integrity":"sha512-Q0HH5lrJkz1ABUr8TbXqnLx/lHk8vd8luDvAEwc4KAj2jR2aIT4ux4e8ljA9vy3PBUozBgW5F6jbw1P+5UVyzQ==","signatures":[{"sig":"MEYCIQCSY6htlkdZ0wu6A2z3+GODxqkeU2qAAveBaC4xNJ2ZTwIhAPC2uk+4RJLNtGh0BJbO1wTJ+BwrCreTUAH8n+s/dx0u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9q4CRA9TVsSAnZWagAA2NkQAJ3DL9Qw9+9HJlTfAlZe\nJmXOXT7nJJXr+jC5mEqV0QoEsxkKE06Vhj5UJo8u/4EIYWkIrInSQcXnkpTt\nDZc3IzdTe6SdLf8oogAhmv6DAITBhK7zHBRoIHGZk9SuOOykY6Qv5nnp75oW\nEV/B883xOElG9BmjmtdYGim3yFaUva3jQ4N93cpJ8x4AbPPqHCCEV4WVP3ln\nrcj0VdNEFC+HeqSyjXgEdL+8BiD0VbAVdht+moB2PwHRqkvx0DjgAc4VFKcK\nMjfDdtLh4F527S9Ez7HQbQo7eS+jSH/EkP1gwibtu/a6NHVaS0PD4qC8ptDW\nbON4AaVzRUebUmA7TuXGa82uZASxJPkgv5xPwqKyQWVPaos9q4rX1a058DBC\nac9oXQ+M0ODQ/LWfB6PAgrOU+30xqZyZHMmDBnBWn5j/ZbRbVZYSI6CwqgQu\nrMOGyirOOLV70UFvYgys7gOtEC02dKPu6p8hpAvoQN/A1VMgjilybjY9IYUg\nmWe7v/LrNF83w0AkZsidw5iNWvjqEzwV6ig1L7HI1QwUGKfJuKKOuoyeOZ6H\nJGD4IURZERoBBgMSNqOknCH9207DG5dCa4a/Cjs2IBwHQs5hb9irzd30Eg6W\nhqvRa31bhWCB9Z1uwxVU8umnZG8r+W64+wyV0SEGrAZK8nIqapMHlNKS1LBA\nAZ7Y\r\n=V4zp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/density":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/tab-scroller":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.edaee19aa.0_1617156792372_0.6986217687696561","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/tab-bar","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07cf896f458643940d1857fdc98ef6cd4b39b155","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.24609b822.0.tgz","fileCount":37,"integrity":"sha512-nJ8D6OH7USHBW+LNh1ZFtQ9ePbDDrxjD/57kxpqlVxxuddUM5ndgBdKHvGNk8L53mGyFetJQkBOBx/0yBiTiEw==","signatures":[{"sig":"MEUCIGY99vUQr7iorA9X0kC7xM1k0VfqHszI86zrN3kSd41YAiEA7CiYxfZlzwH42dJJ7EmDqWwAilAR4UXuSMLC2+pMWzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJ5CRA9TVsSAnZWagAAzEoQAIfBguDtRBshUJ8CqeIm\nZ8jJrr82TeQLyJGW5lx5ZYmGv2mWHK+rpDV6Sg8LNcMGJx0YZyMd/mEBCqws\nQkOFK6uWFSDaHiLOB1Br4BhLe0IEiVT3JfyKeZArLOasuy+9dLMWyMpCNhgS\nx7Y4piI4Twf7F6vyvXe8albHhEmANwPc/D8lv0kslgsRo8Q8BeudAx9faM84\n2pur+e4r9d75aFILMLODZscapcT0vC4JLQO/m8GypHfo0AtAMzn0SrAFIm99\ndcyZL44eD1cz1ponl3zYa67VuntOXo4BLwh4bpUc0MXhOU/YEKJt9K9nZMY3\nk7q/PqWOeY5dMjubwKP6hR/eC8W873pRNqF4YVahvpc/NPuaPEgGhgMkrowy\nKjssAKfY6Um0Vg5HJGju/A2OYCJ4gnqoyc2KNWpw8AKHZ9UrrDUQkwIlt/iL\nnuF2w9Twk0wOfy+0nI91g2WwXYQflvn8wOKPTkKsGifHg9Gm/aeSdVvFMD9l\nDGjnwAu2kQYtz+c3r60XIfyyx3RrjfCK4+rOuAKgltdnYP46PCdTmG7WmhEy\ngKzylMEFwzCxby5wXXfYARXV0XfzBd04CcmN09IiguZCpG7bg66ePRAt1Bx5\nQ72K5HKcW6ThMJKIrJuvQewSfNui0qscamAZUU9znDHkRzqKKNqBjMLAL7vC\nFI8U\r\n=05gf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/density":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/tab-scroller":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.24609b822.0_1617224312636_0.2429982131608024","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/tab-bar","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f34397bd124cc1c0929ff3ccea6b6ca74d109bd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":37,"integrity":"sha512-aZ+2na9/OCcD2ZMfDowY3qs8Fkz2q8ijoQpscHDr0Au+aCiXa58cCGuq9cgzSj6eTNjSYHY3a5gItNw9k1WbtQ==","signatures":[{"sig":"MEYCIQC9EIpEMWuBg2jjW+YanVFxC4PQW/T3F/i1Dyvn9/j9UAIhALzKivxI8lhnm0I39TTu95KOmf8StwF7mnp67AktTqYl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeGSCRA9TVsSAnZWagAA8IgP/ihmeM2pIwU54PngivY0\nrpID3rJemRkLjZIaIv9/OmGZsbmz9b3oJHFhu0eTg//f4WP+FdZak9gzPo+l\nw+rWALKWxaMx+OCuliMaru1T9mPJ+XbeMVaihard4uXyN1WzbjGvUtIH5xjD\nO2715cHOrAm7L41EwudHz05eUMj+UNICr4+YPVyHqAHgXJdiQE4DspWD3HTg\nWUcLZNB/46vYzqAysUHbSu9fc2PWOVkUroF4TduaKyZyAHEQry8fgGSJGpQl\naHU63V25J+FyEHwFn3maqN5LXjrJVzSLsuPTmKdPKUMu8UeSTbi7hPE4MV0A\nLv0fq3Wlwk1JMYqwcA1HwVph7svqCSHxVS0Lszg9RQEshWAbTwnax9XV1APe\n/5ZnLKhZxzfTzdC4nW7ixfhqT6pqpJua35UPHx5uaGTQWgqDbUpOPVrdMc3e\nWWcjfGBueN52k1hYcBzJBWudhzIjRdx7qvM+Bj8NxCWrdGha69YW+cavcwr4\n+WIQHyDsO5TuK4rA8JoGzudotF6gifh8oLJgeSIsk1ft9jA1DswpLboWo+T1\n/c1X8ntSzwvUwKYIv4bam6Y5sWSAluy5XuOITrBHCtgvNxyJEtjttP+En7X7\n29xd9x/buxo6Nf/QSQc0+zjGgsbpadhDNeDwmpfRtEP+noFYKhBiGaXJsTYw\n3Ed0\r\n=vpwM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/density":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/tab-scroller":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.b6cddc2b7.0_1617289617913_0.6614839044131078","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f7bb4cc1d4ae552ad634a4de947123140b1880","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.94937c78c.0.tgz","fileCount":37,"integrity":"sha512-dAyurqtacYijCtJJVRnB1phgAYB4BF7ihU+60Tz3omOnaJePLkfHIcnmZCYH4MgFD1kef98VmO5XM+UzxItE/g==","signatures":[{"sig":"MEUCIQD97Jdp4O/v4vjz1Uf+D5tznkpqAX3BeOCTaxkzibs7OAIgMq7THHcVw5DwRpvQHliL6hEDuCDiGpreXG7sTYwmPYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTmCRA9TVsSAnZWagAA7PcP/AxDBnroirudieB47Pow\nZ5BvRhUPlCKcxj2OFgNy73BmqmI8fAtxLABdqwF8I5o7iybWW4bPlPG8iv6K\nCfBO0unArXWiJ/0TjN+beJCP3f4zrrR4JeBdHgLSRe2wsDfomGdkjX+EokTA\nX/wSJ2kgWdzV5W5pVEK3nkAD1b9xJxBXpQr3zsny30x1CElW5GLE96gpmLAS\nuXXOtTj/govn8vh8jE5eF4EiduJt9n0Mg0pjHJOUiN+EUvksur0tWEgAcDQ5\nPYLjcpSX30ex2Y+RCmLdH5LYlhAugcM66Lf0PeFGf2F8mXqiaA9eLfiCd9d9\nO7/6TbNuZwokkmPaBe4Hg2RPJop7JpN7x3SjCoMCj8sVov+9lBeQuld8OlQD\nVtavOAuFFS9fsOaz21gbQWpXYPMNML0qLOg0Ga3T/U3vkuezdmuXk+Neaxmk\nBnfRHV++RW4/bEDR22Ke5Hja1ewGuYnPUCOAcy1vt2UGAjSqWqqffcscef6Y\nd1HZTML8u3Sa//9pvbibf4389DhFvFjAiVWcOpvHCZJfTmF+uezzqa89+rIr\ndzLYooloaXb7qCvjI9G+kBVBSp4+0FApI66jFxyq+ZVQqr5F1NJDcyetk/I5\nXmwVZhHLALrtjbu5tKbxi7z8VqmPAWSbq/B7h370CJAqizlM1Xy+nNYTj3so\ngW00\r\n=JNgg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/density":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/tab-scroller":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.94937c78c.0_1617310949977_0.30013667780444586","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/tab-bar","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16088c5a43cb1bbd6919422d89c0fa06c3bae221","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.e7202cb57.0.tgz","fileCount":37,"integrity":"sha512-INDDwMk/6Y8oZ5FZWjOlIzuBdTxEZF9h0CRH+p98N6OJsxR64W0hEJPH2FDcUfq2QL45g47E+6zmCC/BmZZZNA==","signatures":[{"sig":"MEQCIG6RYXfuYrTqN6vQth0VsuZfhJxo6nhcBOgIPKO9nyGNAiB3KBWxG5g25dvGR20Fap6DS930YbXTJskrwBkZAhjhCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk3NCRA9TVsSAnZWagAAVa0QAJqyk5rIwMgiBHqhlO1S\nmQ3h/JKgnjRBBe9VipDblbfLzCE9YdwHOQz69s16E5lALmA53x1XsP6M7bK6\nTy7wq2270UuzXGNx3SKi9wiwgwwJY+0Mo59zu2FtiDoru2BiVlaiPLf1S1a0\nZtytsg1uGn0BFZmezDozUZTBBfNfekjPSffdcTv7epLt4L0rv/MiYfvngQx7\n9jiqt14OgEeAFb2ycWqoLOqgpEYs0k0Nxsdy/I0HU9TK68osLAc2tkgImnXp\nu32obj10lPd+41Z+r6cQgBLrO/akk3x6SCfDVs/6bPED+UWmJ7MezBNGENA/\nF9e2PdGGYS59NPzXtaa/T6ePAjVGoaTalUaWXacLD2/7ETq1Wb7/N8S33Nic\nSLjRRhYRrKJYaueijD2VLAaxjINjSYGRmUvT/pAVJJwziEfZxewHYOJQ7pkv\n3+npU/sm6vAEomw+1xm8BK0LYYbMdOUzh2+FOo+5OKQ3F6eKq8KtOm1ru3pD\n983XO0xk3HU9g8jubVD7VsM/FerZIFKkIjGWkdPDUK2tJVzXtE/48vAY8XQr\nJnN0xvDEaKaPJVFmi7XRdiyRC6tZryQZFt3dMEbxaR7wbsh/aiqhMKJbYPr2\nZf2rdeqDqOvCAB3CnYe9i67bmNeoaNIKz6B69Y+Xc1u78Rq4CRfunbhicfS3\nPlrt\r\n=vV1j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/density":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/tab-scroller":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.e7202cb57.0_1617317324532_0.5400164348722509","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/tab-bar","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f937d70e19f8853b7e2effb42debc34d20a0d4c8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.1f636b205.0.tgz","fileCount":37,"integrity":"sha512-WI4YY4zw00jnkKRDF0wi4rSdh2C8DnD4vvKgVRULldrx94ixBb2SOxSHOSO9JKTdcLgVn/gcIp4GBLMe2bpKAA==","signatures":[{"sig":"MEUCIHzP/7i/u7Exd8wp42cleCtpcyahVRhfhQEhMkW9FWSbAiEA3zgU3X+sl0Yl7ifMxRbNPKjyL7/wyM9wyxap8faeeEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5nmCRA9TVsSAnZWagAAblQP/jLQjVMxJAibS54AMqR8\n02kmyEKnzPZg3wb2eRYVuAZaTS/iVbXVaFNKa3J6XueOpc+LbNKOpwDBuVkY\nLpPRvXeE+k1HyXJ3mmTpzUI4glWJ1pzFOX9QyMu7UUtp/RuwlEiBxPgUA5WK\nknr/ZWt58QVMot52lyuuT3F2brzHB+3uvJZjMeRMwiIWBDHep6BvAVBkuCft\n3yQZfy+UEV7BbduqqcqqOZk0dSwqDX1rNwSKYXsY+S1sBq8k26Ii+QNwUW9H\na5Vto//aJS8NXpXYklwGHYiLLGA6hQP9F/RJ8ZnpV7mIjdjvP4OnSjsc+8f+\nDM4nbfAZ9Tk/fCLC4LaxZeEGwQeUO/W1TGxTEaYzRFsLCo4+6Rxx5bb0dEo6\nVAzVYmc0bfhyFkhuuo3x7mes0LEZ8FkEE1mOxkPcoJSbTMNrI3YAy/tBaQOi\n/SRLshtOj8jF9corSoeXnNFvFIOD+GBstHqxYY3EOOt+tQVaGUtCNhzmPQlP\n4v9+Hx4PiREU63ombK7rBlS47Z9/3EL1FjrYhAmpaXf3kqhQjP5P9RdLRm01\ndesNTTBL361U4g+Tz/CI9vmbrkCbx7Cn/NNYhjzInMDT5A7N6hcIul8Nl2Qk\nWD/4c2S1SMvl8/1JzINWDnB4yMps688KCGDnjbbvQp6Ep6QVJGzdNCPhtkTi\n9mmE\r\n=EaVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/density":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/tab-scroller":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.1f636b205.0_1617402341629_0.0223632689280735","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/tab-bar","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c271ae0a3ba24c97ee81b1a54c4874597b5cbb5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.94f50b260.0.tgz","fileCount":37,"integrity":"sha512-FJdpJFv3f4DLPLhjFhgtfQz1X2uixKVLZkYnoN7WF78ZUEpo9eA7URCLtMt+RhUq8+PA6PWM6UL16UsTHcnQvQ==","signatures":[{"sig":"MEUCIQD5EynN9sIpfCPRu61cqBHUihtmVkn9x5yKNSG4D8+2RAIgPIerMSY6u7uVei4A5QiLgl0O1HD7LJocA0Oz/TrtjNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayeICRA9TVsSAnZWagAAJloQAJuTcvrUQH9LDkoljckJ\nxSrQTUAjIhTKvbtv2JLTN3frq+9l4zK3gFs8wKmifhqOBGVVY5hBvqMbbk2M\nFnAt21nicCqzOkrcwniNXSy12YweIIPsMBXZtDufaC5taAqmfXTbRGEU4ZJf\njFj7kOSO+NrYS1MxAxR83R/0D/y8hzVisDxrE6AGDoI/Zyf/rSktoPWhgTcl\nK1edmEeH/NmEe2YMU3rF72lSYIDrihcGwF1BTPJeZXEgP22UsmmH8pySJFg4\nuvmghJoRLeOlcHYNhAOtN4LoErRExIIZbd6G//HlG6Och+HtKDSV88mbmiGp\n/4Ab1lbHeKbbt3fvtYhABfGtiyy26D4Ola1VZ8B3rEuPkF+veui2uJhToZM8\n7LcSnAKz8a/uL1JyVERW3n7oqHwXZ2mlfBz/GTu/OBeGY2JKyMYaPnqzExTJ\nCRhoqB+kAwzy+vKiaXPwMwpdqXCZof16Te3X0Bj5EnfjANAnKR0PfGNiL6DT\nYR6wXs/xw8xMKX6pPd7kFN0KklcDHLObKTqW7YHMwgMf3UOHNPqPLbKbKojq\nLKmvQGM0lWd/EtAxoDgdy49qU0HgOSBPyWfZZ6+dATEO3KtLRxquDCLBlVxg\n+IaB7HPGcLvTOlmammlEl1scP+/FdAI3FvBAjF3PB4Kxmg12PZRWsGZttSld\nMR1K\r\n=s++E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/density":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/tab-scroller":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.94f50b260.0_1617635207611_0.16065212254132755","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/tab-bar","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35fa91b2a1c72e23121938b9bbc465036a6022e2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.a4009b80a.0.tgz","fileCount":37,"integrity":"sha512-0V78VMzbDX4gaYlk6WKXzBELsBn3/6S+d9NU03DVdlvICQVfgxKhhqZ3RmuZ07yJlhn/7HGY+beuejq7ZuolzA==","signatures":[{"sig":"MEUCIDSCd9Uo/TVKoSHVQNzDue0dxc2EOFqLDXNvKdNDXDcSAiEAqt/u+msxy2jEZXSUycrfDpcz7nuaqDPRJpdwyMMUhLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jpCRA9TVsSAnZWagAAxkcP/An2Qg4kXNmX8U7Trvi1\n2JJhWkCgaJW6erlqzb0vPh5pCrsfBdSPcd9rZ77HVZuVGtr1zwhlg5CVq5oo\nW3swGHE4MOduKl1nPeihuMMHtdcMP4th+efJLFAubmfKMUYujvIhROoSlsdX\n+jX6jZ60ndpHRiUg7B0hZhZkDbZL3j62xJlM/jdr9l0bgH3U5dW2UnXSC7GB\nHJVm3REFv9FS+tXX079uTdGlaMJZHWETJUmprXfAnPRHmevgYtXoFUJR+qWs\nPh5LuRnWxMOYEm/hTnVVcpdXsLR3XanzpvR+dVn+ElOpRImvFfR8aun5Lg6h\n4AfiaJjXWzd+DEnRHC/5JE2A/ki0HenPmfC+8H+7AY4CPu8ECdaAecbAsI7a\nVoegc+F+Dx2pwWPUKoVCX8SRVikyax7kUMBipG5ONzVilKYMU4gujWoxLKF7\nO9wVMYswvLSGDeQCYGlcOZNTyU1fsh4wIM3WdQ9GMrsvGEH+Ocsg4saPxBm1\nL40loLNH9GZTyBYDFNWnUgyhbyD7nfDUznHqjinvVaj1h3nEu0M5L8hzK9gX\nDgeUBHxOMd0Wdqt4gETutGHkONEvN1aO/Amr9BJ69u54pTXFTg91uKgh8yu0\nJLx/jfgXy7GK5fMBR5oA9/7v5muEQK+hi01zls3HqY1hhxKptl6r0alrH7NC\neP4q\r\n=rc/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/density":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/tab-scroller":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.a4009b80a.0_1617660136601_0.30999176148801744","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/tab-bar","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d72826247aa0ca842c703cec3c69ac7f5e4aca4c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.15604bd0d.0.tgz","fileCount":37,"integrity":"sha512-JisQLxz4TP4z21HIYfxHxqRlvxZw/azHCrlwznem56Icu7sqYCYqPLELsvhMz02c1zjKedOeQpGjdjWY3phg9w==","signatures":[{"sig":"MEUCIQDO7YewaD14mjRe5exGF3XjECT9XAo2iXeCtRgJL9zlqQIgKtkhIpDliDUUSq+AHkT8Chy4LRjJtVmArC4LZ6RPMM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KfCRA9TVsSAnZWagAA85AP/iPs5HGbQVvmaluCEay2\n8fEwbqQ2549hWwbnwC6vdVMG6bjbgdpgoK7ZDVsfV/HT82aUFIpjFb+1huen\nyZOASUc8NbAhSVIo0meiZmIoPfJ/5hz0f/pOP/RciG5i7ShXgPodQc5ar+30\nkgdzgCMEDtteOsKSSK8V8M7kkssYe7qEYGY/njJrPf7oUBO8EVfQKtCY3eUN\nSN9TJax1JWL1oRz4A5K0+Tvikv/owCY3lBQHq+Alxt6EIE6rVnmaQCM4xLwc\nsE5pG0I2EJM0DY6TbaeiRFKe50zLE48ZGGqZuryRhXQxYOJ87FSd7HTvHF71\ngDTUi+3Y+ZEKW5sbe5NqcceX+aVmwQdCZRmSYS5Vr/Z2g1RCtsUpr4xlFC0o\nKgsptjFmmoEsI87ZQNRW1DugYsK14qnyQSR5sy8bh7ZUpTpKHGoBWJrCJ1Ro\nAc0654mbrINil8iLzAr0cJUYRkw/bA8I8ckc3QNVKJnjCSy2hkoY57t2XEPw\nqo2Hnl7/fncia+cRv69HZz6RoiMxGA5suwwRtidN11KXhb5X4YZdVkT2U6tW\naYqJ5ZbVb82Zy2bqCLVlCwG0PU+Hmp3W94am4YAwevetRzqBuyF5LTAkHPrX\n1rzV+p49UjsLpEgJZdnBu+oAugvp6xlVCCvvwbMJFROjsL+GuwwviGbl+s9e\nX0FS\r\n=BuCv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/density":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/tab-scroller":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.15604bd0d.0_1617662622765_0.959616287051817","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/tab-bar","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c25d5cc9d4e30f72a6a9ef54df8296b5ba68717","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.76da7876c.0.tgz","fileCount":37,"integrity":"sha512-yczPoElmiqPTC7KpjwuKQd5DOqY7rLVddJNSbwA41D6F/x5YT26uJGiR9H+Pnpkl5grlE/FfI6+pG5QFw7ILFw==","signatures":[{"sig":"MEUCIQC7FB4sfH0I4qeo5XzkeW4FdQvOxbIZDnDJPlwkIh3hLwIgNZirvWfziQ72D+sFeJIT1iBg3g/5m+aIdxvKVGtoRF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ74CRA9TVsSAnZWagAAx2cP/iCzc0KdSV3BQLLvONBZ\nrCjWW0euYNhu4bJ6vZpxYuCVvt1VH7afcHvwiB54Ur3Wi0x0NnmuEP1BBFbw\nP0ExL6x7K25vBb90l0SWx1fWuKAtpqklMleSZEQTFBGX6dMncsUX0f/7JhTT\n4JFKEFe8uVNyvlXuN/MrdwLiEawiD0fzvvdWbBTLhDOd7OAN+HG+xLJX+uAD\nrYbVT/3PFEG5fl6Nno+0rtMBA/C0hJUNoaFTuvqALJjNFKSqGJxImTsJhxuO\nWG7vIrPF3mOdQe2XPmcAvqKCw1qJmWreLGiX4qEDKCoS9+wEqmAdGLP2dwDd\n56zHQTBYulu24nik0dsTIcZKdyrB20G0bDg0cCuC6nJLkOT+R5Zi8Y6HY4GR\n4c6+xAxgFIsJvRXBwhM4TtmOcBRRvvdMmizBEi8elNGUHj3gxx6OcJmj7EDm\nXivXqXUNo8STJiaaSW4iv59QLLekUGXBVR6LMK/iMGkTwuHRq+G1tl7kV3IP\nImVZZRh8LHu3AgG1iTTp3c0kUNMu/MyMVCQ586nUbzBgoNrjrPtmA5dBgU6J\niWCn+CPRtnzAR04kxEFTW7TCBv9V881UbTlcjEwuxhff00ZGzGvUlVdRV/zY\nUKRVFEU7dCNnfdSvTyJVcP/c3+spoXSdrNOKngOmOZOr8s9px90B2lpyLinN\n7D7x\r\n=g7Yq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/density":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/tab-scroller":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.76da7876c.0_1617759991826_0.9161068837812205","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/tab-bar","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a65a14570edeadada572293d93a743fa140fd7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":37,"integrity":"sha512-jB/0hTUd0rUcrmY34OBXy7hw6C7QwTmK68UX8colN02nLAsldqen3E73/idM+dD2eXRNJH/e93hxYW/FBkS/DQ==","signatures":[{"sig":"MEYCIQDxCE4AopXpZxjR9jV8dDElOT9M2ydQdRwslJYtHtM2aQIhAJBnx+yMQjov1l2DzPi3/FELRUViluJklamyM5W6O4F0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgAaCRA9TVsSAnZWagAAYugQAIyekpiivem3uYhJoG6Z\nb0KCc4lMXqxjXQCjQJ1009GG47kMl0zoTXhQyrR5wDJAHfDQsSnD3YhIiz5B\nLntnM5Wm0hC5qEqjzM3dHxLqhUV7YovH3+OuhBTJaNW1Wt5W94PUfwHcLNJY\no5H0IuYJnjDoCRkrWN53OFVQI70OB87hr0CaXlFI6U84EuS3WXA1+ekt4pto\npknxnTVdf52R7BD0wp+yU/6lo9utVQXsoSRHzC5uQ/XGF5zMNL3F2+6jdflY\nsuHsQ8lAXBeL6jrcqq17B8uO1cqsYN2JL+VSjXpOrCxXI+ymyNfTQc6axkv4\na4v69Bl3mx7yYnPUn1DtkCeiV0fNMElHn6uHhiHa9A4kjCTZBXh+x5IsBp/G\n/ydmvA5unSAZax8VXZmmipaNtbc+CCjJlwv92f95jMBgHB+8FJ+lpaDQgS73\ni7iQ+1vMpnZkhfXBIwAglfYiuATVUhq7370mnvxaOo/Lc5diK0MPzjdk5/1P\nvBX6kkq1J8j1gz+gyV/0TCKc1Eei3XVIoKDN3Vv3fJm97zYV6TevVlEc9KuE\n38I7wza/0N2WKWmhpJc1ZNJzRjf+sfQpHM9PHic1fWJZNunJEM/9BMUevfu0\nKISTuJMZjDb0KMWYUkw3WrgynZeOWRlZEYR49I+LN2yYU55F5iuSphd7damU\nBb/W\r\n=qVoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/density":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/tab-scroller":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.6bcb6cbd2.0_1617821721652_0.24459209705763008","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/tab-bar","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad3b40f3220b0e319f129504daf7c1d379f3a4b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.c91e8d141.0.tgz","fileCount":37,"integrity":"sha512-v3rpnRaK1WNk0+KljqaufhKI4Ogi8dSbk4BG5Kx/aztduP5mds0Dht8HtNQa3ScHAjdCfSZGq9ZiofmFkzfQ4w==","signatures":[{"sig":"MEYCIQDCPb5NTjn4Jn/1pxgsojqPR+Dg7iuAkpcindH/HAr6pAIhAKW4FZJfi3ba4XtZQTWNsPR8YliAM5CPWI4iaHr6PCXv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgEJCRA9TVsSAnZWagAA9PQP/1YUTEPENULmpkz7WwEH\ncQW+DQN3lO+FJcwlHrvjeWero00ejbqTuW1MLZQF3hheFACoBuLMUxqCTURa\n801BtLGbJYjKOwTZvJiGGCRSFZe99uzYCnhQzgWOBnldUzoxRE67yrEHpwDo\n128NVkemZWWp5w7eOYwa2WiijMAIz1rpmbM/UZlIWjP25C6oYwqQGyBvrsOy\n5ssarRGITxhgkeEmTlnyts87azEQCUl5BgxK9JGFemNcvRcsxARukWsdbGSJ\n4wTnP7gi4vwY8PGIXQRojQL1GyHU9K2Qg66G6+9XnTu4miAtkhjETiJquAdL\nthXNhfM5OmabnuZC7o7+V4Y23R2UQQjcd5LhFawlj0jtYeCaEKTmWQAx8pp5\noN+frXGgvABaaDKic23XGMFWMFaQ4FsitoRrB1FqOrtYVR9H0U9QrQh2UTE4\nf5E9+rB5S54e4mEAaPyP9Ml4XbHwzhgB+rHMG08k5qAgC8KxGLYXIlaqICfM\nHpHnEpnkUJybdnw6KT+jphDa59RS8yP0lZYhlD6lMPn7vWN2+6oK/leba1qp\nWHqArqAyJanyRftxpNzWY7zrpVIDjI4EFXVKn4Z35OLZQOMlmQ2LJeBoMC18\nZxdoMDdcttDjprlw29hdTi532lhTAKljAgUVvbQ2/oTVAyYns+J5SzrMWNsq\nyn3s\r\n=j0us\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/density":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/tab-scroller":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.c91e8d141.0_1617821961302_0.4301478024057457","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f009fe25732a1d1180e3b88f5bfab9cc771bb82f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f77c50860.0.tgz","fileCount":37,"integrity":"sha512-o3eDEl3GKOu0N3Id1PLTaIe7xLcgbDJrIAzT7H2tfrIfRaqyvDIYOZU/nbmU4PUztgECS4lvGVoXgEVTyQJj/w==","signatures":[{"sig":"MEQCIANv8PWHC80UxLSNUoC86OygRM/nRMk5+vq5QxjmP8x4AiA0gdnrFch2uK6dgw9avMa2vVzO59txRqABE/gjnpb5vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyM2CRA9TVsSAnZWagAArygP/1zjAB1pQz6KjRd+dkki\nhvoijeg1nltOVHCPDPu/3wH9qE3UiXnZ6b1AoPhFppyqK8WpgMvDGK5eiavK\npn78IweqKNHNyvYdAxA4ucREScsWQ/tmNShTH4F/V00hhiuVLlJVBVi9aVHj\nrix82Kp88gFToTe5YHmk5Gnp0INu3ROMit8xQxf9s934t53jkZp72iGfhyDm\nVYbxf09uKpdHVnuC4ibCjebq5VJZhuOFRpLu9yokORHoat7ndD8ZJAMukqgi\nfBrCvLP/lcnOXyk2hUgOcZdLknnTWP84KBk+VhyMTRd/gXhfa6wADigpyYg7\nUFvCDEuyOhdbnSKCbWKezUmiCjiT4rxumd+rI4UYS6GnQdRMB41SF5w1IPHJ\noMHkPuR5emATR+vp1W29LtwJH9WAEw7TGAJHkCvLzo9s/ZWV2Uxhdtsi8oYJ\nblYWQ4czIzvEXwrWs6XQ+bE0+Gd43EgZSqes2oHfOEkcT4BmF/1XKQSQsUhq\nvVMRJnVxlWWncRF4q3HQGi62WwEI/P28UM3/U7t5NrbixQObZYM298u7E+Kn\n8ZHuDyR4cSig6Rp3xOgisWZiGI8ydmGBB6L1fIeqmC7sGn6fVhHPskB56b37\nKEm5rGYkXr2O6LI1DCsowzhQMbEqUdd1+Gad6q88RvaE8Cprmz/nYIh7woNd\nFuVD\r\n=VR0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/density":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/tab-scroller":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f77c50860.0_1617896245925_0.13561897205758977","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/tab-bar","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773b29a9625b50cc5cd166b077463e4828cb50d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.367d88bdb.0.tgz","fileCount":37,"integrity":"sha512-YpP2RjcnL1dRPB9dkBIwJucarYFdK4w+QnAmvsQJxtOkR1IMxAgJ4LlNkh+5IG8o1S0AVhLgpt3/v8UXXehP2Q==","signatures":[{"sig":"MEUCIQDHuTrm/DALnmJ6K6fnL4rs0Thxxxv9oLPeW8/s4+SzTQIgY+4U0MnosfWnEBW0OG3Oyb49Tqx63gYCua/YD2Z/uNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHtCRA9TVsSAnZWagAAxwkP/3sEzKVDJ9dIYCL0FeTf\nRYHRUOnUu+zWjvNWFGoVgfTSzri/urKlvAf74YZPYVhd4mcjvBu+c+tdf3nG\nJzI7ufTcG0lLPZ0Js5gX7g5lOugK1a9dHIvIJ/jezFhZNvhnD+caUq+lU5PJ\nuumoOySsIaoLi27oUDd1ETpjFS8gRjy9aOi2H31/C31VfoBre2ogUua+MOYh\nbhO5CT2yGevkNho5c4LiLNhkevch7Md/poseCImMqmKVTxhVr8MbZ+e1YbkO\n7z9+VvBRxps9G2MIB5TF734YunMv1CeZCr5Dwd7saAn4vcs7KxhPaxjYLXZo\n+u7BmrkbzDGdtNtA5w2TtJap1uuIJX1UQc0q1i6Gmn5sc4Y3xOA3GjdhgV3m\nJk9hodqoHf7G7Rjt5rna0v7IXNuMlKzRFIVocOvYjXwX7Af3YUgLPS0s6jP3\n48nhiRSiqXKorL0u5qGfSFu21s+ZElE2dmBxooLfTtGP4RRAB0ylI/DXmNrM\n7U9h5Bt78WtvgaByWR1YL0GriAZ+5mWdOOlPRFId4X6ESp9WfkzsJ8cRO+yp\n98kiHrcccSBJftIFnX2ggBoksfLQRNYNj9sr6uH1uFnBfFnALhpxuGUTScMA\n7EQKy8s921TPZ/RIOQiP1qnoPzRMtR63zstSH0K3qXvMeDJtMJ+74cNZkJn8\nUlQP\r\n=RTaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/density":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/tab-scroller":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.367d88bdb.0_1617900013120_0.20278353500412272","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/tab-bar","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b4d51be8c28d3f506a2e690585a5c08b6caf359","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.0ec437d3b.0.tgz","fileCount":37,"integrity":"sha512-556hfYYCoKL1ydjv3P1m2K8/IouSrLIoZ+iR9Xcfegwi3vG1NbEEiQz1I8OixgqzL94xsP2CPMqIT2+eVbr/nw==","signatures":[{"sig":"MEUCIDPNVC0vm4gbHmaA2+vUZGhtwy+g8/XUG81HZKqoC8MNAiEAhLsK7eQygq/v3EWJ32bj3pNoGIkD0eRsuz8DLzKl8TY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1tgCRA9TVsSAnZWagAACfsP+gNdulguiUlbpz2bC7J7\np1gtkgPwjJ0AxGmaVyngnBSx9Wt/1tj4EsNHCqS/5ZJXsdKioyMvRHRyboix\nJimXvy3NKVmeg5uB3SzDTXwJ1Bth155J3yDEq4BToCA9eFslRa6bbKLy1Q9+\nFNsEibiGb6ofUt1g5W2ZnIN7qATst65RmpRfjHt7h5DL2JmT1tLhzhyvzwW7\nm/k8jUHHOeIRVUEOqjSkwhg3S4+sywvxAXb3eb+NoseiDP643iLhRYbrV/jp\ncHyRBj1Y+WCoe+SX9vWgVXgGEBjMaJwCrluLnqZf9D3LzMDqzh1kpxdQDTwy\ngh8YL++BuKcuS8392NmGYRfsIYIxrl3dael++LsQWn6vArnxj8ibm6sAoCPE\nIxWpWkDQ12aRsyzJgB5CvZE9OPgNhPZvDj1MfURW2JMAezeAVbDgvHMI7SfU\n2twEPw2KLhmwlc/Nr4NbTi+u1FjmaWb4P++jenZhnhejdaG9FgzZZaxMIZiJ\n7olEIfZP5BGMjXWGpDlr8sr2PYdRLFiEAVf9b7/flOOJottuz7fxJxJe+UJj\ntoM+pxfpXNYKpRcuunWzp2nhplzqzZCKGx3e1Bm+wWbDnDxglnnOa0ZwErps\nS7yeXvlBsMAkfU9J2aLO42k/DA1kMGpZy4FldsGlXxQdCNlf8uNI1gK9GcLs\n8g9C\r\n=2hcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/density":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/tab-scroller":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.0ec437d3b.0_1617910623894_0.4692910346810366","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/tab-bar","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dd28c9884f363cd8e271e8093f0ffbdd63ec2eb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.b2fa996a1.0.tgz","fileCount":37,"integrity":"sha512-sImhOWEppjmA7Db2Y9QJhrhNESVfWOOFca8E7roj0pE3WbDqCg7YI1viAy/I4UqICotd/FeXekfci23oZWxZ8g==","signatures":[{"sig":"MEUCIBHy8YgkviVVxgjy0NIJEa9yrtb/wANUh/0SFRA1G/nuAiEA+Mzafou8zzDltkF/2+Nhd/jUr6nc2ksElIL0RgfvY/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7tCRA9TVsSAnZWagAA+OEP/2iAgFN8FfF4UBVaYAjB\nDMShIm3PWDDaRK1TUMFjbNVIWW4R0K0AFsE/zcQmtTfFsL/uvaslxqbCWTGR\nr3sR67rpnMovDIPqOcpFXjEbqUJUizP2chRiW4ShdJBaBTpEs4S3ST5ZDq28\ngUr4sfrH+awtFu6A4FBlDn4psAVCSKOZGJUIHF6ZtNP2SZAZcLo8001gIKnW\nZmzveiNW3gePXUdx9K4H0FcAaat066wXdNefe22uoDlUH9r1GXQJ37qpYhFh\nNjn/nngvGBUMhmJSqKLteymvK+IyJK0GKN6loE+AvzI9TpQiyh4yIiEpiZL1\n9j4zSnoNAqpsXEUuMgRKvOXr9v1hxOMPOgu7aTH1NJkRga+DK4MqHMPXJ1NP\nSmvW8xdYK7AWHfQviio8VmXFW7NHf1yGc7FQXUPIHCd2IKBcdqrvxym3A7Y6\nL4XEtyfvu33T7hexvYAxxVhPfZDBIo9yPBJhiZDQFuE9LyaeW5n1Ty8t+1Mc\njIU1awESVsGXXrZnyZwH1PU06cYv5leAPiehjGUdUbssDkEUjkmuSeo+ILqj\nWbmEQGf2lMK+ybCtcIZQGgxtzDlEYsptMH3YdGaHTB9CTKe8hr9bsNW80rLX\ng/alUzYEzu+OsyScZnZdPkVfi+/zFXBYsHTvLBeiuHwY9Y1oIX5dX/mjINCS\nna3E\r\n=m8bK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/density":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/tab-scroller":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.b2fa996a1.0_1617981164857_0.4146690164910187","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/tab-bar","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6faa1eda925877994a165ef6e75b3b8a135768b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.24255c408.0.tgz","fileCount":37,"integrity":"sha512-liJYvEa07pgtnDABdnSdVd9geNrvi2jK4a75ATwx5hEeB91RE4Yhjh9Uz3WTD5p9WZDRDiNQGpTSAN56pGOTSQ==","signatures":[{"sig":"MEQCIDVf1mM7qYMmnFvUJqjZNHIP9v8OKKmPpVUaYISthYazAiA1X9XIlwwVAlXQKHdgirJDtJXTYgb6eKp0OSlL/5lZbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLWQCRA9TVsSAnZWagAA/+cP/3djsixOjO7WIDmlfnYU\ny3cRzmTlvela8xF4P2eBapKCh0Lm4ogacx3Vd0T+US7TzZErA7NjLdcaJ7Pn\nnjkcE4R4WIIlFdARJtE3Ozvrt/xsfPLIjD4FIoL6m9Lc4X5DsetdCPYinKnY\nChtjr3jvzXQwxmKRIf8/JDkOdTUuSLsltJdo30KllnXmfPS6Xl6OH5PeZcN3\n6r3gvBz32ya/RiqcDeDh0s0S7VmxheaqXJO3npbH3VueuJyPMWCANo3GVFKM\nsjDYEhIuz4WQIqK9sVPp8Y9FApED5+80XEFfsR3QbvSL4JkGwCAE8dxciBdZ\nTjo+MUk1/NhKaXIeXI3HXTYg0SXgS6huEViUl784sLOEzQqTaybSf9zMwGrQ\nF9EmID5eLHUYOtj4hk8l9wEJiJz3dVR51yTx8c48x4ABOks0hWnnQ68zbDFd\nt++AIsxj81lXujG1WEmzowVRXQdQ9O7+DHgzgpe1Gt9W8ai2fQm/W6gVZ8yQ\nNgc8KLl3GslMum+6ANBY3ma/fwZ3ErHS12xvJZIOK7sGVRmKf9KXX4Cn3Diw\nZw7m7My6gzG6FLiSjF/dkN1uZQWMk69N7ghwIEkhfFEEyldaXNUuUUgXMHCN\nqo4TqQ+mJgEL1v1+h3JZQTOwLUNoWbzC0QPIi4wmp3UB+jnWzMKmjLBVfmsS\n8XxZ\r\n=0Kry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/density":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/tab-scroller":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.24255c408.0_1617999247936_0.3598086182712359","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/tab-bar","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089f01deb9a3d88d546b0f14e97a5611568bb484","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":37,"integrity":"sha512-gJ/D43wFm3JyRq9kqtQD9Sc7cMBgyyqETPjDQl0J7XqJ/0GxV1gkEfw3YGCtWDSQhmRCc8FTwMPNxoGYGu9JhQ==","signatures":[{"sig":"MEUCIHDLCXxGP2L/Ytag01O/A51eCs+YswOYOYAAYueV6tqvAiEA2ApBcPDjmpA9RNYZzrfBD4AxV8b/oFmLJDL2+SCADBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNtICRA9TVsSAnZWagAA5toP/iM1RS1c6Wqo9gB2Y0vF\n6AxEQapUlmPssuHTS9WoP8CV5JxghCNc39dM4FhC5Q4rVUjUc9WX3sJ5UOfW\nL4TIaMpROw4wqvAv0cgdARI7NLc2+CyYMoK812yr5SQFcxdQKaNAhZw8mmTP\nANI0UrskdcyMf5ICI79BPWj+eIa5pQhNuJR8+dMtnJoIFLjcQ9kqm2edKhuQ\nmmJ/K9b73e8KVMV8yCG49Dp3E5l9I9BjjfMoocfHfDKeSxUhivqUErahA3KF\npc0uw7PlAAJWFxnwcw14BJd3PJ8ry/S2hETNKDUhPUZ6epcl2kBi6HHu/ilv\nbtSumJxoUapHl30p6w4mwgMUd+CXqcY+KHepyhl5p6YzVC/t9wihtx6O+ZqF\n567M0q+9cJ6eZLCemZXam4FV5yOepG+TVQ59JJtFk7Ug2VNrTKO0zcWm//jc\nG9CzVk2EcOWEH/U5soSF+TbmfetfbHA/yyaAPK47BP5GL575xZJB/88Ivr7A\nRKYB+YEgqO+GF3hbFNj5iu6JDMIqpe5L3WbnG3m9woGim8v8z2BmJgrvOdB1\n3iEDZQ2BIv+M3gmIt2PCE2OXQKCx/+T7gzMqUEWaskszXFBcb0QeIFPzcQVY\ngtVgJLFBt2Km1Idbd/BorMra6Qn6RGCKe31T4jVrJi5/LhtNdr1WtDwxDSB5\n/S+t\r\n=gPlb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/density":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/tab-scroller":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.7d6a4bb72.0_1618008904254_0.708271615042021","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/tab-bar","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"984482096e5d740555b9173f2e9c84a6a67f546c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.352b295c1.0.tgz","fileCount":37,"integrity":"sha512-DombkCpG8rU1myjsYriJRdJ7/vnSf1ilSPK+8qLJqzxeZRIkDNGoFEQUDrGiTdr0g9jC+Ig8h9QoEVAm7XxUFw==","signatures":[{"sig":"MEUCICajWq9sGplgUfPi5WEF8uB78J9dGYby7YMZFE5Jy7K9AiEA6etafomKTudlbgd9SsK3xHyWbZ2g41psNvq6NmZP7mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6mCRA9TVsSAnZWagAAJBYQAKN5n85mKKEBQoTq/dYu\nc7GBhBjMrpuP+33W99aQG0Fi+7gTl/vNmCTl0No8k/NMv1m0qqc+dFefiFAc\n3mL1SOqkJi8DYAZcQyHkyI9FviIFxyFTGLaz0Wu7Z6ljZapsnY87uGpZmjgP\nZsfNzzAPkLQyIn41VMWgK26hz07NkbGviOHvmxvPQFKGr6UXQq6a7jBDGn2M\n+HJqwx+m4l1TzWWPtBIKYccvjVCOwymgNzyFNhd3GxOHEcmBRklMx1SbmML+\niLcBOs50LwU0+DEf5YpJoFy22MdFcbEhbSYCtKPKf8cNiDbPrOo+uZ68aATn\npTw7qhtXpmrGRwONxRyWZk//QQs2PukqDf1ThQnhtHp6oWSFvBsKR+2s/2XF\nCKNmsZRtEChsL2TwmTIW1BjbfeNQBPem8ZU9YrBmYo8MxIWghaLMDkUlENi+\n+hw6sKayA285vqdvhL+5LfIrQjPuJQRd/4mqZlJTI00PWRJRx4To5nNIgLTp\nED6RbTFV/7P0b8UzUoC+uuE7eCDyFw2o/Y7lgarA3p+WNXdEesgR2jlwF07S\nRjx/YyT6ewn3pX+igqoYCkLpGqjBFMN6jKb1q1vpysc2zvyBRCS08ax4dcLw\n7Ys0mtRuC3Bqwfdsr2Eg5J8/hQQFWmUBq8sCrovC/g1Mqql10YVUoYdXIVE7\nrV2J\r\n=6p5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/density":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/tab-scroller":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.352b295c1.0_1618251430195_0.5467035683962178","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/tab-bar","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41552bcfa8eccf04a79ca0a62ea0559ff634037f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.ab99b8064.0.tgz","fileCount":37,"integrity":"sha512-x39hF0fQGE352TrA54LCSFmM28P1HhDVgDSZXOkWYDkdT+9kV6UpL2UABwrRrSUurFBzqEkbjkX3eQ8tbzc8qw==","signatures":[{"sig":"MEUCIFK3qEX5BVQlpHdC/25XNKSwIoIN6lN0nuji4sHafLzFAiEAy8BVh7kBHGakkcqUF4+9IsZ/eQu4ej1d4ko8Dx0GXfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5rCRA9TVsSAnZWagAAg/QP/17rP0uLXGLCwp41Zam4\nwz63EIMK0e8WF3zmbIWmyeNb9SSafir/oo07PnMISLjH6qyKU0J0i9QvfLV9\ndRpSCctGK9d5anJhW/5ZCS/1zt4gO/SswVXfu6RdP6uQIIPsQdM2ltKLhmuU\nx9fBc6Ckfv3sbC7C8eqFC2gvcFy9LFlZMnTj5TBCJ4Go2JWgWtmkNOXVF5U8\nkbiZM88xP+2ZzRyeij++imPGBaCHGWyuwC1LLEb5ubVY/WkdqDFxhuo9rSNQ\nQyIEpcGqDGdxL4qwuVxo4gYgADppYKk5dilwAH3LybwQTVMdNqnd8HaIIDeW\n1eGc5AZSR61YjmOJGTVX1ytLsOyXRbQoCTvp0s75uDsks1y6cZdNReHT2VFa\nsi6WYbQsmI3GsmsrXfHyGBNmeyG6cjX15B3WPe2YsFwiEjW2228dbXiomQJg\nvapoD1wKW3wZJis+t/z+j7EKk46UGljsaf56B5gHub9xd4PzT7bR/3la/PMs\nv1r70U6uBpjW04JNCpW99jl0KRm9bIh0vT5tpiJYVx1r0ZQ5K24gShR9KVy+\nOuwQh2ndWsjgUsSh2PPPktiDy+tlJDbRpusidyf0Jjo9nSnCwLNKy8zhDSPy\njFLtcqIINalnM1dI0Klc1bsNRj/950gbNooubragr6/qZwhcfawNpC5YRHhi\nkxnL\r\n=AXHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/density":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/tab-scroller":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.ab99b8064.0_1618325099207_0.6414290345283986","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/tab-bar","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2b165aab2ee15df3a991887a5c733b059bc5d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.8f0a11e32.0.tgz","fileCount":37,"integrity":"sha512-O9qk12oAfM/lcDvdtgEmial4agTZ6OJSCIC5A9Z7ajfJNQKw90TRYbixWlpEIrbyX+pgHplqtwZQmkmbMvY6fg==","signatures":[{"sig":"MEYCIQCfnrQqpeJP6pyh05kVzsE6Cqbt7FG4qhsY+/2wAGjOMAIhANn2FPeH5sEG78JaHJujRr397PnjIBJ4MEqY36PrnJGo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0rPCRA9TVsSAnZWagAA//cP/ApDgE94BDMcet/OVDmj\nHg7+rjEHfClYayEc3KhudpYmwjb7URm1b8ZZVFRA+OznMgvM0lVuSA3B27zq\nPuJdXPZID+t2eWf95Cslic6EqwACquYgCB9lXGSVshjxfvOyTDx3UnHAPbfw\nu4RdlhL/Q92/0R7lLLZ4oguJjMlKIQye697rdvxxO1alsSSxFgu5arkEQ5OS\ncyhAilJbq/yYsDL+QjLx6pyAh17+brYEOORpckzE9jWDsZXYm1ugpV0gsvNV\nFsQbYBY+OIxMlNsvv+ztyMz2fAHSBr+zD+FwOX5K2nJtmLTLQ/4qgHu9pDjK\ng2xm3ycbevZYrm8wg02mBp3onbBQvHFbiv1TO6h0DJuSqO7YEXjzzQgIhf8r\neENX9MZsiVPapTWMmg/fPXjLiQuWYHXM6k9WWa4uX1AYY19vpY6KAiNc1UR+\nxe+mg0BgDDnQftfFGZsWF0tcItGGzPeu82uabLENAi4iJyR1oZElzfosppWH\nqif5bF5+G3Qn3UO8YutVZQ4JLDQEAXXAG5UDhu5rnDp1CedpLx/bXTgWLPSs\nvpL+EmCYmILEJilnDnJ9HlxOuR0ZycQg2k2yOoq5cYvzSPojLppIG4OafBKA\nNJnr53N44ZTZFeJHFQVJQaBFgj9fXoiBl/WEV4BkjZwSfTA5q5aanzBD/wqY\nqrwT\r\n=YKmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/density":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/tab-scroller":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.8f0a11e32.0_1618430670528_0.522716490339137","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/tab-bar","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5471479b7b79b6b46d34661c7bf2f305e688a92b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":37,"integrity":"sha512-RkoQpLa7uPbUrou/J6k1QTHx86Ud0pj9EVsvNuyP2u2yk9MPgATVLbpl8ECldrOQMPkYWS9XsTACOyI73hNsCw==","signatures":[{"sig":"MEUCIQCqlx9Td1kzlRyQcSlU1OJN39urrLQN1KY9Exm0BKCjogIgGkdjlb5V+t2S5oi0gkL4DcL7ZM4VbxGtgougMMpawts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIByCRA9TVsSAnZWagAA5G0P/396yR948rLvCC34Ofsk\n+6ZhQm1SClvu9QyqKESDQWJIFMdbvWsvmTnFA7acuqZnJXafuvcN+ZuoJIUy\nqqB3mRVDXn8otRE3Up0XknS92cFcY25WLdcCTM1rj64EoycX6Fs6uAAyU9AN\nZBxmo42IClRxeIkGphyu2WT1h4Px7BQFqiHyhb/RFGmdANJ5LNH9GVF11Fbp\nv06ik3FN74MKxzmPRNqHG42sYufk5mUGLEEdWraJyTOd25hbl4ynTS4SLop8\n6dvNpvSLiHWnIDuOWDFd/8ESEiT+ryawScbg19Onmlp9GpEeQax0Bl8nbhLj\nxik5rc8QovdJ4gTH4Lxl2xpUC9JYCEi7eFzWJKqkBEX2nuFDmd+Awen2Hx5E\n/gr2HdEHXWgg4/0pS0hOJi571kgCYIpqycwsjfTUPBNxp/9OvilYpcwFnERG\nh+cxliU/RSsO6JXrqH1LovtaeK2hZ+QH4DUphKZsaJhX80GH6XIhzdlfzHFP\nzcE1UKmsTXWQnMZakPMQ5nFdPc5Qh8nLmxEg5S58ZwEN/efNfn30XfQOREaj\nd9GNyj2zKFJueYQnv7UWK9NfySmrOBqITa6WizwlR5BAiXUPfoiNu3qw3nJO\nkkXCRv6+J7ajnb9GdD0OFAhFqRciMOFfxSfs+4nBopPj1OuTT01N3lBx54R6\nGEDK\r\n=x0ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/density":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/tab-scroller":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.f5c6db8fc.0_1618509937629_0.8054000897500924","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/tab-bar","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72264d959ea008ffe2d3fdf957481d9312228c19","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.3793a3143.0.tgz","fileCount":37,"integrity":"sha512-es4lWJkqq6dQmpTFfXUCNWBvmbla2RHOjxCNYx5rHpX88vN55AeHqRl5BV07hAT2qabzC1mToAfONTrmIzyaag==","signatures":[{"sig":"MEUCIBXXqiWKsW/mtA0JhCXx+qEw2Zwdgcymf3oAHDaQBpOLAiEA5NOePujvxqJWVvWHZcCZSLXE6lkEBxG5cdmRpReX7mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIbgCRA9TVsSAnZWagAAoEUP/2zLE0UXgBHXxDZA0PyO\nsn+lqDe+ZimEi+7Zlh7bVLrmG1il3CuQuaP7Rjbi6iTGzu3ZM/Iy+wZtIe2j\nBnvKhmE4L3ucY9Hz7AXbPjctbw1VW/ADZtiSc/Mkrv+9cg2ScF8vRMZiN1El\n5Z1pYP42ahby+P9zcvoDpWt5selgzys9DS7D6fAKOauLizrqoK8DvHYhgvcq\n3MimICykRUaLewgtPl650u01kM6sAiELv4lVvCwr1f5nYxfOt9eEdO5vkPpE\nU+BBDgmAFL9wfSpXMMRY9E0y66MFEbM4Dt26jH0X5YlWv+4XVxf0wpRL6Rgu\nn3gDVDqg5KIS92RBMKtiHwvKnczdXKawyPE7e7cmAd5uGQc5JD+6JBcbcbrR\nwmx0NohBqmbae4GZ+x69HKFvbkV3c4dWoCB2xHsHUhbhJd+k/6A4/jKG1bu3\nXEnlci8bAuWgJ2R5U716HtXUxnzyzLNpipkbAOoAArumHL3DD1jG4t5pkXS0\nUoJMN8vG0HJRXcvqD/CWPWtSzpfR1RelFlKgn+PeiDVSODrYxTq0bfNMNF8W\n6YTsPphoEC7/uvKctECl9wAE5JZcrCESJy6raIecT6V7PjRiQoWErh6Sh/V4\nzPBjgLD2NFWHChw89AIskKLZLxGjKo4SludMWWzVpTdwHPo4Dt+ywm86C1bb\n9sj7\r\n=lQBK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/density":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/tab-scroller":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.3793a3143.0_1618511584532_0.8361625585624677","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/tab-bar","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b5601ee923ede2575cf86890ef8c04b2f2b9ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0-canary.bc104bae7.0.tgz","fileCount":37,"integrity":"sha512-wX1xPQCE2Co1PmgMi5mz+yjckhm//gaI+Zhw8EIlSb153vjJeZJFCJLM0TEqZN5DYalWd7bOMio5cCAl376hoQ==","signatures":[{"sig":"MEYCIQDiir0juXTlHWuIx3L8YZX774ilqW2gfSfDbXs7in5ClAIhAIQtg4Inlp+uJ8VVutNw4/QvABY1FNnSxK/5jNrvKBew","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhlCRA9TVsSAnZWagAA4sIP/2toPoKA1HrwOylomvkv\n8E/ID5g2SylEK2wuse3Vxu1OWxx7I5yk+V87GoTMp02jRS5e3PdVoex8un3A\ncLwh6zWMafYySSSUZEjhCsavPGD5SqP+DdN71Wo70rfsvcXNLkmul8z32r74\n4/I0r8ige21T0IOlvLao8cNLvkbByJBj+m/6+KlPadK610WBFiq33d4dIa6r\n30Pf9Wuw61tzUArRd9sxD7c9ShthxNoEyrvd+nYuTK8l+uc3f22/z5CVKssq\nctBC42IIjNqIsw5GNY9/Rxx13fV94wA8lIwkTrZ6Bro/oLBEiDTO2rWxyO3u\nMpxYON0iE70GhJF3LT7dfCsfzppv1hwypu22xNy3DlFLIjpBc2MzPwQa/V7n\nlPo8ttGZ3GWlcoNk4PNLwKbE9BEI/U4OHDcy5tqqmqbxl3vUf48nTJP+qD3+\nVhIv8biPUNYX8JRhhm/KEx9LbuB8zM5mGiU3WmlKtIkRWiqj7c/2YXNLoxW2\nixpnvzX3vvlpIFd9kNTZQ0Ryz1AYUp2tRbiLMmS6HkFdPyC/s+D9B+HdcGMr\n2AfWT4MKCTtXxb1tWiJx2AkE73Rp78zkvTZoFwUee6FZ4rgh7XyHHsD9pWKj\ngBkSD8ASiCA/xWORRcs3CtObBFBGaQDf3iJuT7UbiyVkBdNTBXTtGW+Us8V7\nqcAf\r\n=gB8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/density":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/tab-scroller":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0-canary.bc104bae7.0_1618516069011_0.2257513328101095","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/tab-bar","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7820884dd7be53a424d59757bb7db7adbd19aafb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.3f342c3f4.0.tgz","fileCount":37,"integrity":"sha512-vv7tMn/Xw6oT5M2R7UhijLMyDL0+JhTVwYywFugMfEun7znQ0nflmra+V+pbnGFSsgvfOo811MAxHl6ZfNdZcQ==","signatures":[{"sig":"MEUCIQDUBNnwvdAdYe7HGYETegPF83CbVQCqUS3xaaXq2Vf5+AIgdp/IyaxaY5EhIlQSck5ATPMYqzrvjyUMreVUqUIw2uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMR1CRA9TVsSAnZWagAAQL8P/RTSceemhVcSPwYzWXCH\nnku0MyllgSgeD8L0qnXldQEHPCi17tfM4yJU4pjVVYeFN58QEw7poH8XIfKg\n4fGRrAwMOW8WY+CFbvQm0OGSIKtChjxUU4HcsJx/HMmw8TZVfD0F13lZ+BQR\nEn5MsARkCE3W7bUPiNftrAsdYHidVAQivTIEQEd+DjPxOtkGaVHCgo5YjR2y\npM10JAlOGBYx8Apsss/7v2QTVyefyqmNCqDkmR3TbHn6RvisjYu1kQrg6GTS\nbntNzqd3O5nddVLvB2DqCTBd4wIoKUzSBpcnkuz/cUU0u5uqQ1HMpFGYk7kQ\nF0898X6env84TlqnYxBHIOpc+EQYyQrMLxc0QxyiBUvWIqu9MbEDjWRT5St1\nRu2RXv9r6JCt4LxxL50vqWdHpKVdX6B0Uo+Xuz4QMMOMW90PCllia/eedDR9\ne9ccNtGTyoK5n5ftkbCKhtXZsj/Un2qrg01O8ArisHLg+bPUfd+f++K+wweX\nqIUZDiYnDZheh1pv60+KQjPaF9fJH391JN45mxvXQotF+siG/beDwb609ZGs\nlMau517xc+JNY5UA+VV04UfdZRQoqtX6UNYqli9IjP9fyEmQqlKUPSzE9m37\nDEH25jHzXeaH/07etEPRdCguwldUauQva71urPcD8936xx7NHtnxffEfVnd9\nQefn\r\n=5gSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/density":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/tab-scroller":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.3f342c3f4.0_1618527349224_0.5747558831593389","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/tab-bar","version":"11.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aac6e32c0099b8ae51d72235a0598d10d5fec539","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0.tgz","fileCount":36,"integrity":"sha512-/U6YLN3QLi/KorMX4dZldOmUIZTgDt6+OcM0aDv/qQUfIxKwZFhkPkOWZeUfwhL91KkzFL12yibiH5dFrany1w==","signatures":[{"sig":"MEQCIGVfX4sAGpsJSLSUD9GuXDB58MPxUEXa+JckowDe6bE2AiAvsJRQzPCbHFmRbbQOAueCzTOV5wk2oMzXIjljRvvxZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVnCRA9TVsSAnZWagAAfkAP/iD3RS6cIaEg3mneMtJv\njuQFYcKF+aZN3vwUEKHNu4JuNYkCtOY1JYF+/1cUpXaBGFypAZ77ddHP7r26\nwIVVjMd4rF4J0LTD+bgZ1higfRufxwagLIyimVKSVGhh3cG1pJPDG3SQ28T3\nH1XAD0jKSRFymk/8dTr/bFZJMj1FlvsVU72tKzci3NpT/f1FwZ++VvpEs+lG\nuWMizjohEVQl9jzsp61gTTFwVnlhWigC4WihJ9RhUhykuPPCHEQNYiH+Fokw\nuEX7dDEVra6fBE7hBX/3ES0XpLdG7j9N53VleAMTGwobl94JYPnKSi8mDKGt\n4IzgtYPADfQO5Wams9G1biXzfH2WTfGjFJOZOmmhRGpVHjadSDETDVWI5+u+\njrfsT8yeT/YfJ1xTd5kXYT+K8qjZs0ovL39iAbfB+413KEuQNKffUrEOvq5e\nOC9/Cm+iMYkKk36zFJex4USqozibjaiKZ4LxttEL0gte/x3fLeZwRzcT1crR\nvmBRvjPbn8BcI2Uj4+Ve+TcSgLa9nzQpEV9473458y3Ev5D7z2qvbQJVj1I0\nWny6pMSZwtNq7GJ9R9dy4YRUmfJIC1tr8E3VpccHnKrp5X9QfcL9VbG2/XPG\nCaUJ3SjWfFMxmtp8d/momSm8kvCsM5K90nRnpp4SxhrewdTPL5WYyxh8Bhf6\naOM/\r\n=CFIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"^11.0.0","@material/base":"^11.0.0","@material/density":"^11.0.0","@material/animation":"^11.0.0","@material/tab-scroller":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_11.0.0_1618527590995_0.09068588648653142","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/tab-bar","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f549feb5bd236253ff29e6bc1eed07dd1c39c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.2ebfc5374.0.tgz","fileCount":37,"integrity":"sha512-ZJ1mu7DNF6omVMTufL8/jymXM+W+SbhZV7LaF7t0zNUPa+OGhrtHvL1qBLCvXfL+OAnWxQxxTXg6bXMVITHTPw==","signatures":[{"sig":"MEUCIGHP5psNeH1A2r0DzXsSSpMmk6GT0ClvGU3A7DFZ7D52AiEAroylZr8hD2ji/pfM06lQ7TOX9iat3ZuTLGCg92b+cJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefetCRA9TVsSAnZWagAAVxYP/2QR2dbLipNxfVoApU3X\nLE66PWSo6EnQ2r2u5obMfVY1WjYgrd1rAFqYbYXVNw4WfipCKD/R+vfOW9Fy\n2Kl1sGmBMZUH3IznWiTQ0/YTN+vuYDCveCOGBvM2BFDrF1SaWZnyzoCGGxJu\n1fATB9Ru1AC08K6lGyvKN5IonM3s+6CCoKuhfXgS7yCoNjf9+QR7VOYBZj5h\n/HLeUl/exmNVW1DogrIhHEXy9iJU+ydWSzeJc/rAmVUn2Di1eSVQrgrdBm5U\n2Gdv4j3rTe1rZMKlPpICDNEqBz7fWIHi0jA9+5ES4JW/rwrdQo1r6Kadza0o\nt7Q+rPgtkIEGwqqJ+KbZB3QQOpx1y16i6wDHPj9T3/bn6DgaEEQqkkzMKAia\nCpGnBMCgL00vhK0J22viGrnf3OoxNyStmJ1efWwzJMX4XCVCkvH0o6XnDyHn\niQ3eiju+JJq+lON5xSl5UbB3beJCL6L4+o0FdThAqzxbmAb5qWZJ7aa1MBh4\nGQ7kTvFwQyclrgGpscJLAlfsnqxRuQjqvY/KCkEaNSvaFUeXKwG8QI9BR7Mo\nd8Qg72ZERV8/CsC9MIpalCgXNpUQ2gT0Nsckm6IWx+BVyhrnm52yOOjy4IOs\n8rpuobzRkWfMVTryQ8w5OYLE4skV06n6JDbLdk2KeM+dq53uIkcFZMa9DcPe\nDR3R\r\n=gv8w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/density":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/tab-scroller":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.2ebfc5374.0_1618605997148_0.9268359382132845","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdeca4306eabc4d2b1340bd24c0d48f0a762fed3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5631828e1.0.tgz","fileCount":37,"integrity":"sha512-Zw4lwes/ptMPTufJbp7vNHxD5LPaqO2X8FHIspiRJv77N1C6fcm9ZdCWW1tdFQETkcIlywcnm4X3RSrq5rx6LQ==","signatures":[{"sig":"MEQCIASWvCewdzt+sCGOjH2yFzLD87CiZxloE/IQaGKIRFiuAiALfcO+bCZCqv9/qJdyqnPNFU5DiRm6N4LL2WDd0Vq0hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepLMCRA9TVsSAnZWagAAanEP/i03Fzal0R2NuUHjoKh4\nziiZvSrpGWKT8X/8HLloQXDH37nEPq39aydHw4tMJ6rK7FtY5+lmEgUBchky\nOjmdJo6mAJ81EnRue5OTb2ekl1kp4gNOIc4Ou6xsmAJdUtpSKzws9taBtbzw\noZ0P+2YEe8GQ5W/iCGErde4nG3CgL3Bl5+pfcnmvpodQw2RDTpeTBpFBdNdj\nmPOntfsI7H2+hOs/XmLp5x1EJO/qVDKKCI5hRKunkVyxbfLyUi6iwMY5Gnol\nc5fo70A5mb3h73+KINPl/hk1jiCEUvwZHRsgJck5oCjLmxNb5lafmhspkt17\nEenP+7zIaRKD6GqH7STrO1900Pk6LiL1Z0kaAn07InwbeW+VyH1vjhUOM01k\nNRoxMV4sLgEwTqD5FRJZUD69oYk7eSWwrotR20uv7u439k0vSqS/uuG70WLx\niYddL6fDK0E1bt2zl1KFpZsDHW+iwm0K4rwxxcQ8mNSOxGnHnW5A8zC7WNN4\ngapAiutgAX1iCYQU8ExlgCp5iTwzy5Rr9OIyO2ugja2nH4TXYN66z7GrL+1u\nuAuemQ4Eo27Pv4OBoMyRG9wwyQuGK0a5yvKOFMwvzhIk4o9qe/BbfulRX04d\nCjZgdEvLqkV4ILGV2iUV/BJg+F6aFfWYeutXZyt8th8GrTNKHEhSOmnSeam9\npvY4\r\n=R9gX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/density":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/tab-scroller":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5631828e1.0_1618645708013_0.3668947046105542","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c4a779ac54dda3950e085f3e5da245f872ad13","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.bd685395b.0.tgz","fileCount":37,"integrity":"sha512-7Uqk633h53wa9FOrscUHcp0fg6O7707ntsdpZDkWBV731Yrblz2L7FMd061CYWTjg7iwUZPX8iGEGLYHYLCzMA==","signatures":[{"sig":"MEUCICXdEp92YJPsCTGdWFoUK/EP4k8GR2/gnN17Fh4pizuMAiEAggnQ3AmLmioS6BWUKe/dr+7MJYM+NS5Q5vsbpWxzVQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8nCRA9TVsSAnZWagAAYGEP/1bqejC/9ekXgHFTzs8X\njFiSJUwHQ2q6DsAouVU8tneEBNXryZgsSkiD3CNkf6kQ/owBpVZ6nErrKpxh\na/AL+KT8Bzr8sRJ4f6MKSlvx3YHryt+Y08GiuIJgMrFjoIigjV+MFxAiWgvK\noJiS0aj2WAWZl7em9/V/J9umReZi7eEp9JtZ+S9jXQGOp2SuTBYANEpHp/mM\nZWzOsRm6rncR3hus6xaYpNn7x44zLBxcYf7b4eZvnDU/q6z+xWDIpGhYIxku\nVl2/xmz1P2nEGtLl6nuGa/uJihDLCcDDQShYr5psFYpP0NfF+RzjtlebYXx/\nbP+ziir0YZd2niv4f/QSTkavUOsFJBxSajDmjX1UA8TZ2YwMNTK5X2KMg8QZ\nh/7/abja8S2NAel/vvTI88Bx+l0I+dvdVEWgyKnDtUKW0zdQ3FW0Y5po1AjU\nC1joG6odQJti1s29xlKir4XyXVxElaH0+RVivKMhPNkRlcCipYu1fJSGGseL\n5RtwwDhMGry7h4IJXNL3fIhdt8Gz9hWUYEAUYzqatZafjFyBHO65ZMv6+397\nvYbDuwl+FD9rOvdRTUuZLTSoQA2uxvLbN0xEvIcJFVDSJH56+gmcYiszmXtK\nKVfP81yM9whFRh4jAT9cOD3jHUvFlxfyYNWStwEpC9KLwWQMY9UKZBDQADkg\nwWyl\r\n=9jtM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/density":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/tab-scroller":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.bd685395b.0_1618857766606_0.8624445641429743","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07ba77013a78965ec1a7b8ca66d222ced56e97e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b52196498.0.tgz","fileCount":37,"integrity":"sha512-XsNJAx3JReV4syCQK2Mkfl8XkT5XXfi38t0tojqYPZJMPaoN3haXWIoSAqs107Rd5ICM+mL1uw8rdwQ0ByejgQ==","signatures":[{"sig":"MEQCIHEXPIC6xuDOr3ylU8k+CWaOzPjV1R/HRsYNMwUHnbW2AiBAuuoGg5JebuGqvh2e7huK9xHF3cVFOcwHe8haWoBJAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeEbCRA9TVsSAnZWagAAx+wP/2S1MRX+6BAnZCxiYztt\n2qi/+XmG2qJ/KBysAHDGfJyYVMOKbxNKokVaP9CooOmM+xbRZ92/zuqnNyOY\nH0ce1JU8czaQ2qVdHPOwZs+WKmBDNZ8UVNpeg5JambruGUvIYLTWDw+8aybi\nmaYKwudgdlvLAp56alO/gf+2LWpboINn7N5WCbF5yomFIpzL2qj1fvki7TUG\nCoMJNQ6CwIA9fJDyKVFz1YKOZvbBJCreFAuHFQiRLqdueAYcbtidvNnS11bH\n9JnABLRNeqi7z6SzFrvItwu4ahWKLhiwaMCQVs8QPrOrRIm7p9zaFDURp25N\ncWp1kKSZfOHmIU2R9hnyAwamvjjK42Cpo+RFwAgg8Q/Z4g0hTs/qxs+Jidwq\n1hqabbUmc8c4Wf1m4PUFlYpPzG1vnHd2kYVPM8A5nMPaKuE8WasMup50R8Hl\nQ8Wof/kEKc2etvroefqZ2hWpcOXHtCajKxLq/qaa838ToqilMQqvcaw98zMi\nyi4gIZMnzcMQWB7Eq5c+5K9W2Sm5ypkHR9fOzPKV9W67OM3dBZ7qlEgqpGDq\nSxynftN1U02MrxgeVuYq0DB3t8nviz9IiNIRiVyAWdr2KTyA32oV//ZvNIHm\nqlj4xYw0a+SBvYia2vZHSP6HPZVIszR34UJoWoetwZZ6gsw9J7gj7cJPY9r3\nZLxu\r\n=pXUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/density":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/tab-scroller":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b52196498.0_1618862362942_0.04949318843589734","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb39e95fe15897d38885dedfb2f83aa593361ea2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8ba3e298c.0.tgz","fileCount":37,"integrity":"sha512-2uNNhpkEm285MABRZYqXwQNbXyFK5/cYT9viOGoHkaUIIlHRHHhCPjKA6lcr6YgjN/NjFM88SM+cBOUr/YtbRg==","signatures":[{"sig":"MEYCIQCv39h6c8FuqGInIUcJ7FsJhpl93SVcIY9MDqrF4lb4rQIhALH14IfI8CPkQGIIevvfjJcuzdoBlMhwjswd9JWr+AX2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDJJCRA9TVsSAnZWagAAeggP/1XvvHV+IrVyI2rkNGg1\niWyjFbWo0erMqhTD/EMgSL5L6VkQWniDYazRJV2NmG3pWfFO2jIwft7A9Que\nEaZBBGf0qF8g5uk5lihOf8Ddi84XKiOh2fwFTr/9onigfTfZyVpEwMB3g48o\nd9URZCB7DAb4GIbMkL6tH0XAfoFsFzKwTw03BZWCJzZJkUuX25ngU8CSvQoJ\n5m7xjdxuqETUHB8xzWxKu50BxJPRfmrDPz6gM43Dr0tb79kUQ7G63raiIohT\nazJ7Gn2fvhTcXQ53uIKIAxNwm6XTqSWiluyrW7E8s6rkh0rPvIh1HwJQT4FH\n0wE+L60rQJC37oGbmNGqxtFcIPPamNcaOXmi/PvVxLiVmGgxe+emkC+VdCF/\nni/GRnvbUn+FNkc2Avx85qQh6kz0DfVRLiq8mwgIf0TGjeINuAz3sjjTVgfz\nrbbDlaOa7eHzidbbxR1XFLCGbIBNErT7psnKXfzzPh0gz0vix6MO3Y9VSt8E\ngMawKfpA3gqUA+cmwOKhBwpctUfcxGho6VW+YxQIZwIFNTTgcir7SDkKEL3h\nVp+cp/v/o9GOJCu8mdGTVzNEj8VDDDd3n60k3lss9nF2XKGRzr0fVAG+gbux\nfEv+VbRq0cMy+q7gSskM/CU6U7fYt22xBxcdi4dGxhPjejC6p1FgPbR2XAhy\nQU5B\r\n=WfAF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/density":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/tab-scroller":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8ba3e298c.0_1619014217426_0.7601672840661375","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4edbc54b513e767cd6bdf869dc7ca59ab11a5fa0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c629eab71.0.tgz","fileCount":37,"integrity":"sha512-QN4Oy2iUiivaT0+Tn2XOopFrUeGmbA10/dMeZC40ZTW68ts66uQCii2ppU6z5PyDbzoaRLpIItdyKZ4QbdR9sw==","signatures":[{"sig":"MEUCIByGTCo6TEww8EJC21yQdPhijfq+gsSaHy+cWKjh93D1AiEAmzokiOFmTiecFplvRFhVfWQ8xP2nWWUfFsJB4fpqZKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIP8CRA9TVsSAnZWagAA4g8QAIe2FmIpqD0n9SyyWiL8\nTeZvzWuJWQ2W+prYxSqU1Epj6SQgPbtpCm4xNeEIKStsYWN+YiiPGs3jSOio\n8KF0MuVoBrScIQ8HW21WPxAFxiNRjiib5/PPDDtLSarSCbM3L0E2Nrrxp2TC\n+cC5BsFjycADnAihtsX316tlBYngc0yDd3NVWND4ZmY99Zr0l3gSmzmHVRhL\nwNZPyXPWLpq6NOCcEs/c1iqg+O3HYY+rf6WcAIW2UUswovvMPlodiwpgMi/O\n5/t2iUxrh3m6QfWATbcJwK23F3t1CBwCtO6ToOkhHIaAVeZKxwHCTbzi33x5\n0umtJHB1xUV6K9e+uGMSUsBqytFb/KxsBA5S21msk5KoaFAcL0XPXxQdXMmy\nAub6zra/BvVt300fO4w7vyhwO3D03drOMmPhE2PO6hR7xqmzGQZRjoxQTHtZ\nQEj30p2r01l90G1v2ibPqXxexmEMYSa9votIKyleuZeDGQ9d5CiWACc1PLBI\nHkKlcq7b7FQhiiDuhY03g5+XXSHdVC/chm2i8kPmGl/X6dggTOJYask4rQ6p\nZNxRWE/4j0FlYTlSpy+ItkmBPoC3mF4thabaBq3EldC5mD7kf+Xfg4F7H1sW\ntTo1pUSqO0RxIY969q4PJekBxRKva/CSyt6V6hZ7swd9pcQUA4XJEHfN6phJ\nWWPQ\r\n=3n38\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/density":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/tab-scroller":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c629eab71.0_1619035132101_0.21701091829037988","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"718ea88ceaa109bbaaeb837bad8c342325c64ef3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8ace3b810.0.tgz","fileCount":37,"integrity":"sha512-dbpGgk3f6b7ulMJ57wl0omc/Hx7FrxoaV7kG9nnZAVW/RMRa2YZhqoxcfAgGGXLzDOi+I0Q2h/9X2MXXusOCoQ==","signatures":[{"sig":"MEYCIQCgQhRZOdwjxWRqsWsN+W+BgsdRoGM9jGCYCnssp7NBIAIhALc5iPArJR0sGcn4uaarnat20JpC3cv/hzNOR53wM+jc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI18CRA9TVsSAnZWagAAByAP/ikr23uUUrm0u83uvpk8\nZrwp6kphqwlZAYwnjXBsBst7lJsgt38ZHfo+7ti2AlA9qvZFprg3np41YLfA\nHZvyJUz2l+/4nOqFdHjZhoBBAG/PMG0sb4rgmLhV0h3WTdZYcVok8yNjYKx4\nY9/eBZ6jw39bkb0ZelpqaWFkZCNfJmZiXz65bPC5OdPh5lJZiUhy0uG+htWB\niXZNtuA8JbwaAD3khSoumdO8ikZPdNHbJgWw1fxKHEQYMLbqJisKIVMspl4g\nSeJ9qEIvNJxIhGsJ1FMquaj0BgXFFJbcBGTNiBmXoHQT6Wg6GzQ5wmJnsco4\nXhfnigsh+3nSCJPEKn6qID0N+hPWeFPXoqOdnOi9/R0qbte+wq6aWVv/2vaS\nNYBFbHMw5sMDWL1C/D9z+L0MkvNdXtZOA9EmKHUtq+XBbypLKCtrw8ZjTTAL\nwtiIwW3N93asmj5sL2GDHXMFAsmX86zs0yzQ0RQq4ChNZyNdmMiw7DOcII1s\n4V8LEU8yQRMpL8OzhK4c7n8ykPkf/khvcf/kBa5RFrwvibhl03CkCA0Kgnl7\n59KGF213kSsPnXDgWD98CXp+QCwhGukT4R3rg23qnAUoT1yWpJwpr9b0a83o\nrKudvIMHuktMHY2JUvtOf2QoU2mw05FhdDA0vBsx8dN30abbuTPs5LnPxXZP\nMIsb\r\n=B3Ju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/density":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/tab-scroller":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8ace3b810.0_1619037563857_0.30882599678310374","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7793d2c8c13105ce13dfb263b641ae47a55881c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.70beaf42d.0.tgz","fileCount":37,"integrity":"sha512-+32ISyzIKBRg0GCENrnh5yU0ME2F9RQMEnG3ucWOi480+ccvog+sMekOLv3IwI5oH9m6aTETweCBelWgc0rQxg==","signatures":[{"sig":"MEYCIQCifKvee43H7ZWvz4AWX1F4moMOsmxMmzJtOGkts6qGngIhAOGHoe9mnGkUVTGV6eF7alHCFRcldTa7KlnCq7WPwtCD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAuCRA9TVsSAnZWagAAY8oQAKT8gQHNZWo0bdscAieV\nhsE36KL7nuYJGQdTdcH0LmBi9i1r3Cdgr8kK74DSZZNGQXiJG9FTxqofkbtK\noZaroeiTMNREXP6DSndXcvCC1OkGKoGnO/KS4RxeC3yeATQ+EcyKorBIc0uv\nNUivd+ARzwiW9z2Zbv2pOoAWfIzTj2i6l33+9nz5t5JY5TrpqIi8/mt1j3jg\nmOCjyxzQZF8OytoneAiEYDCK2Re0sqBjdZvIASUknPKbxt89CjqhMD6IwKrn\n4uJiBlksf/aAzrL0Q2hoEtF3hqSck8ay3YxnBPEYXkuUR4K0l32ZG9BuOp+J\nYme9xuaelKP9jkaclIp7uI8h+lD/q5npzTB6A1TH0bAJeTikyqrVYDZw3Bl0\n5hyqJ0gZwY3gDmuIMxJTa+WlAsATjQz9oBmPyg9+7i9lAP4V5idWShZB6ODJ\nZTzdI/B+eHRMNtYqxnBSmO0bneEpiKB7CHql3xDSI8WKo2LbHeTcYrC1zqaJ\nwxVz8rBJXoLZZVZL5L/XA6dbJBpanqjstXu2oJiTHGGjXu9D+RHFfFkwWMK7\nLlFWSxWykCyT9kClGF5OLGjCvWYM9NQ++P0V4EYZbWZ+79DlSWtIKt9a88i1\nP2zkuu0Lsn0Vx78m4YWRLS/laAwdC8aiVDvjNy16+3Ci1YZFlIWuqDjt0VTU\nGUAl\r\n=DTod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/density":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/tab-scroller":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.70beaf42d.0_1619038253885_0.7313434566291022","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/tab-bar","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"344750d189fb2308b4749b082ea9c43f20250cc9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.cad489689.0.tgz","fileCount":37,"integrity":"sha512-XpM3q13dYKQuvyzN3AZUi+cb/JDejhJa4Kwvf/vHc9mQvT7fjOPrAuwllBvgVn2ZZ5k2ZMf06tvRcofgjnvHgQ==","signatures":[{"sig":"MEYCIQDtwngKLGej+cmx/7Pb+za+86siAuiaTxs7ZgNDtyzM/AIhAMsXPxQBg9pnPs2gIXQYsVmoBU2mw8KHMIpseXuBg3gW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggamACRA9TVsSAnZWagAADJwP/0xu3eqllb+X7v07kbqp\nyj2FnvTg5fXoPfauqKBfdnOBAN1uf6KmxQ7eHxaQnECbDAvtH6HA+Goe7Hev\n32K9DJi/IdpX0fFVLkYUBn7Fd22vtFAOJxz5mWN1xfnz95BTy+xvo7MTwTqH\nC2kiuXCq1X3dYThwYgEKTuY3upuYqiZ62AhaAE2DneADyJWsgaf5XSkzb4Jc\niZgCsQIOLA1yMvDPpccbnSfPutadSG7stY+WduYT3We68P7ly03gm+lww1SY\nEFOk1RqlAuGEWkTizEhf42iNlgIiNhc0cbLQK42mmR/wDJIIv2Y+sPTc+MU3\nW1XowkeyB4E/5/1pHLKopUl+1j1MtFzaHQN11hyUhYZTTC8wivPpPsM5vTXt\nkLr+VZKAm//JF9W0z28PcU03xkcjIl1cl4xJlV4Mf+3nKZkO0HvcmwApyAbc\nBr3yhUYVNzH2P3PmvIA91R2u+LP/z/V75XZ8Hb4ciCgiXJtfw/fPTWOrBPY7\nrwst54xeF1onf2ZTKPEB+mw1fvFXKPOQWdPDrFr59xBZYYV5a57BZtDI/xbG\nTC6o2oYlB1NOG4W42bDfvDYbOwBgz3cq8Ti0qrAXfp6JyyoxGbQIsvSaz526\n/thL8EH1/vQIrTun7U26K4Sx+SdV9BgmN80ooZrojmoWn1Qnhv0l86wvKQwB\nxL+5\r\n=FDgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/density":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/tab-scroller":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.cad489689.0_1619110271812_0.9204993574101243","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c793b657bb9edaf099f77a8cf7085bb305b63f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d928692b5.0.tgz","fileCount":37,"integrity":"sha512-YkiEXSZKQHJbrJUjdrgCCihqg2X4USzI211QzCwLsZYwEoCv97jYKSNFFM+LNmKKoihqn/R5kxVp72nAsbtVvA==","signatures":[{"sig":"MEUCIQCdETwSMJfMg11ahoSap08djrgeCQvhA56qtmNlmcYFtAIgIbtM27ZpY5bVEMun5cMmxI1AafsztAAfGueXWU2wzqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwWHCRA9TVsSAnZWagAA2ugQAJXmKFS4zoWfJoK8temU\n/OobNR+fHHXwpipP5v/1jiLjazwqENvaPaSmwA04+d7Mi5iHTSluCr5Ta915\neq87PapsxBxIjJuZgLp7iyoV+ZixlRfvTxyzzMhk4wm2g1CS2Ug/0lrN51Wz\nYVlWYN8DIJNLMWLs3T9x5Z6ajD/TWKXwNfnM/o/YYuLnGrcgdCcy/UZzPuN8\nSquaXhqwXNlDy6daLHQP8Dm/hploniJUpbYH5XacMAKNePdXtN1yFZWLdDcF\noqUIT1hzDw4+P8asbHEvDweik04nL3/qT3+6DODIEfjN+G2CSFVapKUx09Xz\n/P4mbZR5OHIdQcQIudFpTEWKKFzXHUcfoygsLzWyGl6aGVJ0PIqq7YwYML/Z\n72wMktxfz7Ca123fNkmMkf+x0gmmPQVefPeOvNH4KqeIMhfUCsL07tBG/gJb\nqIDxltt0rvhIvkT5fDsODfTu5qgsuXDU4Yiee6JLw35axTeMP2xnnB3MP/Xb\nytgLkG4N0OiPxLJPOk/piP9sajzHl1sibF+EEFs53iSqTXLstkozym4KzBT2\nMYs5oGk3OJiS7ixzLiAWJLtsQY11CiIxbhApz2vh53FfzdaQIinJtWwke2D8\nq+pUFaKczVDaRoD7kLy+WVK2psDAQFw1nUk+dY8rU859Ixddf01NCH1mTLkQ\nYY6j\r\n=HT06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/density":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/tab-scroller":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d928692b5.0_1619199367390_0.9083201950519393","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c4324dfb7c66a594b57a886e7a32b5328114e48","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8f68de8f3.0.tgz","fileCount":37,"integrity":"sha512-56AL4Dxwf0GVTUlC1qRhJpOOWRVqqAvf4R0NcCXZs+ZAeCSP23ixLg/Y7Ml8ysxZmqzek9oRa+5mflPyOS6+wA==","signatures":[{"sig":"MEYCIQCj5YsLhefDI4ZuLnLdE7pmGX4xQXr4IQssI+i1jN9AUwIhALf7WT1es7oT8uz7BCXKvwPcu8Fx+l657aYX+CiNG2ch","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw6cCRA9TVsSAnZWagAATtEP/i/ABcbq4ggxnHpB9hWg\nfrjkKAodhZ9lUJnSkzZ5ZXR+5rr80xrCPpIvy6FFSAmaaZy9qmNvK7k4Fjtj\nwWEFpqKSX1hT8AEiELC5DlCfD/Cpx37rT2W5Mfs4IrTW7kyIhaEo5H0YflWK\nq1py6G/WTzC6UoY1bhMtw12S8KRal8OyK5y1RDwX5E02FjeRZ2etkHfSsdKc\nJOGdSPbW0qsxjX7+q/SSoQvs1NHdL775z0KolXxXso2PpecOE3FCk4xMCanm\nPk4iBLa2HaUXmNUxxnzhZU9H/FFO3DWbsj+1YsljkOWm6gxXzJjgoCNbjAFk\noHwkFT2SBsX5ua3CZerCUsudIClnG3B50C7LhgotHHBFDBYvSkirArsf+L7d\n9TEGSqIeOunplLVUk0M2b69xMYoYZCsfKyL9AoHs587+9UmtAKmWJKnGXdAG\n8Bk5nU4Samqk6xUA9dXPAVYg+u75xyibnptVGxh/DjSMcsrYPIOF94xBWcYa\nBnXAOFzVmsqF75MS1ETYr1rMsMyTGNRO95l+6C0s/mSHWmTFRlfoHrd6nVZj\njWWcwU0nX1QaKurOr14ULPmVx+/IMjctAmBidz9fEYaFDt+DjYSSKpZ9E1xW\nKSi6SMu+NQzDK4W2Mk3iEM0rBHm2q8bdQDnzBhqyogRDYnL2DqQ7KB8C2lJk\nw4f2\r\n=BMA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/density":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/tab-scroller":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8f68de8f3.0_1619201691661_0.23916947707263803","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/tab-bar","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f114ba658d88c372177a63ecf589b2a1d0a9d4b1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.05753cf77.0.tgz","fileCount":37,"integrity":"sha512-nSuQrIts7u5S/SnMB3JWBOh4cy0/kGGMGChJyqdYSqMoA2OEsIUBO7JkLeW5uncI14WPUhsfYBV9X3RxpXdcxw==","signatures":[{"sig":"MEUCIQCT/h6hqS/E1KUtEwG0HKqZlXTBKsAxRA5Lq6CWFRIvggIgXGS/RBXubqiL10o/hNTdjnxsS/3L77thceXQ455cgxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1vqCRA9TVsSAnZWagAA/FsP/ROK8a/brQeWuBngSMYq\nD8wnPa/XEpmDy9Q6sS7hSiT9BemumnViMjtEwTtgwj4v9xGSHAh7E78gHB90\nZETbwEOi1Tj31XkVM7w1GyPjU6b+RXgTE+wCzQoA4R3AgHoW+qrQTgbJAmJ4\npIm2pBypes8mcj7qKBS0erShkI9Ax9RfYB6GdpsN0rgAWmkIZ0BDlLVCX/sg\nZw0qusZAfwsyFq0jjgZxY5kXC/iwKSNV8iretbVJrdjFu7QDoPjntCorZkSC\nzqKw4vlT634deTMXFMK/WLIaPDthzxWgz6RQ0gLx0sXcnSvZwtUAIwrZNwuz\n0XHHDR59vOkVt/t52LV7D/thTJ1dd/BJenf0yN04ho7DAP0ot1ENALbRkd7K\nuDG/DJ4NTVbDJ3JriZQkBb+8ZRTqNmFKK+07Lb8YmWwDbM6XwRmZ9Uk5TFun\nqje/YS/icFYjH5ObqLmVkWPM9hbHX/9dlFcFZDX+j1Io/jHfHJbrIwUBrgW8\ne95vgTjLIEl/GUtuF0IR1nUJv3JoejHU2apxoH0UPRFwsXvZKuj8hOhXqm3W\nDdwLXP7m/1wm9VwJASzIE7jdxsNXnpN2lEwxnTfssqiLMnxl0YGgO/SVI+pl\nJhfCq78fzxMTJzqR5Q2B3cRJnY6HAc1EuSqKK6DkQZuJS2qsFMsDTC1OHcYi\n2Y5r\r\n=AETa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/density":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/tab-scroller":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.05753cf77.0_1619221481726_0.9521756214886681","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9713c3f8313addcb7b941b42de0cf8c8ec9cb540","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ef43e6d96.0.tgz","fileCount":37,"integrity":"sha512-4MZTlzdCD2LOq5pi1HvOOqmLQK2kfsy1JTjGcjmvzKxkoJzZQADzEGDWgXFAJcipebyal7rSqlZAGiRSaeXjqQ==","signatures":[{"sig":"MEYCIQCNPL6J/WjUjpcCVpjVS28wajqW2sAYAm+Xn9ECYGXMtwIhAIEsk+S+BgKIMzDQotaplTp+T4TGIyIv+08xsx0Sn5j9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11yCRA9TVsSAnZWagAAX/sP/iiuwGrNneRvzNaQwGPY\nqa+zfwY7N4+CtDzB09vPruL40Xa4m3gP3YOoqLdoGQNMQxNqAiwrUD2LTMbx\ncADaOmCbL0+4enWMF4l3d2xY7YQC+TZ9JV018GPu9znNZ93E4NkClGLnamxA\n8zICiEm/V7BzCt+Rl3ogBRfbSNxmel4GDe8FOJo8nnn7QNd+ynZT6JWQ9cuv\n+9uIz4DVpjshbwm1R0MTe+ZAaJ9y0d/OIy+41nz4hhEQmlujBbrlMrHCBHnn\nQdMlVDsl+STGo8NgF8WRdi9Le8YNd4J9j9/OLTKT1jJ8GfcVR78MVc3tQm6d\nJwqN4Ar/n+TsR8O4MtlzmoAKTaEvmyBLlNJKCXi+3ulRK/UeCa8KUE25oUw2\nmSHw2dmhbvZYX67RCN5v7NkJQYtUN4svVD6Vsl4YQLorpv4TgO6Bhsl+uxpi\nt83j2vWipRW8LiReOfr1rnUN9TPWhzaKlu8NBFvoJw5PbKZN3jerJ+bbgYf7\nwnZXmG3fI5wOkkr1jkB+S0Q4boQDSooty6Cs+cb8kvhHqfbjhQIQMHnh6xMe\n0TM2r0gHfmAamCYueXT1RZe5oZfXSZ0ZaGnGAtsk7aCjsEOAdfWItrKL9VJg\ng/6ny3cB1zoAdrK+H1KiuCPw1PaX7WfLY93i3FjmJHXxPVMnuLZIROcU2g3q\njsDB\r\n=UsUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/density":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/tab-scroller":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ef43e6d96.0_1619221874402_0.4389561490350593","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/tab-bar","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fc963513115ba7166b134fafecae19fa20f2276","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.197f64fa2.0.tgz","fileCount":37,"integrity":"sha512-5qqMQMLaphtwPmep2nBXp8rBTGIOjFZvxMuYrWwbcBryxmflggxBs2FKy3O01p4RIfw+hvNYKjcKxcexzBRyBw==","signatures":[{"sig":"MEUCIGHPRUppVCU35NHuSscpMIOuWI7rzCAGQi5HjVyvo3hsAiEA4KjH6Tv9XAN3wIKhDzqVpRLM+KgyErCVJF5F6krTlno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvRBCRA9TVsSAnZWagAAxMoQAIno3RS8qdWRKxIzNbsn\nkt2ZZqrbwyVyX9pu5McnAXP7oh9b1IEbmkE4fN55QIAVE9l++NJOXLNJUNGF\nzaysJbGUJ77EABdeg43kn4DEcUPhEQVtyASIeAyRo2hwR/3iRRwwUl2o98cb\nROgLrHOUjo19kJ9JgYJ/8x9lHJdgcTNBA41+lGTtXwGqgIzFfwV7tUkin145\nMFthyMkFxyXbSclmOvOWZytz7Ja3EGFxKLWF2Kt/XO7Omhe9Jqko7HvDcvZ1\nycxjbdsDB1jk/+WjYG86s2fndnTnBwDB2q7TrjORzzEZrEj2QI6XvOtFBtVN\nKyBuKu8oeUQrcBMA7jS1cG8YT22M87/mwkima8QxxANmozMNfflUHjRQPMs6\npXj5VCI+G8BxKGMuqDxWWs8wJ1x8aGOayL4NSJY4eKszSx2Mg+LBquksXDtw\nfH+sP+wlXFrYzsw3VZYwIytW/yVX9KKX59EwWn+BWwYRrjFA+v1RBVEFE3Fp\ntrh9hn4wlyAjMon0BWnIBpNeQ+zohknjr+/Dvwk+g8QP4mORPB5l0Cq5e/Kf\nLCNzf1gVED3pk0DtPDl9W8G8IHOdst5GF0QOFBBoGYZ8e4hibs+u0g/oStzf\nUKsEzYB+jBFdjo6kzEEV2sdpJpbFYBxWO8PET7VoH8/b+hWsnYeQ8+X3DxRo\nSh5a\r\n=KpUr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/density":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/tab-scroller":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.197f64fa2.0_1619457089332_0.9574628954967583","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/tab-bar","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"081c577d8f33821ee066ba56a12dd97d73d6c2bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":37,"integrity":"sha512-QMQLQRvPTcpHdFBYSxRz10bfKtsDxABRx/R8wUIAecjYndeAKxeU5E3sIwBgT2e9nXdAxZn8laFtJaOGCqgxvA==","signatures":[{"sig":"MEUCIQDoMFhet+M3F+DIVAOdSfs4pA1t4Kq+QzjDjXmE8yl7TQIgOv4VDhjYVuMCf5qsz3bDQlwVVCruU1B6YraeLaNP3Ag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2cfCRA9TVsSAnZWagAA3eYQAIvEM4zDozfzNk/0+oEy\nxQi1H43DniLT5hAgN9KnLOr3NriMpTiJkvTibaCBUy1+VD+FYJ/vqnTUAaPv\n5YHCeVWsBF991W+/Lsh8FuPeoxB0OKAeWob6WCjHdgP5aq7cFQMozMLC26XF\nxd8y1HOIAvfrMPqIFX/fK+8oa0anypxnhQnv3Io6e2ZJcDyU069vt9IZkCwf\n9JjOb8c7d4rX0SrtimKQz7o6IHMtVyb/l5WmUEF8AOXsZC7micGfOMKzlkbc\nPy2rnpNxAce21jG2NQR91VCvduU7zvL4dEDMRbl/fSD9DoHvkB/TQE6UUhms\nMGe232Q5VA0PlYR2lQivuTfR35VlT/b2utj1m9hOYqjui+8qm5fjaIWIvMTV\nMhi9fVcs5OBuSutKN/SpBRZ9rTHy317kp8vETqW04ZK95VKnyopD7a35Biig\ngXervxmd0HHawmqO3ZyzdNDZ9sV9FUhoJFugCMc55v3GG103MhAvIBK2mfE/\nNoz0csxHnbq8y8kX1gUTdVnpMo+ks7dGZ3P+ZtK8qHKs9iObGfFWVKlheW+1\nsrWCLewynWmtXe3alhGzsGsSnbdYV2zfOzFEDG3oEbJUL0UzOOsb7yVziraZ\nVb02asxrrqSfvW30TEX6LBPbMFUbFGa1QiuxZjcbnTQRvg5/PnySCYsZxpkd\nkze/\r\n=kg+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/density":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/tab-scroller":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.55ad2d7d8.0_1619486494901_0.14768346331129023","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39081386d9c6bd8a00d19d6318740713457849c6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ec4ac5234.0.tgz","fileCount":37,"integrity":"sha512-5aOXIbIS/sc6dM8wJkwB9wAMPKAZprRI5aRxByaVAX6PgpNpudfap6IwFbhXBadugPxyYXiNa9j2RLlKepsdrQ==","signatures":[{"sig":"MEQCIBcMkbrt3py9r+bQf8/sSECQejbBdps45dznJnLNaWFXAiBz/fQrATnS+yHYBp4AXzc+jUUeLfJGk293hAMjDnM6+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8SLCRA9TVsSAnZWagAAlqkP/iwcP8noec6nr9GAuxtU\nOWwwKK0zCqbfR8g0MRlVmJtvEhqWCPgP0fsZH0A3eqikq3p3n/AaaPXJ2Xe7\nUFDEs3R0daq79M9atFPM8Y3lt/jXYQ7q6SqqRhFXurMfx1IM7M+KntO4dA1z\nyJ8CnWpppJq1hnn5mSqEve1xG105vzLUrUT9Pi2AD2/ZVKb0B2RakWQ2Y/lt\nv4XTI0ya8NDuTQh35Ft6iwfxld7mE9nVYgecatJSsoruN2+s+79OjFSQfGWt\ncw2n6kiUBveF3nDeEXWWA3+Nxcxs2390sWQcXmS51/Kadh28IAHvfbITmy4N\nrnvlhqlzJ2krs0LSplBQaQSDrAWUiK0A8HK+E4covG2vYZ8+bEMWoUapo9Ue\naO+DyDqQ4SSwjvJzmYZf2gHB3k+apVvysRnwuIXcabbxSygE0/klZ0SnGJEd\nfyeejMPKf7Vi3irSDrL6i3CDYIyrbj1rILpudQY4l6KY5fUklpgLiT84sLW0\nEC7nLYM/ahVtSSlG8gHTDSK7K/Kt0uJHrgv6HYrYjNmmq3UDv98ldjUYPHuH\nMEIYfHUcXBZl3v54EUgnis2TS3zgisGMyg2Mx6RLtnma8f49D3D6dfoUFh1h\ns6xNRxBBL5N4vEOn7DL0F7YJYJL3064xhB8RnnqiRlFeUYbZhSChvuWM4mAG\nNYb0\r\n=U8PX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/density":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/tab-scroller":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ec4ac5234.0_1619510410871_0.49197707661125056","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df4f13d02ad64155441b24f3f0c1b6313a5250a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b0579acdb.0.tgz","fileCount":37,"integrity":"sha512-iwp78kilsJBjgbnhWDRhd9hcuuL84BlYchvOrxubhtDXlaaVDtmQDaRDa3LxsK8o45ICAh6skMnJq4pUz7EVLg==","signatures":[{"sig":"MEYCIQDwBLSKPZmYmxX+g2Z6ju5NSQEOVJyBMWOMwPvubm7bIQIhAOH8qOSaq5KdG5d18Zt9b79OXgwbSbHLua/+edYIfNZj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81uCRA9TVsSAnZWagAAXEYP/1RFJMHwaUnDJMAb0LkW\nrRdL72NvNYc+Gkj0/O7GVBgbW2nqFdqKlHjGd4QdD+uVywaV+W32We1fyKSK\nuBmKEFWBL21L5hjzTTrOJWUm4zbtXwZxrNnhpUeeSvwExvtpmH48hFrQctuA\nvc910WKPv3ihiLaClm5h3AqsWx/aUBSeSttdAKY2DLEk333jZ89eBgXNfCOp\nnIxhP+F6kUmkANOqiusxS6Nwg0Rdx+9FJc/87L5kne+hjCc/9TQbsTQ55ybW\nrV9cfefU/3+Ff//FTNA+A+qNIE2cEIAsl/EO4PgltzwtjfW09TQRPkE/zKR0\n9aCr5NV5LOl1Jo7flVwqidl5dDiXVY1YQ7q9VLMMAo7yBLzoI+/DpIjgbJKW\nvN6RVfboLbFxHLTZeHzp5YdhKOgICZ7/Nf4l8AA4YqQ/FpE/cF+RvecmE8BT\nSEKswKC9gAD88ISVz5m7te409IX3M1uDSPysAnQbxafDLryCKcHMLQR1kP4a\nO9l0wwAJNkfHT1WxHirAjUmo+ObNHQMqf5cj1/HI7bSJdYMm/ThMxUa7M/BL\nGowu1gDKQILooBzFwqttpPx1TSbStkEPFlemSHDWA69GMKdF9lyRpXv6SWKi\nST2k1pU9DGbdB3zx1qwQWqpjrODPaoSvscIwXxxl0G1aGllrxLgkoLoX9WIR\nmG5l\r\n=KQhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/density":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/tab-scroller":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b0579acdb.0_1619512686089_0.3198210340571519","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/tab-bar","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b000028a900f9f0ff150155b68a806fa67319bef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":37,"integrity":"sha512-IbwQUR7kZQDqNRhal+nzSbn/8uGG9wlMPG/mcyPbODXXtTQQUrmdijm/UQsjRVhEKjzvePZVg84fjJVbUFuc3Q==","signatures":[{"sig":"MEUCIB4aUXgcXUqaD50niQO+w23CSvqyUDgkXKZ+M6fhsQzZAiEA8Z4UG+BL/yshHfNEIv3zrAJ5XTFbDSgj/9YOR7nARdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHs3CRA9TVsSAnZWagAATjAP/3UvABqdgg+pgU2X/IRV\nLXsd2Y9VzicFM6iLl9RzZ3i+AUjREkYgXqDw2/VXcbBV3sXmXSR3XvdOP0p6\n+QzPkx9trswCRtEace245tAGiLkPOf5IK3UEQkkVn6Wt+FmiXzSBFu4ZaNpe\n0H3DX5bNPg7boJ8a0+TOfIsgBG8aQMh5UI7Oo51Nrh5vWMvuTIcGw2pKvV6O\nqEchfiHVQpILmfuFeBGT2cw1ueVEr9/MNzkyr3jQp26sWQ1akT89FLjP6+iq\nMN3JKXf1XclSuMIxFeEsIGcmpDfb18PmnqewJ6DIppWL4AhigSviaMtD038X\nmi50SnZfnNEDJBYFgNUflUr9nGrUSMYHvPLG5RXLheURGh+xEZ+pECvsfEc2\nWvcytpSd+vdiyfIrOR+7bG0aA5U3Lu9t5dvE2TOV1BP12xElfY1Ymgp0BdfT\noy+XT8cE8YzN/NIoF3a4Qy0jQcO4p1GmFpSFhmBGhIZxUviQWvl8qqgOc9NG\naJlQG7MbzNvO08AyBtdPQeBU0oe0DHS9Jue0PQD6GIQv/lOuDgV5/y/YXgR5\nKkzIwsq/xta1L8qKNBzFUUxm8Q6jWwtjD73vNpxjBRwcruhKMxP6LuG8Z9nl\nrFOcgCjClS5uR7rTdMhhGd/uspPXSaIszb1eDdX1WKTdr8KhJCtDk12DP079\n+5a7\r\n=Fygb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/density":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/tab-scroller":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.81e2d4ff3.0_1619557175405_0.41255117614341064","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b6bdf2006d93677ccc80f72222d676d5816dd2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c8edee52c.0.tgz","fileCount":37,"integrity":"sha512-ZaJCFltF8lQwNKANod+DiuhQYJNn2jNGSswWHoISn45Lsa5vNXMxHHMprhyZ3jeIYcDsDy9J9hqpT0+cN7w91A==","signatures":[{"sig":"MEYCIQC9hLDjD05W7fTQ030ej60JBnJ8ZsNXloOc2XGxckGDGAIhALPMGnv3zhyQ+c6KUs0LbnDAsqGKuz1EcPSLOc5L2yCY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIaCCRA9TVsSAnZWagAABtoP/jvc9IGZCcTfS2v2YK/A\nNd1TKb5p9bqfONho4EVOYep+mG1lbvok0beClSrFpd7dcI5FYl5SRBLrO948\ngObz3IEuF9+iVQizPvmbucfMsBt/GBbUkXzJHoBsmsDC7pz8CRhIcEZH5NzP\nFjRCJGrfO4f+P6Gj+L8qgbtN50+CckqsZFfRGhs+GBE0CwaznkNnoKneejBf\nensbmHP2VP+TNRSHR8i9CbP7HAafcq0bGBwuEKnIY4MFgWXtrC5NRRhreNlS\nvvT24sgme3TEPQt+0+pzhLwBhtI2eYnf8/5gIZ16fTk5gHRhhUZ4oTtiC66U\nRFVOW7eSAnJX1rNkZxonK5fgBJbMK+aqW3GrYz50f0Sza3bFi2aV6gICo3dF\ncfr8xrTh/l6yMpXN83VbRUj5JHw1RDartWA5BPUaUoLjlO9aa5KHEDpB6QUP\n8n6m1OTlWZ8ZlvcR7ADQCFsqD4zruE1PbXOfTLDD7m26/XaabYPbXM26KdWj\nTghSyz1hb0XLT78tMrqWsPeRstRTjews1Ddnfjmzfam/hmxTXH7BF2bc2LEi\nBMbinnK5kDIGlijKrjPhSQTHhd0K36GLtoYyU1IhEodJDcOwOLQqxB5hbssJ\nHwGbl9kpeaM9ivi0RCAnWkX18KX0Q3QxiVWdIz5FQqXmkCS3N+MwfzEl6rWQ\naLZA\r\n=5zDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/density":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/tab-scroller":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c8edee52c.0_1619560066069_0.2803680567549962","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b54484f393ea4d95f784c9d85df33901a66ee4e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f5b6110d6.0.tgz","fileCount":37,"integrity":"sha512-WrYte7Zo41mQjgr1J9XEYjKQ6Wv0jrGAYeH9KZO1SUjbvEc9NsPQ9X9NEJAqhrJO+DVt3mU0TqqvZ5IvywM0Yw==","signatures":[{"sig":"MEUCIQDZzuFM9w2vF5JzIKFPeJPOwGT7Y+u55xe2yMCPEskTMAIgF9VZaMcbhQzmKr498ziHVHSem2nWZ4LqtL8Xp239S2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIt/CRA9TVsSAnZWagAAJqoP/2LT1FuO3QSAfZA1loy2\nyGam/Ay0RUtqI1UdIUNjVxGMmhluAL8JGzG2z6IzXg5toWDUeV+iDKLmDxrt\nEeg9ozbp3utF0kGI3PdAdsh5TrlsRLlFW/bgUHErCeOvakWmNCc46NkSAFuS\ntIfODlL3vmiu0tfDQ+DH8a4ml+ZOIH/xi7cj087UQF5iY4nNqdhbCWjFy0Dv\nbdvkad4qrK5bzvB/zCISDsXndyPhxRbzp/TwfamOdSE4APqV4aoPXib/Zq5H\nojkR01KA0le1Doarizj2l2L0X8FjYI2E3s2jTu3FbNWWV0DJ3PtM/Ii3RuKr\n+os/z4sGkvY8BsUeOpG1dta3zpMTGDImRd0eD68fS23ga74aJ9R//cHHc/m1\nw6M79d5lDKCJSU3eb8ap5MDPrcRYhml0ptMjrkhpjQYvn5ji+Za55QbvylWF\nV5HOpndpT8GzzYXtGukuDa6TU5469Vw1VbAVmVbPVlvfryy55Wb+EolgBcz/\nqR7diRZsZ1ed+FZZJHCuFv/w4uwmTBj5IuN4s1QDbVsOArJghccFs/YFFnvx\ncoFkpKHXiSMj57z6UT/d0uuNCsyAFxu6RjfiltJJ4LAGVl0L8+3RQeSGgJBO\nEVW/SB2Gp/2ByVPbb6ZhNGLTtawf58ESujbITaFVSnwxseHq9/L2U64IuE2R\nhCbz\r\n=2rL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/density":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/tab-scroller":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f5b6110d6.0_1619561342595_0.0229986881055817","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/tab-bar","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc90728a911f13bc5ee3a08415d59e5dcb11e037","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.cee9b9e22.0.tgz","fileCount":37,"integrity":"sha512-hnx0KtBTUCBTgSyfeXmFAQ8SBjOaKaG43T8bTwrJdj5CdupqWzlq7cjiMf3gmlzuV5pppZCkiY45YVD46e1d+Q==","signatures":[{"sig":"MEYCIQCazdVG7usSpA1qhw1YAOc2Uq0kzR2Qcsdf81xRxBsBlQIhAKsmtRk1/RjIyD7LD/j76MYXFt30TT+mPv/I7RnHuXaA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjuCRA9TVsSAnZWagAACjUP/iUkxMlHnI4GPBDmQXhy\nO7e5yFWE7Wal/xq9XS3aoNOWPvec9Le6m5eTVkLInhvM44V4KipmGT/6DYhL\nwsTbBEzQHO1MJ9w9f6JJD7Y/j3atDul1x5+9HXkuq672HlaOqllMLun5m6L5\nA1bDwcExcvDlxoNa+KQqCnMa1XmQS06MFZoyHIX90yqpWZwP7j/zd5OajJNn\nL8OY/GmgLVHGpd70Qc1rqU36eco8Jg50ThYFgJzyqkqUrJyzICpbnwalLXKL\nFjrQNU+7hDg2T2ojoFiag1pUzh7h/jSHtcefVdOFHzKmmyilPAPdE/j+zrpQ\ni/M6xnkO2QnBkouhw1QbOmozqUkLtUGimc4ZKUFCfFlr0bJ56p3dAqEGY9jc\nPnTz/mjHiLmqohtgsn8fWXU7tNFGems5mhfTv5HVldohj8bcMrF3o9iISLcl\nXMceSQP+SL1U8d9Gsk86T9xe1gEzfvm1+2Q5JUAIjHy6STZqZc9woi9WmiNR\nmik0pVdWSa7puu3hF7CAAvul5rX0HnCO0lQANbW6tdS/MhIPnC2qRQLj4vM4\n873r5L6amRr+l8w7WADc5s7CH+b2+Zb5gVW1m3OMOWKfCKJCryFT1j6wcwE/\naOIxcTMjg6jQtHeQ11LHi+4fZPwYNNy8aP40Lw4MXsiMNiiORXdPBH5Oyxj7\n8Swj\r\n=cVfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/density":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/tab-scroller":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.cee9b9e22.0_1619568878167_0.36080967421743027","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/tab-bar","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"129c1e40cbbc7294d3117e40ee81a62e1088e5a8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.96e83fca7.0.tgz","fileCount":37,"integrity":"sha512-3mB5BfhWoirA2R0BOmlCmVIhpijbrcIXvfDJ4ggdC0dYbDzG2pGfAYYXKHPz4b69BFXS5upSqAa4cBOAB6dBCg==","signatures":[{"sig":"MEUCIQD7Swrqczg3NNiXTuI5dVj4XVBbELkG1g3Bi6F8UWSzPQIgMKCIv36HsdRQubxBEirwkcKppsHzidZucxBHkOG0eZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM06CRA9TVsSAnZWagAAVhUP/iHLWnmI8ntPoe8RYAf3\njJbotb79d+J/ATSy7icjKdTDi26GrDh8nuDJo1qshr9I6UzU4OryPinzVsIo\nmHNEabWNZI+lejNhzi060KPEdG2mjSonGlOh0CnFphyudg3qACC7AufKKjhD\nA083tIjdOhsvfCvJvYpwj0wDHnE5V/gB/Y6gT0BonUya7IZOelgT3sheR5c1\njMOgdY3G580O/hD8Qirob0k2Tcfx1FlCzqwn+8Oc0nmj8DXmttIDtezC6ZXV\nbKljt4JtvK4ma5ApMyG3X9lgQgREHl9B1Z1iXHonjoTGsKmLmu4DUl2st/Qr\nItlSmYOO3zJVIGIMNXDSe3FdHOiUHsX5avZzMeed12Rf0sbMvZ0X7Lybzj9y\nwTMuIxCcLYXIv0Ccys2aTiDWrK5zMiB+0vIGsjzldSh2LLf9PpxyPUMF5dTF\noALEgaM7iXPRCihf3sTGgp0plCc4/xY9Gm6t+KgCdqkWQe/oCZqLPEgX0hPl\nT00H1ZNjJt7PApaBBB/bvMtfiRdBcTjt8cPPgawBtt+N++VFd9ccXVFs7xC5\nv638R0aicHyi9B4BXNXcca6gDW5VYFqc1C0VZYdT6KaMZMSRMzdqMItHdfLI\nPdoyHrjpOxxmxOgoMzA4sTQmgLritrJFDIu7wsS73xAS6GN7viRvddT3WnvD\n6IGN\r\n=kEdJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/density":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/tab-scroller":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.96e83fca7.0_1619578170010_0.9164678157994586","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1fabd5a05f3b114b4887ba7b971e9eb9619f28","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4c497bd19.0.tgz","fileCount":37,"integrity":"sha512-Fkd9YJjy0epSJPtNw8F1wo2U7Jux5uZpuPcAgSDBV3AqW9zEEzWVsrOVDXZVycKrlYldDlKkRSDSr8yW4uoUBw==","signatures":[{"sig":"MEYCIQCVpaictYbmaqm18KqUruJTzgNkVib6gZsv2a408quUYgIhAN9St05yEgj4QCpmQyDoJ4FB8BCDUR8Xcc67R+bqjuCx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaGHCRA9TVsSAnZWagAAqkkQAJqMBnw9VpBWXM01TjuD\n7sA8ySkUih+7BWYt2n5Z8KLrLEHbmVnr/txFwamDP7feMBsnwHW1sMbrpjSi\nho5pYpHfrzB0JKidUbsY6ToxbxtEFazAJPCD6HMfPmBCAKykiPBYCMzxrSzm\nRCYYZH+Cx3YPi4zOzJUwNmDGRlbz6M+a7Gnc3wFAFVCYVG8HJJvuzLGIpCFZ\nDSwRzVjw8oyHLKtYwMSOWYOFhQgG54XtRUsaq2nhQhBQdMPjryz+G+y/WZu+\nvb2gdR/yX/gtanV+SK47IWSMJToZBzubbwcRZSb/Je3uz3akh7NWfZu3YRKM\noZ1zmWVlmTpS5BR6xMUNfQg4KZoSsBEwr+mue5WctKWuioVqPUAKVqFpcXvJ\nlWDnsTZ93cnLEcw80i07TO0NIzXmt5ukhV4xhPSkyCeiQ7WMGKifFOetCk3D\n8RkYWTMrrlFfrCkfeV3OA4VRHF5EyVYB+7KBH0z8kiEo9kiENpnKXR2SoDWt\n4TSsPGpKm2GQUJzgXllLqIehODHGG/4Pt+R526qYbCu5gzyFW0HaCdFjDJP+\nppxOwrll4LaWtxR4GJlVTlGN4UZZcqDvhx/0N0i6tIeGongFFKhY9BiVXQBS\nbU0q1RHptGwTdA6BzMbNxBaZdN+A+5M+E/a+myYBx1xYPRnqGVRY0aXj14dW\nR0z4\r\n=0Ao3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/density":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/tab-scroller":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4c497bd19.0_1619632519544_0.5982234665236597","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/tab-bar","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5edf08fa0ecd953cd3f6ffaf91e518ea9eac5f75","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.105b15b96.0.tgz","fileCount":37,"integrity":"sha512-/g7zJutXUm2SKvROYye28R3ygWQtW/rTcp/O4xxTEYKTfKMJ2PyJtKZdLr2cohlEigGvAfiNyxHxZJxz9ADD7A==","signatures":[{"sig":"MEYCIQDV80TSbUSnc/g+DpifQuo8mbU8lo+ESVlLbaEl4CtGhQIhALsFxkRjLG8r31qAwim0JILJ1j18mbuJ7IQ6bsaxqulF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgideyCRA9TVsSAnZWagAAF6cP/2oIkK/DCdlQL8/fhkGW\nU2SxO56MPHb+k+nyDKslxR4THihfgwJLvRI3Lc6Wm6GBTYij3sB2/KTeXTy7\nCL+EduhKmCri00whlpI697EzqxqY41CRaryjYYxsozqDexsAPEy8hC5nTZg9\nbV+C48ytsrNI90Ryo2fo1dIA/HNH5xEhmR3Cp1vPH8Kursyj/0OftO4/dW3f\nKbOE2RlevL7io+oRARdpzPrB6Qu+U8A0+kcp/AKQxxZL2U+mUHRXdKhRI2YY\nuhg9EyUbc8pNplxnkMzh9OSbJTT9QphIaYCBXC9dV8mv3bUDv3ByEtuO7nNm\nfuldDY2Gvb2Mmcg63CHw4r8ra89zz+rUmuW6MjY40vrj+pFDJ7mcdsHmn0D6\nh+FIdOjwjciArBySGFxH7PoX5HqE5Ehz0q67yT+5Ysz6oTVGSfZi6Bl3fJWh\n2QKj4PiuhXiNDyWLvvfjInpNG1yhHonEUdsojfwXB/lPqWuX5IkoiM24wgbh\nQ7an2xj5jub+n2moJxODWZG8b242n0VDuNTiU2zW4KpAtWjIBNGzIVsBHuUs\nKJRLTDOKnTVDQRL2VsO3YuSYVPJrwBaKvYlBkCEJYiUbC9PpQkALHZPEfOA5\nF5nLYa+xGCxpMD61eg5LW8+nm3SdfSnhRe3QMaz0BG0P+y+ODWYI2zPMVEI+\nmNUS\r\n=zwEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/density":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/tab-scroller":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.105b15b96.0_1619646385422_0.8992860495035331","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/tab-bar","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89dae987993e86060fc1b4ebd507e4c737c3ede7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.6e20259e3.0.tgz","fileCount":37,"integrity":"sha512-iy2UZbScZ62Oq3K+GCuD87EdyHAHm8i4Odj2mC4dgHOU/kzQzmqIcxO4Q4UjkAVG07k/Y2wNCaMSid9m/nRzWw==","signatures":[{"sig":"MEQCIE4+w4pksRGGqZA7bFql6qHEKyANgoai9+sVcIfSeWhtAiAoYTGkybt1P+OnRnyFZia97BFWe19AAJAVgg3RnIIwkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidjCCRA9TVsSAnZWagAArEAP/0M2gYKbq5TWZ72F71AF\nXfb7GhcxrPj1vzD5llh7r7fMV4yndsVRXeLu0FwkcPPA+hIeExEflG9hqg/i\nXjKtqG+FbjE9MVm/f3pWsGvipaYeiHekJzMp/9702caWYNohtURTKsaF6jLl\nflUzCuEcemM4uE+9nRbC6f/Arsk+9YqTpASLYryOG6rEpO2rjiZBS31tl8SU\nWqeuj3sDbhIXKEp6R8CelrfPlNipcTTLPs1/ock/8ipEhLxpx6dP3jA7t1k5\nkbDJqDCpQXbG2VXdupSlgYUorc4hGA9MZcYmuZv96TbkL9g6t7eaeljk7Z7R\nq4Hn20QGUZcVt8lFVhksfSb+AFdIgW828QibfWlUTEC0WjclfYIu/yjGbKO2\nEdvvDk12r9ENgDfH0qd3hTTiFCi6bbFV5BB8TJic0TAoMucimUi/8SUwALws\ngqzVgMawQgT0gy6moiYlW4iXEkg341VFzGdsZPWK2oMoz5qhW2vqg7A3h89+\n/fGOnFuT3n8oUNxNOLONWA4uhA0fVNWAU81vW25B3OMo+ThdB9A7spNLYg0G\nqtCU3e3bF2WPn7Rig1Pyl2X1oBlxSLStP64I85mO7G7dycqYu8QTvOYHMRl6\nIo7/0mc6ErUoaz9ZhXoHokaj2GOsXFQv104pXYV7R0fd0/zVKsrhv0YxSGVj\nMLuP\r\n=zE5D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/density":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/tab-scroller":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.6e20259e3.0_1619646658406_0.25175659526909633","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/tab-bar","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe64342e77c441b0cabbd148390aa46f431284b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.0f79a5d74.0.tgz","fileCount":37,"integrity":"sha512-UFYivvHWT0Mr+XhFq8cJp7Dbc1/BsRPAyxzIh1aLAqzqRzMbCoOHPlUpjLcaXdL9vU+erBRhnlWi5VrkEvq9Tg==","signatures":[{"sig":"MEUCIQCcv3cwoWADCexqytwo+tShEtGOZfwc1KtHUBoEJMSErAIgGmPUWg//CCvdNWoYnspi2y2ybjDd7snEaC1bpkRw5FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieVaCRA9TVsSAnZWagAA1CkP/1xUoYLDXph/pOeTufNA\ncHFuehg3t7g40xknAWzuXWl8bbhdSL41O7N509KufMu7Pt9WlpkOEhP2Sbgt\n8uZXKQQBa9PbMivhgFG1/UOrNlT33Vll9vusqiLJ2KIoxgA9Vz9upXBM9Zex\n5Qjfd9hGtcH40TxzM1vYkdtTa6eviK4+gFC6ZdxuPU6b2/SdJJkuFH8TMIDc\nEIMRM0ecNn9TBwwgW55EsCaapaapazsvTX8cKf0WK6ckk02hWfNT5Po+hHSR\npSTJ5c1PZAMuXQj05N/oKPzbhcvJkBNLKIgpu1fgdVTeCkIgbmPS2QhcIcQS\n4tSp9o9y/SVM7lFlDVzj5dfSz8Dtl0MGjkuYirDO07VV5aVShTeYEO/bOJAP\n7glhxkQU77WeXBVPMF0y4nj0k0cOr3zD3cJYelwRorT5k3dsoZ/rZKJ3fBiL\n8EDgO+y+xI574Ol6hvL4lx00zJrmVTbWN5hnm4cd32pMjv9apAwCWpKoSWu+\ntW04+iKkFsuRzD5ZRZ9AjMhz+byqAEeVjUWBwlfN4Nc8Mv8V6KH2q04sESua\ngiC53T8VA92VbhCIBYzVtKKQ9vowvxYW7gUPxiZexiwvZg8fZeOieEooTmvl\nvSjbpc78bHzZ4jNde7D8F/weOBvm+DNbAbgSiryJnmmIuwnH+PObpsK+Nfmw\n5uC2\r\n=RscG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/density":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/tab-scroller":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.0f79a5d74.0_1619649881584_0.2684865580921989","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/tab-bar","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b98980ad0651157b40f235bff7889911fa70743e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.84f3db9ed.0.tgz","fileCount":37,"integrity":"sha512-/1OnZM53QPbmsxs/ZQL5nsKi02k+i7Sg8Cqn8F51qgLuNKJfCqeQpUfm01aQf86bKjw4p4YL83xZaikEZdvkkQ==","signatures":[{"sig":"MEMCHz0a5DDpz0us8tSYoE3rttjl3fHLGwGfIOqWDO5Mi7UCICuFZyNrvvFkoeCACgcrhfzH9aofqKvl6zwUf/ZPX6or","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisB6CRA9TVsSAnZWagAAwaMQAIOPJ77yTFfXTu6kNnPk\nq2xnG3/ZKOnDYgiArAKmkbJP+sTe0+QT/tufQsMp8LUOlQfy/i0cg2luw2Jf\n8t3pMnilaaITJFpB/m7aeq/cUeMttAR7f5r7pJA1HxzOKlXnSC5QO1sm5bnL\nqTafDACYzoyjAmOH1jnFp3lCCKrNLm8Zs70ktYin6rOMA/VsErDeEBX6egYs\nk6425r6EmwTGNIBcO2WBGVa2D6chj967smTzUcgTOr+7zQb1aTYiMsqkyTrS\nkulbu9AF6Eox/gsV4MlIEkB1sORfcgyPZzpExSA1++zri8aEN9jJknfuaPsW\n6YT7/uiQwAOMOHaTL37T0skPZRfl/iO6d1A/K+wlaxNYrfBVF1FEva+vJBAE\nh+dFURY3ewlQMBHF+IfD/W9HzNh6Tpmk3F8oobX5B5txI6lfx2vU7eAhFvqE\n58hS07/HToYujwCbiaTXyYJtSYM7q7Y6eh3zqMpaisHJVwsoC3w+rmZGazyr\nDmv1Tn2rrlILtRXM3J5rJhdgH+ON45vDW/jqDNjAwMb4btbuIvu47FjWVIfO\n5VNy5UAY2fnVPgXiefLo9c1mNi7V1XTfg5UmZcAt9XSnVdczJKQjSK3BBvci\nHdbG31VA/saA0cM5TkrsRlpd3PxXIQmdn2OWh580f+aJZbzIqDLndyfEgq45\nmeiw\r\n=+dDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/density":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/tab-scroller":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.84f3db9ed.0_1619705978303_0.8646011860158016","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf98fca3fa1ed7431130230fee013769d282df4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8fc29273c.0.tgz","fileCount":37,"integrity":"sha512-6FWwYXwIYJ4tfIW4ssqdzyRhGqTKLr3INKT4k29ubT9aHtIrZHmtwFnVDX9e10+k3cQkx9/BSAL95hfZkdnnIg==","signatures":[{"sig":"MEUCIQDs2ab/UVCYuc4JVPvYKYA6SkIdGj/LNgsR72D1Vt23rAIgTX4jFO6pquvXdMqjvDqTw86mnGDsEAi5rD95TfAH/N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyRHCRA9TVsSAnZWagAAmkkP/Rdw+9prj2TNVUbzVaDj\n86nuNgYUwoJyueIYStm3950WPdcYyXBai+XvNams62cumgliCHhDDADOlC7h\ngXvCjV7rpgHqdOiEMyd9ymvUahhK1laUXKzFkagOeJuca9qQ7KEq5qviKh+q\n88xnStvYSaCuODy7Sy88Iw5M/zHwDO0+QlmMCSPiscsjSMIaVSgvsOnFHM8Z\nbqcS38PzV7xUuv0GA7GAC3nrYBirUrYKWcNy/k4rMb5eAXXPbf6ysFSe/PYg\nKWcTfVmO2DIJKOfRE7VovKaXewtPy1jSza4ZOnOa/Tkl0+e8coFlXZjsCvdk\nQjGRj0oBomyI2sMkHGcsI8vOYYPM9EbYMt6vgbzLCTWGHEFIxD/BcVrmAAQl\nPWtb8zzQfyzqIHfuKY5eqrfLgIylQSyZgwVxr/6/nvPSI1GSWauLtgho1F/4\nVo3qbapE960oQGF2YXqelj2CV2EofYbT8S2xkFI2PEgJqWTovP59UlkmXtg6\nHhTzetgW7x9MwPoJ0Ls8S6/+JVUODuMpzb4Zma4+IJdiEGjPEWfVOX0IAA+V\n1rpdP9s0Fgj9cM4xHhiV/YzrRWQlhHbSZhu2o0bEokewaDZn+dUVWnOiCWOA\nB8lz8VnFO+/OWbBOGPFjRRZwZEb36+6yK1D4aIXBnjpnCe2b+AhUCttwWpJM\nCjBq\r\n=VbEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/density":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/tab-scroller":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8fc29273c.0_1619731527024_0.5251537722701927","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19d1aef187cd13e7f67fbbefc6be3acb7db792b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c50d20bab.0.tgz","fileCount":37,"integrity":"sha512-b1Mf934ZQHBjXq9usNGkOmcF5KRtG1859lhQ1VkxjCWNTAL6V/AOvh5FVqavSv7a3lkEYWlCGwALOn+al2G0qw==","signatures":[{"sig":"MEUCIBbDYF3SkQeidIDmhr1D67csAJx5OvGpb5+CuAOa1ePSAiEAysrdTEzg07pYoblxrVv1DcG39UHTRxjwH78UB/BGPOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiztPCRA9TVsSAnZWagAAAGYQAKLkaomb9TvjkwzFtSlc\nenhB71Hv4LZsnEEAGDXGpC5TljrTEh+m7o4LwlnK/UG1pYzQXhnkDSuRF9+P\nFDRGfTQzY/T7r0qAiHmTDZYuKKx0xymRUWF5jG/Q/3fFGXTgGK27QcZE7NI/\nK35MlY79tzzfBWPGqSmpjyz3QKsm7qNaWCP1tWn+OPwb74kZ61OWhJfBgOWO\nuWLmR/uDSLKvdBxj13ViY2atJ8XBSITHNvEk5t9QGWnxrzP9grFRpQFhe22Q\nh5aJ8zp2uYWlp4k5/C4e9OgNXDIdfJusvN6ySZVk1//Kwky4406d+Vn+1Ktn\naKMIiuoTA2FJRxBLPpva7kyvRCRKrhzwDQMRQWhwy9+mZrb0AAMWDMjvpsWA\nak3Aa195tweKX337jlJOAcVnML/PJX7L/J2AaCCRugkSA819SPgVc1NVJVrV\nE1rHGgkqL+GLES9BTKVtRQXypISDAiIJkWQH1rt5VeTPB1gmfjjigo7BJXVH\na9uoSEzI0fhPjHB34YUGdO/UJN8uOE+5IrfxV+R2QaKEUvMim/sMtYKcpvSI\nqByMw1e2SUfUvOR2jCAYkseWKmNJmhQkFkf3l8tLlGqF1qP5eCNmOAQoODOi\nNbfmayVvEp6H8jUOujS18tsW+A7gnax4WNJDlpooqfj8mD1fx4/s6XlcV1TM\nszjT\r\n=EOz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/density":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/tab-scroller":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c50d20bab.0_1619737423146_0.22225144317513745","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/tab-bar","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4082a2e6e94df868cdc784e5bf18745f512cc86c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.474836ad0.0.tgz","fileCount":37,"integrity":"sha512-2KZAD3ZRvf5m5M4VCinoPs/ERro8r1D1gk8UnhsM3CyiJA2IUKpWxRSBzYMWC8rbq87oUuHCL+jGDsglFMGWqw==","signatures":[{"sig":"MEQCIAfTX34BDUXrPQRrLc4tiGWjEoNwhecKJsO4h0Tofqm5AiBzXqVyXNpWcE1EtU1HJm3htIX0sP6MG4j4SjYrSO+CCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1rCRA9TVsSAnZWagAApOQP/3EMREC5EyO5guPRhosT\naP8MmNRoJ+jins97BW4mpnDn8BJXKm7rZDgxVyKkY8vsr0bvP0BHL3CXYYJS\n0hJFQB9ZAtASg4np6gErHg7sHrNSE5dnAmTug/2lidGH8h9it97Ni3Qv+SM8\nPs++K5r0YnWl5MtK/uHigyKO4p8ZmnitrhdycmiNvAAzleqCPOqKveqatOdw\nm8hIjp3TA3fIvdnERPqPugnV+WfPmYIrkbeZRiAvTezsNrtKKMfv3RcP7/vt\nb4IOs0efJdD+E24UrXSk9dK2uMv7Ba0qM6LU9qW3Ad/ZIf+Y8ePTudpRoKLb\nzL/MvmVTXW5P6Wpv0xMruD9a0VkjHTj7QvY3HvxJnunUR8XJL/BhVVOo4T+z\nidM8enL+IAOP6jJ1yDJjxqAuftwbYPDfAUxwd5N2z3UILOwRR9UbIoDAVuWe\nY5PtJDamBv4DObrTXsy7hAx9S/X9snN+1yH2BLXwpZkpfH7161qB5AqsbsNJ\nYG39GgwtceAGsBues7HO5AdHrdQ+NAvYtRYhTVdmrlBIc9weKRwtBNS3o8NY\ny09UIUvdlgeiE9XX5gsWTvmreHN0SuNVXa0LewTze/ZerAXalvD9YwA7UN/W\niPKQbwwnHLZ6l2SBmoXKLjIYMLoW6yLJ/xVKtqlatfqEQztMzGLwkdwoEiWE\n4sjH\r\n=IZlM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/density":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/tab-scroller":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.474836ad0.0_1619840362515_0.7074182914022973","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90c15f19b263f82459bea3cf5e464378c4579435","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f5ad92287.0.tgz","fileCount":37,"integrity":"sha512-fr6Vj5fiWrpYx7729xygCfEffguwY00Pg4X9z1BFtd9feh7kOE8UioHAPs1/fa0xO74LpFpn7eTdSizjUl6QCw==","signatures":[{"sig":"MEUCIB+r/Cbi9mmfCEG2KKjd5NvXk9B0eDVi3je1GgqSTX9gAiEAlO3AWrkVAJWThICRSuOZ2T6MyHXNEdBYfgONGCbcTA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+/CRA9TVsSAnZWagAAg1sP+gLIUdqGS+E9rXGEXq9N\nLPxkw6yzec2gX3puWOvtow1NH1cKEShxgD54b7sdBqR3P8j6NuAugRZFn4iJ\nWPYoQjyY+AEy9+e1RQFM5Cas5gsnPaLUHgp0NT7aXALphlc/5E8VFlUbyf7h\n/K3mnheVZTvTqF/QbRqmuQ1iDkd5tMI5K0a+7mQoMGtPYZCgrwY9d7bFhZda\nAuMIuJYktZCUvyI/QB1uzlYS4hptA4zEiAMA4jhYfKvVJllHn32OjuVCJ8PP\nqqQmyfnHQCPPyRgbDvixNMIcTqffV6O3eQTJ/rlNkshCZsmUWQ5sdNO/QFBZ\nCpv3GxD8LEcCzGnB+2bW31i/838d/Y3DaKfiQpF3kS1lOA0rZ/bdNbjBWELg\nROIsZDPO/CC5O6UQpPcmcgeqmP3xlP3SeB/YRybqMahGdMkVRb5+EjXNhzG1\nUctgYKKBnSm+mOpeOAi1spNE9o8pW0VHUezBwfZJl0mOdJnrIdrX+FPWKNhR\nLW+46rIPSWChWru3hSeHxvoJMPbkfSnzypLVKtw8cwLUo+pin5KNtOV9q8Yn\nxDMdwBQbKg8tNNHGR2oUBUTaIfOfK1zsvWI+DM0u3Oajcd0kdPE97eFZ3TfF\nNF6vuWxctngSbtPzd+vUeOrPVDot8DQrTQkfDDlYqcSAhS7QkPBHAA6xbh+w\nYwOE\r\n=twma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/density":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/tab-scroller":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f5ad92287.0_1620066239379_0.9792913012808668","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/tab-bar","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb2a2d44638db13a526155d09dd3d34d520bbee2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.af453daf8.0.tgz","fileCount":37,"integrity":"sha512-jxDe6txJ5r1uCVUmn/L93Bk1F1S8l6Xs7eVA6Bgmfsy+lQEKCbVhXVXG5KpEMKSjD3iIUBWFQHf2IhDzMPSN1Q==","signatures":[{"sig":"MEUCIQCkPJVZwopBLWkKNUjlwj7bxc7bjnQ3c412YQYDzovq/wIgVkUx1J+FQ9mWn6iqqvceMcFqIIedyplql+QAkSiSo7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEcQCRA9TVsSAnZWagAA72YP/A1UEm5KELwYZtT5NxkW\nIMGSqNahi0Uc0jVoGZvsDzoDL/pomZiY0XFYHu9i3fep49qzB7ZrNyhGQZkF\ngKF8IEtz65lz6jrVtk8OrbOhcLwPa7FuN+vE5b2J3bXRkLkbutTh9FSBg16n\nAXTH8795kB4evaDrEuqUhaKhHH4eIsgdmxOupb++ihQbxzYnLteHEtEOF+Px\nFB/brpEolLjCCGbmBfWNE3oZPw16nKGxcYXvoHqM+/j3w3jGCZa4DB/meX3J\nUs+PGhaGuuxFpAsKqC+LUclNqxIFMuenhLuiGn2FX84s31ReeevsMUnL6Q0y\nURZFs8wXwdMNg/QO0NX7r8rkH7z2Y86jEr0vrDyUcDAbzPldGL34G/GiCxRO\nIDRF0vPxJSA+dO1mGyx1WwavMs07/tpN3xbh0qWrE3Y1lEm9G3vnj88KhZhb\ngL7X00tYDmzSXUyO9F+u1kL8QT4ZK/raebIKikDxuI5fN4BQXpSkqy49Zvyb\nvUI72W2VylrUjiCLGsNjKc3LpTTJbjAjfB84wnphfVZJ8utn/l3GmPIZmGQs\nVmAC5dfLrMp8SlZPxSz7/awM748zjVnUvv6TKdYiUejpzeT4OPzS6BvSJMzu\nWxn5F59zGSUH15uhBQRzSfxuPu4qd3SzEQadByb36s6yKwxbdQDx33FOQ7js\nxWMr\r\n=dH8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/density":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/tab-scroller":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.af453daf8.0_1620068111820_0.2779774792464029","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/tab-bar","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d41753782fc4c07e17f72aa6ebef0f6e3847c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.1f1918c24.0.tgz","fileCount":37,"integrity":"sha512-sH00KfEhmlAbezvpjaHfTgKb+w5hUTMI7K+1xdelDHu9DxL1k6Gf4ZdcQX6PnReXEq92xrlvVTaNMeSXeBHhKQ==","signatures":[{"sig":"MEYCIQC99F+Wa4ghuwEziN8mbfOtpZwGMFoMIM1S+lZlbCliJAIhAPRAEd3PDO/M6+CNqTZAfOp8CWQs6EkAT/W4TiOXtqZq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3nCRA9TVsSAnZWagAAw3kP/0LPafKv9ZRWm2wl4F7G\nr3KdxJRVxTqspwrG9okQu7QDDpA0xdZl+EuE8Lh10JsXEr2hCpjrsAtIFOpD\nR1aASs28Ht1b6UGFh43oKyxCWcO8/PyLx4EXWTT2iDOrH4aB1+nbiPVjw6G0\nA4Wlne8DsU37kJanlm9D6we/5okqoxeKa8cEK8x2h4KDgkKE6vOuod4zUsdb\ngKFBlxDsMtFMydTI2VdGZlybc7HAeSM8ZKqzkePUJ84584hFYy1EXP6c6Yoy\nZAxhAU527/uW8pRAkN6tR8EbHBmw/a55iuLWsXv3JRhNQZ/h3+KQOAj7zsx3\nnhWv9PQ18+9hLyCoSW3AjwQEVZLRQUKgUD/Pu052AA6bxeg/SlK4qLjiWLko\nImfUeqpESnQ8FQ6K8E3wyZgmP4XWaqRV8GTLuSATXDGgNXhIrvAhEW/6e2i7\neyRidj5HW6/cpWnGl17gPkTholsmzj/QeAHC3ztZOY0qVYEcIf4NdmovMB8Y\n6y7nZOQBXD9yqGArJSyyZVUs+/UY6b2aRmtVdKGOZKMayIh18TWc136gKNkL\nlFAp7S2UzEnTaBN/6in0F8JY56EuVdB0PncA/Wf6RdCwdXqzGz3ug0dn5dvE\ndVMQFHBVL78qb6pntJSgw5idBRDlIlQ0Eb25ACTAGjjEemJcWKoQhJhJFhc7\n6nLB\r\n=6nOU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/density":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/tab-scroller":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.1f1918c24.0_1620069863066_0.08743714337605057","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/tab-bar","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec1f21a4b2595ccc7410f3d8d17fb9415419c3dc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.33148231f.0.tgz","fileCount":37,"integrity":"sha512-hTStCCf6ZQi7iEZpfLWWxrjJdUkUvfYgQpbX9GyojeCUpxnLZL8TBnPGGK4mmfNDy8m9zZr0VB/wFgKAmQmUMQ==","signatures":[{"sig":"MEUCICdpBM4Pq/IhkUGetHmZrRzF7tdJjC/qNUy7SUVJRul2AiEAzUOxWeXjQd4u0VgeTVX6N6XjGuXr54A9QkZ3mk22q14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGoCRA9TVsSAnZWagAArLQP/jPyK5B3FoRrOhGZkrS2\ncXNFS0/MpPt+INEkSV7e2+swqS7P4YTCRIBGgQN2+vfMbT3/qibwh5ymsAgP\nlWWStviLGrGFaugrAttFSTMDxqXga8YjfC67fiNiUHZOx6N8D6rXGeu9Bezm\n+RGy+NCfawu37Ct4NbV3kmCvyuyZDs+aP/URfdusYlSMEDj947NwleC1BVBM\nQTwdhbuFwq3OCb2334ZanM4w+ZYJThYIgVSPn0niR2vX6AA+XXbwp/0kCtVK\niK5/0j9doh0j4IXAPT93bauoABR4GOfm4fNqxpvKb5ahrzdyD5L+lvr+rbGG\nlctLdh8SbQGtNZf8FEXW/h3wjYNMYUMAHUVK2YwbKD3VRCBziLgPgXozHOea\nPvMo8dwWcuMkj2WnCrhKXm5wtjDy+N6MapFtxy6jScJOCL0ebC2AqxFp63/k\noqF7D5Kr/IYfRq9teWot1hhCa8+XacdLytwmVZsrMTXdOGkYJME6WNwQqBHV\nDbwXDzqvWyB2fuy63UVSpuDGXeuweI3CrPuLTRo9uC8OQTxmjllMExMehpnt\nNJ6/4I7EWjCJCqtuXNhqCu0u7ElOW6Mg025u6Ug+bDjQfFUHpsDCarHFPDId\nEQISN1ddn1jGkL534XaPaSvFT09T6Lz2KNPoYfayhapOxKpDgMREb4gkJ+i+\nwfgr\r\n=D1Xl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/density":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/tab-scroller":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.33148231f.0_1620070824033_0.3414787228736693","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/tab-bar","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898a20a2eeb31f0c1513f0945e37d382a9eab60f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.06b76fa74.0.tgz","fileCount":37,"integrity":"sha512-l/v+rbz0urFrZdZzbF0tggjo/+4ST9+7LZC/jpnXDYHfJDjksd5dWL6vkS6fZrdiXqCxbSY6Y6UlA3c+oYbsGw==","signatures":[{"sig":"MEUCIQC3hI8px0WgDXDpBQA1i0shWGvpNSUTlt+vPQ49T74DKQIgbgIq0eqRDF5WwlfdvvnSQZZe6OoTroKGfy/eGNs3LTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFNRCRA9TVsSAnZWagAAT9kQAJVNrjA9HXKAHwFtAA2d\n0HXKA7dOiMwuDDYJPUYw72pl+b2RKvofJQzlt6YVgh3acJEO+vWF5p/nadQB\nVwhir4Al3OFMPF/E3YWg8RWk+ewxf8SMLeLu8SLJHPY/D/M0U3YAulmiVKv5\nHAbe6sgrfSyCDfdGI5zCS4lE5ABjZ9DnGhPQC4YEl+KHuLlc+FbWaE1ru52w\nVBJYljN87BKCK4CwBoWlBqX5to8fa8uFWSvyDhuo3LKG6AIaeRWtxdvt4ZOz\na04ecC9uN4H6VaJ2lYguxXNuC7D9YQn+trgwecXnblHwV8y3/+ETqRL5zNJY\n/ka74xN3JIXOFwgDvjhBa+3ux9GK5V9gPqyikV5SSMxu5HJg7qYFbx/Rlz40\nmELVHVPPFk8NMCmRMwYgBhO2uKRuZPbLU/d6Op3s0RUwVQoRleGW5/o1k9oq\nWoeRG/Tn662xpKpI+KQahfe0iMXmjTBk12Y+Cv8yl01MP+I2WqPlNpU+ow1y\nbPnNFZkOAKyGHVO9VNYnZVZjhZ96lXf4UYpJ+5kV4l1hak/J+fglLSclrOTz\nZyFPNWnyaA9MWy27xV/TpHfrDc1DsS/DOktVZpRc5hBPiIR4zoVpYBpjR6eh\n0RGKrhHuLyPIVF+gIG8wlYCqPWrIiLdUpoGj4Z4tu0ltbcdojduaVroXR/pJ\ne+Tj\r\n=RM/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/density":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/tab-scroller":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.06b76fa74.0_1620071248833_0.6072669604255687","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/tab-bar","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"677e5f4864ef008cc93f145a7eb41aceb8361f43","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.7c5000473.0.tgz","fileCount":37,"integrity":"sha512-knnUzZ/cnDU7EK7x0eZNqISzD9cY5aAir9b7N56r8CbmRKksH95+gtZmbF0prVOkYVlUmCCv6cKaxD/19DxY7Q==","signatures":[{"sig":"MEUCIQDG9ly74W3Qh0lhZxnAImBTrzj1KkE9er4hawk7oixLQgIgfjO9xlf0/2c1EzZtzlxXLA47sp7pBNxc2EM4xr1ggyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHyWCRA9TVsSAnZWagAAHL0P/12azosITXwS7xFpGw7T\njwAPLGYbO1c5UZoCG9SryyoaSw994gpxQ6wM6ZY4PAJ0yDxulmt3twDKoeYD\nLEJO1ApOUGdfKt6mDZJWsxV+RbvmJq9PnOX32wRD5T6VyFcLGZs9eNrG2Kt+\nM/yaT5Dv6YYgixs1r/G8eANOMSbGyYxjG8CfrgoqS74TuDDVISeCvwaf9wHr\nJcKnUf7hCmtV1V8ICaUYkPXCWiEbi6Nrc1mUagVlPZKUprJ+SCq27nxIPxUe\njmkoFquj4mSC+j/estQZINKfuO3cjW7pHTLnxl4YkEuWaPRDmXDyakKaE4+z\nFAGzkIIxi/Bo9CsB335rO7PDLcECc1+Ftj5q3W8fanxKRBOC16o4DZ3f2M6A\n7tSWsiIY8PHEbK/19Xe7PPPimbP9dqayAcVDxivAz4pxYMlxHwgJvJOp62rJ\n/9aH4YFCa40QEDCm1a6YQAuLjZ/ttvSL7vx3kVL6bMrIQtbpaoUsi99KWohr\nQnqZ9pws6vLJRTQEh/xMbbK9k/fsmNJyMd0Mbtd/wb2M5n673EDBW26YCwYE\nwu1r75Giaj5IXYxtA9ViEzvppiJcgwArARBYOAF193UQvNOQKIgYBLqzEmAq\nnFndltvHAGcA07yPXfaffFWztLayxHG2ZVk87ahURLcmEL4/x/bpm9/odRzT\nwahI\r\n=uTLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/density":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/tab-scroller":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.7c5000473.0_1620081813929_0.6250112993030787","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c61931ea3e397afa5e9e9534f3fe61add81b8b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.de997644b.0.tgz","fileCount":37,"integrity":"sha512-E9ad+TGKvJbcJDJ5DM69xRVWJ91DaKDXNvsmdpxYTzEWRrw8Up9Slgn6nbUcvZpLX14YyRSGO0zJLJmxF6LF2A==","signatures":[{"sig":"MEUCIGKT5lDt10qJusxXEHA/0g44YLHUuf5oJlvJksIxxLtrAiEAxIFJIhSFQz9q3Ob56hdc/2I7fq04fjTKZiGYbrirCNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYSTCRA9TVsSAnZWagAAMfQQAJzX6mTZ2jIQr1m6vkc+\nVoWR4UsRUCYYLnvzqa4oLxHY8TYVGv5AulWJLsvT96ROC3oRvruGEFgaRVm0\nRJPURdpXBA+aKMqibBHJErxlyJp/ZEWRVYHugVhA54DeqxVQqaREzZcTF8L3\nQvTNUqW5sJ6UP95WGz5maCKEo3NdNA6IzUQudiQpE2o5A2ou7Mh0ugI2GDzI\nzYZYMt00gy45uo0jJEdOyRQaOZgY7ywVm6lOdLQuIk8uUdhYjjhbLszJNmSo\nf1/KS1Ygo4N4Um/citpPeHot4tIFPugLYCz/EwskiC9m++4vT7ziEGm5MHXC\nZCTNLEhjwMJbyPV7KE63m332N9ObnwCLxcMvDQY/JsLmzTeSkAPHyAl7GGnL\nNMwURpfHj/8EWDKPMTgtDZYn+Q7s+uZX0op/DeH2TMvTrfczTPG6jGzoB369\n6yu1A3MvQ3+ci/qUiyyoZteOK/s8SXfDr5GcgnFUfrE5wj5k+oiIRY3cgsTK\nPsOsu58VRoC4R1+3B8HBKSXIKYI5VopSIF4Dp8KsTsxbHgaNAyWnvTI/jNpd\n9kTYq+l9QZqAIvlcGotFS171KGGh6GJM61VNLap7i7lLABkgnMX/B3ciDxX4\nfpcvGOfSJeCEoJvgNHBimO7G8dyfnPP4tLD0H8Q/mXVoyUb7ymPD+EPzsYKO\nXfN0\r\n=G8nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/density":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/tab-scroller":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.de997644b.0_1620149394684_0.6740328838526621","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0863d2621586d51a637af1f90fa3d3d4d78b1ba2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":37,"integrity":"sha512-uLvInQ7z2sLyqWPApUKRVbufRbTxmt/bYKWsFH9DlggrFoILEybKatu+IzH/imq4Epv6URCPso6nYi9f3aN2VA==","signatures":[{"sig":"MEQCIBJGHOG0BC+MYnB8j8JdkS58adTDQdw0NefJa6o1Ib5oAiBz+YPmqKAkTi00xCEXlYemhRzN+nDLwAl+HX2JCKNKoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrjCRA9TVsSAnZWagAA+EsP/jagncWSaAw3wAnGmu9z\nSRQpO3U+AoKE+RmmY2Kbl1gFzuTU1qOaeq3tL9FTMpWpNrFB8B3ol+ofJcB2\nDBEIxZI+udAJ7+t+nVuwnKJqVcDywvYxUQg0UamVFAPNRx0wdwmbjoH8Szx+\nRYlbaIAvUPa4pomZS3QaZhkzw2DgjC8JcCVSYQP/2+NHDOjyQmdSLYnKywaz\npVfIqDdE6Y6CQyzl6z/Ugqbek3ubSvbympdIxo25C3jJxqWzhDv1OulJy10x\nlPUJBHKWq2/yXqDbSHlp65HcyEsmfiQi8lBELIYZ06A2ing3pTCREIHJo+t+\nMDuBbxb4TJbKGGk3ZeGnqTkdgPZHOuM5MPK5AYa4+xx6C795btk5Z5mDHUyW\nLlQ3z8SOK8+6v8wHQ6ocOe3q3NtU81HRayjwSTGsfsHmsJGOkM7/IlxoPSUu\nNppqRzLA3FQAI59MDc7noE7aI8mqzUB9ap5JikGDMcNKaaRzcBmQn6dwSwoA\nBAsGV8NkhRjjG3DmnUNIkBbkivSMF4evU2FAeB4w6+A9HWjv+GmjTGLYu/Il\nIGEa9WdtDYaIfVFHBlHVeYaeP0A/1CWQrLlCkgJke/kLCorCmjruPYDQqQWY\nbpc6Ez70ndP6Kkk26i9JGTKkhJw26+M3uqPgAYlaFZCzIyHAAKyC/8wWCe1m\n5eIj\r\n=A+rY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/density":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/tab-scroller":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d4d7f1cc2.0_1620151011204_0.6970066476045522","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/tab-bar","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d75fd02b186f6a1c90512b0e3a1fd089f64e837","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.be999eb08.0.tgz","fileCount":37,"integrity":"sha512-mfyX0YKbCs22dy/7TfHrJsJS9whjDP0AblbhS33OuiZ0j51eB1yxyFCHsOPyR4cIYA/l6oBanIu7LqrMD88UyA==","signatures":[{"sig":"MEYCIQDC+g8QgffwvqwNPd+RAh5ZgPkKXfONXLjZIlpixGutmAIhAPP48qNQCBL/DJkosGtgwzC3B3VNsWw57THQTXZU58MN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYwcCRA9TVsSAnZWagAAa1AP/2Dui1Jf9NYNJxwxXqLY\nLU5xMwRR5bWvUWGB52Tq6AbwnjW5TL1uW+d2JyN73LTBuGjteF6/pGrKv5py\nK686nQ4bmtz8zDmsnGDrig5X8xwBX1cpx3PsJH/6T1XSLouAvmuVzYGHoOuG\nf1sfpc2/QIifLGnvZo+yvay+iAN4nXZQBJjrkNqSV+ujIPu4BGvDw0gqy7Vw\nJUs342Le05djyX6aU56YCnzf59k9JQgEF8dEX+PKtCLLOu4sEFs6KTuYmFbW\ngbkUGzp6db7aZeTqEYO8zvZIMBG38MoDxoPSBpDDInlZWmZNDyIv6zHCXsFO\nAKm+VUxxtoWZOu9CfTVcdC9uwv1hE+eZGQ/E8ChwWoqgLtL+VJDMFNWHPYM0\nB0NjE3BK1e60evxdhaVOKSkDnQrzhG2hCMpkrudCPovNn/F/mYqrMPxPSywj\n9atK1V7y3L0Vj188+ppAbG93S0XJyuSWHJSjqaoHCCJUHt+cuA4JevjehYo6\nLUf6llgKUSjK8kyy83E29RhJpWnm8VROyBDOyRuLrNwNoDZ3qac7WvskFW67\n+QkgSJzV97zbribUhVmpGpE7PPRyS5TWxeNVrQBhMvGvrlQfFqu1iuoiJ95p\nojnrWDR2KUQOfJTNmzjv72GP4kcveeJoqsBK57U8/HhJejFBdg2wVXLx2F0L\nb9on\r\n=wKPe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/density":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/tab-scroller":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.be999eb08.0_1620151323718_0.8878294394786359","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/tab-bar","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08703a06cb1011d10a6d120cc59ee07a6223c43c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.eda1705fc.0.tgz","fileCount":37,"integrity":"sha512-qZO+P8Pv+sMoHznKuFNORNFrTh/WE7EMR8ys6lPjBR/i8n26SRRqXfG9WVgkx02PGrh/pYEZuOsfdsOIzA24+w==","signatures":[{"sig":"MEYCIQDwDwjRcj2GTNBD2qqkNDy1DBr78POGf9AaFvLkRoQ5JwIhAMA+beL8kNnZHfviZh+LkBBo2slUp33xVCHphPsTPnMS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZyKCRA9TVsSAnZWagAAt8wQAI9p2mJ+3FovZNXz6wkn\nLgzxQJn6CT0AJoq+9IBWEppvYbmY5AZepbVR3Ik4EyvGp8Ng0pbsiSaPbFG/\nBDSaDHgEq38L7IC9Enr0ulzhW9mJgBAM5NHpeM/aeYSJA+5NNzQWAnZHUWrW\nfcrGWnYgWj1hN1K6mXJIIRmDJMuwZO5mcaB8mmBq/ZD/wq2hjqdDOjHrRPTk\nhXVVOeEfTnu79fljAnpg7wcHuAdkiTL8HOjU9XZMavA44LwHhzNUerDB8GlQ\nMmBQHghdSmM4udSWtsC8w5yLPbXUUNRQYY+rbLwCJrQqolgRq+k8UUJ5d4lp\noKoNopFrna1RKM2NAh+h9tnL7xlHg0KyRBL/Qilxfm2cGDr/GcHm+QduSGP2\n8lWWas0NTwlQ2wDQSKwaTpYYAasI9CZIYa7i+WduVu2kP2ZZ2zbwiCrKNqrw\n+nfQ0f8AcFNBkhBa4vfUNUZ9gS2w6PJJi28lVMMdbHm1BfrN7WaoF7vuJZUG\ng66xH4N3Mdnu2rkheeimLZ3O2MVi3lYnyHmDHcUGeJMWZwFXH0p5VG8m+LrG\n0dWkJufMdWYRH+Rrdx3Sz7BUkqaf0fqHUHrbcPj0lwAvTEMtQ5ZaTzHleqnT\nnRbe0xb9P4VFDDWeyheEmeoEqYaN4JH2Q5gbKeHw1GScL8yVlaPVYhrZYx3E\n6ocX\r\n=tCs3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/density":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/tab-scroller":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.eda1705fc.0_1620155530443_0.9113537521709392","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/tab-bar","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a257a083d453562787fc23e59cfb9966152b6ec5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.718c90178.0.tgz","fileCount":37,"integrity":"sha512-Lpz/Ktad1BnWrLIM9meAOpNQtbOCEUjev1ImMdFaLuw2Fe0h10vWT7R0uwkfqFvFN5E61EWUe3Pg/3YG9b2f4w==","signatures":[{"sig":"MEUCIQCU+GrspZKfAxsMMWqmesRWYBcvlXFwRBLYQntKxJg6hwIgCwPiJpOblima0DAIlBqmLanaQp2Ds1NtoeOLc6/2IOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCWCRA9TVsSAnZWagAAavAP+wX9X87wxvd7E/mdTf+q\n2gksvKqXWs2vGErupwXGL7lNgYs3H31WQL+tBccx4/5BbYXyEvdaO6DXA+Fx\ngjb6gZC3fFVnrdWM9YJXwAuwO1BhRmi6TG3p86gOCe2M9wYjWocL8ZjxDJtK\ncKkoVyaipoNnQu+fplg6SKQgkTg5BqPgmn/PEWkJNP4kpHyFPkGL7MxFiuYH\nzxtVYAIvLKXpGLCok9bu0bNn3IFvXwOg+4swsV+E1ahZNTX/HxyPtwWpgQgC\n5/6HaJGSj2oruiZKoG/C2dkSx6dE6FbfNvsOiIk73vha/PrDg9WCbJYPx9Xi\nJ/KqaT5XvvT3DW/mZOtt4cGMm5Df34YOOfTuZH0F+7RUUock4mai835RVTxm\nZ5vz4b5G6ejcgJstv+p6n22j9Jhc0wci5nF680N0doLYOgDdN+cC0Sq/qzE5\nUCyGe6mDvg+LgyhshEnef4pVQ0Fu3hCT9s7s1Fj0cftNOP53j8tbsoUS8Sdk\nJtZDRknSmPrfPoMRvR8r0ZjxavL8fKwWgjaTyfUgfbSC3ezsGMgEAV0mn66y\nQZS5hTH5YbKVTRxRQW4e/Yrx+MJUvZO0JeXv8RUiXp29K/jyGQDmLptB6yT/\nqcG5swITdhM2U8+BBmTXof/Sd6E1fMDwUfPlONnS+X7C7K2Io24I5Hl2nubN\n7/Mk\r\n=4T8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/density":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/tab-scroller":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.718c90178.0_1620156565536_0.7780062053976935","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/tab-bar","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"940a6238841bcec9e40116db94a585aa1e61a2c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.0e3917299.0.tgz","fileCount":37,"integrity":"sha512-b/8tv05+fLfM64OK0EDfKSJqn2qQ+/LF+y8hcHXPQrqtS5Xg3bx3ck+XfpPBHaykYUmEo+RcIFQEkNnhl499rQ==","signatures":[{"sig":"MEQCIA825yCAZ4bCnUw5uipKduy6OWKhDOMFSHZmJsGaRlkTAiAyzrB1EQ4dagf6T0AGDXRGUFCH4SwVDA5l9Ssf1R3qgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaFKCRA9TVsSAnZWagAA0KQP/j9HNHTgY8aGH4BYNLb8\nzvCYA2LEJ8+Aydb5yfb3MrMK2YmStTXL/l505Gc/fVlNNSFD7K5eesA2wabf\nFLWwEC+yuPn20rpWeoWHt8Um3njdQIaDCuFA2y/2MXtcN5GhPnM6JKFeEP2g\nSKMPzJlfJhBvXaCY1jdTlnHfHeCPy+XII/d6zsWJ6rq8DkOyI/tP+hpKH76E\nC5qv1bhDPAZoMcXhFmrcqv/+pmYVvs63EDW2X2UJz/zFy1XKvYmvqaqib8oB\nx6+SxhwlUuEj/iVDjDEsDtqqh/vD4iX89TbqGrNb3zxsneqV4e6qW64siZ3+\nbPXrlu0P/mk75FlyKZvyGI8iSkVELatTt2CwREk1ayOF92FG+VFY4MqNPMYp\nKCrjDVTO+fxorVdGvSblaLq5LtbUXhxEXHIoJFrr9tO76FyQuQ+irT1yt1pv\nK2zNjq4AOMZevgR3USI9qEZuU7c45dmTzI/cYL9P6hUEtP7D1COzbPTYEoKH\nIsiFhon0yl5hK9yXtH0Cy70Zvxyo/Yrc7C1Wec/jULcP8WOZQOF8nR+Jscyj\nUtMXBfnB5aYVwcUI4hNYJV/pqGCcye2ZuzyUrcftUmyFUeSzeuFPCGg6mVaI\n7eNxD5D0x6UHJfXq5PwuZ7eSPflNshcwD7jJ5qK2MHGbP1H5Jdtddz+ET2Fb\n+ur1\r\n=Mjof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/density":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/tab-scroller":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.0e3917299.0_1620156745573_0.3723825855245282","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/tab-bar","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f533453d554f67a78052a47b3d207bbd286df6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.836b3c7db.0.tgz","fileCount":37,"integrity":"sha512-ZZbEbaKOc9ZARU/r9lftR3ZP1ty62REmGu6eUyB7Nl+czLQuMbuVXnd9pEQ91GpeR16K2Mi922BWGTUYIQia1A==","signatures":[{"sig":"MEYCIQCjEDRgQtEz+ndTx4xmlPRNmDRPNSxeHf7sPcDoamT3twIhAMrw6kSm6zS70XTopVQ/vlmkp6aVNXvoctP4Qq1VzCPG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbAUCRA9TVsSAnZWagAA+fkP/0WA2mGlt5Hc6zxcCVlE\nALLwXx/kHX5o0EwCFjS8SBBZe2kDjH1EmcgtZ+eDskkXOP4ILLFmyQ1Pc1/X\nc7tJK2/T7uGLJKXlhpd+Ew5Fgav2gutxGj1PYHzRfp+3qmJ/+wGGqBgLvq9U\nX66XkupBZRuq8gRwtiOjgEtFrSJBfffFzM1BB1xwb61yuO7DTl4/ReFaL/jW\nkjTG7jp9g3Xk95qESA60FWdm+5RD4WhD8yMUHduFQGhfyy6Edqm0W1Eua9Gp\nTaa+ch2GkhMdoqF7PH8D2Kj47Q48+W70005499HsnH7kaex0CpRrzXgibwmK\nXET5IyV1L3+VJDriobw0wikgDxva6RaM3uDfjGymxSrhBwjNYHpWaVO8SX1R\nbhZGjFih7DMiFqb1UnM6WTbkqMGsxZ8j+5AA2Go7hMVRyeoLelo0QbGT1Wad\nGJULinuccnpPQrih97w8zYpt6khaHVdBD7HXu1skXHBDmRu9sImpKNkxhJkD\n4q+oXa6fhq9NOnvsMgGiCNVy4z9JYUiGZDxXCpuORn6kguq8RikGOsoUa5K5\n1uPyNeU5Zxx/z9/ZDe9elzpvuVvXjQ2bfLMOcTb8JadCRQqp0QTe+6YuiahT\n/twXycLbksLDWYcY7P25x29oL4ADyngCsb8/RIRQvlKywadZP0fwBbyV1/IN\nuZ3g\r\n=DskE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/density":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/tab-scroller":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.836b3c7db.0_1620160532188_0.379189093663157","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/tab-bar","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92551c4a4045ad1eb4389666c6cbc1884998adae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.53d4e6d59.0.tgz","fileCount":37,"integrity":"sha512-Q9kRbtl9qC52blgnA6xSildFxSN3Tj7IoaxL6XbYkQwf2E9Cp3hWHbH1HJA1IVBpRByuD4gxT1d0ks6OKzKIMg==","signatures":[{"sig":"MEYCIQDDZC7EjgIA/CljbsyV/U6qgrzKoo57Wal39/c/Nq/bTwIhAPsnpNX/zVyHLisgIMNQGtkCw623Cm43nvOmPuxyFulH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbPJCRA9TVsSAnZWagAAeTQQAIumxZm2gCAfza/vEErM\n0TGzocWc2IEbj+LVAKy4pLpOESN2xNQfODctiZOzHC3MKV/vdik1TqD+Fxjx\nxdQwl4HI8hvyC20hdz16oiqFRcRuG+9SNivTUJQUUKtQJbJv7cxiT1/Z+1AH\nx+PrDO0KzITRVHKPWeF7KXBCLwnrfyjhuBCsV0/+Lr0P/f1rmfGFE6E5PlKh\nFik4f3oCGziVUv5BkzZoMhXtf/UrCDO/4rnGFIHgMaVG3PhCD3Urv3peaMTS\n8KwlUzuTrIG3PGatYFegfKA90OVcQdz3jDCZLo3pAisFUk4DknztY1MupGIJ\nZJ822yugr0uzIidxzO5VY07/fbkjjSA1IPe0ls0eboAs9rgMHNS0G30+mQQk\nBHmhcDzDPkTOB6MKp5i7+e4VL6qKcMVor7o37tQZHXnNGnSbG6PkUafc/B0r\nIAhBG7p89Od60oLPTLoHj3QmO7crqqGDhos6DGVsvE5Tgz0ylR7cojLLOSSF\naosII+Epb+X/c+JlJ/0d+xFArV/OwonFOYjnrMh4lN7LV4RY7QihTxNcJPjG\nX2l5zSS1u9wzFvg64TceYC8KYlNeBU0DIofu9/Labjkb/Me8ew2RI7rktqtn\ni8RWPxe0u/XnQw5xHRThhqN2JytvGn3xel514HbiaAxZ1/bQh5ROaF+UYd66\ns4KP\r\n=Zh1Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/density":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/tab-scroller":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.53d4e6d59.0_1620161480711_0.3704796989758503","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/tab-bar","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21f7faee2ad3e5a5970527739f02bf756e587a90","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.18d147e27.0.tgz","fileCount":37,"integrity":"sha512-F9oU09s/5jk79iy7boEXJWH2gKpGghgJW61i3RQwQYsyjMHtoIKDR1g//1k0Pd5gf8q+WL7AzfOaKPCKIw2xpw==","signatures":[{"sig":"MEUCIQDtUTZhVhyBQdB7iYwKu8T6Ts5cf1bYjeCbZnKDtfjuawIgKi7zynuoHEjfA0PGF9usJclhHtXdJl9ccjxE/bOsrWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbXICRA9TVsSAnZWagAAs7UP/3yeJ4ndvImq4ZMCWfcu\naXWE1L2ZB1OMcyujS1m0Xv+XUiuNkEsa4Q/dOvjxQ03MR6B7PMFtaneilyo9\nFvNceLk6RA7ylMohmADPyFqf4wPQUvGHvv8LUTj0W0DoM+LfkvMwJGGqsN8b\nzCT+uzu/oRLRcYY0IX81IIJLDqmXudp2UAMnxLScG2pZdUsglMC7Qn/I7+vD\nPbHWJGBeZUnD3Ysf/tuTYNuEGFW5NirIW8jrM54/Fgz1Adjbfp16c0FlX6ea\nIqeuItn0QyTRT3UEinJZH4m6agpn3AoQVGYqT34lopi1mgdzkS27SShiNh5j\nXSSianMulNnlNmskaSM1J6j1aCZZW3wvu0xAs/b3XDdCNmTLO2qOAfTFOUpF\nFEqW+NMyIVeJxXmZFn6fFqwbFpDCJcuDGIdvs/MwaeOrZuIrtM+ZZ5ab/hGs\nQ0QYFiBdAGiNJrZdQylDj/fLL1dKiV7ZtDL3fb3yj6PJ79pVbTFfYN1wO0cD\nUMPV9BUUrIESpMhuc+4knpSoAHZ1CbKPHBKDNxdD4AGCrMhGLVi7vxxRmY+M\n6AWYHrQRV8g3Ae4J3RELLsgxGaB2QseFLMcNq4H1KxCiaZBUxvnMBTsoeriR\nnANN3+2wwgB3gEgCC31VYfaC1KbGTubZLoRZmFqrp4EArQK0mqTD0irlr+4+\nAH1w\r\n=689r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/density":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/tab-scroller":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.18d147e27.0_1620161992081_0.8915122466321115","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63ccfe4baac38f4d4643dd4598463b5987ed7664","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b9984794e.0.tgz","fileCount":37,"integrity":"sha512-hL0AiVY49HjAy/fUQ1taC0ZP+9zXTqRRcmV6NgBW/kkc4yJrq5+/kf/Rxzles8y/d1i0rYjKDCLG6qAfpTkq8A==","signatures":[{"sig":"MEUCIEgcTyLCI8xVcyhsOGVMzquzN+MqG8GqagehSImCYDhiAiEAxmtKz7TnILlJ6n3PwBDfSEICkdjdEQ4PzaDRJ9x2n1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdMQCRA9TVsSAnZWagAA1UAP/i0iJJhaZjZI5pOZyiev\nQBeS6zc/xmHs2Y9pyazZELpHwgM8IoInVRW/9r6HW3ndYGdNj/Pt2LsZIGVp\nh8aK9muwTIwTMDemwy4SfEm02CJRn1JBeOInzSJ2eyPmyuMB3mAuX/ulBT/Q\nkD3srgK4HCs2TETUYzE+ETgJaHx/hmWkFFlS34PpkE7vOO1E1px5iuscIq4q\njM3Q60NXZNjEkjpuZHBmb1l6byCwHs9WGiSo/tikDQFAzJZbnxBRtQqVqQTU\ne5vOiDzwx5yL4CQ8fpgF3sJS4KQwF3glbkEA2rzf6+1PmM0NR1amRxMmn26b\n7ARgXoma1E7PJQC+p7o4Ao8fk3er8ywOd11zR01sfMlyNqC4YERPYrNmObxi\nbiYOpmq5pOkNngfx726U9eiCegTupXOuv7KxGskI941CsZtPIO7PF6313BkG\nDYpG9GtJg3Oeym2WZ+9t1vu5iiWP4PL3qptrWA+ltAO8aO8tOsBtOGPAHT/e\nHuiHCSY1PSMZEe89g3KQGD/ZYLi7Ihr0OS6D+wP0tSACN76SnqGYnoco2SDw\n/5AJjKy3xsxp5n5M12iDj1khsLt6ywgkLA44hheyY9zEjHHnAMuGEt7u7uf8\n7/LWeSZLX+Od112wEU7L3k3r9NROlOV1lUJt/4KlCsu1sFoLVG1zgZVza42J\nSFyh\r\n=I894\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/density":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/tab-scroller":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b9984794e.0_1620169487639_0.005219765137368437","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"800b8769daae8e509b0c2712aee8c810ec8d544f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":37,"integrity":"sha512-4G0EwpCkIB/MlDlXS5eVgpRPv4K+eySAI65y456ONAFRryTrlfd9HtcI0Chp10iCb50OAct8wOdQBzOUmv/k0g==","signatures":[{"sig":"MEYCIQDq3ExnM63bQwZMYsbQpTaFHI35aGneSyRAU3GfsWmYpgIhANn8DwnddWAtPhbYPla5bEwH/qPSVd/y5T+0ethb4kzk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPoCRA9TVsSAnZWagAA650P/jZzZQ1NON1NY72Kbo4N\n4j4TM0pB5vVzO9vzBbVe71u6uILoKElXu2QGKCpA5YN8NKQudX48/0z2Aohd\nO1heiHyxgn1HjX13Mj+4mK7JWKpsePtPcmwjbuiwGRdTQ7ipkhjo4pC6jj3t\nW5u1NtuXoH8iy4oLEbnQksNh/9fwTilz9Oixw1EGzwCbs0uA/hDwbG663mL3\ndiEJ4odrJafGPhqlBA1Z3FhfMQMJmAcXL13UNbPHt/j4rzlZ7m259lXjGM0R\n/oupYM92G+wrukf2/KiTBlf7g0Z7OTd/q0rW9UGMFw3psZFoHPuLMRNGUXAS\nkahUnj6N1mFYdsRIbE3dW2yNn3OTkDRWSzK0giXrOR+C7Wnhiw48ZHPdOyw1\nJF1NmZuKO0y18PRJenEBnFYh4gYW7veAYQEGGnFMscLKCcULeUb0DxiKYveU\ne9VQa09oRuSHlF7+OLLBPVN3VXJuxvpGMV3Rx3ulfBNI7wdU5lo14MZk+s0w\n9R7nMdFeREsb6GRf9pVE75CWPVRoZiSQgWSxScSDWRIAydWsPtvGDOt49xvV\n0Hw568xN2W1SZw9o1XhaVKqPIXFAyKLDIF9ZHT+197trOhZmlmq2DC29t/Xh\nvhSCIkKz28kZtuCXXYdvEh9GWtAl92za4kq5TvrXPSO2s9J/JWusrlg7h5MT\nINRZ\r\n=GelC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/density":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/tab-scroller":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b76f5fc9d.0_1620169703928_0.7593979323556737","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/tab-bar","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23375211c62a94ce3d0aa770060cd4ac86918904","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.055d4f10a.0.tgz","fileCount":37,"integrity":"sha512-lbk9AswSpWE519sKYa/LExmGSQo/GSutxCDo1asay0kbDDpNn/n146uFNKaezny+htijKyYZ7NaheftlRuYuZA==","signatures":[{"sig":"MEQCIHBzctLKoahbCcnXnhWtf+FKwpkpEXQUCTI7wqxy7NRVAiBRDAHcsvr0kakCXRMChig7y+tnvrSkVHUdlUQFHfGORQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdd1CRA9TVsSAnZWagAAsU8P/0KSA16Hz/T25dCdjB4Q\nnQMJ5CK5zGOdv53+WVzd3JNBh2FgfHZof5z1kXqWFE9mi5jdmDjaqu1M5Ean\nxL9KQQzznBKhWtz1rtjMSWtZdOv9ik2ZJKrPEJ79NNfQtJHOEIuh1ZUCawsS\nQvVucA0GgM0OhwiGJJklYhFO0euDSkD7la/QO95yKQM/duq60ErEHu9RYeXo\nPJVhGyoB2VGLtoZ1l+r6xNKUwcSlJ3e+a5ZU9xJ/H7OY3zfUs9OES+sjGbQb\ng8zAs1m591JrQU3LQQz61NIsSU7WwtcXM8DvzCr/3Sez5SnqBjHXzymCQdgv\n7tyzSfnGGG2EaiEbekvth8MRDRczgDza4xZyM4onX/Bb9mpEGjRzjg8PJnDt\nNuViZeLXA2ztSzDmOORxzctYI2yHgCorvlr8XWeBrgo6RkwlPugiykifpTrA\nGEekSEMAVRSivMpwhNRwBlsUWhnvRgNj8NjqSlifEpmmAZhGcvkXdPWT1ReX\n0AygJwl/Ye6TynOhU2dlEE4xxlUgRH7RIecD5w2bNV9tbFxRHAkc1/51rs9w\nurHoJmw1JZBbyhKrOkU/WcAkS4GbkRcM8DhiK6u7vh7HGgW0QFy8ya84POmY\nzb6Dsax8m6hgI3bEuAZD6F0HuByovRjzYGwQz2OviW2hwcKhKt0q9VYB24MN\n9PZ3\r\n=qVZg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/density":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/tab-scroller":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.055d4f10a.0_1620170612613_0.5384863447172392","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56494605cb1f53cc10adeed00001aeee1663300b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5b6a46016.0.tgz","fileCount":37,"integrity":"sha512-3koPMxMPma3HWBLemf+qGjDaKqgdd4Alc4VRBklTp+2G7xPPfC70a1z145WB+WIRUNY8EQ65Q/ZP8XgOtjGrrw==","signatures":[{"sig":"MEUCIBvTtG0pj/SrJdwKdDAvXSMPrHEho8wasO2Q7O73m5v7AiEAqJ3Mao2+EoZDX6dgbwj6dCa7WEDA4APw82XTMD5yTkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksU7CRA9TVsSAnZWagAAN5wP/iwZZa+PbYh+RmpzFFux\nfA09loImahzY0px7hwY+5VgxT2376GDOtBZ1ceXgS9OJtKOaaTI5TVDLxqjI\njBso9yUFgpw+0WXJoragTL6eelgmLFdfEp1ZwakHMMNMbcfZkmmchd3HTHJr\n3B2m41+lVzXbMHB5LqbMDN93y4pekmX/ZJ4lePOPXJ9dGJq08hJX8KSGuArI\nX8h0eHQHRaPcg1DPvanh9NLP9Z2IIp6MTcf5jXisugise7URDYTnCWtCfeEa\nGwc8ZTtcV2OFKg6KvthV3NFVlPQVlKcALfiuwDy+YFXvav1lnrrRAZGzaeYp\nxm02UCyVAqMjpP8vTbV4+P54kvrW45GFXXY1lem8nziDHqyD+cM2aYTpSs2G\np+wHieBPl9Vr6wmglUhhj21nvU/Xl2waeySu/asLdR+jdaSRgaBXAkfxn4Sb\nw7n57zF/l4g2yYeev3TcJl9M2t3zRYW7UW3fpxi/3quw7Yd40/Eb/jluftYW\nD+55UFj6MeZ4qdryFkdhhXN1gKpRHxEsTnuDyfltlF76LjR5nmokFPJYta6H\naWFIXUeamLVZmLAaqTPHQSkMycQJmvOc8jVuEEyVU8ja3wpwRkjyPRsFWLgG\nljUtQMGTctI3XCVp6QKHNT8FucI1KW2rc9R4Li+3spLZ77STcSx9uMFcm9pm\nz55F\r\n=aXSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/density":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/tab-scroller":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5b6a46016.0_1620231482975_0.14630124777930864","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/tab-bar","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2b95b6e335b5b441f11d42a0152f491cf9ca4b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.33c9a737a.0.tgz","fileCount":37,"integrity":"sha512-HlCLHwLZ6x4ZC9IVnKedlNuy+30Jx2Ft6Qru1CcpaNt1bzYU5aV/ZGng98jxsZy95xmC881XS8eg9dc6mfuFEw==","signatures":[{"sig":"MEQCIGaVSmS0jPjWFT4mU/8pOTLZlkyy2geqO5292GoEY1NyAiAmieCbL5gC0edpBBdjqpi0XHn0zFU1NMPT/bPsZld+iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktXaCRA9TVsSAnZWagAAhVUP/ic1dKCLzo+qnmswyfw0\neQ5D9UQCY7CT5ZfjAXFqypbYkoGLsLVL4WBVnL6sCsyay3Y01ODohgno40+u\nwuAZw4Q7t3HFeu1z6fq0tYMcCZu7CdYylNIx8Fjn1S0CKndIFWiWCjUqYFP0\nP1/AlrfV/Gjg0o20nDaC+GTuvmQJwFT1Tvuy6fd4D7z9Ck2uDszZ0efXjKsL\nN41FX6Bf/X9YlW38ybzQpTPTb0FjkMm7i0YXvXNhx0XWzMYAscLAk5149znl\nVoN1oMeB8PyU+tid3XLldEBH9RHyWYLE71a/ir8/5V5DcZcYkPM5ij7zuZSG\nGgbqkDxxqmLxSoBlN7zeLA5hlEleS2N0bgdEt4YaPZ98MQ5+yFTXTdTFLfrK\n8yi5FMVASeHZlAzqisT8YlMqd1JWtxuBL/peLQBp8N5hNE0BqU9j7ZHHWWxt\nHgAXb9DTGax0aj4FH7ymbuBd5gjpZ/ebjk3FGKjcjFwrfS+opbaeFB6Zt1h4\nQ72Qn0hAXDg9r5BqjhIdVWgl7L3zs7Wsmst7wuXThTtmJ7ea9BLApRUJAnES\nJB+tz6UGKTJuyev+GiXm/WxNJOgUFl02xfUz/9cNAMuo/ZIm2nDgxhw1Pqo+\n7kyZ1ROGykCwO1OVADU2buucx2xGGn6qIXcebFJPlwoOIgpzhc+H9/pFc1Hf\navQ/\r\n=z96e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/density":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/tab-scroller":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.33c9a737a.0_1620235738194_0.4072439221118287","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/tab-bar","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e66f76336b98a05340e587daf2a14a310c7398","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.9bc0effaf.0.tgz","fileCount":37,"integrity":"sha512-nVYuOSh63VZOMJJptXn0e/c6ASBX3TQah6ZKFn8zgbbTcFLk1t/i7xqayizv7FnZeLpS/MSIP2J+whlAMegy/Q==","signatures":[{"sig":"MEQCIDlJdJvvflNFpWxJJciLaBC3312lErrXoh0kz2mvMw4pAiAh6gmp+0+Wjz3IUS+/kqW4UyvgFA3vJAw6z/c/fptwxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwfDCRA9TVsSAnZWagAABz0P/1I2IXuBSsWRmR6NSwrE\nc/dCuTwN4/GapjYE13Pt6KgdddV0L7KdJGdJhQaRykRroVzfAUCa2/9z82iF\nDkYjnJDMbRq5LirnDYCpNlxFMxvvbkCYGd4KDuYIlGCHgSiaup7ih/CE+8u/\nZYWWdk92jFLn7/FDWaktnPWkW5/Wc2O0rdZux651+KW+bKt2CY2vMoR7mRBF\nj3ClC516YqOhEGwODCwBVqOPLgIwMA234PxaYVeYJa6WzEj8Pjzal28wdecA\nLopqXsmICefBl3FMPPeN8c+17fq/SvdOnehVc1gKWkm1ZKspD36cIbYgBWe0\nIgwnD0fnTqnBovG+zMzPHYxozWYUyw3xJYWTxZ/RVGWfV4CJuu+31fn2sKnG\nl57aZ3jNQONe1y7BE4AxU+F42ym8vCftyBPJt2RZIL+qwFmc6kkm5y9Wogpx\nxcAbtOE4eBri8YusSUrBqHw88lbeTQf/XVJlCC0NG1G+LE2apbq5+zO5Hy6x\nfXp/rxB2HxC/WfQaRCLeZ2up2OQVgHirrDA98J515GhyFSAnGI8t3E2JLsn6\nSBzlckYYUtbqYKCtM2PuLZ9ZbqeTxIhHxOjrA/EVtSHu3zOYhpYtlLBD2yMy\n73YTh6Bz7efqdClboG2XXMiX5YU0g6k/3tNbXI9EBtYQ7Y9qzoqGPE1pMAy2\nvqy/\r\n=QDVz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/density":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/tab-scroller":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.9bc0effaf.0_1620248514738_0.431833656410076","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74b8bca2f154808f626313686e15beb4dfbf89f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":37,"integrity":"sha512-UJq68vK/ss+ZRP6PPU4uERkA6tONprzhiC0k6VidkZeHMmhj0L/q8Y6BkWiXvrgXp0uoJUYWOdNX5l1PdDXXYA==","signatures":[{"sig":"MEQCICR5b6Wfcm5Rvrcxgaps97okHkwEAK0En13MdxSKiOjMAiBncy+SKvVvJJ+NUv9MfcfA7h4YTk3XzQo/+LcBiibxfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxFUCRA9TVsSAnZWagAAjvcP/R9nEORyo7poIMFChZKB\n1ot/DYZd562L1yJpe1M+XQTacQbJgKamZBcMpahZX6UojOZnUnsZn7ReWtsA\nvNDfRB4vkTyP3xxW86CiQU0Sj9RxniSx2cS5VPIdt9XF1oM5He5TUbFU+gra\nSXL0QSslbVzGPuKrw5wThtoRpMi/eQYfXEMK3tPbtGcUrnKPkKWQCPaVD5pC\ng0FcakwNkY/HPYDDbSg/wOHwLJ59Y5oboQoHwTuGi8N2py9awLu0OvR+UqCE\nGB0Kv9/WJZSOOMBZtsx6k7Gnr7cz1CZk0iMpEMo6hJqaCO/x8t5AK4bVDB+6\nT524QBMN13whdr9aN6fQ7aF1EZm9zWwp2cOZJ3swvr17znOlMBAUVM6hLrXf\nur0CxXFnO7rSXHGNkfO8uECWQ7NfSIq61U6usu1lm2qIQlqIvmQe1DgHRXdm\nInBpCEu2tP6zbs4Y3ESx7qoU6Up+4DwVsegg3w5A8GF7/PwE3KCXFDmqRj0/\n7M5/KNXQr6crsaviV9opCxOcookJvOwpBt/PpQiMyJyDwEaJqt4DEsyKigFT\newX6r+12i5HFlF5CAhiRcfnoLASh1sr9/xgNCmgrhEle8+A6me+GCrVdTjj7\nFIwPVmztFqycwoRubpskXUUxuuMLAoxuy/41+N1MeT55eOOToASKYeI3w/MA\nuiXR\r\n=SRDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/density":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/tab-scroller":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a1e0f2af5.0_1620250964204_0.057705660462982866","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968f5a78442b8b33135358ac8d457c764afbf55f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.06930c96b.0.tgz","fileCount":37,"integrity":"sha512-OxlQZW5nH2967OJN3wusi+ZqQMxFgj7RGHe1kKwAee1q1D7HebmAxcHHgk8MaCzuWkxxkJweMV63dlfYt0KIIQ==","signatures":[{"sig":"MEUCIC2Q2FFmyNP5ixDEB5OQH7mtulaNAJ9ipbHhqu0gn6dUAiEAs6AlhdZooYRzA2hG0XzjIdFOaP29JRbRaVXIZbMNY7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgky0GCRA9TVsSAnZWagAAJ5sP/3tVMOpOvjqD3b2H9p6b\nWCqi7NVi4y7HfRC7N381H1zG8zWkfJluOJqy3c79tBDZw4pr/bs1d5sVGZWD\nWGGFwUyz6qMS17kJXWThwn0AriQ1Ykh//k2Nx1TsZ/Fm5pYW/O0qPpecRVS/\nokG9mopzNhLkcVCGDC7/hI0IdYOWTx1Dm6C6v//OrV8rZT3l1q85xpysh4oj\nGEftVSKDybs0DGEaRpinffkUNwi1qNbe1nNfl/tKR2M/pzdncrI/g3N6h13X\nELbfgDF6mE2ZrbO5L+e97qlQbdVgvBRS0RGEd+AuaFR3GVW04lEZUrZsH2F6\n/XZgvN2VO/rsxvCC6sszypLmB20QYJ3YESc3AyicglGb8wRmFjwc4j83Ps7a\nYXY9xD56WT9KA64VoMJIiBMq1tsvJ3epx3Xl99PXv8egUbwE/WBXXvyuxFIB\ngAkGeWT+TzJsSluvGyMEh0hA6suC8NgtIZUo3fw4wV3ocv+I8LcNN40iCC6c\n/5SYomRa1EPzOJai9LQEitSniuegZHNFIlFSJeb2+n+VBWdzoNVukorIbCK+\n0HcHtDQc4ZBDkZxpZvGFd8fntRPmdKPMIz7WaYhtrlS9aX7iBudnLCwoFUkC\nYIKX9pPkYwwiMTZ6L6ujCKt5dC/Lq6PqgzopUh7tZHBIJwjmW8tnArKHaZFQ\nIQOe\r\n=JppO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/density":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/tab-scroller":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.06930c96b.0_1620258054257_0.13276901920714668","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/tab-bar","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10df7d68d9d645d02987f8b2c43843689efbd279","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.03f525f9f.0.tgz","fileCount":37,"integrity":"sha512-J5G1gkbOv609TbFVYBdVeM1KteVTG9BNuBcDDTLJgZ5G1y9dkbVRqY15gIuJfIIr4aBlfK057fEYbwhupQRqdw==","signatures":[{"sig":"MEYCIQDkLFK4etmfzd/8eKqUq5y+zQ+sy42bum1f5w8o6AUZSgIhAJ2QLQQNxeH4acJ12HWOJ2qnrJtyA5KFwaAekS9kPwbL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzj3CRA9TVsSAnZWagAAdIgP/2JlkBYf2WzeS0gOAL0J\nLRd6gPVpN9eD/HhZRfIjMvXNmbkL8c0UWsI1XIFbKL75HwReGiUcGXBkVkbG\ntiBlozeFIKVCI16mJg+rXn0xL9MNOOeTaRp+LdFNqmoqnnDcrvq3+8OhqFi3\nE3+LHhfH7OrMtTa/FSNzZXHAcAB7Dn4z572OsMfSLR3chdWrrE8cLzEkwbyP\nsHa+GLsISpEOCLeCkJaGPE07za8WgoVUEUAAavSKUzZ8zFsfOeCpeouUcHRE\nu6371GmsPRc1DqLXTImaluTTuTT5KOIFWHKwgZycDM4D9bBkPCzbNbaO1efN\ne4I3IcMDnYPwII1jpM5jU67r4+BkgtOV1S3TPUVJk/PFmNI56l1kP3zqHWso\n/VmlCIPCjL05eHRQGtzKrz7/A8WXhjT/Gul9wRVx+V+the15+PET9+86ssW4\nsTqke6GGQHjcxKtA1f0t/W3l5uMOTUESxVt7e4MHcN0HvclaSa2SwrYtH2XQ\n/tmlMqixgWiyqLIYgOHigcUu3VFJhOSLuHW9P183L9UN53Xg7PSD1SmAL556\nqbQd17QHAxD1f/TidTM9W6fwGCD+784b/ySV2jtXackhBwt/sUJO8D65Dvjm\nmjMx2b4geBsVmkwT0c5vPrA+1JZBMhaI26hV1PWdX/Xt7RAShxNU3Q4V+hQn\nRc9L\r\n=fzqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/density":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/tab-scroller":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.03f525f9f.0_1620261111016_0.7385021878077611","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3206063d2bedc8577fc4e18e4607cfc39c739205","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e82ba2a26.0.tgz","fileCount":37,"integrity":"sha512-nwNJzbm7Iex3peHEDpr2aBak8ErLEJnm5G4vHmB7DzgoeOJaps6X5gM+WqcnCWsq2zVKb+QeAsOtRiPABm0XKg==","signatures":[{"sig":"MEYCIQCBC+i6pX3+fh01dLthqTMALKHQn9BY+hwDcxXnJnuVigIhANnrPAQi1tiI5W9zEken5tMkOebINdndONadb/zdx50B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBIcCRA9TVsSAnZWagAAfUQP/1MvWO7ddblo70E+hbeb\ns43ESEMYI4RUDyCuOUjKvuv5WMs1N2ldTcmomiY1/RZgnb1O263QDFVfCTdY\n3p3NZ7NE8SmWdaSVZdK2oAzHaP8oVn7ChjfTjyWBWklESArp/0toTuD/CvSe\nzp/50d6FpcKAuIsSSAz6xIJ0H8Q2O3Nrzsv83eP/sy8+Kr+8b8CbhxHP4chw\nziWlB/jX+Y67ZoVe4nN781QQcJikvnT/bCY+ohv5h/NRH8hXLKa6n4h30ld6\n0vtIOHX+YF/jCR32uFiaxcnK68rCV+kjwpZkMjcmq0S/SEk5MQm0D3/xifgX\n5RIz/zvjYsGSy7Ncc357uIzbJywnphM5VjI4Xz8uszOyB2TrNNIx2IqQIFbd\nns1m1viGBwU4IdLkmEbzuWp+7/EwNDSdFWA8NFpSlNPSAr8UG86KM9xSQxmS\nRKFmvvBiqdzZoi0KkbWl8uJFMg34vrJ5ELbweiAXxi9n3d2vBdEHN3Wq59dk\nAww18P2WW2CY0bbOG2JDx/TlBTzxWd3wsQhoiRKrDWYvsszf08O6QB600m7t\nsje8r2j5e3eM4r2P/2pQ3h0aFDsrBxIpvQFJTGbjckHg//1jELvMHwGucXDf\nA6MJZSEcVhusge/A9D6oBm2KWe1AO4pC0pCHoOood1Eh1Acwfv/hGjNB1LyE\ngMLt\r\n=maNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/density":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/tab-scroller":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e82ba2a26.0_1620316699946_0.643590628049244","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/tab-bar","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fafe890389e7f33271e8d9df8a0afd209a4610b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":37,"integrity":"sha512-60xRgM1nNN6qRLAAEknC5y/RJz2YDQKACkKfoLEM7WrD8N8Ly9nF/hiHBxvwNtwEV9XuMAVwlLoCTTM1R7Zcqg==","signatures":[{"sig":"MEUCIC0mAP4Gzsq53CnqYKWXsP4CahNBB33vXRbeC+QfHJMxAiEAqeq3nioWcQBQIPbVNXAMn7KW8s/T4nHzqrrP8XpKTXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfhCRA9TVsSAnZWagAAwHEP/2r9FmWcfyyaY8j6dJy+\nmIOao2dLtOUL0ikmkiqgJ6g0Ufr84H2hkcBmlTY8z1lyKnQAudMuU+Yzg9kn\nhJPX0cd6b2Ibur73mBheRKzV2KC5CXUpcW+cVzxznN8XNSyQIUOh5So5kckk\nuPdhOXUWe22R+Opb0FHyaC153y8zMjjMXQI5nhPaVhF52M75Ld8jjQ7H6aXG\nitZAnx4VLyYtwa9gt801STiWd5CWshnRg/L3JeC/qtTynQMDpfDlstLYsf4p\nYQtlJgoafB/iG6sg6XdQpXXKi/oa5Hrp6TYryWJuochSKcpntePnkG+N8BkM\nYeUR2Ba5hZzVOMgRMFaBC5DUrEw9gYg97gHGjPqPQ39Y2+I+3F/qKsMV7cjb\nw7TrYmA2gErxrc34fyGnIuOcKHmmUTODS7QUoX/0X+wjvwuO0HqcS52N9TzH\nMpnBw+2Ghd+mib3MGfIM+T0etlI4l2Hj0tLaQSr19TDZP8JFgM8Okvrb7oaS\nCiPz4+3oCgemqNuqBEkd2/+8aR3I4oE+DoY5FXfqgR9Y9kr0bDALi1PqQ7qR\nyAGtN4VK7rmA05JsXdbdGMG/Kd9GA8DCPGb9UsiHEfR5hhH4t6xFtyFKd/B0\n7bB3552cUebhyORSj4DWOwK8++/V7OYj5LJ5/IVZ9kc4/TCO6WldhGFEsLQd\nRm57\r\n=0E5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/density":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/tab-scroller":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.fc7c4e5ce.0_1620322272879_0.9922077608323743","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3462c4fc472bee4063c935b0fdd534139ee9449f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.65c04514d.0.tgz","fileCount":37,"integrity":"sha512-jRyIAI8R+up5fvQ2pKtCUswjgN7L501UQEFaNRr9egYuG6hOcxTKuGS6RS7uZXDZNirKLhu+d8Q+nHrhdh7C+A==","signatures":[{"sig":"MEUCIBk3ZRjNY2WSITtQIOG/h7EB71mcEwp6kdn/bqTGu/MHAiEA9AkzI8T2+YiknEfMFB5/O+3hMiMzDoA6RKrqksGN2nA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDlhCRA9TVsSAnZWagAAgWgP/2r84Q2RlXlN5fAdJ7wo\nRy5L0rzdlpKYT+Fe6Eit0bbO5RJT4SXDU+nwJhw1bUuSjbXkM7/NiJxtqlZy\nDHiviPekSDpAcXwBA4c/sq8qbVEDMp39uY9mwUdPZBU7VRVxvFcVX5HXEYtS\nU2irGa/xaN7M8TvtG6XJGIBJESzhyCMlbYwdISFhwDiOhihW3MsNth4lQhEK\n/mp/x4BXKXEpc8Dx/LdeoYxD2r5yucNhK1oItnOGhxEqPQg8+RRQkcvgI3d8\n8VL6HzEO+JQdPBlMdTyiy+wTcg9nW3RxGw2TXgICGgm3VsH0xQ1x/zEwjrCv\nqfs3BDflhaWM6IcWOvkfHHh0YJ0zn2mx+GFDqvutATuWixqTDVAkEk2YWPYa\nSzzLud0n+sgW22Z+2Rga5NCJBaFkq/4BNuN8SCD5OVNmyyfONBAu/nRgw+S8\nqPqEfbwAAEVcDSRw0aTNZPk37OwRkjSeFCD/NuNRLBzdkwSBFDu6UzT4m5dL\n9JP00jrU68V4Ce3r/AozWzjwF4Zz/ctgfxOooDywMtDhtXaxgEhZR1zPFC0O\nFV5WLhQxTVAkYSMeVwKhHZhaj9lzqXKW1JOuI4oppZ0QZ0aXkWR57gx0FV6G\nnS2tl7CkoqMr+QdqZFzOrVRh/ihJbo2NKOR/f458/nywyur09eHyhTJ4JLyZ\n33ik\r\n=Jq/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/density":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/tab-scroller":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.65c04514d.0_1620326753110_0.6196135049912919","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5caa9450f5dc57d300da0400e6398777bc23e35c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c97779ca6.0.tgz","fileCount":37,"integrity":"sha512-ML3XX0eGY2quw6H+VkOlAr3DCV8kdGLscY5CelKBx1V71Q5H3p30RIsXgVfeF8jtcN6POTYkstseLGQ04TSJGg==","signatures":[{"sig":"MEUCIQCiNsRwHiiiLG/Ecc1s/yZ5BRdbqi07/WVebC1gxDlg3QIgfF7U8DzHVrTht8paDOt9KNEoc32IHy50kWa+n0Nw01s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGNeCRA9TVsSAnZWagAAjCAQAJYd7xOCo1Oi3YFkpxoY\nQDtjoDDq8s3h0jzgusU27cBdXNbeQT5JM+z4YmuS9jRniH6mX7BPI/vUcawO\nLvTaJQ+WSlmxaUVU/KLvVyQ+etQDWc7ZdfHwd1dVY+5WgLO+2P8k+wev5Fd8\nlPN7zJGmFegiUXPqx5w21AkSYUumhbUG/p84LAVRdAeb9W80PzXLw9WcD6BY\n3wfo6sh5T3MawcYlK1IBrylOGuua7sMHseYp/ocCH7Dn7c5kCkUZLkfl4lyg\n+7BTGtjzIg7D/9KAlsqjJvpV/6e/FMS+U6JjQoaobeidPxBXOBo3Nx/RlsB0\nxxkVhlW4tj/pwE/fXvp5XJTNh4dFR5t0Pe/uFcHWys+uQpEDbP1t7yEa3aOW\n2IJKLj4kuDkAx04Rg8BAVSZOOi3LV0e+WBLjLZfM2ThZ6525kCX4tcI+WnCK\nlDzV8EonZLQ3l3WT8LqB00f/4HukKQRl/sIc2QOVAbw7VepY7Xs9srbuGw3h\nQxdBhFnZInS9U/4jtWKFKX91mumHdHWog9SNrHne/to7xUK0+rR8RiFVhlt9\n+Sx1Jj8+jQPr0q/ALZWZ2DuupWDjm10lzFWLO3dWCv2wWm4WPRLCTHNiqad/\nI1ElSKARQF/XJiUaNXU77SOW86dNLkyu7QBVdlsNyFeMQkZk1DOlGDrIaNWn\nLtBM\r\n=H6yv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/density":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/tab-scroller":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c97779ca6.0_1620337502131_0.3248096729130052","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/tab-bar","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85dc335006605f3d7f564e04f2338a8372ae4e1c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.869d890d4.0.tgz","fileCount":37,"integrity":"sha512-xTZVCdxQBVKtp4UJOIKO8z2EpseK8XJJ6pGnxUJUqOpD9ODzhjCDqJcNaeWHPpoYGRRZ4xbPmt+MxBp32leAIw==","signatures":[{"sig":"MEYCIQD2RUJC9Gl91p/yYIHNLoM2PIW2yP/86vOwgmef/MbPfQIhAP/rjcqa7Ri20M+iJbYJk/nY99Sl8l7GY/H1xg1C1ZYT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVrECRA9TVsSAnZWagAA/toP/AiX1tfvB2KVoE9PMEeT\npwqiz31F5+nR30N0PuZtcEdsDPm+n5UGhFr+5dbyQeVw0sW5AyPSBBeUZUJa\ncC7OrvnhDAx+ln88k2XT+Gt5hz0Ni31x0AIBRJ4dNaxbtlClyqhu3Lv03v1x\nA+zhBUKsN8+I4+rNymWPC3S+++WIvZzCtiWuk4jkGMHVNmHT3QSdRG6wQB+M\nBTjdJuPQk71tUNnXMgbcYsgVwVTWKuEIigbI+4rPbp4Q2NHEyn5SgXFTJbC+\nhd04s/9pYPrUCzrHgICl76qY0+MJMRY29Zw/qPJoCoowE52RIKbpKJlP5mcK\nHqcJjL8fkgBJ9pspPln7qKHA+vb7dvaKALSFp6O12HsN16xEzPhcz73Oq77N\nMld/K8MIvlbL1wi8QZLbwCjXXD937OCCJj0KMEtbAlGG2AdjiMutECvyK0GA\nycYQQLqW4jlZbybgNgqCciXLRvlvUNHE4W4owx0efgze/Q2FVlzr/uyzQzb6\nmtZJqPVQUtL1hrKYmwe8b6YzGdXbkH1BMKoWV/g5ktWS06KL/KWMFT5nqjBM\nWzC9uK5QAeAGtrMyi+Xg5fw486aBwmgJJRTL8blBZrtPOBSKRNwQTHrwdhj/\nsRTT2XlUob2a8Lj7o0HGOaTJibcuD/PvFNVYnFR+d51rIgrjGRU47el07AKP\nsCZM\r\n=JkVk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/density":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/tab-scroller":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.869d890d4.0_1620400835835_0.9564286418739296","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7cad074c55a6105f09ba8ca87f9bc9f7f365159","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ec22e1da9.0.tgz","fileCount":37,"integrity":"sha512-nlsn7M1hTxG3aCGPkBZwWV89cYKTvvirV5AN04F9uLxMvtAnzutgVjC24YsLWqKZsO5l4o2aUrcCOPM9zXmUpg==","signatures":[{"sig":"MEUCIQCSM6TFo9XnO6Er4Ok/SBJfeUusoGx3dMCFCK40DfsHmgIgXsp9K/QLaT/nxjza7j5HD5rDAHjBO2cJO33EW428K3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXqOCRA9TVsSAnZWagAANY0P/2Grj9RVeVND5tz7xYQa\ntKisYAAqiMqbjWiEeigGQM1aHq9B7Aw6gB81Ha3mn6wZ/7IA/sXiExjJ2byL\naoVVTywcAv1upek0O6HmOZ1QkpTwdZPRtZIlA3degd5HNhb3fbW9ZxhkFFey\nvZM5gITY4WTiYcNdfyuLrJfbqEIlrQohnKg38pQzTr0Rljj093DRjUZPznVb\nZp/poQy7S9NsDsY3r+lkiqh2DmXNE1XDtVV9HhdfylaLEe1TnImhVMSI1OB7\ntuSiEFWkMBwmF6GKmdeE70zQnQZXNWBnvysy4/gLD9Rodaf5YyQcfR9Fts6R\nRAQLTP99R9McV67VY2kDHOKeiscO2zvqyUWOIAkCllgQCgSbI7OLSfdCD/7D\nLI+DbXUk3AK/buZYM1xdbOuop3kLXUz1miHZSAUvq93RtYKsiNvIsqaUiws3\nV/5keshKai1PPJmIVbJwGMnktBeQUuHbQUOAjA1lhKUJe6Sklrm3UiRbH/rG\nlbkeEYIRAckCo1x8v/2/14J3O66G5AzvIYB3byRbqD2XBVvuokWJ00uEe/1A\nTgXFO4zyrcAiJ+3qv0yVouEcWbqxiiBiKeBTal24VE/3JeuOwosQBbxPtgJ1\n5XWtsBtT96nCK40pxFNUxh+w/LStgnH/59wZEcUeQ0zWK+DlTnLrrJMVR6VO\nNKq8\r\n=D5z7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/density":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/tab-scroller":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ec22e1da9.0_1620671118345_0.20087419693414765","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/tab-bar","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a4748dab268bd1d897f08b213785302d5534f63","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-nightly.7427449f0.0.tgz","fileCount":37,"integrity":"sha512-vJP5AvW/oVt6pCg9+8KpdhdYtSotEZ1zyoh3+0kcUxuBW7MJ4ieUkD9iYPUrKcDdWpeA4fmIzqJTJtgR8E1ebw==","signatures":[{"sig":"MEUCIQDCcQktmNN5aRlT+n66YsLhB88trgx+zPAG+/zyjoiBHgIgROhhOtir23iAx02KAJcTEF6tcLl1Ks9WreaOWa+KUeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX9FCRA9TVsSAnZWagAA9roQAIPmzALoMar4d43ZBSJS\nmqwYyTgPoB/RgawmQOcz72FKtM071jcXLt4j+oRUR2moctPonNLcbVRYnOlP\np/CgtLwWJ+wrKVKklbYIRYsM11nUVgVI3Auy/8qlkzRHQcmmJlzTlw6M9wtH\nWGv/1RULKBbwPbsvflwcXMVzK174s2haavCkc2OJtWhgDMPx8FA1hHW3gEzP\nohS87EC0ZC/dsgBKBEI/xS+DUZ9XxFQnhIzp4bkFUdP6YLwn1lIpQbaMqJjV\nDmBFwbj8MiFrEScMH/SJrWP3VoI3qqPLkcyZ2Ao4HekPNeq424+pwL+QmYK6\n209i2HwOcoRcccpKL/5SS36jIVUduvsCpnljMo8p7dNiOfhX0RuXfcgoyLe5\nR0b5tReNuaQ2qLqF+oTSU5e50HZDTHrvDixvjfHRfaNxgJAWU1JUORAZloGZ\nZA32pSWRKet3OqFUMQt5WHbFUr71VJmA4F2BZLaT+vazoOArMUaDDGmXGNKJ\nMDJdwCmJtMgf+p2asFFknOb4rjprHkKPIoAxTi7UEZMvS3buHY+Brw/TC+HH\nt0e4326BjovCZ1NLe5dvzoQUsa4tDr+i1d56uTDzAMm4lF3JNoGwPpoAfTyq\nQEg/gexdsuC5Ye8+rrzfgz0IExl18rsZ81rOCgiux5tzqdYnfWTey3gzkv+6\n6iON\r\n=ADIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/density":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/tab-scroller":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-nightly.7427449f0.0_1620672324692_0.31828691769290085","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/tab-bar","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af40c90776eef01372d13cc4d771b5f982c4b64f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.957cc3bf5.0.tgz","fileCount":37,"integrity":"sha512-wnsi+lPjUEEpWYKhEzI1xDVSySA6jehxK9wVAyRLymHmnIi7UzCe2PJfuzS9/pESwsEyPSj3Eu2Fc0LlgWXpmA==","signatures":[{"sig":"MEUCIQDdHj8Au6eBDN0fNMPpRaG2ta4lYEuGyu1tYw1gOXpCJwIgEL1YHt/7ShIWDFHKaZAcdvrw4Psb1LDEvaQJcD4sFCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmayPCRA9TVsSAnZWagAALrEP/0AV71300DQBsZfHP2Jp\nhcCw6+xv0o1OThySlcCkfSpAAvcR9RAimb3TbjkQhNrJPywqZ9feI3WnpyAO\nu4K4PJja5GmyjLXEg03USajUrsMsHMAJp43iQkUgcBTVGMxUuAGoj3OzqKeR\n1ndqNETgOhe7etmRYqqHhJbG7MQf1605W4rFCjlhqk1Y7rpmWE/g5FlRhRCf\nOdqYYbX6yykzZoNmwUq3og/paGKeut1mLawpjupRcl/0kXZt4dpdYUS6jNJi\nwvLfRlqudECvi8BhDmF6icSHkZ4IXsUUno+QiSObmgkHDjtOavUXvbWepPm8\nmu/hxCheaMrYaSPOtrYvffkk1E6+eI5UJcuHPuc9o5Qiqw9HiOj+C6VeRWWA\nLFFaBkVrHBxFie+gyvqFdi5x28Qgeivcpk27t00BgxQSbjFebKI7CYrTQngh\n5Hraw0F/G2gnKfVUvWbJe+NRT1DHZtBoI8QL/x4W8qkxdb3UieojUCpEooHW\nn+ipwSKuXEMkivbklhOg6tS8JvjtuUQgxoUm20d/YBwaBGnXmZwQhMxb2jjx\n/tNeL8Kncjw3S97Ou2/FV/mH9S/31flhLab8Npi7I30a75JD4AiHGIKGBxZO\nhCxeLA3b0PJ5W9z8q91AemgV8pr1m+3ovdVCQ6wlFLHT6k8r9jp9LFminMRo\n1jsI\r\n=aOwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/density":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/tab-scroller":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.957cc3bf5.0_1620683918886_0.5913158451311824","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/tab-bar","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd15c04a1ed1fda9749faed45850d512b8b9d13e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.88a33cd70.0.tgz","fileCount":37,"integrity":"sha512-Y2EMef43wJpcXr7u06emfkQkyz4yP6FtopZBeAj1P3lJP6sjbT5cta93Mf42ttLMmwpHCj1RXwe7Uerq9Hn9cw==","signatures":[{"sig":"MEUCIFv1ub3PDA93AMEdSFEapF2zVoL1Auh/feCP34njrHIEAiEA5qXPKWhL39x0CaW4K86fLBLp9TSrlxLqj278axVMvbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcuDCRA9TVsSAnZWagAA9WIP/0QG3R3i+ojJ1Q+Sd2Kg\nBUnxMfuWBT0lWbDxuFJGRuS77ST/gkFCsId3ceDBxH65p9wRCJdBecG0hPRd\nBT7cZvn5QCCi2bOHdN2QScuhMdYmZYALGKzuykWv46T/BsCHDD31XYsMsnAR\nsuzlg0Zq0kOI9eB8WEGcMr3l0R9DB0jLDdufZYR4tBw+2mAMsiYNAGTA3FAQ\ng6E7gwjxYqN9vdkms5ta7mU/QoYpeKV027M1Ij5DeW8c0bcXv6IoWwvqKl5L\nsSUnxkRYmx6bucSO/I5SMa+6GghMblQj7Ssndm82Po2eIHDC1DPq86LYInvM\nkcJpYtBPKQ4DStueVjSiY1GRTyJwuVi7tpPP4vehI2l/6ke53Fo2wc/ok0nx\nHrsojV9KAnRj3xpWKGVCdoZoy0nZ7OUpaypWB/U2SX3NiyoiU7zXB/cEEe5+\ntACqUOPx7wqABycDxLMsmM3NFEkRgbn4vCBpA9tMM+W5TsIYy3fnXx325LEe\ncuCd+qlQ9HdoBXdnJ0NfRrxA0J2Lk/q6nP6AtFDhtPH+rB5TP5sN77jkJsK0\nxkHSfHOUme80t1WT3EmbsDM86yHBQoa1g0UNkpZC9OQ777lCt6Mzlgyroq2P\nfyHo/b8rtXfYjkc9Oo2gv/nCF32gC6ZK7joh9bo1Ly2duQXJD9lIsuROdVj6\nqc8m\r\n=kpOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/density":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/tab-scroller":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.88a33cd70.0_1620691842666_0.20258071902850006","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8695811ae65d6af42d5dd169a42865cc57a0e855","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d20dc6dba.0.tgz","fileCount":37,"integrity":"sha512-jV45s5/B6hP21OU5iUnw0wD3zz/oEaO+zoyHXmPjMdUZYn/gKizqIwdFamZQyPgBwe14634njX3YlQ02GMfdkg==","signatures":[{"sig":"MEUCIQDl0DA7Ymy0EFR6IfYkMFudW8Vqv3eLxDAa1D4YNBmGNAIgKveKaW9OY+YwjsNXIjWHyxxm2mR2Rf0Uew4R44BkSnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc88CRA9TVsSAnZWagAAhNMP/R5X9JSnYXKfoFQITo+Q\ngsRiD8iQibCkkCNqCVeFgzqLXVyTT2TTGm+vCK/fY3E02OvxMUxatfRW8eKO\n/MXJ0kUTeeK51qAFMYjOr6qg/sB3jYfsbZpV2SGHp8/In3Fxy0MI8CNqpvMF\nlbF6/DLovw2XtnXS2TN9o2MRrvGAa+niMwvtm5/rn9WVCKDxfiUwDGOdFWpH\nvmslmnzhR4mRf7kdTNHPaieWyZMrBOvGBulAnGDsYKxcntU6qgwejj346wEk\nOCF2yRKlO34pioHlLQpHoDzdsKAWHryuXYOD4BZPPh0vKDtj841VLw4JO1VB\nNdVLSspJj3Vlr4ed9wy/KZHuMLmOOHqbcxaXKZluvtSsi1Svw0W3zISc034H\nOPWO1rtk4EGDQUKCtUDTJCIsBryfk67ll0YD81iNSaOXjoVrv5LZ/HsowZs5\nMBTvh2UFQM2jIAl5jPD69cjWRtJpFZ26CMchNWdnzM/6w1fCPQEB+f60+kFu\nCN9wKGhhFdIi0bx+qtlwgMGmqfNUYc1WzMPYLS2b43pjVyYou156iIkX/EMz\nl7TAMO8miD54MdWIj5mejsSDEM+L2FjtpXgzVhbExW8GxEmdiJBzHQH/DKmC\n7xMeRiiXVDZbjUEi/xNLMxUOrhOn+PhKUcpdE8iFQnA+mAeQctctQhVZWDpF\nThwU\r\n=qjKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/density":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/tab-scroller":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d20dc6dba.0_1620692796224_0.8761718489952595","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/tab-bar","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"981c540de1e27c17dd5cf232e8a21d20a5e585dc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":37,"integrity":"sha512-ExZxOB5VQ0XF53T5rUYrNSg+MGdOwZFglGPeB6Q32dHL+NwoVJwMIuamEljQSGqlqVHoR6Dl6nHl2OGB/MUGyA==","signatures":[{"sig":"MEQCIERoI/M0ba0vBZRXkefohX4frTBIuVb8XRadvnce3vTJAiAsI+5toIakpKdbymT0C1nMRLY9TCZ+t99+UE3AEq1ajQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcoCRA9TVsSAnZWagAAynEQAJsAZGbRi/wCN5AMJUPD\n0suzyLtR86axdCn3jMSQWkQBjn8+4SG3LULkc+J1JmQLDvt6TJLY4DytB6or\n1eSwnEbGHUh6GSErNsIJWlR78GIZ/p2CPLj44COsEz2xFEUb5UtPGhkSV0rA\nYA0qkHefL05rWzyMEEjpctd3BjSye8LOEsWbP8hxR2zHbEUs8eF+hS+3LtiD\n6CWOZVTOGYH338dl9re3N78GiyEzpqqJnS373EiGZlanZ8c73Kq1T62Xp56h\niGX9U7VDmY7AG6Bz2lqUTNuJ6z4KyW5zz5uwOe4uJtVlkh2GBGh6NLYU/SqG\nhyboJ+hTvf6sseZDkeqdUVRj3z3JL5yPRJK8iLLzLKQmFckxCMSjF9PWfPM7\nwZmJM6rZP6n5Scf378DNJywMInJ+nyONL7pTMXfARdr7DdJY671OHH04o3Hd\nAewpx6I2VxOtraV+flrXKAJNd1VDVVSgvijNtGaMxNoUdZN2uwSfSV2RWrIw\nkTYm5wpjdt0iBS9cibdjikaS33yjiDFUYJp9qDcRtP35mIkumdpMh04yRGZ7\nHE8/TywOX1R1fmvGdc2v1WVNkenmwBxCnRxgAWxd5qkN+oqsZqZLeKynl+UN\njR+xkzUvUi3jeIRpc4Lxi29fHyZJNHtl3RppiCUM4n2MomawlEMVh4w0Hpk6\neRjR\r\n=LzQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/density":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/tab-scroller":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.0ce2fdb02.0_1620694823530_0.6009063544652249","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/tab-bar","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f84ad14c0572934ba00d82005bd208fd99931a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.cb162da37.0.tgz","fileCount":37,"integrity":"sha512-lwBoaiDFh6H9Mxx8bYWN3NbtKhuNp727C2su/seVi+J85LSRXeEs5PQ5DZsZylWXS3hNgO07I0IDr6HqPnqrSw==","signatures":[{"sig":"MEYCIQCVxVhwe7NE6jC3ccRfhzITlTLrAYgAYecCubFRbZ2KxAIhANfkjTVWhSt4aghexDZ1BDD3/V+0B3WTln9wOenxBGZ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeU1CRA9TVsSAnZWagAAnYgP/3lHLLqWgbD9ZLddnwUq\nRKFN2BeSj7SCueKBEDk6nasYAUxWQmX3B45SAwye2nu292Jeh7AGgCl1FCWe\npFqXWBzZtc+TOq6jkL0IYh66gIovRCLhjLcLdkdb0VXQESSwlM47HcXevaCo\n8Y//AQV6TbCqfygIFhZilkoQIVupIZJ+FKlHrzPpBOjkzpFwCdSw6ugeKvfq\nfu5BMkxFGXH8QurnYNXhO2TTRu5BZ8NBxo5OM/umdqvGGZWOyn36GaiEl72X\npALdKTLuUFHt5Ksn8uKBhhwnamgWzmebHKImXQqQlggSxVBr9/gyo4L5rgEv\nFn0nF+uRbI1MWCKEgB1rpRhBteGfzTxWSIFbAIZrtA2+vcnfq+XQb6iUn6Ik\nMQhXM8JYTTWGXLVIf1HR3uT5gcHyyCRWSGbyySfdxEqhYRlHpVm2Cm03p5MZ\nkfvkR/3Jo9wW6EO35+W2k/3qAo4kvSjtSSHzLzD/qBdnWQP0DOuELmV/azdP\ngZWQW281u8Baa+1mTkNeEOIDfffWKJCgb33HZtFBAmJsrU8//2gzSNAYfh7Y\n77VoqQd/R3KcMNviYdrSba/vKkfN7etSDyJdD9yml0BGkl0yDMt7Q0NRjin0\nEfAgNEvYFVsyRsDpo7ZXJQOEvGP3ZPaO0kqcdS2Lw6TijgexuY91mXXOhhTM\nmiOb\r\n=r//G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/density":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/tab-scroller":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.cb162da37.0_1620698420859_0.8886800901467811","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/tab-bar","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf9314ce40a566e89288aa0b5e880b07aa35131","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.573dc7ffd.0.tgz","fileCount":37,"integrity":"sha512-CYIIuP/8H+yRrhnu4yU0K9kjuhsKVRIcBMNA8/E/m8p5tpfSjv3eqKIoSuKqGw3irFyGz0zJprJ8b4ivjJV96w==","signatures":[{"sig":"MEUCIQDETxoTaDdh6/ZaA+0uBcluDkyyXh5MIz4bUOqTxCSo5QIgGtO1oAn9scn6xOa5H/iNsrt0D9p+H2eCRZv0nKNwObI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemnCRA9TVsSAnZWagAAnkgQAIznEoS4Zs5b2s5az3PL\nCVCAyDdel2h5/fMjYbOKB9p/4WsyB15ljoQGsemrRw6AGg3M99Kty5/pa9/O\n4xcmQoIZyu6TozEi3xHR/KCjpZ+BuWvA7Es0Z3lXnWNqp7vgEAXpTxXI1vDN\ncNSudrRQ0rB5thbYNOOs6nEpoo/NYdUGaDj8aPU1+T5fEain3UeblTgMFT6B\nldG7vd2YWR1AAsawIi5W07TnFYnAAWVOTzKLyg5QRtVZbRnQ0HBBfBvFnTig\nPi/gw3P84ek4wk28tsEqA4Xnz3JjUZ07L61VhLpIIVs9syHzOl/SfZsBDFUV\niwSVemUiJ/2x2mOxGvWaILlD6ExM1ji0YUDojnU60aFjoQ5xaMdGnSNAtsmO\nU2HRNdLKHboLzIcYXsMT0Spc0FJSKADVHwZeIgwUyyKkOXTfzCiigESklLxJ\noiU6jd2jaU8m8ToCzCdP6F01bnII7G8QCneIeKrpNyhJE7qxFyQx5xUjuJhD\ntmKPE39KXvUbf1RX60Yd5gEAePV9rNadjNYjyMto8a3rlW5WomZclR9FaKYl\nUxJNjRrtCJhf4wVXaHxWYqfrNAQN8LmVo4P/uGREcFKgFGV6p6Caekd9n9BL\n7cCw7zhr5tvcvM0H1H9072FfmGWeDg0rC9cihS/cvUFXHmv9HSYZ/Tn3dWzi\nBjKz\r\n=+N4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/density":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/tab-scroller":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.573dc7ffd.0_1620699558815_0.3850294795596927","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d1043d66c9a5f63ddac8289612f96e81dae845c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":37,"integrity":"sha512-x9QKqyfGv6/3auY/OTlqIevUNtzt26wQtS+fp8VYJfXZIeTrCn/zru/5x4KtIUnJfm45io7yw++jtDsVBR9sRA==","signatures":[{"sig":"MEUCIQClwgFbLCVtDY61srTBjP5LPHHHYgPxOBKEZykGfX4H5QIgR3eHHE3ob2FsksFklrnAZCioph4NTyBi9rooLoO0E5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxImCRA9TVsSAnZWagAAeQ4P/2xuTcT/+LI9QlM/bwWI\nn8Hz9DalNJBy/sCtMN0lQTMVS55jqCt54So9nUDdXbT2PXutXMpzvZrlJaoA\n34F7px4bYbucif/dy9wPGvBRHDpvXdMV+ZhQODdP5YzJiew9QmY+CA+tAcbG\nP2CI5iYIkIjxGJliGIQG3ceied93RloLzK9Pe4dYYxW1jTwlyQRa1fudn11d\nTOPyJJMFe+9vGhLFKJi77gqMA1rZX3LuR7fvWSuYedHI3ebIuVNGT4vcdxSu\nThbf0/gQ/H/1zmRds74JNTRGG+M8QOo6QYcgp236hrIxz/Dvtc9YddP4OeXB\nGLplAcQZy9wo9JP7gO2NrFcINZayB6Yc4JOiDz+bMKPTuhy3EA8iba5vpNR7\nnjKAGl/bT6ahEYdmt7lOcKNAz+CnTs7FSUNdW+T/A6ymJE2Fu/WeqQhwLWAo\n8PBcgIx5JTvRUG9ejWEMR0qpTdYlFBJH139vuZMMd1sozZR7gGjSnjPRkE3E\ng9VaHoshfk8z0peXwRlWrioAimkaGt3zooymKJTndoJD6pTlFwC+HGa8agfp\nuqs4cUJRZJUgiHLTrJclLchGBTNk9vIj+gBvyX7UHAEK3iCDDKu8IGrxZ2VD\nVoziDz6ZR6MwSDWSOoVkgUHftOmAniL2kgutdQC+v97GY0vPF/cCTqpz/xYh\nh1+S\r\n=doSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/density":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/tab-scroller":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d5f6ad3fe.0_1620775461959_0.8598765463812954","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/tab-bar","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3434109e3c7fb2843b6e84fc3db3f1d7151fbd8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.25751d2ed.0.tgz","fileCount":37,"integrity":"sha512-/7XOJ8TcOqN56lKjDDS7aylL52cUaPWtpWpeEhSUParoQxXUsQhpXHVtjB1GPt6nhNWnNbcf/5o5lX8Nmbr8zQ==","signatures":[{"sig":"MEUCIGzlRzFS5zkz08i5I2tnFNMYv0SWru0KiZ8iKP20370zAiEA4DcQf8QULWHoOmT1gpJwEa1vlB1N5+llcitKZK3culI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnACbCRA9TVsSAnZWagAACvAP/j/LR1t7GVH220bTexp+\nN+1nuD4MStx7cp7acdg+0kdGRl1SmaUtbnIdOoqNW9Z4FeqJsPTESx1THxgW\nzXCtcXNpjyI5JXB7rTV1CHA5js6j7fw253Okdz8/yehaQeGZAkixTZXoSzrq\nwrmiP7DXhkjD4hFrHXx0I/CSmrmRszzo5j88FKeOtAPvf6xljS7JmJJ5Wy21\nPYcBs07YFpZYjgHQBU5CHv4ma2J3Hs4+6kdqqAv+gkWPe9HF5LjjeGFP5YtO\nbQHOseNrGBesYphjyBbp5dMKdBUgJ3q2tHFsudRMl9ZPuoDomMrvDZo4AyM+\n37ulmOt8YwVg+Aze05yuTasflhhJM1gPveN7X0KPfbjBLoBliR0jyWttdOHO\nTkQgd7CE42hNfAbq+vAIs50brfVpG9ngJ7FcyZEGgtR8jmwKegah2aO6pIU5\nrczkwNWB0bY3FJly4q29GV/QCv3Rb53oax/l7CWt9uXalhAOmb2JIaLD9fJ+\nu6KdpaJWqNoDwHYEA6GfjNKEvg/SgKUWxDLQPRbcScUV/AdnajATtozatxwh\nf9E38OnyklFRyDfQYBbsO2pfLgXQO0dgmbuA8rFp/UBdRy3MYXi4723+a616\nuIAHN5gveQibX2KqkVlwcDi4EfpPZXcXrudoO6o9i//eTSg9Nchzk9YO08z+\nMxN+\r\n=3cqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/density":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/tab-scroller":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.25751d2ed.0_1620836506669_0.015463740129824988","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c802d2be96cbcff8bcef55a0a4c340472e18fca2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a23ecb682.0.tgz","fileCount":37,"integrity":"sha512-jFbyZYMbzBRb/rsTVaY19NG7RSXlFJ66Aj16/dfl3Xxe1srUBFdOwumSAb/irAVhaZh2WrkQV01VmwBdCa/ucg==","signatures":[{"sig":"MEUCICL8qOeBQt3gKrMRpp+tmFCh1x4Yenmq7AHERA6B0LbyAiEAnQ42Wv6w4U7wZCtn1rleL6CZEutT6HdQhvDmltBKmc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB2FCRA9TVsSAnZWagAAHeQP/1a6NQkozASRrwFITE4u\n0ut/dfrJbH1fk3JN9y2ZWUc9jdgi/SNbEEl+xk2MUp/3ZNeMjDqYhGplVY0c\nlL6JxcEECAOJZxJ0RUJ2Trxf5m+9H/uKbnGWPhUq2ixp5YSD5K+Oxm4HS1xA\nETTVt/35imx1yWIP1zQojgf00DWP8lGokAfevu0AlWf3uHxxjGbUWOHopzCO\nLlxH5Jnvop86d3dpLioTLnrXW+bI7KcST9XxhgPrtCjqbriESJ7JLcl3LHht\nZ/4jzy4azs6uBzwZHTfgzKw3No5rHS9HphcN3e/h2+XaGEuJagGlLctJLSgu\nQo1Cmxz06n71vkclaqoU2tUQStt5HNTyBd0IG+VkxnnOl2+XQgxzLFMpAeOh\n2fobkhQb2zSgFbm1h/XQ9A1n8fIQTk1ZE5SiGrgrFeSrwNmpvSybuPYLZgKr\nwDTBnV2B+BXKur/raJ/NkNTO6aacygjPiq3nWFu02SMSgP10yYrvSGVIcH/g\nvCBSfRIPM4IIRjFO8kS0jbiCTKClDAv8qNrjSGDLKUW/oBFVp7+Yna3BIfIo\nPoW1JOewZzv5Uph41VUo/CVpHqrjtWl4pXQ4cILqoxcrFDHWgiC1wtfYsmdu\ncIm2z30KYlGKT9pPkYrzNoHoXGZcUgMaoDlXwlNBOT6Baoj1zvDcJK6GDFQH\nt84z\r\n=DPP4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/density":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/tab-scroller":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a23ecb682.0_1620843908911_0.08401145492399253","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/tab-bar","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d522212b9fc144a3bbf418d1a2c7f386bf607e5c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.33a954852.0.tgz","fileCount":37,"integrity":"sha512-jEzlbx892RjowMI8vqYzhDZCABgAejBIZD0jBHufldestzCMCWz9E26ehzbyLb7rmFtyhqNaiFIT7kzFxyH1Gw==","signatures":[{"sig":"MEYCIQDV8YqHNXwRRhtA9h411fmhOOpTzuU9sc3NuWOl0rxicwIhAOq+YYY2aQhrgsrtIYt557BoRSIqovXvvAOyPx8JvyzY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUE2CRA9TVsSAnZWagAAdO4P/i6tYiUDRoM/bsYwENN6\n+liVSkeawHip/Df8/NjCsgYQjgfng0LJjW/Hluu0g/XOmnsJ4N293vRR1Ic7\nfjC0ujRWx/Srj1QJy6ZKfBDcH6yPtugiqneyKeYjYNwSPrEX2io4Qwsf81xg\nna0yh8UoIp9y1MSqUD0r5GeWVICj+85QutXbNNMzxzndtoZsmeDZb/KpmKRH\np3xhqSdXwHlXjdg180RmJwRUGp4NaXPDaA+mwRVMXyBkhIoX4l5ySE0jPS3i\nB8G2oDztrkcd/39CXfdC/sAiCa6UVS4391UNuGHVUG8TCtfK4Cn2m8MDwngd\nwGpnC3IiMqCSRXeKGkKYIyAjRUXXKnS5W5FsuAZoGdkAO+t+9ksiYetXSgDt\nLSUmYpRuIs2UQLKS/CEw3OV8tplzBtKF1P2bu4T0ygvrwlLpmCxW8K7u/VbZ\nOTGCLQNTqHikI2LrGq/o8TZJhZidUwdNbyxQVH9bC1rLwEV04oww/LbCoBtW\ned6CtB1K+sQnTXbebW08wP+eTmT3vfb9STbXzrvTwzl87nCA8sjyQQb6ZwK6\nlES2qjbeLJjwyV9ysr+4hwFtB38xMu4KUwpM2r8Fqzh8+cam5NJFhOEJU/Pv\nW2K13SmumuQhE3hOIKeeOt3bQErDQHV63Zp9VhfYQAFTCIlKwaZvtBBu/vxm\nJSZl\r\n=dO1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/density":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/tab-scroller":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.33a954852.0_1620918581782_0.26479466592229506","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"919a0ddc7a84bc7e5fa5ebab0b79a72c9396c0d3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a4484849b.0.tgz","fileCount":37,"integrity":"sha512-PKb5DBHUVY1W9YZGrogRCDf1/wrsQrLfdZm7mJtK+/PK+8Vt/MpHLsE7UAZi7ct8ggYR8zz7ILBBb15GxR7uxQ==","signatures":[{"sig":"MEUCIHweYv6YlVegs+sy9UB3PI/ESlhEf2rZ5xCrikehft3PAiEAjaC9Z+u5oDOR97t9PPgnIpYRKOJHxfkkDU9QQnXxkvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaiCRA9TVsSAnZWagAAv2wP/R8ttQ+zEwfPAt9XSqnC\ngkOic2PFBP/TGCB6a5hcuHcx/yQSjganwKE2uBBWyLM3bgfuTj3a0K8TdB64\nu6RWVndkqu1fvX8yR0FzZ9/g6g5m3yQfmL3pBFwfbk/5jvgJrMCeGdNWFei8\n8uIA1Ff6lvRoZlj/y2UfNiai/zeoGVaBje5hRebhx4kRnxMBlgs+7gq0juNI\n6eQtAV8DxN8GfnCNqhFC23kjUW3h2dl0ni/Vtsq8FoXLyDaSR/py1hs/ZlKA\nCDy8emMvNJ1MnUjilm+TSX38zc+ouakoE8Nwhg5m22YuEZkpuGtQqy6IDJYA\n9WhvHCvYEL0pRSxRT7g9eQAYVlbJLwQ+8yQ/QtDxYVnTm388Q+IsM3feVxwT\nVX9HukvBghrIEF96kazP+1FraMyj822Y8Gynq6GZvrcXzCm3iFSCZBnhjs2r\n+zGdDY39DS1ph9MvJ+cPxpVUgdHOkgmwK7q/HtJL7sFpYCacJBQH8A0Jix/9\nSmFJEdRSHY0+VVDXR3OBANMRSsvr2c1rpX0y1Sk+cn1SsYGYZdGm9TukyZ5S\nowB8bJhXfJWkE6UvCqbkX7TrJ8+1qRFOKd/K/UYJeKy8ehhl2r3T8TmauLMb\nvTaoT5C9xqyleGe5riTLzKQpHG/CvMS2N5zw36WSueAOWZewNKXu7CJcbr/C\nFypj\r\n=64e/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/density":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/tab-scroller":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a4484849b.0_1620919969957_0.07794225072320216","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de236c0bf329385da39ba2285b787f7d2e6d78fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b4c3f513e.0.tgz","fileCount":37,"integrity":"sha512-GLF9lwg0YCdgZaTKa7h0Gm8LiYvHUMkjn6otq4bGqDevgzNK6WPeca7C+ixU+bwZehD5Nonv6cgKI3DBgkLcmg==","signatures":[{"sig":"MEUCIQCGeo954dt51f7RXParGplKxSOFRwhKnEel5t0BpXwujAIgdLBxY6muRP0Qp6E9c597X71sUreDxVSJkRArla1KKYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU9MCRA9TVsSAnZWagAAISsP/2xka6ctBXmBUq5ARS2x\nkZlU+On2PNVuvO1VkL+1pxHMF57Ej7SbhvWHl1PraJl9MDh8M9pmS/jhASVn\nd7RfSZHbpWCJVKP39gr7bSpuvKeL/zEd0Dgk+oooRNciiCp/dZ27tnfNkeMi\neECwc1l34uJFSVEJMapxT7rtmusL0BS72Xoj4aH9LML94vGw5fmwMNs3tkxy\nu7aD3s2eVpn0gjvbAd3K/OpGo//Pc6tgm3F3L5ejFcDLffA6O3xMCqkZqThQ\n45zZPULJtogkizehMc8zzc7bjrb/L13WfUhStdoCzp5mDqaTKNPfO6s1XAYR\ns4zF88+Ul6sre4NpfdfM3Ntlu1pfhetYQ31aIpU1LO+tQFhTGycAQE5qPvnM\nVdTOpXzrGphzketP0latnua4aTrJq67tND+T06T7/Z4bIdJ2BdaaefCLXbMy\ngpgZ13Zua5+YM7QM06mdovuz79PJCayQeOOionHe3IuYliEWA98UMsLKSNkp\na3KtNVXFOd1hmACnUjch/iJdy2Ahgch91SvFqbUIDG+KIi00tT6E4u9fRB90\nUNVe+nHFvJAiTjEMnz9msrNvMkxzqisikasu6BL29RQ/NGUzNqXkKD7lahsp\nwlpL3t55fczynJPLyfzMxnbOGqtRFyhcKiNf9vvlZhyT8pgmGzZSmyvfpCxu\nRfEE\r\n=W6FF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/density":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/tab-scroller":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b4c3f513e.0_1620922188119_0.0038909618536666635","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/tab-bar","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb7e3089feaa22de95b8f6c4e34bb6c9e336400d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.1a8d06483.0.tgz","fileCount":37,"integrity":"sha512-cWhOfT12glndFH+B4V2XeYtBvFvXWmrRjH+lxdeZ+sC12qC6JjryF9wAq7wbciq4m83KaoMwaG1A+ixL6RbcQg==","signatures":[{"sig":"MEYCIQDrA+ohWTqBvI4cmb+naklkpBDFopjCDjxJktjsWktJgQIhAIM9vdcvE+XNgEGB+YjbWGubKBoDAWEF5ZNTzEQZgIV0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVChCRA9TVsSAnZWagAAklIP/A8rV4xZFenG7ZDsfoan\nK8xorhh7n1pZzHAJVQDyFQ8CjwKvJ7+FvlLQdvNhD3fHf6KEGmEUMr43wSFT\n9UuBhUWzYYxovXvKs0lUHmXwdWMwagSaK2HJSPETHpcAGaAgtieyuKT57JIn\nky8FERYGri7p3S9JpKIkhJNpwFOdSCpf3loHlqeoADL2+J4Qsb816gZN98ql\n+N7c1Bsw60dti+JQRDR8z07kLk4N5IEjBA1S3BX6TCkFK+TJNrzQE26sJb5+\nxe0rR1p8fhnMUPytYJ4QYJESm0UCRfECp4K24Shx9PFS8rZt+4jjOQavRiLS\ndnh9xdv8N8+IVVZ39jPz0RmF52S7pSZA8drfYJ1KousjaUs185nrV7TV5ZG/\n6Ad1b1ZMNWxwvmeBocjgISLXTRe+WQeti+okVIPZ8pWAUxFia6QdvoNUf4iw\nsiMmbLgjfDJbrcM42U4SiQdCnZFNQTXXm/AZP5EKciKPVly1NIU5TM469ym4\n8phyLh8CcZvD1iY4LUNRuAs9kTRD7jALKOMN+x64tmViNpotudFmut8nWRLe\n2miWRp0U64cZPf+7xn71wg8hiIteiBTvNDYxpXYk80ELI8RBgqQoldC93hIk\nPbd7lCb4P/Cj7HfJuVTclXRk3PGil7JJK4Bsg/dJUIuEXIoZtt/rMOo2ntFx\nDqM0\r\n=P7hm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/density":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/tab-scroller":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.1a8d06483.0_1620922529281_0.10389595140184116","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a84914023611d4130ae907d673fffc7422f59b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8e6081836.0.tgz","fileCount":37,"integrity":"sha512-XiCo2fk1cBpgGdtj60zZ5dBxdMwajZwYKT28Wd6Mf66/l2bOrRDhVgpP1K3dew2UAQVlme+MQFMsopSTiJ3ecw==","signatures":[{"sig":"MEQCIA3LIQEDyNEPkYNw67Dbt5ui4yCC3bfSqHiVh02Q/TosAiB8eRtDBGD5PIXSxkoMjoopgivIH039fAuPT+TylOL8Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu68CRA9TVsSAnZWagAAQbcP/3Xo092k9zF3JJ9i74OA\ncj0azyfmhBWvxrNfpZVn/Zx2r0oltu2p3WE1nYplV/BkEnd4FmhUAkxpISsS\ntlSvgP8D0CfvzylZGBApj6Yy0L+0IKPdH/TtBn0g/pIGP56UQy7odcBkKJo6\n+u7I23sVR0ly66s+TYJsgzB4KTec/xNiDO7JtbBMQA5ZSbPjadug+IW9bw02\nWEMW0ci4oCaQRO9BRTlebwwmfDhxi6JLgkGI/Vhx9bwgm3Gv5xPYaw4MxgGB\n3UOPUXIGtIuAu7pqj72PE5GrzpLoM02LddEWkqlvBCYJWD17vT12Z9UzyXyh\ncVT45KNzLBSxp8ykcvy+a7+uOewn3H+JEj4/5uOXOPcXEqMIgJ2ePC8vGzr4\nnug2xYLWZyGsnIn/h0u/GfdRCgQS6Fzf4Lt6Q4gxc+12/HnrWN0sS06B75wv\npeYZq+YCZAifRvyVMyOALHR5pR6U7Q96bc3A9mV+83nUsMwREd45M4Hk27ly\n3OHXmY6Xu0hOX9jWFsL3ACsTZLMLzNPLBHuurDQoVAuY3oaJ6Yfz3654xvw6\nSqRll+SLZigktxuyxvUeuZ8qSLERZJzIGxYEnHkMtJsg4xihtwXHJcksKvj0\nMeRK/hJj0QJAIlSxTgg7PjoHWkzYHCC+48HSYpDMvSnuRt3eMR+xY336ke+n\nMdsa\r\n=k5qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/density":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/tab-scroller":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8e6081836.0_1621028539822_0.6022328830690249","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a717c458d77decc7d40bef764560c602374265b1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":37,"integrity":"sha512-KUltO9NeB8cLCOW+1nOqHe4kHPOC1n00EOcCbumwLe1UPBKYJ1zEZ14wCLaFXZwLtLahxibN1sLAFrGX4nZbFg==","signatures":[{"sig":"MEUCIHsvRrmftdY/n0tGHFQ6hXUsQ5x3hHyKQc2yauWMoL+zAiEAy53vE0SQxMywUM2UTPW2Kd+YpfleKiyMtil8JJ8u65E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvHcCRA9TVsSAnZWagAAYxMP/0VadU6Vn9SnAgbuQDpt\n9D5TlgaEgXHFrbTuRM8h9WLegTco6Xw25Y0FA48415ko//wa+tueKUYZhyHS\n0L+bncdu/dXOXNOpMKIodkRX2qKHjpKN48avn8ksh5QF27CD228icj2mwmzH\nMjHPaFXglW9nWHKVc1JQa2MyMRV8EM4Bmw81+WZX9iEcrFD5yU5aKax/Fkl6\nUMKHUSLagsApSnvzW5x/EUH0qav2kB95B93oK/Ky8RCrrRJpPGOS6kJsAGVq\nuZ52R1kXG5jPxtWOYL6mbPkGBpNYORewSDT3eUHenGfGtjlEN9LasqfVtICm\nJNxNPlc82tyEiplXsvfWzLrgGL0yraWr1It4sa3BnedZ+ktn0guD/Z2QDxrX\ne6H6RcD/w1PXJGU4hIVDoJ5CLxfUs72NQFCSkJyXUe2VoHm5b0wkNVwmR1Zy\nQ5UmchpZ2t2pa9FphGIdB6GwvfwdEyMBkazde2E5zPK8FAnXqT6a3AYRTp/V\naokUXc1l/XPtkeP1M/CpWDqGbzN+pB7lHAFs/1HkWpDyXO/XQPGtL/LJR6mc\nZNsZcw7Ode7nTbZqJ6saUI/VNxuds084+xxfuLx7IuxiE3tscaKa4nVv6W+3\nBWmFcWImky7DLrfVEdi6HTtQJAVSzfavG9MHQk2OmuQZIlEt8xJDSQD2Rraw\nXCuI\r\n=pSl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/density":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/tab-scroller":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a2b0f4cee.0_1621029339672_0.36036894636583083","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e7b8bf858a1fe90ae3b61f87a29bdeb18da1dee","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e8e39ad19.0.tgz","fileCount":37,"integrity":"sha512-SivGXeUIhh4Uqy820Sj693tYwcJK/gfTLyyxGqQarmEb6Px8qpelefur/CX/eAMZIGK9l/j+bLjhy8CP92abKQ==","signatures":[{"sig":"MEUCICxYilLKsuTi5FNiDEDJNOCrZigWNplIYkm5staEljTnAiEAj3DwWWTZ1RyAPaFXy1+CT8gJEJ0jxjQp03YIih3f1mY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCA9CRA9TVsSAnZWagAAAfoP/jP2FeckFVaQDWLRoEZU\n7e+2FfUzt5GAnpp42Z3JohyZ1lbfBYSkScMMcgTot07X6B6ZkwxnD6S6WB0h\n7slZQq/9jzDL7YLm0uHU+6TVKakeONO7CrnuDSTH+9Tgp9SDvgM/u1Vivpxl\nVLFJRO7M7F79ljXxiMpX+NDJpPbhnQDEmMolvjeZIHquOFvAJl2IKAVS2w9s\nHqXv+HPr0rYGwNfbtzoT42jWsCGYjuYvtbhnKg4nZ/4peTK2H4D8l0B73pvj\n8qk+K93N0u+tvpFPUxRfVS4R9qBCLu699iF3XTKJW3CMecpdLksljQRjqUr9\n4b3WqpJBNcVmhXIc448mboHSJmVm/q+IBQV5p5xxrKXS8EeADG/aSyTAPINl\nFUztSmcdaphx3JW0mPzlIZfyKEYYXOGmuu0e8gpldS9G2yST5vPFs4OqVSpN\n5AHDurTeAyRh/EKi/BKSt2CzySc89a2fUgCT9v528pV5FKkZQmzM4zN/f5oN\nGL/SHoEL+mCXDTNQSAU4lT3rYkJBY+flL5vI2IG2nyKhIOjJ4vgd1g3F/doS\nk4/fo+N7shJx1GiHJnkwcR80HOuH1at383yg1oaJvHcgZ8yK3FT1bFAUgs06\nDtrQVqWz1/Dh42OaZN+HQm1yDyjd+7dRRz9Cj8R5wsVsSYuxLnDXvzfkL72p\nI7lc\r\n=T3JO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/density":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/tab-scroller":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e8e39ad19.0_1621368892615_0.8748713747923151","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ac97a88b6445740db4a0b816fee2dae4bc1075","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":37,"integrity":"sha512-AyD4gSho7wTJ32UDpw1ae19VRrQPSL24ZVy4TAS+5n34UZf0Zv/WapiplIFcycEttjJGhEZiCxIh4dRVAu2caQ==","signatures":[{"sig":"MEQCIG3pnuN9WXc+aP9qNfpYsRAI7PifqUCB5IVUjebg+BAKAiB/XulDsaO9j5vzXacH7ZsXPG6yQpn7v/t1BI5AqLCz8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS77CRA9TVsSAnZWagAAe6QP/A6habQXDC8DS8PIApQA\nzAO9Z5GU8SDTN9pGlT9PVL/hGuUELN4aeFVLfgCNk1tA/4u6sXqPHRaZaPG2\ndZZbwM73x/Km20S/yaRvNHzdWdwmpQD07k+M2WrIziyiBdpdxx6ETBARhIjk\n7UJmrhkXL5BV1nhTcBPxi/yRf0MXFPLvYDxJCgBFCD89uvH6rga6LD/gMCMX\njogeKc3OqWlOe0FRwDHfxATWRcfMfoB7GRnVjyGj1V1lCr1/NpK5SLI15oar\nFIN+pPr+L8GuJSp96Iwklj+9f6sJWw7+OuEjerCX40qngfwcXcZ4wkOZp6uq\nWqjuENHefTnWs1bjBlsbNtN6sA+NmqC02lc+bIAeajwMPSlu/3aWyk6px4di\nKRqLByWM3hdlazPQAQ+ridRXo4X+pTKVfCm/KU+YlK8vbyvfE60nm8+Yy4+Z\neurlZeRpFcLDyTF2oEYjUO8bPF91siGoksf+/zjlvYWvtsqX3+p7OvDiVyHD\nQLNTUCZsgFkXfd76iQftO6p+YN/9BDDGcJzZKJr2EgTyRzEGNR56Mux/2iCd\ncLgd4kEG33yzMjPCs2cyrJ/X6lyHjgWW53x5FyRca5GqQQ79hp84sZzqOBUP\n5dyuAQVFgAep76/0K441XYGPVZYhbgje3C6jWkLoqc7yfUbhusKBX4FaAHou\n8c3p\r\n=m6xy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/density":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/tab-scroller":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4bb5eea2b.0_1621438203330_0.5563722171916969","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"395900834e7c5d8d94085e4eb3454d6be0b067ae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ccce99cd6.0.tgz","fileCount":37,"integrity":"sha512-c4XEOgh86IKg9RxesvS5EGfXL8jFtP2i3oyBlZmCImfLEZzOznMYX5iJFq2z+NXkd0kl5nz4XtCVM/ctN7vqqg==","signatures":[{"sig":"MEUCIQDIZzVygS9TzBJfzsyUUKxnvzWsfwH3Uht88BAAICmVGwIgIeaJ+ZZBONbkIZC34px4cNdUKX0Xx1zWp/fUN2YLhMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQ4CRA9TVsSAnZWagAANn0P/A3WLlPl9FFS4L6R8Oc1\n4eMD5vQqzEUEtI0SbSFF4smMlOQHluH1KX4AgSQk5wu008GpmYGFGXffMUxC\n3PLv6aWoOVlepIsoYcjQg47LGAQkIXqzV80RRoXGJQGhTKh+TegQ9tTgp+bM\nXGTPDJxcUpRyDnTP6AGU7Eg91h77epkDTF7UutsRwEIPGuBdVq2YPl5Tra/S\nLq7VV3bYcb5iU6/nHVMSc3pJQH9CI8CTvaPxX6YLWg14oTT+h3WQFI73/486\nRb3NoCW43hTdwYyJUnQp3MXEopWbei24sNia4T3mHRHxFUlFLaTiIF7YUaRL\nmv6AdTp4gGZbAISGOTFqoNWZfGp3AmqDy9YyCdsj7x5aXQ8GALkRiHUn8x5Z\nabX8vtiH3zShBtxt7FTANK13P0VruS1EBkMB3KbD33nKgS1dCu/EgrOn5wiu\nJJLJgTJ+ZHO3am7xyrpV+TBdfBQ/pwafBeFxwVVKH8u3AVjz8H+FTzNG9ghu\nGbYM0uabXMG/JbK9AydnriPsSAWTX9E9nGblcaDcrmOkKUJRtPDIia9hfotI\nnAnepu/8loJvksbw6AkplOQDVeUbDNyk9tnP1ZJ3Vz4DYoIwOppyUC/Ytln6\no17lLosvekHjYhnZWkncqiCTfdTPdGUpx3Hn3Chxm/Os7K9PwBE0LZwAlJ6r\nNn0L\r\n=yksH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/density":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/tab-scroller":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ccce99cd6.0_1621472311250_0.6355711406450624","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/tab-bar","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9e386870b868ce7386bbdb49b5e7594b771c05","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.14767a8db.0.tgz","fileCount":37,"integrity":"sha512-aRcpo0ZAaHWQBC4izlL1nQ6w8mY5pIz/xP5mEBe3/Uz7NU4OYqakhJuVByRhLfa1WCDFLMf55+SFTQoV0/W+xw==","signatures":[{"sig":"MEUCIQD0FFgABYBU7WWiIYaWoT0VrnyR7BgaZ5Mv56mykDQBfgIgbEKw5pZta454/do5RP84u2wWUGUHCp6pHW+EIjB7vrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswlCRA9TVsSAnZWagAAiC4QAIGSPmBh3WRSzwDFM+7S\nGOhKwFD62UnyZhSVId+7PwAfaJozkvf6LtD34OWq4IqlcPSHDNA0AcD2kB7W\n9BIViFCHsiGHMLOhCKLCVb5r9OLnQOcJ1t5YnZgFNq0jpU6fZn35tdiEFbqn\n9AFNvq7jniZPHGUs0tGAaO9wHg7Asuy3oqCJSVwHyfz8tmKdrJCtlvQkBpYs\n6S7kYC4hTDgntBpcvP6V0dsNKuCypqb2CLi0swxSNjZDMzNGZQRkBcjc4hLT\nJm/f2EdfVdJJqPksCsV1r2c1wtyxYkYQLyBBKdlB0stAlCe3NGJJhAUIo/0t\n1jNrFQtWnBk7GAobSJvE3s3dGJ5wOJ2S/72YZ1Na5fJtO52DSvOMTuCZE+Wp\nQ3ktlsejlSa5eUFIKveaP9/s748Rl5tw8gmExggMqgFf1Qa5hKewV4IyzA0H\ndZCEHUSqrlN+4kDxzWjGS6ERK9Y/SzGkbopHN9ShmHaRUDSQrLQuYEBwFCGR\nFtEdBf8gr/GYpvUcXa9vfwNU9sHpufdfcbXbzGqzkYUl/GM/oe0U7bgXy6wx\nUwTw+zWl4WuJsDyIL8zIb2mu54/b5hakWSbvxDY0RaCLc2YEnCgeCxBRMyrR\n036vCqh6vlJbCO2/SN+iTosHC4ryz33qQUCpD+uNH5s8fsnd0Lxb6G3ZaKsy\nRqq4\r\n=huGk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/density":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/tab-scroller":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.14767a8db.0_1621543973244_0.41999368890968825","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"878c136724ad196e67f5248a6a06269f93ee3110","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.22c6dcff9.0.tgz","fileCount":37,"integrity":"sha512-cIte+R1OmRQTwFmUTbpKKfW4JsP8oFbcz3VAlMgI7ato8HXpi3DfaUoVU4MYojKw8QCATCEkSSsdNUehYPbA5Q==","signatures":[{"sig":"MEYCIQDlUObqDIZlcwYJwwt0BWglMFi+h586VmBazng7amWSewIhALSI8gG/syBErZg/xSG18mRwkBATmN8rnuPx5xmLuNPA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8RMCRA9TVsSAnZWagAAZssP/jYA3IZYoVPH8htwx8RB\ntgSHetrw7onw1bpBzce+EXY2CzjmT6VUywaVfCvGBOyh553OVNwCdp6d4nDG\nWVQHZs6sEQLcGJFoHALQUfJ5eI/NnCYPjGfe+fOdNB0+v1r+urNtzdVqBbOM\nWAM2r6XMJ7ubT4uMQAFTz99v9gJK4oWH86MUhmvm43fSeXXKByDy56RxG2ef\nvBDoZSiLpSa5w5UvXWbkRc/EC5ltf2U/VZy2H+rn449ulm7sZnGMQ9pm2lqO\nesjH3gscAUAieDfU10ED1W5XOuxHdDT7ysSSEAN+gIRSJbVJADEbA5qRxGqh\n9LtppbFojiRcXQnESY27/ArptcPF+Q2M4wWjSMF9AINd0BVQ+pK2b6gUDhmN\naMvEqf6W13kMbL1HyP+TWza20A3cIuWTbUHQqox2ljdBO+isuLvThdCW1wM0\nNknBLgtRGgD9jnCJhv0FTU670Cj6jk/RKjwykCXxKoL4Cz62QH6rE27/p2kI\nSLQex99aoAT/9KQ4iBPgRKqVoI9CAFF4fELv3ld1yWB6hUTf8ioJX5bApVnU\nmD+UJ98rHdwEkidhKPLoMRut7/SgUvyliYtBonPmrwpyPTX7PoLjj4QdS/Y1\nlMRgUcPPRF4uKZgIEiBRuhQ18PPc+FHdCBvVu5roGhl9pmoVh4AdNrHnlgrg\n9Ncs\r\n=nOXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/density":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/tab-scroller":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.22c6dcff9.0_1621869643571_0.682335399974048","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/tab-bar","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a885a07195cadb30643730fc556327c69b9e355","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.fadab3372.0.tgz","fileCount":37,"integrity":"sha512-KIUMpxGPFCoZ6iINVs1m3IiS7oiNlCa23WU+9GnfqMpXEYjxgKSF5Xugvaatz6+yxKe9Smk+CjrlUtO2tlISzw==","signatures":[{"sig":"MEQCIEvItxwOp+xOqL1+IVKHZf0gRHQDWcUlwr+JRrzo+n5MAiAevgVfAk8fLS/AjzXZqaVg9QVog74aDXhUm6bXe02gPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq89ICRA9TVsSAnZWagAAJAAP/iJlnbkhQoM+W6gPTtPF\n5uN7XxgJCe4EyTy5/VW0apQqgBg+otvZ08zWNe7SKR1iKZ+AOTk3MXHpR9hE\nN4lK75/XiznNqLaFsCX95rzsaWDrXlfPn03SGBQxclQZp0WN0A38RXY2KZks\n0A/cgIh/m4Rgz7oFMPNZXCatmJdNo5RXVcAEWLnlp51bDi1wXwvgbMuCGfWB\nJWix3wqLQva0/Qet0iOZeHgnl5q7BU0Y+4veyUbVy4NUs3axpjznNzZOjb6G\nTtv5KXt+AbLZRHQ9xNU+yIBN/uHS/N+yHC7b+fxNuNV+sKFRZvtgaC4vIq1i\nLVydcjl/PTaDrZXgafjGm28gpUeltqCsLtJOvTMsbqbdjhfHH8Trn1j/4Vty\nhjRmVw7NZsye+MxkRgPOY2xTydTJiaR9XbGULv8keu9gCTHawZxHs1j4u+i3\n3OC7UsvSGN0hvgal5pQTfAvB0WTv72MSHFpwtLxkXneDFy4fjFZpYGJnNSFg\nINCfCzi7A8MehYYiFwyj5OBCnV+W9CHAVBaBy8jWNPjQpROUhTe02WeRqcWG\nyZPy+MaGp2aBdu0kYmy2R32ERKX1p9vJLjNdt2dfaV1nMKyh0be8b6/TP8qw\nljniR6ViQUiYMr7xNTSzpGeWsR5NrlzkEwnM7x1Nx9sxSC28WySiG6Hw8pLW\nYCaf\r\n=0+uT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/density":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/tab-scroller":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.fadab3372.0_1621872455549_0.6283244437186379","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/tab-bar","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b617a4bdf93d9b6247a86c7f8c3b9d926cd4e5df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.caa73aeee.0.tgz","fileCount":37,"integrity":"sha512-qhA8wBodGN9XZcHQBZr8ibT2wFxaBEdt2sFMD/EwL8jRGarRen4mFY+ZDX2+1REZFuC2AyL36UedpA0ezzkbvQ==","signatures":[{"sig":"MEQCIEe9fJ98+djvz6uWulY0IaFJCOya+Yc8iCMwHHhuzXCPAiB8jjn655NDsX35z5X+dmDIWvv5jG8/moZj2AZwywPqwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQarCRA9TVsSAnZWagAAme8P/3VuUxVtn5VtdVzfgBVT\n6j61DzctoNHBZHUaI/qlDAwNknRopSkI1YtftsENNDFhxKM3H9UMqqnmyqj4\nzKzIfTbHjpG5/GqBBGDcvCdnpfV8UEOCSHNZrLGDihkk0d1J4w+WmlvmMxyL\nsJtlM3TrVgiG0chURQy78blDRhq+e2mG6KfsZUYwgXn+TCOw3v41ofVldn3j\nRaL1GwufPkgCsKCfDu/cx/L6z1uDJ6BvG44GtJCmkIdnLjspq6W+Cyntv+2n\n+nGuhxWzTczTWpsZcqiD9ttZZ68oYYKfKrGlSSsdmK654vlxC4ZwVMJde5/f\nNIOgQyl1CzqiTYFlsAMrHqyMbZX2nIVp3HVJq39NzCGKTCku+ufm0iLgX1HP\nxMyspGZaD9OXP8yKICLZk2aboO/36VDitR33fepMA+bxXq2N1HaaAtSrzgP7\ngVseAlqlBxt7YGkwskAbF2I6ae/oBHz/xawIPsNqvi61gHPum6E3lAvZrQXC\ngIYrvjXjhlzD9Vr/KBl7tkubHgj5sFQ0HKzpqYe+0uu4Dfyetj2+DzGM1wkz\nuIMKR3yBCIHtipxRXQS97zLUGyJZtHtbEItrP20wezYrrih+EbqIs3nVFQ3f\nbcC7TKDWNu7Ntjm0ftRExjCiZripIu9wfuB1hOHYq1ZWCMaPwsXP3gjGRjm6\nrOh5\r\n=qxiy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/density":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/tab-scroller":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.caa73aeee.0_1621952171018_0.3095214039787766","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d92a9e20a229d8e3ee195a487aa2703b90d043ab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":37,"integrity":"sha512-8vJhz27TpSUy/tjgFdAzRjFQ85ht1gaggMX1sDm93dFqNW914AL1c+PppuL2v3gt+08SXZpsXHf33x3mZqq2Fg==","signatures":[{"sig":"MEQCIG51B/GkynEOScktuIUG06Dx/k7fJQD4wU3cm5B8m08EAiBZAw6LFFYhFNa5DA1wpCDsyeaABTqK0NrhyOClV2B5Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/2CRA9TVsSAnZWagAAe74QAKT8Do8eUOw7pS3PMglQ\nBelP/m8rDn3TYlrySfkGWri32K6HjHBhw1DSX7GpNK6vN9Hgr50ipdVMTEX0\nybjjxw9DEEiOkRpHl68ZVqr4NRrzdlEIjdVJF2qDwgAyTsybQTDI5NPfbEcR\nMHRj8UfpEGXlc2qH34riRn6IDq7oK0Fo9ufP2JVcflUnS4xpVHkWEVyFaHov\nq84xTlfV5lZNLOL1qpSBC9vNdeTiJ7D56WIjXFmodfPqnyZo+CJrllrjr/kL\nMlCnwq4aVvT1470TdnbTrhbqRZGgA76jdLKjGM9+DVnh5UQ4nwCke74wuCoH\nqQsl5PTGH7Hb68/0iIaFfjqNgs7/mAPyW89XDD6nGsnQdnZzlvxkKlk66nv6\nAAduU9ZZFYMklspvyLkIqwP+l0PY1yW4n/+QRm23nch2toHwVvnfYBD/UHs5\nUN1a3eS/4rAPOXr6d3vsL28XzdMWVgkdUK0JBoU8EbLauGaEP965lzLTwc9h\n2Awsup2f/WJuc1tCDtGd01ZLY1ajjow3kYM2Ig4ob9o+iQfYpXr8CfmRXRH6\n72KjEdRE7Q0yN1g0rn7yedIRUbqRG6WgXItSkX7kLU2+/M80u5xHFV6B5Z/w\nddgLId+YfUehIqz6c3wfuY2zVuaW9zuM8lgpoGKAMYEGzTFMd1cvV89xpp0w\ngM96\r\n=08ok\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/density":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/tab-scroller":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ec31ae1ed.0_1621975029712_0.6949544131980145","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffc73749024091c6a04179c85c4c1ec27cfec261","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8530d3514.0.tgz","fileCount":37,"integrity":"sha512-gv17e/RpmMn2RClSgx3wqfteHyoMyRRt/EIKKMXtYDnIjPho+JMCd2iiPdn4L+/E2iae+sGpSJ1D0rG3vff+SA==","signatures":[{"sig":"MEUCIQDC+aLrW1zqmRoox9FDzrHMZ39vdmhug84s9CgxC70bjAIgLr2cbLZWRwX35+6C4TUKaGvOWiI+klKpY0pScU/vY58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8OKCRA9TVsSAnZWagAAutMP/AvC/5KqSEuqri6MxfO5\nzFkXsYggQvgf3mXJQL66cvFtWTqcMM9NyaLH8wYR3iu4PkuBnLVvjDkQZ6DR\nYy2fGa8gWydJGtKTolW/bSt+IbI6/DuiPavmetDMP9oTuLh3aeVEI8de46dP\nfJGjjUzNYuymHFA8gk1cyHbRzZKplXgwiuQ0D58Kk0NzVRV0WVfQbqeYeqrL\nbwo8xeQE6b+dVjb+8ypgXLbAnlOemz13iguYV0M+8uLjZTCfwRJwZYLubUyh\nUHBmdxgiu40BsHlaHWuUUtdGrYr5RSzIPNzqdlYm/zwJNpfKLsZtqi30xMl1\nnk0iJbBYlxgZLoBGaJpVp2CG/l6MxJFziXzr43fZ1e0GgVhLpEHMk1XbZPLf\n+AyAe6MfdPIXyZjybTq4VBuSu/hxTNt/9JP0rPF07TBVjFJAABTjP6oE8b28\nF+tZ7Sk4GPgY48h0m5BWeiE6BET+kyGBsNlVUpyhDUjdpgqiBRL1A5f5ub/p\nc7Fn1sfHBJ635OHiaObQEciXEpYSqymNrZaPBlQt2VpfMShvAXX2xDYVvC/B\nZ/VRc8MKsE56GuKAFsMuAGiiIPcNFwauJoGLRmte0cYEXN1beHw/PPB6WQyK\nTEd42M65yP9/nXlgM3AcA8k2g216QwCtn7al0UGNLXu/0Ksfda2u5nrcKEk1\niWVV\r\n=VpKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/density":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/tab-scroller":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8530d3514.0_1622131593865_0.8384702836265612","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/tab-bar","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7178be72f9a7cfbbae77cd6a7a5786b3c73aba57","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.00b5899dc.0.tgz","fileCount":37,"integrity":"sha512-DjcRs+tf6aJ4QVeJP1DU4r6wWjtvMz2i0QrLgMl5iWVRomBwayLOt6FM62qyD0u+1rzwb2QG1v0c716QhHPetA==","signatures":[{"sig":"MEQCIEc+UxqBjL7G1O4GfbvzEAbiR8obqZTTfsjl3ACFDMa5AiANyM3QV72JEw4keotU2J4fi8znr35aMEN4JNBThjfQzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrj5CRA9TVsSAnZWagAAo0wP/3Up1wfPum+85YTXgyt7\nHaK2xS1F1kL308Cx/4KyC0OReyRVUerwRwLDPWB3jvG9FUpOUgp5RUVegtBJ\nI1na8LBKipUaze5k/yHPi5+7dBAJcOp7WRS2orBqytXR6EH74CcikrA5jE+1\nTIs8q3HDXj4hSfWWmneSBwz61t2Sbrl0JZrewg9KzFD11a4EyHoHc4+EPCef\n/DeM1kuQ1d0fPuILLIqblRNzvL6AvdRiGh9HjnjVsuTCg1q7b3brY7YCmr6g\nUe17QPCvUiZf0vu/JgNi6is+5FwG099Q1nOz0iAjgElibjP4CCD/YDXQOOJC\n9T/ojsxxnPpPptX83KwSRA1z5G+Mcf6W0RZZ/HujYTGIXUf7yzaEiLHzmipr\n6Uqr3y4PiCCA30kna33LMUhmkhxI/t1wdIVUwbfJgze0/OeEQ1zTjAjk3VQP\nARYA6V0Nub4ZL02pID962EkRMeVi100xy3khKs1/vOknLBtcsZrtha+vqxX6\nL2ETOvxJmKdrIilnvdBCiW0HSKNQTmP1HuA9oGtxor2V7L4kKjfPoh+C85ob\nJrlJj32zcaJkWqUrrN2vig6qKORI4ky1+Ja21ItSRBaUWYAcWPkulbnRWrtW\ng7IjphFSh34aVI6Sy6u9HZyUidTiTwOIOTjjIOxEYdSeGpiskjomxrYL2Ans\nQ8gU\r\n=+OSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/density":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/tab-scroller":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.00b5899dc.0_1622587640838_0.8322679079593327","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83732e78d3f6a9e711eca51b2c23047cc9e435c6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f1525ea3e.0.tgz","fileCount":37,"integrity":"sha512-MOv2zAkxGZfcxD+WEs014QBJ7ZUQHBETcyX3GBsKFnTv9AHsQAkrGIgbwDZ/oIvdmArSU/69vrOhM+4tRT0xxw==","signatures":[{"sig":"MEYCIQDMImrtqGDbxhMz1BmbNtNhwisv1dkis1z3sk+/RTsLaAIhAOwYNdR8pEQ/3C1X+ZNnrI+1ONZEEt+rURV2XAUgGGKZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN94CRA9TVsSAnZWagAAx78P/Ay2DlFEC0hRsWrILn/i\n1dEypt6uag+m3Uxx1bpwIqECxleI7u7lozstnXVJjs+1J5pVILdBp/yNyqFL\nCf1gGD+xYTga8lXTCwisHLHiZXGxlEA48GXgH50eWVsb01C5cPQiwZV02Kct\nNfTG+ibVc3HVLYPc6dC4+ARtMhUUaQKGmo5iwwMkR7IvfwsUF+LIqi/WHFdh\n+DA7WExwFDhM/uYcgg/gf25iVozAL4wlMaqYwOAqTCys5clP4ztmkfzCCnu6\nKxIDlueheHxBl7Dd39QsxVj6LrO615UpOd0tiLiV67U24gagAQpeBvvVurxb\naXIS39HqPV4cmB3Cs/tGtVznWKKgOUecT2ZOaremq4AMIMqxfOVkZmkZjMU8\n19Mt2MV8hKqg+OtguwxEXyKe3l+rq9/6BxQjxGtBxq92b6zoJraAzpVs2CgF\nNE6R3eSNeuQsTWr7PxbdpZm2XBk+kgy/XAxh2FahZMfBd4iRmR+LXgIRPyV5\nKoGB0ibopojmrC5bQRRZcyJXse2+3R0t7P9HsruZe55fI91bHow7OzRinWrP\nA1LTKYuxE/ZADC7ZoARyR3+LKOgmIyqApiN9KltgFee2v7ZQhhe3V24V9bI7\nEDkgX95tTAVj4WdQ1rHDPvkasdd0hN4jbPZZslxbUdJMqpsPhiDPNbyfAbD0\niQfP\r\n=8ndJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/density":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/tab-scroller":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f1525ea3e.0_1622728568288_0.010645131475970127","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/tab-bar","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e6879c06d4e15b2200dcfb268055c662d8a3e1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.464a00286.0.tgz","fileCount":37,"integrity":"sha512-A9Yk9xVvVBkuA0NxA7Y8qdQFM4g80DIJUX9vWU4eYNqfCYtCQkJ5P4F4twRdNRyugROkbmKh+A/uJ53V2Yx/RA==","signatures":[{"sig":"MEYCIQCyO2kp20jL4hgqMPH4sgaH+dcrQksbuWBVXTTb+FBYiQIhAJJ/XXrlMce200MR3fHE/tuWbI27WFd2G96oEyg5Nqde","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuhCRA9TVsSAnZWagAAKeYP/iJzeA5BKB6f0mJAE5Ab\n/QLLbl/nRmxt2SML5unMDAd9XzYEirocToPqvbRqdYeW1klET6A+JpbuE/Ux\n9UwmzcKeeXRf18DDm8Seo5V+XaB4tusNg/EeoCaUeTUJSj2B4NhTpXYdeVo6\n1O+2Y+SQxVggpFYDkjGiuPhgX7U4ShTgNh4kqgtITfNRKOIQ4XKsSdxWgXWk\ntkmIrmtQMqtUtuhnWuSlcIBgMS+P9zu8A4G7lUd4o/3Qs1YDQwELEA+ob1xz\nCdXOJwpSuBjv1shpqzWVluY0S5a2c46fg0iHvTQ2fC+bW3WJhiqjJkrkfjAo\nbmWglhQo2cAIRHqrrMR/LMudwAFuHHvbZDwE51ePJodfixsSKKRM6AG1Y3UH\n7BP6atZO6llBMq7JuyF0w3xaz0JkFGuIAbVtYx3d62JZSnERVmohUltsEvrG\net5+odnUpHSy5c32wD1Q1rer4rk+zeniNiLgHlvUbSimqOLnNa/cLxbJ+Bjc\nqMJ0+eVBAUqiat2iBjh929sxVxzY3zIc6kDWaEYkF6NfhsCeTe1YIIvdUmKw\nm3WiHa565M7L8q6DPsqQUsVcC/8PcEDV9pwao9+da8RCRKuTDw2RaZlhPD6B\nSDRpVJ1hZhmvi/p1ip2DujyBG5/n2jWIBCNwSRXfOA3fno2qSUeAU79VZiq1\njIyT\r\n=Fx2w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/density":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/tab-scroller":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.464a00286.0_1622731681422_0.3289858306979454","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/tab-bar","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6332d72df3b804a5412b889461f642210c2f663a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.474de7878.0.tgz","fileCount":37,"integrity":"sha512-F1qoyG6ZJNETJSFZerfMfu/5hU07wmXcI7Eo0tJNTrGQqsDNdDDOUuMWA1GTUWrQ2ccGKGF5xJjq0rhEdtKCCQ==","signatures":[{"sig":"MEQCIAbGgASF2de53E5poH9ctA68Nl+/3sVSOYUzZc97tF8jAiByeYn1DoeUtRQ1CurLRTuS/SWd8ufmw4PINuIVtKrRsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIrCRA9TVsSAnZWagAAqZkP/Rtv0PbJE261c76ErYRO\n6l9DG1KApLToB5VQzv84pHvh3elz29Uu9jKMfOZSFlKmbH2zH88zm3v70bNr\npWgih7ffQ2KOcbhOvsE4cfb69ty3hE0uJKyG5EwfsWo2MBTNcVeZHlmFOuB0\nXOtb0KxVHbPL5usnD0Icxnybw/nZoGSTST2ryiSq68tnGTK2hLP/ZXrYfTHE\nYL/+uyrePPbd0nbQXJN0hOXW+puxZ2p7XlMkM7CXMWFL9a4ERyhc7GaASvl/\nJbSWh/OoabI+I1I5Xd4RBIgvfwnmlJcKscVrvdJ3PNPM2j2mFrjTlKD46eoe\ne1zIAwu7TtMxM3A7kckFxBGHZh97lDTRdSraduei8L0m7/x1OLTsNz5+Zp+J\nEqQBhlpYZfEaaXBSxZHHHzjYjanm4DHbKGqD+nOZvTNhKT9zwajiwvP0mVGO\nnzJoWNPAB0g34fp5W6ourQWYPtGLkYUN82FW4629i2UHEiCHAe3a4zeVM6kJ\nyg9ldofirUXaQSQHGbOHrxZVDf030/5Vu99cFvyoYeNMtfonXMTytUht4tQA\nzU0roOkx6SPtmXJBIdjTQSjGGLHx9bSpvgBYN9JT/Uj6Tn7pl36MuavTH1vo\nAGkzCTtd5/C0yMIai/RN/+iv03nZ7kW153f1Bj4s9L2g8cTOLw4k1IYSO8s7\nLBAL\r\n=8gHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/density":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/tab-scroller":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.474de7878.0_1622733355339_0.6869968180642172","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf57498139de7a02bd3b13a29e3821e0763f0ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.b87ebf74d.0.tgz","fileCount":37,"integrity":"sha512-S7/5uBDBq1bKy59LbnA/PRvThX0D+QxTR0+V0SZrmxwkD8jX+D9dfwxidJkop/4qXxUJYt86driTjk/fo0u0kw==","signatures":[{"sig":"MEQCIHU8esIkQriBk8Wq/OPTlpcRaJSOMXI791BiRF3u1AzqAiBkoY0QkxUQ+WNcIl4PJIzvMg5bQZLY9C+fRIA7k+T4pA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRXQCRA9TVsSAnZWagAAJ4UQAJaS6UmTSRsvSNsr+Ucq\nsaFcIUj4ZpySykIaA5ivQVnUO1TEnpYkxx7dGxCH5QfTUDFCXqa3gGtqdEcC\nqSek6wW6PvyuxFk4SiFOueMdx3Wyk4R8CPMOKPBmKMCYZGDh0dvcXsrNrcdn\n4yEYlvFHHQ0WZjNUyR7uC/680gYPoPCIRotSHXWDWTEpY+W9b3vvYiioNeGo\nq7NqKqQVUAbqAmD4agUADpakr3uZ95G0Q03tz+nb0hwqjnnl9Tb2BvnEV1b7\n5rXP0/L+CVq45M8PHDAFDu9BdE+C3X/L1mhVGKPlngF033uKiCnaeCIO/fT6\nW0sy4nYpoNIFG5vshpRyOUHwLi/O8pSCytJhkWeMSFYKqbQoDL5SISinFEcT\nq51qG9njCS+WLfGV1ong+1JP2Hiv3We/auRdWA4scTUOHYjtneOs72ktzZjq\nreYjyWlVgLuhVEdeN9CiCGXqnt/7P9yqKdpcwHx1ybo6kwjCFOZB/1uR1yWG\n3tMgY+5W/6tVPqj01+4oj0qVmZXhJYilHDrqXbWmQ53Ousa7Be0+ftYNy1bS\nsFYja1H/6Wsfao5gKq+eDYOOKLcD3ClBfcc/A/XpQsC2T0VODbhKfhB2lgZI\nVofrsTW783zDa51HFiUiXz8ZRRpU4hGnEzC2kynr3FwHNApUXAx6scxRNf7o\nZB66\r\n=qrTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/density":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/tab-scroller":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.b87ebf74d.0_1622742480485_0.4259676375002486","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/tab-bar","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad1039e30818234ed65143f92835e14c4bc8378","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.2daa49b35.0.tgz","fileCount":37,"integrity":"sha512-gYQwu/iFZp+hs/2cuY+1S5kfYHL5u5WOXjAJfU/PnoMb81ccA3v069D/0OWle+y6xwaq9ceInp5QRkjNZAJeTw==","signatures":[{"sig":"MEUCIGoL3Qo5pPcJYmNvtqgu2k5q1zVO/ivSXYzbZgmLBU0YAiEAm4RgWGQQZogSguWolZ6K1ivJ5783DkbV5h8GpUaLy/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulG2CRA9TVsSAnZWagAA2boP/iq/Zf0imBYASwINKoL2\nlMp6M3VkS5TsRmxm5mphyoADyYjvv2TiQQGMUcAAnBZICB/Ol95WlUBFkw0m\nn1C3aG2yb09NpJaasqh67WqFmY+VXh2NU3bnpUaEWNTFh55AR2egNcw8RRxk\nbutyhGet/wEzFrw/Y/SVbeDOFZPdJbWW6ujvEntuKt0kl8F1Afnv/hY+5E4b\nUsEODZ04zU9RZs/LFobI74Pj7XkZbctrThO4JKn5BZJn4BRPeyBfAM5lh7TQ\n01QGnfqiLI22aMRlTzWqGgIspEjOwgL6IPcFBhQC7nZx4IQoYhlh3DoNoLpM\nsJgLIJBZpBZXeSpS28MufavD5gnrSsItcPvaPzkBdxZAV1zAbVa0mTUxvoJB\nXAPCsgCJGPGs8ChYaWpBYMBVyQTZX3tUv7AqjaxX3zuEasP3BAkg5Smt+A6b\nsKkkFPBCSRVl4EO/msmGOt00pT/qQ2AP9BqoOdQnq2pQxTv92HOgwpPOF6D6\nNvZTzHPH6sd765TBRl0undf01/2apAZtsUv/OnqHA5+rsK2nkl62omxzgEj8\nPl/jS8zzEnWlxH7EsCVs/gdYxFqrjm0mYqhYxpTDxKiYUXOxPaWpPbVFuZhN\n/A/4bY+KUT7gN0KnEEaPDc3vyzP86wXOBSgkOY9a8/vOuXD/kypun/WtSDVH\nU78u\r\n=ZPMM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/density":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/tab-scroller":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.2daa49b35.0_1622823350658_0.2868295033721222","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/tab-bar","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85831407d8cf9f8154135b457491e44e5c317b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.08db3d737.0.tgz","fileCount":37,"integrity":"sha512-HljQLY118Wvccm1z2AmdmZQE5Y4rG7ghXB7uksyO+xCsEe6QR1Kdq5t3Js7z1uv8Wwo2oT6bH9Nd8h/zLmnFww==","signatures":[{"sig":"MEYCIQDDfB2XO17ZT/KYur9+qozFNqR2Ut6iLV5ID7adUJ2imAIhAOjTQi1xpeVlNTGK7sgmIEv6FgHrL7R2GnT5BRhDTxNi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoJXCRA9TVsSAnZWagAA8ncQAJXAuxCqR1V9GsTCQ8rU\nuVRwa2tYpHjxgg4D0UI+PxhbN/qFiIDrAcTGVsqScxe1cuOnfo5tBUOBQHiA\n/r77aImDHGE1jPEzDR1KgrVo6ZY3u5rnHy4p7irdoG2XhwVzehIA3t0hDiLf\nD1mDLRX+XMxqaqZ9QQ2xdB402LZKQJAsIbZf9X3lpVh8IFs9SHrEuQwUu54u\n1expns4vcOLJJpIpvmJMJBBp0vOSEHnGxq3F5ZKJ+b1RwbtKluLntM9LWHy/\nAumtgHvrkm8uSGyC0X+Qho0jsmOgf0/Z9fuJG+AcSe5jnIVZhqITUNfZa/dD\nZujdcEYxwdxD5f6bTkN5U0xdlmmF5Rc0m6YykT+NJJ8IEJfuK+8peAvA46m0\nxKBchm8dFRX2G2A4csdSjquUles4m7P+dgqzMg6B0f9VPWr1W/8OhYLPD+xk\nmFc2I2C/SlPHdDNNPQ4iZe57TT9uwA2pPfw8U33VZpkclL+NBphlq/y0gC59\nJVOGPttYEKbpeREUkEQdjFKba2xm23r5L+/IBebFdy9hovZqBhu9CAjB0M3f\nyv0Cb/BNIGs6JI1DwHUf6Tad3T3RKq0QhhkNahh20BEBVkYZRAhBo//oOhdQ\nPw282I+V6wnI2nDx1mOHBUDJ05WtFd+8aBMd8iGh7AOJMxunGLDTRLGPgC67\nQUVR\r\n=ZST4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/density":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/tab-scroller":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.08db3d737.0_1622835799245_0.588687525348299","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3051479f737538ea861eadae2e3376042e8d1a85","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5823407a7.0.tgz","fileCount":37,"integrity":"sha512-heI2rlrk3NHnnXm7TGS+zvewBK7b16M6UDuIp5Uxm1FW47+/VD8rmiTdMgf38ADwjS6bs3v3a2MmKDxtPiwZxg==","signatures":[{"sig":"MEUCIQDLKM3viIaYJI2l1HKGl3ta2vBjN89eVIAAwnrQlydtdQIgVwANajYbpsfTa5hZwObNrH4lXArKhgJOfRu3pnPz6/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr7BCRA9TVsSAnZWagAAYZ4P/0T+r87Cl7Igwe3je0PK\nT5NTrz89Urke/GvOsionyEZoBVTvI4eGK6iu4tMVt0Udti4bmda/PSmOk/Jg\nH/7lofTNNpEITTzRk6cUr06l5qb3pNV15Vjm07fFKgDGQy44/BYNVeUNC7it\nw6mUwMvVjj/AjR6C92gAr04dw5+XdrD4vZGcLCh8WPLzJWRfqGmeiVNwPm6A\nOZ4LpFSLGoDGzNdyiAnPdSZJIHCXSpEqZro1DeEgSoidVFd/nGH4tJouKH3g\n/AebjC98qY6X7rT+2mD97U2li7SA62RxUoY9FaresP6kJOkBxodyp67rJt2V\n72XNSs9UQf4Inl0k6BCnv8iu69I6pUfBifYc+h5D/+jvVe+rO/zWALOhQ92F\nP1xwBa6tu3hAU+BhV7pNOn78W3S8yTngMBZWF//H8mA6n4dUJaT+QE/uwsZD\n7NhInRy6Fg8A/L+0c+RHMwRt/yh8UvFagfhUebo7Y7JoZe4k9q5RkjnmRj/z\nwphw46qNN1OSuxyeAFhgtl6jUMJJKX2I3umwehAVdv0viCrsrhF4HnLKjzl+\nL86224c9IjiMck0oGTY/RoKqhfHscQZ9hrf4kloLJrXxwiGjuSZj6WgygOeF\n3h0JrpNmJXGnMFJXX/NFTG37kn4J74G6DMPuY4s7te3fDzK/YlGPFblKJexU\nSAGk\r\n=Jeq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/density":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/tab-scroller":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5823407a7.0_1623113409573_0.7541982097877953","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/tab-bar","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d0a03c3d837d3cc9cbdf50225d9dd6812407b60","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.23b0c5e22.0.tgz","fileCount":37,"integrity":"sha512-oqTHPMj0o8Y7j2TmWb117iXlQ36jknC89XUK6655O9Tuy1j5jXspG80YjoWMrlOEKT+w1QRNPd8QTFhIPFJ4JA==","signatures":[{"sig":"MEUCIQDJ0rugaZc3sTuqWrJuYHW4uzBI56Edi8xKvW0SVGRudQIgQAMgBh4jRv0kjNZNMNDZInk8nCNojq9X+ov/cR6B99Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5mcCRA9TVsSAnZWagAAzkYP/3ftK8bRFcbWvtW0s640\n9J0E5jqAN1oJLzCBkdLhOuYK7BWKUwc0JKZ6JLmaG+IUiuZfLLWosz6/UZBy\nnVN31bE+QfFud3SRXxW8gt8kEo/jG5ytrkKo3Mhlxwk2NavKIy9luZod61NF\nLFYr9azJMUEbxkrIh0SB5MBFRsNEgs8+9gH+x3ZdIl57GJU2FaczxBjgeq4w\n87sDwl25lvu2AtYIJpwdb3nfXSSVOBzZDWGATmzfKPXzlYHth2+41J7rxY8s\nhhsHbND6mGCdmHI9QqTuWcfbN1PNUi6nKj7SIzwcqlBfiJAhNcP+rYLnseE+\ng/wcY+6F+F7O+bR5Swrz0e0w1vDekUC/uVuHckPMUU9XwKOpAB4xrdW7mZG7\nKhNcEMrFUAUeVaBGWaY54MHhPuX7veHmKIfFk1CKD22ykWSY141afXIHfOva\nZdm145Ta63glr1ifoHRMTeLVOWPLcJz6/AP4si2Jwq0nexo95zs9ixvlgWuN\n0YiATAX7hPXrW/VCAmWfzGSiXj7/Em1cPss+isYsSRbRyyMnTWN2LqzQFq2z\n3Q2Wt4mm4W097aOvzoiARMZZHka7cUeERUkRWvZ2kQWerGQ4b/D7HOVBjWeI\nzq8qdS3YDUbFjmaAOfImVGNWU0uJ/1LISaU3wo+SLFnYY7jWlhlQDOhWNxVi\nHHls\r\n=aZyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/density":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/tab-scroller":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.23b0c5e22.0_1623169436158_0.40344085959725673","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/tab-bar","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c625be2b9ac9c09432847da6c6b6c707b93c263a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.2952c6a76.0.tgz","fileCount":37,"integrity":"sha512-KqSGhAX7rMxx7xY/q5U6H93U359bPBSi4hCd6C6kpoAGvTK0efUaC7DpqsRQ9gOWs9nc7ecuWGoUNF9HHaPReQ==","signatures":[{"sig":"MEQCID0hVEvUL29MGZ0WdYVgdZSNpR3YN6s7+nqz8j21KgHKAiBADMsxZn4ZwPnUWq8c2DT3ycgfRIsq6TeJ7iChmH+tVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6wKCRA9TVsSAnZWagAAg8EP/RINd91KHYxmfyHVFgGu\nJFo6UzKCDt1FoFClAUNA9NBkTn+Qn4pkUv86pdstn/WqejQ8nC3ie65kyUAH\n9/zOhH7VR6NDc1e53YUgHHYhEF8BHBVp9tga5jsgH00D5GhVn74YKiGZRDzB\nA5qhD3GAS/1Ya1+9ONhm+/cguH8jhy/sZY+mFwD3NnYyXsu4y35hu6IvABnt\n6RdH8cedY5t7XYEm4G5BvqtsVcaHdgDffGWilwZFnnnZmb6k3EDaw2rYe4mA\nTDwfzZycyGESeTXKwlBNE3gNdhnLYJhuKFRlYvlKWXW9ABT9VlvjrT+PhtsC\nDiON+P12KT0QnSg8oI7zCiwTHaop2FP1G1pxmrx9LBa2BU+zFNc4KN0fa4Ss\nxHaMmiv8Q32XnRZC8emztXW1VBfaiCLrtKvdZ3qiruIS3g0goUq0cxLi1fdB\nwWOTU1ohNCUDa5zOFGPNNkMgsr4fpy6LSwRjy/2jecy9xq4CriWZGbx5Orot\ne2WVlaE3AJivvIwtIAqgYMZc3+R7IWzADMiXGYULEREMc4zChOY2TnTFtw50\nG164tniiZgXD7UmX48BBJxBCSTPOQzjUgAlXW5x4qNccRigurThioSzNzzoe\nVgJA4A6gGseHj2j72i6ZeWYn0XJKsigfV9Ze2VstpEU6od82RHiUY53G7D6c\n4Ta3\r\n=v7XE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/density":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/tab-scroller":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.2952c6a76.0_1623174154320_0.24509057057912487","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"781e8fa2bf9f1ae7badee210e25a4ab753ddb5ab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f12425f88.0.tgz","fileCount":37,"integrity":"sha512-t5ufbZJnJtEAhxx4XdC3psWzgA4zg4OnzHgdkksfP6a30uUtj32laMM3enp8xLmLG3AP8YxYy4QgzpXtmCkWYA==","signatures":[{"sig":"MEQCIErB9RRrcTbhzQ4yF5Qj0F66aNlzV+/WAFuBYewGDB21AiBkSqz6oMi3WgZz2fgCF+ZTed6dxXyro0IVqRdffwljmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWX6CRA9TVsSAnZWagAAbDEP+gOdfpgGdCYT//f85Gtn\nlmS7fSW6QiGEqcRKkLF0xhMSamVKvalzgoSsnivk/NDVGCt9jcrbcPM/9Kv0\nkeoDShdECXsgZ8F7iREbVoRX04+OoRwuO/U2NA4d9gLV3bAGbhenahwBleCO\nJzDeSxoiCBajPRi5kyC/bUtoQHpgLYeiUGt1Wbg8aLh8Bw7uS5bwwLfi8A5V\nYugoceyBvw7ckY+908pes2prqEvMjAI3BrN5+KCRxAewFYbi9hCsYLI0YCOp\nGKOv0H0B3ju977yoZFsUVi7zn0TV8wxGiZVqjc06kcflih7qSo2QPo87z6pq\ncZIBqFQmJXTpgmJNVSnskJZqtr/btQl/Yml/GUP/kJxv2q++qHTNVkPXmISn\n+YhSndqaApHwpb4R84EZ8tKkMlRnKsHTG7R/RHsIrdnDrD3LhF92xloGkDul\ndK/vAKcFt8dC4CRQNLI2AZuJ4S0PGVbZwt6h3h1nC8l4JEziwgCdJF1uH9Em\nWrxfWVzl0C9jz81GpoMsCSD5iKojIb6ssT4rXUVtcp5XYpzd5+lghxjevv7C\ntIGaw6t8iOEOKr/lH70BXl3yEf82niWWoHwFhTjDPZ/E6tq834jPvp4mwWdn\nMnMlz8L1bRrtJSyJOKLa32sg2lflXZUd9SkLWHMkx+ldM/xy8nJ8zz1Z1EnP\n2Mes\r\n=gaF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/density":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/tab-scroller":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f12425f88.0_1623287290672_0.472366202117539","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71436f91fb548ef54eba7ed2ff8cf778a0705e0a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e543628c3.0.tgz","fileCount":37,"integrity":"sha512-Z70OQTNPLEenoxxA1K+WLy5s77mBuLca2d1njebpP409t501XfXxq121FlFQ5Js6X0CFZwJnQNUcWo3WA2Y//Q==","signatures":[{"sig":"MEYCIQDFBSfjKMxG3j3QAxdDWGvVVHKkuVx7hYFtJnUiKdvKAgIhAMTmQQBLtqxCr0qnm58Upz3CvIsysE9JPuPi+09m5Ej3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYyCRA9TVsSAnZWagAAPPUP/RyJ5WzlOu1tVZ+3PkXP\nn4AuUGfIaQg6w4HfHk2C53E8RXSVMUSV5WgsUHIbWCti1zGQDhblmf3NCqhL\njCi1RXipgpj7HzihE6/3eipYahvmSjdWr2v0hd8K/WVZpY4X3XurKFODYz0c\nA94qLGcHkr2gMTYnhUjNsxjo8yZRj0DwPpYKmegXZbABLH0cvICyvFS0Gpa0\ncwVG3ocEY0pnjzJfVZVsMcNpkMyFXYe3TJwBn9BZnA2wMuL6oRn1N9Fjqzi7\nhNxZGu5mRc52/zePYiVb46fCHZ7W6QBRFnKsZZVyW2/7ANbr5E6I7ohn5hq6\njpX6vuQD625W+3ySB8EMI/zwY9xyMtMQL7zU6d+9VUmE5IjY4JxdOb2iv5GI\nj3nuqR8o4UUPuZgqm9F80BRK73qpKOrmQwY9ge1zcTWeNiYBuXE7NqdZMIgH\njvFDPTsPOz1xPRqwXjxPhDDIQASjsLhG3R4oDgGV+9WPLmwszErNgwaZp044\ngPHD41dTSawtvaxxcEteyTB/JwwhurXqZwtMlNgF0hgiAwRWXKgH37S9RGd9\nnTNGhz2DHaOzCzP7aK11F03gpV3zuP0L8Tu2jg/QWAHpxZ6lWv3bIzcb6/jP\n2HT/Bv0lNwj+Lun6YvDErZtl7wbbp+Fn1kFuXnDqKvYMuthl/FeFzWDnmFFI\neogU\r\n=xr9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/density":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/tab-scroller":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e543628c3.0_1623287346196_0.005662485825174368","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20b84e5c3086cc0ff0193d3af8e78aa08b472bb9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e0c346286.0.tgz","fileCount":37,"integrity":"sha512-qMPhmccYEnYXaFWcE99vndC+ZuQACwpJBaxbQVifdP45sOm0zqK1hXjlqlh/V1u3Kc/U7yi/hm8GeuGZRCs9PA==","signatures":[{"sig":"MEYCIQD4C2fShe90UCeuDJffVnGKCZgzUYpUWWIiK2pleNSHMQIhAIy4LAb0YkiQBUlZp73/xnQdWugx1rydHKWKboednXeS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj/MCRA9TVsSAnZWagAAZE8P/jSBvJQcfuXopPJibJIF\ne4aOMIpldeX9rv5X3jAUl3od8nak++C+x4Xste/hmoVVHS+QOYEAF962Ilyu\nXkaoiB7ooPChhaRv/TTZYG6OJ3VBdKgxgxjyf5fIKftyFeSVGSWWBC+bEVb4\np32oPRxndum1WfsxByTZ98xHzI8tV1sol/x+33/NAyixLp3gOlU8Dc1WzcOZ\nTvgRO4roq3B4TZPkiQR0mK616kuWDFVQ83wyYV1pRS6J4rL5uK/J6b9qvE/E\nlkSqQf7PrL+zis7LOfu20ylhar+5aheniTXVwl5V8JdDQB+LGvbJvJ19VYQf\nB3MtlDY8wTRDaPiUy3c90YK15Se472RmIMZ1BUMbb6v3mD0Mue2HTOgQouxs\nTxCiVTZul6roggKHn4/GZlRy18caljA1r1K5iLPZtRgaO5S13ILWwexf10ij\nYHnKaqAz4aEMJ/Ne0qD4enABEEwnOM483qQjcGb8aN6KnU4pl5qVdQI/PnBm\n22aqMqx1bgri+d/L6yM3ADJRW/B4EwvP85cGKZqvUBkArr/p702WJzTwcANZ\nI8du0LDtBWHnLvNdtlR5dDbdtaRBNCSEyzqPzF8Q/DZkYctHB1nX3wWEiqj6\nw0dEZiNKIPRBz3CCpyxVbaCqOoDmALW3tGSuZ99rkWMnlPKdGcM4jyCOQWu5\njzNL\r\n=SSQN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/density":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/tab-scroller":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e0c346286.0_1623343051801_0.7066752618676504","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ea0f97d20cf51ab5805e61c65f347fb0348666","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f43af5633.0.tgz","fileCount":37,"integrity":"sha512-2/wfqttfZPR9lrXRIO06neUZEYewwED9nssWFULptNyUZftetNB6/DtbpSJvvQ7SlfABO+4VdpRkT9p4ImSaeA==","signatures":[{"sig":"MEQCIAhLa8mwgd72RIXy/kGKHMfO7GARp+/ojQKNe0KKSnKcAiA2hr7uhRPFdeevWrakItd+8XXgwOwbV+M3U9CeXAhzoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwngECRA9TVsSAnZWagAAHqoP/2r+WW4yZNGUBDt3nFDK\nqkpMAvR3knpdnLG/tJmIucfUf1p35LFHE6xAxKtabXbPQDXGdG8ZoMIpKCfK\n0Z359viNyBopVSquyuf3x6CO/oDKusMdD79ytGsOUSzFlUy24swNwV3coHV/\nOIKUPJfNSFDWRo5oY/9D1oqea4eONMqtEv1dCwRKL+ITWomg9oqGtSrCC4Ea\n4+k/zLV0sNnaLddf5YbtX1ixx31DOBluNeoeuQtWUT6r0lObIbv304K0XZ5a\nZWiIvZOypcZQGHyRIr6Iz56xtdNaFJxaPtjHZNkuDRJciKoktf5Q31qRN3bo\n8PTLhG9ynKgtzx2qzfHP2UN/htSRoCZSHVVa1LW662RGudJHiyh3p+y0gbCU\nX7DKw5nP8baJClCIXvKOWEyCp65odXC9qrhYjkUbIrH+V85VR4Vh7PwwZ6po\nBPlhoiOEAjsEdIYgA61GTcky15hiBREh/YsyGJHHHcfshCCFLbHmxLFS9RlC\niS0935IZRB5cpeD9NGwNelaQkDnkBlJgzSxT8kgO37aT4WrxmnEYgd+5SphU\njNC/hPYL17qlooLzxUjUSA+ysWC1uqRCAaEwh/DvLHM1uFnJJc5bXncsEBz3\nCNRpBigiNObGHoha81L9GDOjjwyCq2blMn4Jf6D0lGlRe0SwkfQ3QUHmLyK7\n4lYl\r\n=lSJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/density":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/tab-scroller":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f43af5633.0_1623357444676_0.9910669227121893","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17ad5ef682a2748cd32ec6816f1c97670e0f1964","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8415ae585.0.tgz","fileCount":37,"integrity":"sha512-k74ord241QwzzjJrpqsVy4u76zWRy7DV9sPwQJSHJngye1DXiPFjw5m2ujRLNfAZAGjBsFPIWkc5APKFc/+p6A==","signatures":[{"sig":"MEYCIQDC0EHYyQ5YjaX0tHD+Duzuue24TSjDAO5c2F8h0z91QQIhANRQlZuvXMofNxqvYFw/E/GALBlULPFO1B1D7WN6WpBW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4pDCRA9TVsSAnZWagAAjbAP/iAzinz8Yx3IHHnBKfiG\njJ/4JjnyIV5k7sw8WEyLWZR2VVBcMEgMjtM9u0gWKMlv8JfT8iNM9EQ3XYwM\nZ9wX2r390A96SpBC57cBmlEh4CgZnJyhbQihSfaDkxwb3km37nt5en0cdNPx\n80tFM+Etz6U59Bh9OWg7O7k0vUDET2oLXRyVhEJYpryP2O4hK1Z+HN2UZF8w\naaXDXv/Zu0ulyq01C5QcL4kpFTTJxYi+1kFnXqmeVeZdfJZwk1CIgEZ2Uqwe\n3df6wDLjkkiqg8R6mdJUPffCy0sDKOcqXdaHoNAUqvjyjw2gi3qdyQrSypbt\nyTgFxwBjWSjPaqJoOjRTJA638q0q5wM5Hn+tAF4GgFEVhK6UrzJnBeD6aCfL\nH8S9WXrQfXB0EDAWPWdffKZrtZQWBjEpk0H+cid4qSrgREcTFshXrmOk1xpi\nTaEmG9GyCScC4lSb54m2pPfHC/+JANndte/6OiNc0WKaJHF/S3ftnM/qZz7f\nB8s1S3Fkltl3rL8GMJcqMvkWSfTARHgIaKicpeWa1tyIIcWp0Kbn1HZ8YcOn\nn3EQT3R4l1bsY09KgcDT2h8ugBHY59pzWcHogKNNDgWFaqnyxAhX8MGXgk7f\ni1Sm6VNT5e0PXzdq+/Kg8rzfcmnb/LNl3tBG5s+o7ah+knunnGGzkQnTTctZ\nCV2y\r\n=MO5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/density":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/tab-scroller":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8415ae585.0_1623427650994_0.1767204155502422","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/tab-bar","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b3bc57a3f2a65fda006ced2845ac5b5810fedeb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.598fcccc8.0.tgz","fileCount":37,"integrity":"sha512-DHNvaRsz1O5hhFNmF+eOid/I//OtCVSyg5cmGckEWTjWqP6EvTR6FAfJ9qfxIsR5l7dlNFnjL0zPgQO7HiBDiQ==","signatures":[{"sig":"MEUCICHLJ3h2+aEc/ok6MtydovP+cF9VcW1s7XlsHhhQlu7VAiEAu3BqoIYtAvbW8V2jUNjVdnEFZbo5DNOrMoAtPtP/cgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9oQCRA9TVsSAnZWagAA5RAP/1ZkZgzhAhMLq97Kyokk\ne9GmxauZpxGBpgXR5MwcIz+k+VbItqebgmGJrWoxv3Gx5HfWa1+52QVJNpEf\n7JE6Beaqh+qaDFV+zcjOs1bHHvN38EyRaLsRhmhq1or8AEW/goQHT23UGKQy\nsA16YnAfsRZmu7eqziOdqX/StWmROlPueoGedVp6FUy0Lpllxtt9DpXio+dK\n0aqoVY2565WHdkqaY/0iZIya5AdYn9xhqNc5OWtcQTWS3IIrUATCMeoFpSXL\n8weJBJ4tHnpIvOuoDTFgjMAkvEXsbJnMfPwoaLt2yzYB7c8r2leRIaREfXa1\naZgJx/egsXh8aI9ncVjhzR1luGTit0FgYTL5S8mXn3/3zGYg9nDQ+hXljjHa\n3mT+vx/7DvRWUN5hWG3mvTScqfwFGaeAgQr0LNDqP545x5HPzQ30dIvPLiIp\nKP3aVXiN/edAjXF0L5Fm7A9ILfRGVWGVzuJ9lvcq22JzDobtiKyYM1ov9P4D\n0sJ+YZ08yaQ3JfGv/TCGco0aMi5HbVf6lP2WVXkupWMPjTGFSJ9FMj/xMCJ1\n/8pwQkPY3lmGQ7mKgoRtuYb7RNQ9bNwmMUpznztdR9M6ZKnF8sgjYC+3XCnv\nYSRkv06BkDrxMCSD4XIhjONRKJKCT0K5mYFeUjZWtgTXq9rvkUbU/wvs0F2I\ncWps\r\n=hO8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/density":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/tab-scroller":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.598fcccc8.0_1623448080277_0.4269438475146168","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9499973b17fdc26d5732833371b48df36998b736","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5d0605188.0.tgz","fileCount":37,"integrity":"sha512-fxcqTnx3QSrpPWHvT2cwJdtq0rDCzze43i0Zi3+kdla+4eVR24Ky9jYEQnBHBTQNWgzNgMXSPfiHeV9HEd8k0A==","signatures":[{"sig":"MEUCIGuKNI8gUZ6wUE/XMEGmu73HblCxX2mH5mrAEbd7/RFWAiEA9SmvgYQkqcFcXDNETrc9ATgROzH5K64rpVJWPMyc+b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5StCRA9TVsSAnZWagAA/PEP/jSVgmbPMBfjDYiE2RFF\nJ9JnKZMX6DN5Mu/q2H0exmcPZ35peWIDz43cHKH9UQuRNPIjHmybi3vEWY5h\nPMfbIw7EfY77ffmAkkL0EYHafmcLXFtP2gbUQSnKi6uzvk7m9TcsTT6MUaoS\n+MkHlmVcywsBRx8yblEPN1Z2Ef/bnFVb+Jkb0PTuEGkN4loqf0SuLVyT1Wp7\nJdY1y4nssCwwKKy4Uv9wZt6bZchjhmY6iPDFw7/XZHSRSMmqNttbzcsfnK0x\nOU/W+FkNUSMjTiIu42iMtD0DFs+ehy7R6q/AUf7dFIUScxHKfZSIXwY0gThL\ngVQEyTCyetcrjJR92hax0O9TJzGInjzAcZ3QMQu6k1f5lD9/tpRiz/2tcOPA\nkNLzSxEtvnTtXFq1OPi66MmA6eV3137o9CL7C9+iAQHJ4B0a+pphFsUtF7oy\nHXHhIK05Qe9+yYdA59MPbqXrutGvHq46BOKpd7bJXDOWtcek6KzUGkFdyQEG\nt2a6tmL7KH2v8/JRWSbQA0xvQBY8xyXMDNtD/nBFldPNzOsY3sqEmSkXpHZu\ng/FIXtKCtqZe4Rjmgm7zwoG55kBGlOTgeGsnpoOXJc7KPH/AO7T8ckemvzHl\nrV4vngWPYpLe7HdwbjFzIVUIjywhCmfieaZ5XalXMl0KYdApzbLmAI3TdD1t\nWg/A\r\n=E6Jh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/density":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/tab-scroller":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5d0605188.0_1623692461283_0.09611851628448775","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b960a8493e1fec4b71d1f44b9092ad0422a63a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f147a2271.0.tgz","fileCount":37,"integrity":"sha512-uqnJhwn/NiYPIYk0PQ35TFX3eBgeRm+Sal7gtfuEIqEaYLdsCdrRA8lJfyX7kffcjdWc/uByvsLHs9E2cQt70Q==","signatures":[{"sig":"MEYCIQCDpW8zN/fiWk1yT90mkuJkInZNrTOyCrWTcE1BSALZjgIhALt53Ur938MYLCJKIVufuNV3HewtvE0T3jGYyDpiUOGH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6vTCRA9TVsSAnZWagAAaOgP/19msVlS0eulVMT8pUaD\nSxgwKrzoaZBGxsIhqKHcvmwCP0iumcwdAEorkj9Cl4++KHe+p5EUlpHAgV/p\nlZWg7AK/pP0NLAu6zjEbUvYlYz/enqf+xT/Py+WggrQ/K7Zl0Q+YJtM95leK\nU1YR28WX7PIgynGqzvquzUyhs16CzriYlHs423R6nAEbCm9cBJlUBWpF5BsB\nb0PoY3UmX0hpyG/VFL+z671iRf2nV2jj8dl5k7DuZYvoYvccvETMZzkoMtFt\nGElCL6JTzduWC0u057mUKlWGjPVuxJo1B2+qPpXulGuUSdulzu16QNl3fl+W\naTlbmKe4SvG5+8xGObmjQ7B2yfbm4A7m0dFla6zbgv9w1zTaEvLWBvmjNVRt\nhZg4AqSlrclCs0NcRbsa24qLkXi54Cog8AoMPsSNbQzKn5mtgzcAzDRgd8UB\n4HnePKx+nZO6KH1YUIWfZ3PQn1Bl54FCiHZU0Sjw/7ZTSnui6FXljkgL36Hp\nLl0eWqfFcWrEZ/TIyV1wlxAIzm+vFwtf0BOQzxkAAFVFLbxvpLIn70tc2iWh\n6dI83t8MO/RXjnnW12/PSbjj2FcUvjGst/ftY/wl67P0A9zmp0+rHCVtODgB\nXYBC2dWt6nvQtLbuIKJHcN6tTWY3esjIQogOcmA+5X34DiODtsZTZCTUmHbB\no0WF\r\n=guzP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/density":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/tab-scroller":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f147a2271.0_1623698387783_0.9532602634623732","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d7f997065daddb0acbbc40f6588214a857db9a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.33579e00b.0.tgz","fileCount":37,"integrity":"sha512-wzuUkEkjybhnNkaf6fUhsPS0gc2UqezAxkJketACNtdDy8wyWWtxSUHGUMbyt7Qk+gQEKUcLtailuvmqJoIo6w==","signatures":[{"sig":"MEUCIQCPjwH151lf7MO5SdcGbk2xCoOdVINduM+lh3PHAUvc2AIgS36tkuKA1GscUAGl8j8+gadU9z8AbGjMbPraJmlM10Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/MSCRA9TVsSAnZWagAApNUP/015lIoQYS0Wk0yUge3i\n+dXFTludnmNmcn7yxXNeRMH38/Wwrxjsu+KZfXxyf4SPEZ0iRV8g/81qGsup\nuC1jUwnpKxtiImHOsd0R8zr+MIqMsuFlPKxBteoCMMKQ05199eeBR310ogXD\n5yJR9r9g84y/cR5g3482BIdZq9EgSh2uylhr0kZfuWNXKKiAlaTOXmvtPVLY\neox8PMMYa2HcdlgMVD5lmFvsOMRRn6/4LGXWraOQY4WsUFoXRZt/zVwnPClW\nrj85uWBLMefX7S5tP+Lo6TikBkcnZQ2k9taEKFYVlrOh9Vg+9t0HYSWZ60Ky\nuNgbZ3N2sSgIo8lOfR4vHdrZ2NRLSZ3q3ci6IJmkWdEZIZuw+38HuTYGRsQ+\nTz14kLeYZnunXsl0IZu49b3gkApjcHoyf6ydis4V6G9Y8ckm3muBB5b8bp5H\npqVkoRE1yJ2SABpYDPal4Uz5r5iJVHo+lfp26IwuVZWBX7G1DJsjXuJ3IfsJ\nwH6whLuW8ioD4ThkwCGAxIV0dQilIr90SSqcOrwnxO1GtptrIN/snED4MmRe\npI0WroIMf6GMnvoqlBy5IfowsPgiA3i/OB1P7/Z7Tl33FWYJxKW4UDnTw1QH\ncrlHoqwzJj1vgZqYSFiRrBpGxUECXCWtq14euvAfYjMHieqd94TxJqFxyOFZ\nJrPd\r\n=zeLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/density":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/tab-scroller":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.33579e00b.0_1623716625820_0.40914964527541575","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbd9510de572df97846eb9ebf6b74a7482152a7c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a6909c0e6.0.tgz","fileCount":37,"integrity":"sha512-SPeMLIZYJnPcLO2tF2uWjaAE5rE1ruIK2FYOUgpyWfmQrGiPRMJJguQZhWsfYu1CaPKBfzCsDWPsOBgWvk6Jug==","signatures":[{"sig":"MEYCIQC9RC+tpiL+xgsZfoqT31wVPc6uIA/bHBpHauAjH/m6uQIhAPi21anYs0RENaV+kfMaSz6C7aFJWYo0uWEbtj9jQvC6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPIbCRA9TVsSAnZWagAAOqIP/AmWjAHZfBycvBSq57fz\nmw0JS4MiXg4PPjk/WzqR+f5T8X09VGFSpKVkHGrpd6pdjvMk8qRlztpvMMOP\n0Y2Rf6dOZhkq4N8w/YRaIXluLyKRWwBm3tNa7p6PLneRKjDfA4TKyu0OY6Qv\nOHWSCxmZ0VAgKDAQnSX9BEieQSjlbpLGoicmOjhWS7cCFCySfg0LhcsmQrU5\nP0RKpWVALPiyPTyxuQqlhuLH6rVp4ISRgCCU8WVxWdptCixXZh3z1uTMz0DC\nX8eQcuCf0psBIt08Q21CllgzNb8GRyQQPeEJE4NLXP+pnazO+a/MczgfWtq1\nRe4OPTlDp5vLIPRzAzw2BtvpEXiA4wZZeySW95kB6pdA2nkAKTSZCZHXIsqK\n/A+W/Mhxm3KyCjudpbZkaqd6pWbDC5KxyyZkQNv+crn8snaSbWj1f8zh1Q1F\nSGejJDtWM33VQYsI9/UA8h7nQBGeUPL8Np2OikW66NcVJUwX6FJQjpeUA67c\nGAzslDJglRfozGgC0ispzEhQ+IiTIFk2S78XcLEivWFgVk1L+UG60hIA+WC7\nxNpwBUVN4j+0MCFnBgFhD2cC3qKp4k69XWLsG6Y6nwT6Io2yq2sR2Vj48mSI\n3vBGXDiyK1qupB82uWc7rNPgYU1R8KfgmZOFvaZEeMiUu07YMbH+HQa5JyV7\nmN2N\r\n=lQgz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/density":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/tab-scroller":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a6909c0e6.0_1623781915259_0.37678128347152295","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"403644acf52b4b0bdbcbb79cd2cd037d50969c4b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c18b5925b.0.tgz","fileCount":37,"integrity":"sha512-aVbhlX3xj47fGChgXlkq1zUmYY79h7kTPPwVuP41fPuHkZnve89Lu9YyWE6jPUEm52gORIryjaBgucFp+8oSzA==","signatures":[{"sig":"MEUCIBFyBdRvfKXpRrDbAO3dF7dwA+epnUho8jhnrn3Xg3YvAiEA7NQ6yzwyfk94dxkvxfHW378mlOBP8VEUbJcu6wOcXm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRYOCRA9TVsSAnZWagAAQ3sP/A/00Iag9rJFjHGdZ81d\nePiwzpSXc891wFvVUYxz+fRffPXb9Sd/CMpkElpuktY+fym7etHKXkfek80G\nBsRLeFtV4HI+hI57EujfS+mV/PlwisyC0Kj/K/l24PiPz6NhyLYI61hhkeqO\nLK+JSV7aXSwpngfzVP6zKMNFr+pjyrxcq/EJjZYtAj9OI1p/rkKsa70b8Mpv\nc7fCciTOyuH9O7hqcasiJP4u6Id/P9nztN2fKiS0LWovLKFc3Wj3Xv3Ntttc\nUc1hLgQFzG7qTeMKMInwVd0zEBL/LyH50/kN6IGOb3gEOZMJUXRBtS7Nn1L3\ntyhAEAWcAmlA9ZQKNL1KPrv1ZwZESRBOEdDS/vq/amyntTesJZ6FVZdz5GLw\noewKk4STmF10+EpzbAuzjNk1frsvQn0WjCQRDAaHTB8rAcGni9KCr+txcEtk\nKoi0fT/0UkIi08wkmZXvwsqVSh5dn7N8mxU2NzwyslQ8Dtc9yIUTEp/djkQk\ngENpGOBqoU+JRmlm7sqk58EsodfW5YbhlDBAtpeJEMJEay2VI96hX3UN67aA\nyX4yE9GUNTX6JUcqPeNmgQ2rvYFuDUkiJSLvZACar0Jd94tnWhpNy5+notyd\nq/iQTUDlvdE2QeUASK722K8zEx0MduMGTpYBq32wxaomMncSTkus3Le5jdzG\n/0nZ\r\n=uQvY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/density":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/tab-scroller":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c18b5925b.0_1623791118773_0.978058350833203","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/tab-bar","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6f8d299f8a1c54e130e8d1f679834d91fbb8c0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.271fff902.0.tgz","fileCount":37,"integrity":"sha512-Rf2KJShe1AYBgQIRIDX7WQe369c2sJS/oKnYJL5Ojdj8lYdHhfDPBXXvf8wspXHvqJa6U9JIfALDLzOqkq8rrg==","signatures":[{"sig":"MEUCIQCJCHg9TBuf3iFyNVES15MGttUvKwDa/nY9ANxrDsET3wIgbWjBfZHa9z4RSl5g23eGcZLZA3Ay8QpRmEMKeXcBcHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8/CRA9TVsSAnZWagAAkOIP+wSXv8hTNmHy13ujtAWl\n8ci2WRSxFuKcDSlEzohf3oHljcsKFj9qgZ9O1aYuKOPlGsS4TacfFjlrR/8K\nJKLvOzzQ94qn1ISfshQ5Qbxn24DS6YPIBU2LYpNrRFQg0YKmegmx6ZvxpI+T\n6uCrK4uZ/dvJa8iMwp1e4brbsdESD5tKDrdP6d5zqh5JfVmIYJA2mNDuLRS1\n0cU3BFQXYZ3PdhmeJRRTo62R7iO9aF/h+9J2TBR4UVqdG3vr0CuzPV1zIoTo\nR5mATVMMhtowk3NfhDxY/YIhXW6Wr97E6nQE47HiI0DgszWxJOM8oFrcuys2\nIkwZgjjTS4Zp6rWVCcVEjkttaC9hd1UBTgzQV8Ceroh9Y84IDFFKQgM1Kj3y\nibBmwRNHMlqxIwbY5GXmABMFf525NysCQkWUM3o8hEtoz8X3IFM40NCn/YsD\nl89HgeVGxynOp8qf4D/XiHGGannxyv92wx/OrhHYdEPHgK23FVZuRtvGnCIR\nL3wfYvr2OI+BrBUG59GroTE0cCrXx+scd4OryT82ArOfQrNmYMLWcFkhWbtf\nEWbuBBE6FuRPY1OzbGEAaH2LaF+UIuZ195D4/Kog+8atX3Ak+jjPRFEThndR\nTSKFoiVUUwrKYE+WjFh3lOaD7QW2MGPMITDLyDD77Wb3awAGUbc8Dh/fRLM+\nOx/6\r\n=l13d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/density":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/tab-scroller":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.271fff902.0_1623797567138_0.26207800959535166","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74c32bd8b52d6f814d7354e67e6e8e9458592329","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.7ea2e830d.0.tgz","fileCount":37,"integrity":"sha512-TIBD+/nQV1Br1o7QNL+d00O2bQkFxF+nAzKJKjxVBIYbs++anD+66VJV+UoMuaopTltFmYZPMKbyeqFnBbXbcw==","signatures":[{"sig":"MEQCIAMQpp/ub3NExlhkv9qkGZ5X5kPnQSXyKIBGkGxkuyUAAiB/koqRq8kpldO0GvBcPktMnsBYJPzxVNO029woa4y7Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS+DCRA9TVsSAnZWagAAXmEP/02qITuMQAJT+nWUF0ev\n65IpO1fkDzOu43qadq3+Clw33hLBuS+oKHT7tRB3tHky+y//tm0eieheQ/nL\nsZ+1PwWIENDX0w2AlNpvyCtO+igeOQ91sOPs9f/A4iH99QMcxKcZB4oyYEEE\n7UEt4TH2NoeKOUeoj67X8uviRZN66/pF3ylymXBnu/8i777n6JiG9ZaNiB92\ngy9n4M4/qw1J0niou8t/J+Co1OFnuTaVFYEibuLGBh1D4MU7XzI67WjVJTXY\n1lvvWhL9rDR67Y/ZpK8wIGox29IOZQYWbCuSvhZivyVNgIK5YND7DcsfqrSp\nbmsFkc0hHCoIxSy/oBmyRHEprunK8mmQ4BhgFxndh9yq8jOzoxscrlnB8e4o\nBLwjSP8w6z/RefyxceTaJLHLzNR7KNCGdGdSJPxBXxbNjBNZfeOwx+lkBq/L\nDMdBmjWzt+VGc2CClAGZlF75fV2EjCT78b11eyL2H8dObgMEII5L79oYaQ0o\nszi7Ud/Q015RjYROp3XIutMWHIqYih+RFoyv8AFX/S4pyaDUlfjQu0Wk0Ars\nucBL2EXOKxPbgDzXcA/i+MrHHMSXPnOrxgWSI151F/aX+5mSa4gyb/VwkUsX\nc4gzFrrv6IVtpMzvKKNQybsFroLNN8q86rFMPtCWEZgnEsKTq/Lw2iFBsqiM\neCGG\r\n=65mQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/density":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/tab-scroller":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.7ea2e830d.0_1623797634929_0.8722595362222823","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423d424f7809a416babb03588f720120a523b3d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":37,"integrity":"sha512-kLLOnRyKMFk4zw0o5HniEiVvFaPI7TTXWPZJ3kLcysU8+jGd/x3WPEEPoLujnN/9rfpDj15IKxEZ++KGXO1C7w==","signatures":[{"sig":"MEUCIDBJHCTt9PwlC2sOtwML0xqJb3je5A3KhAPWNCgEO5GnAiEA7IISPCoFNy3J6OTMBlza8pA1m3uNcEIatFX5TFc7Lo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymg6CRA9TVsSAnZWagAAxfUP/i7hpY4XHW7m9iM5a8Wb\nUcnuPWO4HVNuT4FV+rumVryKIiB41zGVvtBKrLTxkiemawS7i4v5Eonex4Jt\nDbGkQOyJdHYhWXICOLjnl4kq5IhztOf4Gwk4kxXhajGz8nsGTP3sTaS57ZbO\nFXWOc8I6B364yzdNKF5yKuxs9Y/4tiNiH1rmzOQ/6A4KSFOn01xhmXpvn1u+\nY2RYD8LIQk52hbAWXHVTiSQsifCtE7F7XmjPQpAGGtcdx0b7ftoJjvLxFent\nE613+xHU6GDl5bwU1WPTaYh3uuWJjEVYbWVGAoPSPB8qZbXzpF9PcL+8Cbmd\nsLxytLE4lcmIcQ0eUVqyVxeOKoocqFVXvpYlCk2ekoxgqpIZDmQIGGp0lSU5\nPrKfFgf4QUJ+shtLuPAm7oMSJMAq8tZLO7/2Sz7GBCzSpRdxA1uHWNd8u2qh\nGo9pbrOajd/kM2ckJhIg/yR6DSAEbb2sxlC4zgYw9ycapdTI7sAHrZ8zn7vB\nRNdwdJdiMsmcFboFgE1hkA8lY3LqFKeDsq38d9lgTvj0PELYIcvHGTzs50Xg\nntprbZFLQp1LzXV5LjnlZIuHE6OdyOgDNHkhk1kYvgdO4ZANumn3s1RQEQ2f\nL/xV9nYryIhOeZ2Xe38H6X7s/Yw6pqx3wM13Kyo4Ff7V2MOcAmW4d8xX/mNi\nIH+N\r\n=RtFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/density":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/tab-scroller":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d96f0a1e0.0_1623877689641_0.10944359533326398","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/tab-bar","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1a1816658596625001796d2ac892a59c6cd704b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.a6183801a.0.tgz","fileCount":37,"integrity":"sha512-3DVpme9Zaq3UfiaocZfPOyQRfhymETw9Qdam/Mp2ePWVES1FPK0ajNius6n7PNUvKnikbpYOyRPPchJwRlBO3A==","signatures":[{"sig":"MEUCIB3+fqUA5fqYxRQGg96yoO90zUFsMx/c4PAgaqtU9+R8AiEAz1QB/2vomleb3UHDoCDYSf0y4ZQJYE8Y009tzImrU1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynYMCRA9TVsSAnZWagAA4gQP/jSEc/KH44agW70iLQRm\nS/ypy6Uox7AbifVnVdw8ZEbC5Ztbe7LsBZe8DDHJ2zC7IwzCS6duKVvbmpX2\nNmTpSGzaN90JqLdnySEgdfwxlqzp6CVDbXxE7ueB3iDFrf3Xzg2XUeockLnH\nWdZ8tcLrK4EgD+Z94aYBmzgX1YRh3Nc3sP9PwlhZ51Yxm+0LFrFnj5187s5m\nANi7fPKoV/nLlzdqtac9eHg7/nvhSG5K4uywz4xel1wsSNlgq+SXDvAriRKK\nNTsTSEgOwQy3M+6YRLbgQK1BMubSiqIJOYQROVb+3ImntqA+DEeyZePsfW8D\nu47BYP/MjoO1bvJW8Mb9DlLsrR8D3vggTNdmx6WeJuCeVFDn9juGO+ONonsx\nAIFC2sPZUOVEedE/Tg8tIjIR71JsIyVSBfeTFNGgmhim1AfNxj03eZ9bfTR6\nCBa4tu2DiSJYZBnZx3lbxFD7qzqYjX0EfUahIEvFCxzRgbFELVz2eHOBmwbU\nhqGnBllIdopxOuAmND4aRkcfcbHHP/MQfFJoUjvIbSt2MCPOkyn7rW6N8GFd\nL9IYo1E2vKzQxjfwtWUUzIzi6l2AiI8MmIXASoiaoQkr8FckLqncVcjpa1MO\nwfOF4DhI2NOMj5K9xQqmy4X/SO0SU2GEeZ1LzLJkF6dGgw8tJLuDvl+cKQHJ\ncTKi\r\n=aGdt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/density":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/tab-scroller":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.a6183801a.0_1623881228011_0.7790358591983395","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/tab-bar","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab97892be245262f0985f4db90b4375c07f5f07","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.940550232.0.tgz","fileCount":37,"integrity":"sha512-GJb0Avj4aOf7h51IR5aleF2ZFkNKFuGUeZyjFAQQPNQoPelytxAH9PdnNJvE+j5PeJW22j5m+7hcz+4+sQ46lg==","signatures":[{"sig":"MEUCIQDGwnVOyXTyr99Vz3vYGQIMyWn8XU3sttVLGmCmn2jDYwIgc+Ww2zTO9O3VODQxCWP+0xJ4/SyAnOgP06nt2MSerfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6WFCRA9TVsSAnZWagAAdv8QAIx7rlLiS9Sr9sQhiQOT\ni73isRsPwBsUEqGzs46CUcD1D9fcc/dS/rM7eJgW+g4thjJm68wfuArnbFrx\nPXcc+RkoXOdZ6iyRVomwpayou3zkYW8Ry/ShlcLU13crBDEONCDPx4+twoVR\nBxe6gRcX6cteX6gfNcLdnTxwEWGRtRwUQxGIw51hXgrFfLKkMGZ0nJcZu/O4\nnMLeEZ+pJ2IOeJLkx4P6/atCTABzy/0CzYebwJA3++UaCfnpMJFI1A6fs0xJ\nEjS4dYKllPy4s/eCG20ao7a5vhZ7huezNEXjPGoiEkfgO57dgt2n+tNpD8bd\nhdxdAIVoexPOHh3soJ47s/75FB95Vma7Je9gUKNXrKTD9H21HRBrFSxxZyC6\nkFOin7A6HCuzyOBOvW1/j9lvFN5zam3LYGuLkuaKlfJG9cA1/SONrvHoN98G\nXB8rtBzDDLRtTYB61WvqaTI/f/nOOJIxPEfbDqZtFP7aKiTBfEbdE6LFKhYj\na/IsONynqJ/DCUleNeWcGN58Bl4aifcq34uujIjTUONUWR2Ixz6hFJWW8RVP\na4iBWKU7Bq6tzkKiMOD7I+O2jB7bJxDIrSYpibik2yVdPiAEetumgWYAt33H\nbJC0sIstR6xmpm3hQ0EQiTdhiD3ANPtoL3Yr/TOTJ7jx/vj9gj9F+Fxdeaay\n9wa8\r\n=l/Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/density":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/tab-scroller":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.940550232.0_1623958916157_0.6689618719276149","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/tab-bar","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccc0098abffee2fcacad0426df5f12b8109829ca","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.f705e8048.0.tgz","fileCount":37,"integrity":"sha512-b8r7lkYV2UzCNXg5MVEDJYyOxBQIyFNDVObj0aajcpAqK26hxv1Du9MB63VW5Y9B7mi1G4JXA90+j7vfVG5nrg==","signatures":[{"sig":"MEQCIF1xKmOwHzOuYg8pVR5WQSW7duyn5jUSOcfiTfS9VocHAiAoJBALEqU4UNE3saKOShvoaqC0esnSMUWq7ISWfta84Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLsbCRA9TVsSAnZWagAAgTsP/2arvjNTXV27gduMRDP3\neWATjQ4kjGC9LS6fcS3L1wXV2H0XjpS/VA6q9gsXpaUo9puH1Qyl79TMBo/O\nfUnm4TNGrYUkjCZD5m6YCb0jo39TQc3rDVOmqC7sfFMHI1yTK/3fiSXI+Lt0\nXCez+XPN/0dEdyrYtFw4qK6FsZ21uGiMWJpPxm9XlXiUSYLbVNsnEjXFl6ee\nTqaUW5at10v5KwCJcXIIwExIJilSeeNjPfRM+r9Cfu2qtAdfWQME5E/klF0M\nKZ/Bh9INizB34kxuMsjP0+kJTGXuT0RtfjpheJK+swKZsGt7dexEt8kYWTmO\n6UUqI0pzqKTHS2/mYpjIPF6uHxThC75hkEHkfeSzCbMmQ3Fi4TxXxk4ilsoq\nmrBKcdDqLaZN1X1WPP+V0diGto6n8swLNsgfY6t63m4nL5CIWLHURHq33dVS\ngI8GUNb3oElpZBAy2JQaV4sJHUThnXo/hDuid1yjSAwRmu0hR5mEaJJZ9VFF\n3TE4TjJLDirvLVfqNwzNJ1I/m36qlcvhaxypZIJjmpa3EBCwuSq79mUIuJyP\nm6fOJ5Ffx0EZYN7J6KDngpSP2mGUMx1uz6GDUSMHKEwUxWdILRFLfu46k3c0\nd1+kA+/ow/PCqquN4SxrY70rCH+/mH6H6ccImA52tSHXlln920Fdku7P+/e7\nAdND\r\n=c2fn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/density":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/tab-scroller":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.f705e8048.0_1624029979015_0.356104365153165","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/tab-bar","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e81db12a69ed67850d0fde90be25547082415ae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.08d791f37.0.tgz","fileCount":37,"integrity":"sha512-KsoG8eqKGAy3UjSvxHeccQbj6MzcLajp1DuLjDdb73PJL0lYrFQPgrwnGbe+yqbLg2XI7KTxC1b8wrfz3aGlWA==","signatures":[{"sig":"MEYCIQD1BwWFTqM5eK3N2N0Tju2aiRLaBr62Gz9xK+rLyO6o+AIhANZDjDQDa9pouwTYJi+khhsZ8rRGufVOC8XAFrdRi7zh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQx0CRA9TVsSAnZWagAAGesP/05+PzfFjnDM0JSKj13e\nEEJVrM3Vvf6u59aB7wTR36i8z3JO5E8N8qYHjAqJdk9ND+ZVhFBlUi3NVQoC\nikOnak6YOBINHzegE2VfPyGefXcyZjlD14j4UHMp7UhrXhSR96AVYU5HN1gd\nRcMmvZfBdaxhAR7YDCL9ZY0EPTuWt0G6MG+rutMbb7CBBerYhKgR19D7WWwA\n8Gbl6aTyaZwGtuEOjmSGfWy9MzN/GqN6+qwh18mcSBS08FyCOU06wNRV61K/\nVRlGPfnb0gPvB2l3dH7u+lNp1dIf8svsdqjdIcx9GS20SXlJSTguoCsfNeTM\n5lLL5vxNT49TDIcDuBGGA8g7RxFX5FWj0lBTQBJtAH6M0YLDNCJ9YutXKV7k\nnnLZLSjvZLnkQo6tLyjFbmFSMUFGzQceANmduPjg9Or0bGw9OevioUCEsAps\nOA874duiP8imzDQQkF/xk2k7FCTfPfePxIrYQ7ywMTeQ1nQZfu5gmof4fs69\newukU7mlHBQHXiapSI1D4E5Nfu0vlQzfv4H5bd0rjSx7kOgKpI+8pf0qRkP4\n+HzAYPbOfgXfIkk6OBgTWrT/aCjr6/LW+UQmhVd8SlP4tSLFfAKylekof/MQ\naz4kV+Y6HUN4KrDQyi3HADcGM88QibLBbWsLs1I1VHcVBqVLTYKWY7Gcu7/J\n6dp8\r\n=VcK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/density":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/tab-scroller":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.08d791f37.0_1624050803681_0.3377894455875492","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f277deb96f36e580600352962118c9bfa1f8ec3f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e38d7440f.0.tgz","fileCount":38,"integrity":"sha512-zqBJ33Uf6L70ysOy5Y1R/fDQb+cDuzBeuo7s+4s01Zlv+XjJvRXHtJCslxIBXkY0FCmQN19Gd9XPvCuVyTfYGg==","signatures":[{"sig":"MEQCIFSevEwgTO3Uc1ouOg0ZTy3xbWHo4V3Me7d+YVuzfo8rAiAOWEIipSX9g6VgJwM4Bf4KwFUox8Vl/BfhKvKS1G5bSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M95CRA9TVsSAnZWagAAvYQQAIgKodTYo39oKgIQti5V\naH/ObRFrs70y62ynno1A+2eZGRtnCxdgZM6NKIHX07GYBXNlsWHKPy590/Nn\nSZyY09xYnBMtRKxf9/g86ahNJVrsLb/QUbeLegm7fuTypS1gSDXrhon/Z8aq\nR21WTks5hafR8D0QwPyssLedwPrytbqjJ5QQcbxRwAmE9/PfLlSYAquP9Hsi\nHzCMeVIo7ehbG0cVQqiyURmd4nY5AhYMvPV99C/Ng2vVjxPpji8B3YznAxyy\n/1d+9D3K8+1DqlW+ammEw5y1724NnWqLC2S3iRwafpTWHV+oM/pmHqhLlfm4\nxCPeCw0KJk08NzPHzE8NArKmbHx3fPHbJBMm3oJqGaFHPJSfCHwx6fKhE4S+\nK3Bb9xNzGAz/WLPaRqBtl2PmgM9XdEwzFNYuvGfF5rBSHZ8R2wRrQKSwIdLF\nYDJ6CnbSeKvf5EBkCMvi0+omtzq7g7/PmuE9Qvwg9bJJ+zgJs74sWU5Uk4vB\n2gfWsJcR700lUM92cVaBrC2109rkjQFFH6Roh/lhA8Fx0su/I0LDY7cZgT7O\n9Tp13DSY/a3kCm0wYctGCteiki13qejqVaEFMHdTlNb68XaMMMVL75PIEbQz\nKVPr8R8uK5cLgDP4Us99TBqptQmIS4+ILqc06fvpFlFqKWa/0MCAAlLZDcue\nfh6H\r\n=B4hE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/density":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/tab-scroller":"12.0.0-canary.e38d7440f.0","@material/tab-indicator":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e38d7440f.0_1624297336819_0.7245934946326029","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9defa582ab2c9d04c5673f89271c70b61e75ca96","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.75900a5a9.0.tgz","fileCount":38,"integrity":"sha512-DLBR8LhihMxEG9MtpsGDin6y+3e0p8sQPJiRSTNrKW8NMcJr5ecuO5WOXHGasCDBOTRlHRhr2aGOzw29zwUSuA==","signatures":[{"sig":"MEUCICo/owdcVaypWlHu+otM8TTakmX6pdCKfkj9RDfY5yJlAiEArrC6VAfSHFUKS8UX9WE1OieHly1Zczq+1oHB09UMeD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Ny4CRA9TVsSAnZWagAADhwP/3Dnf+zhHAjpT9D6E+g9\nQXd8oki9S51O7LZ5bepgvk86kXtmeQSAeYGWa/ZZrSrSjV8QRU7wrwgOPqwL\n2DniLgmSfTELtYlTACkFXkD5vJAYTiwD4ZU3kz8Xk+YUKYbUAXQCsxoLKk24\nBNb6e0cs1EQS1xKDBkawXsxnZpmVv2vu3xoyMeXSKbN9bF6vFBAfH9lkhGV7\nP8foRQPcNYHV/oi4rHgOb2YeTFPH+bdVWQePI/2Eg5O1xZuOVaUqI1DBeVSV\nmoED1pOu8TSBlcZ6fBcBVPOjOGzOAxfpUnpfbl/J2slL/VITKqyHqxbz8tnO\nkpgkM+my4krrsy5JXAF+MldHktkpPsLQp6KR2OLXOsUqRqi0OIzrfyYJbdBz\nv5uLCjSpPOqKHgfPeEbxj5TaYBAzHgU1Q/QUNYUQLKJlIO9L795qfzgbPYT/\nHFNbTtmgmDFHd5q9VNDW/jaPlzyMCAyWuSdMz2qd5V3rRdvMSARd+0ryTo6v\n/fSX3VU7ebHAlla6fmK9PDOMF1VRJ/xi3sU2sbDN3B4/3krhdB1R0tDO0z7B\nYg64XtpjCbjhvAzmDv8/01SRMsPoCZ/CRxdjckpPP5z7qVKB4WYXLPyASnQH\nwjL8zoEaPkZbhwsj+1oPz3s09n3/twPU3ysOfBZRI+CUUrkOkeV4EYp09CkL\n8K8s\r\n=DDIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/density":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/tab-scroller":"12.0.0-canary.75900a5a9.0","@material/tab-indicator":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.75900a5a9.0_1624300728361_0.23887568688750038","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c939f3cc2a65a409012bd92113bcc84d50ef4e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.33e6f50e9.0.tgz","fileCount":38,"integrity":"sha512-cIXXNkFXi3aC3orcp0gWrBzjKseIMCTSbMqgnJ6mWoGPBSUhrrsUQSwPkDdqTClOM54Le9OT8VXAJotp/5+HXA==","signatures":[{"sig":"MEUCIQDVVvx3On1o6uC2vYhbykT7UT0S5q5hya+uSyM2qwhV/gIgSoElbXZ5vTi2B2U9ffwTjE6QW64GaUQjvjEbd+TPG6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0ny7CRA9TVsSAnZWagAAG0sP/1nusjoLQm0eL4cnQvcJ\nNRx0EZ+DVLggeE+v0h759pQ15re2G9DImktW0nrOjpGV/b6/NC6tIqY+TYWM\nzFzDhKPvEQrEP2WtihDlat3uwvg0CGM+ZtFJftym6VvcboftwUcGAVVWO+CD\njqs0LISDVeYsAJSrGEb4vU94s8P9v6pKS8XHKLqmyV0LLR7ws7h2C1LCkBql\nLo0hCazehUdgEijOw7oi2G07Yh29Y7xW/TY2iOWbS3f91/ljArmaCt/Otkrk\n4xmdxl4CIlxvwtDA0M3LhPtFdH3uQuOn46WCT6L9y1KgEM7jdRiqK76lyorQ\nDpDfyhSb1EhgtoT/+y9V71gVuSFn6C+FzOFvVg5ScH4b88GVaFevulNndtjX\nJJTWumcNZFmHwFFnUnlzbDLRMWETHS6hvVu2woVuO1RokAqxaZOOEczioD+S\nQpEeh184nnW7ogvsxE1/KPXdtJCBa2goYdX/AXO+kx0bonJJJ4JXVFe+Z418\nu0xBh6naHFlGKRZakUlyj8LemBskV5wwaJMeRAn6Y/wNqWpAi4v8R/7uoKqE\nXn0XQ2aQh3GPW3TIEsOUegYlJBENICag/Bw5ELS0fJkF8azA7Ug+6VPUGSql\nHpERGUFBzDDqUBG1chr+3mLc88JblG6FHpGaUrc3QDHInGdEX+sdJgrpw/zz\nswSm\r\n=kIvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/density":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/tab-scroller":"12.0.0-canary.33e6f50e9.0","@material/tab-indicator":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.33e6f50e9.0_1624407226692_0.39885435999047103","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef2cbec0c509b8714e3db2b714a35177ca5d875","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8c685301d.0.tgz","fileCount":38,"integrity":"sha512-ZrrAJ4nqbNK9mRcvRura4q9CupFDeCQ3RAYuSAh1OnzQqQyNIOYQ11I+UdOhRa72WiEABKt+PvT9r2xCDqY4Vg==","signatures":[{"sig":"MEUCICyzqdQxtopfn4MEa6zPEneqHWTMi1qJqEoTNlV0rTQLAiEA91Dzq3WNUQh9zGy9DlkbEdUrfSHQFVKK1P5TpvK8wLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03zLCRA9TVsSAnZWagAAElgP/jj2uKxSLI3uiMhDo0Z3\n+eLjYLD0qgrtDpGcaeypwEI3i+8HFYNnq/aTh131V/UGpciPAT0OsYLUwBF0\nUgDlVyBRS3JByMCI4dthKl9OjXXUeZ8FRTvWSmXFgR0UW+Zg0JBlLQ3ktmnR\nDRcY85xHfU1QHPaqPz5L6EG5gzIPW7plwdlkld2jfIlkHvqXjjMmjKv5/xec\n2P6sRsUTVkcYgl8r9z0wa5QdW5deGNCUoz4OFBwJ13dR0LV0mped7k94hDGy\ninq6POKNfDc224tWHxXnUxr+qpkxvDtul0HZNZmLOvzliaNR918Mp5kLSUTz\nEilWVUVtp+pdhKAAPNrujvNvgxPZ4BTc2i5DTVqNZTVw9AbNdN6FPNZOI8s0\nBfgXpOfO+IB/AMA3ycuzOxhceFDfEM6S6+mZI2/lc67Z0tk5es/kW6MZ4s4Z\niOL4pgxhNc3A8CJ6fSeGaCylOYT+JOmPP7o+Cm8/4lJuN+u4F/CDWh2N5Vt9\nyQkgjBwErWcg0ETD5EmWhBLm0+1qd8IExNTiutZaF+5mSoo4quX2WHm2d3iv\nhd0pO9+yf18kaCKtdMQZeKKC7pG5hwZymFEudfTMLe9LXDhI3cee3uCfqgCg\n72UvaM9eWt5XjiP/TLeyGvWLX/gc3TC+YUx/fFEVyzmf+lWunrL0krcnF1MR\nbr1Q\r\n=Ou68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/density":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/tab-scroller":"12.0.0-canary.8c685301d.0","@material/tab-indicator":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8c685301d.0_1624472778118_0.9406411028505142","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/tab-bar","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f55a0777ec98ac3eeb8d9e4791d95ee66aed8b87","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.8c7d994ae.0.tgz","fileCount":38,"integrity":"sha512-IaaDG2At+yeTgkpRRehYDgbZ3FNwljdi3d2f54cmTwjy9NEE6DGPCrCeknNj+SZFeTE0DLWWf9/nU2XNy0QNiQ==","signatures":[{"sig":"MEUCIDLX3oKG3UMiTahURPM5A7AjCk7bFsSLAnQrYBXIYST+AiEAzpP2VI9Pn+drTeXZaLESn3+Ql5Q/MRDH5mKy1duogKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04uFCRA9TVsSAnZWagAA118QAIAjvKEDRRQyo0vzcTXN\nkNp1MLTJChz2BNtkb9JOZVzsYLK7CdtnfftaSZJjg+0Loehi1Ld2Dh6jRiMi\n5e3NNyzY+6DqA3GVqaWFOt66oGezVl7Z/oWr1DK/4cpazmhUQHKqpFr/BXw5\nrIssEXAKjtENeB91xFb6QAlSplI+q/ib0qb6WqQtljqwYBQwr0X/1zsRM0Wo\nrRb5Nb2ZS7LRrnKjYKFgcQSbjVcGBDgvo9VonNBCyOas6HlfU2hnWdQXv31Z\nHwDicn962Cp1Ul4KWvK9psfeAfwzf0Z+8mcKHCZeRvE580sgXXq4ncR9lufI\ndZlZxQ3EelHzmg5KPh2PuLhXdyPAHOyruvzk0IJ3BS+UKYT7DxupyKV0AbCz\nxGTrsUIqq36sic37FguLXzFl/1mJX4LfvUvvjxjBK+wTS0FO2ch8jDHqEOLF\nUMvH+FiGmguIwYy4DWc+zk3FlMYI7hV1iMOLsEFMPEqAfJh0fYlr77yDAaqe\n3/SqgxeprQ0qx20QGZgbBx7sZX3lQ2hMQkylmQfW3/x17Mh8mOXx+7XHwX7x\nWRkdiuckgk77/+RqWgC5eROSh8YCmg+WpN1nX7SBFho8VvuNVNgLcijJ7JO/\nQGu6HjhxPfvRMbu8Bj6AQyj9D4bQuV/LEWcWrm+W6bRagkPYqnCYXW+2PlDi\n+FvR\r\n=Rv8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/density":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/tab-scroller":"12.0.0-canary.8c7d994ae.0","@material/tab-indicator":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.8c7d994ae.0_1624476549035_0.13663927161434897","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c8842026fc6dee3d2bf8e8f1cffadff6815f212","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":38,"integrity":"sha512-9DyGZh3jRp17F61CeEyDgbLoYNK9k+5ED0eLAwVvFS1APhxZA+x22MhmGQQAVxi993SnsQt29LHmOaBzMa5NgQ==","signatures":[{"sig":"MEUCIQCRHPRpjFRb1bTdOzJ3BRJs0jM+RUaGITJ39d0DEKRfugIgKcjVk4W/z1ceuJy2hGNdANqgrDrG9RzTSDounN8nQMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/sCRA9TVsSAnZWagAAPyUQAKNdcb3/0ptdpxXgHtg7\n0uZXcmidbwe2ngx8hGlS5qEwN1958wq08v9zcsZni8iZCpyoXHtuFvYeGxU9\naEjGBqZdxSXRKVKtVOyKZqPB1TWweCl5sk1btxheSAhKWfNfM7jHKQDmi1ou\nv7lDgoj3nSLeLwdlZPVk1wH4KEYlM64uXOUkZHSPi16/Uo9aBdHe9eUW+sV6\nouLiWqL3O0crVf6iecHGtb4HIsGTSL7zaoUFSRmKE7fshiZ644f2RtRm6yZU\n9aIHpfV3tmWpVWcK+6oNcrFy4QJT8OJTyg6jRe54Vcjq5XlvlPjMVoCloMaT\nG9sxa8AfrEHga6Bo5uxjWsXfh8IKhPS494jnnydoIpyGWZYsage+h1rFT2vn\nWVGdjY058Xd0+TamRU13IjKt8uRicCs09zBAWfmDsnbuJCTBEhvH5MXL8DE5\nzvFZSr2lpjPfkliIOb2CqJ3HvSQWWLJmR7JRoUkqgue/hAuGn+GKGdZOOZXO\ncUjZq0yUpNUyRgK/PXCmNXMiLxZKpLrIW1/YNLuzf2fJumMWYfPSr/BYPR5g\nxuu7bjbvTsdNdP+39bKiDAR9zsbUHRoXaYaxcMQhPDQwBjicXjjo6iQiAiyV\n0xxl8lYzt+HWNs7IfqNGcQY6V2Rqpv5QrtZipz+hFEIyZYYLHEt4/oVu218s\nYuTb\r\n=8Kxl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/density":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/tab-scroller":"12.0.0-canary.4ccd39bdd.0","@material/tab-indicator":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4ccd39bdd.0_1624551404111_0.7825086279740068","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/tab-bar","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e03a4cd6a28f1207818b9cec82a9572280d8c311","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.17553e9f8.0.tgz","fileCount":38,"integrity":"sha512-AUUw3RPlTDXCjMFuMo+q0KrZ7MIxUGVjHQ0C8USJpMOPExi6OIPPXftiZmco4Fo5C13O0+bGmG7Ls1FfGDGl6Q==","signatures":[{"sig":"MEUCIQDECllTcX+sqOtvms+uEJrN4NnnGHUf4kefHhVUtlbCUgIgZkVbydzKchQOErRgMaxLT3CjoLUZymema+i0EtlKmBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lMWCRA9TVsSAnZWagAAA7YQAJofgboMxV8ir+g97EKZ\nLvBnPgJ2K/yXyBXrrpOQkiO84wusyt8UZiNk061AW6ipP1w7WujSPjY6lu4t\nECHBqLO6wFWLgqh2cwNHBPieneHjcSsdrADrpIt+n8h7ApCKwm90cfdYSmJ+\nF9yWJiZIElXmmD8oYY86dJYdNa29h1yLSyLJf4moLtGVoXekX28KhFMPlTU0\n+SrcaU/kuqg8iRYMek3m16i5NdG+wULYB/jcsPsH9M1V2HApGFITltrSM5Ws\n0f7igzL+GtlWRlOa5tqIkEtKNrFeGIMy8HRSmBEzIioQ7QTzb4IDLBYndNKi\nSwdg07YiwQ2rFQ8DeNbXR8Kw6O25GER+cscOkSY8cDrMAoZL9nXcLjkNrhV8\nx6ENTDGfvS94dSMxatcLa6HwLBfGvYbAmW85YchtxO7NkVO/uYAc/L5a/A+T\nR7WZPHakhtsey5z0hQ1KOpz+tzX2/F6Gr3H8GaF27ZOlJf+o3eE4GDJu2jQl\novYqj7/id9Y3rAnL556HL7Ax1qPA7Vi2YPPuj95wVamO218cVviK0GZS6FLN\nyGEIlYo9X9ulDFBTecXRV2v29Da7CgtpuMtwE31OtP2PvDEaT8RRCm+rGsQH\nbRCqbmwJxaYpM2aWISltI7UP0aU/aFT6k4akHCYWb2pXatI3xesujpfXpe4U\ngOe1\r\n=vD2S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/density":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/tab-scroller":"12.0.0-canary.17553e9f8.0","@material/tab-indicator":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.17553e9f8.0_1624920853837_0.7256923987415511","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e56bea3e203e8a2103ee5790c2dddc2cee20ced3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4c80072fd.0.tgz","fileCount":38,"integrity":"sha512-osOW/HmVyVDssrwDajpfyS05C5rkH8c7+Yw+mTKVq+BCTZqnKvbQqIXSXGZ6LJG/DhJL//Jolt9NHhP02gnZxA==","signatures":[{"sig":"MEUCIQCMg3a5ph/vumL1z19+FQGUTisLdR0pg0VsAtVgMaMrIQIgdaCp6v6594BFhEqZxV7VvZJMeEetK5Fa0Brfn3NYe2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22mdCRA9TVsSAnZWagAAgegP/2ozgYFfg04Fn4Vknx27\nCXdUg7zN56yKWQfWc2Q+NymvwS88QzucfUrOVIDtRzgsKdhCP2gVqHzOqth3\nhHKaNfBRCwgg/+R8HeXYZanWDe81ef04eslxgZgKJZiokA73nGhybqlw6Onn\nxEhj+Ek6FpR2oWUp4W+QV1eiXt59FogLmXJomwSFOhDhQyShdttXVNNFRKYY\ntJVeso+OxVBi5jNm7VyjHZW3CTT9itC4f/Xy497Zo8sTi1aih0zaiz+LRgzR\nBDJq6Eo0rIYCp3sHdR9ieJVhU6n7TppBtcv58Kf4ajE+7cGKBnHpMuRyhaEl\nI1v9JKUhPfcuXEZSk8iltwTzOOm+b6GuQxZWt9o20jOknM1/FiFowMcrhMLP\nnWrnZBTfn+McM2efhAvbt/Dx0fYVEddutjTj7bIRHzU9oW1vaEuQxrHcrtLk\nt/4I5b4J0I68VhszXVU0G8lBMsXhSQNsfcEDXEqZhpN6/JF6BvF0bFmrsVd7\ng6mCdPJM1r/uXdu/MjwqeOc5ZsukOTtBYb4/VCgjBHzIlkaxElNZ1XXDuR3J\nuiBD6MhBx+/i7rnYXhT+UMTcfProMQ+AI1OOZxfRKj3yKx27NiTHuqaXBTJE\nAwF6UI+kmyvuOjb7PAIs3kk8CVTmmXiw7TdhUeHMPJg326GN/CCOQf09NLvD\nFsCt\r\n=QqRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/density":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/tab-scroller":"12.0.0-canary.4c80072fd.0","@material/tab-indicator":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4c80072fd.0_1624992156648_0.5309114975949991","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/tab-bar","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91f2e1699dd283a0cc23f12ed3e3e634aba10bf0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.796811db7.0.tgz","fileCount":38,"integrity":"sha512-LiD7sZwMAMO7oOYxwAqLsaSs0qdU/OSxVuHCskFXUz2MpEgiUVHCJfchEkIBRokfKGw2SC/c1CkQxg/m8Hkl1w==","signatures":[{"sig":"MEYCIQDpwUplCdbnZvj8d4aZoKnftKb8pmlvLaeVlflCS3dF5AIhAKPaIH15nb2EaD035dtZy34ZTzuhPG91D3B7v4blKa6G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Qa3CRA9TVsSAnZWagAAvZUP/1u0+VK/m6iBoGj9ms9V\nvcM0lTyoMlM1sfVuXMmFDlv+85HkoL0h2UnnaNEQjSYjEG+9vMcqFEkISnnM\nfBbeL/+Gy1eP5bZJXkr6wuPnllFjL0Qt4cgHxZDGP6JOIkHV4XK+gU7gloVw\n8f3pJt/yMpLR7T/eB62d8+AGTv29TejzRRFANqsrSszTClXG2OmUH/AJUMMq\nBNoesjQ86xaGqcrTu2GBT00vCES9YPci/nIpa8SKZBNHmliRyIoCe10miuFL\nuppJ7QjkeF4yb4WlvDeokSfdc9CVIQH87Wcsx1UwXJxn9a7efVRmfG7WfWhb\ny6L3Ubh6iDnESEvtWNw+MEBVG5Zo4b9aYN64Fd94TyMvWLQuw85NFSL1OqQg\nJR8fCHZwV4hJgrszgAxA5WKtxnELXZi59T7nfFYyR0CMAtyZIZKQg3y37HtG\nifue7d8VYjiuEpEoiu902AjGjzhHFKMxMF3RAYt8QUlRsfmciVOSagFNa8lp\npZmQ+R44DQ0HNAw1jtmHof78vrzmy8aSB9Mx2FeOBelycnXFdCntafXrTu4o\n5Su2AFUP91aaEWcDPmXtpcN4QAHypOxdEzOzFTJJXdk/4TUd+2x2vKh4csod\ntwLhtuj6vm6zi1Z2JkRq82VjaXo33Qf/f8bLL3ARcBF0fM+ZxT/tPAm96iG/\n2Jo4\r\n=GuOm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/density":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/tab-scroller":"12.0.0-canary.796811db7.0","@material/tab-indicator":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.796811db7.0_1625097910882_0.16563594376040114","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/tab-bar","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"961d58069a5abade29addcb2d5a580d33dab40ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.70e1efdca.0.tgz","fileCount":38,"integrity":"sha512-uov3fvtIILTrxPjNGBnHafza//Mdpg1wYEksy9JBWCa7R+Hkib+GvIltYn3CUbTJ9EyaINmk7BGlsukEOdgFBw==","signatures":[{"sig":"MEQCIDXGOJcqIfUBz62xtdJokJZ6iQ7Grm3h6Mr2w+RCUSryAiBGN3f6U3ioAMrbU8zeDeFqLJanwosiFEhEbnhvHq//CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3faFCRA9TVsSAnZWagAAtj0P/jzYWyYAEBU5LVh1fnKu\n+6XuB1iC5evp0iENx28F3dn2s4spD6SDq77aZDkW07yZfSuatAyVds56/Phw\nAxqKmNi3XXIr+qxzm8JqLyT4k63a3xnzMYx6Ziw/+rY8+YzvlSQcvsxXba7X\nAaCIUCxsrEdlP5rQ57ID/2rtOsjmY2Ky7UrHPqI0zVmqaDB7jWKmNEIJTh7H\nNEYqBzL1dyzQvNXaciA20Zg9Ktxvk84OKJfIxPq9vn4c6AGglOi4h6jeFdip\nTU/O01wH9zVU1fp9pEuJQqcOiUPrnGG0oAjstYnQdaPz6bcOdHuct+JE/ZOA\nZ3eOMEBaKWXjzpPoNij6l4U5grk1LHM2u5p1vgqy98UYDltxYAvzL/yyQH/I\nXoavbhQOWzb3K/2AJ4iFSo9eR+fLdMachmDhw62gCxJ98ZiG1GS5u4NKavbp\nQzF37Mnkg0iIu+THEo0opmK2a3CuqmWuWdD5h4K02yek79/j6P5Lm0KPUoon\n8Z6UWcWvYYxRmwIEhoaqJkyN0zUn2/kOEKkDW4QYsgBzHMGW+5lh/KNf/Q/a\n1KBInI0oGBqC0Rp8Eh0zkxfXBqvBAaWEo0lQXvn33FSpcPV4mx9TFyLzYOBd\nxFtQ15zaXr8hUXbX5DDaUvUioEB7EkRlK9PKuaoXGSaiR1bX5gLkz3O8UbOH\n9i5A\r\n=bAie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/density":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/tab-scroller":"12.0.0-canary.70e1efdca.0","@material/tab-indicator":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.70e1efdca.0_1625159301255_0.28760121238232617","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/tab-bar","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"214b4c82009fe86f6e0f201e40e26783c2e41e1b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.435866d32.0.tgz","fileCount":38,"integrity":"sha512-/yM3Qefxb7KaBlA+F6gdRLL9U0YOsSIBdWctGqzN7RCwvHq1LDEaZa/FlGUkdaGBOYphDHzOy49tSfWFprlT6w==","signatures":[{"sig":"MEUCICUT0KP8enRTdu0/EcXIrHxG9IJ7DLXGyoqhCyJm+N9cAiEAqQuHWESB/4lWabBTGSXOQpwdpEXKrCXhIBw61uV/A7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31l9CRA9TVsSAnZWagAA65AP/15HZTe+Od8RkijD8VB4\n/H7LBlanuOqRO32P5VsCwauZCr9tycUJFur18j7UAJLiTDSfQ5HJv9GFoCDe\nhM9rc3GiU2XVRKdqZeG0VE8WuwLK6qqBlBL0K+9s/CLGhl6fpY8zJGKRztig\n6Kgjm2Je3jz14XIqtjJx852aL+ZVjWIy6NnJ1CVjZ+29YcTDWIu6O39a88Mr\n+iC9KheR0LwUthSLKLMYL5zCffQ5OGqvdxPI8PnJSc5fMIDmSAoFrxrPIGfW\nl8nIeb5UirrpAUHWo9yLR7cH4upc9IIPwDdoY0yawd6HIPniA9/SlAbVE10d\nGoTGkiGNTrffnTz6DWjw7Nx2iTGzN4/fc44FMPP7iVNwnEXZ3IJ5mTBbdnj0\niMBROdgT8IiZ8943950kXQCizuTMg6UNbtqdKg2unlp2u9qvpI26DqjxdoYt\n7FOliJ6fa4zP3yy4KOSq9o/rno6/Jil7m9rBF3V/NioqYHmpI5UUvw/h1Js+\ngFrg7JKoVUZ/aFQ9cdBpwaHuWFXzUNKAgIQAVxmXpatnfNdTw+dGkikX6X0B\n7RssHU7FPJT5LhIHQKCCom1gUPv8F1dL/LUiEi84Qz/f+dsklyNO59XGzfuA\nv31bjEHWFLNjpodZ5eFngiNDSIaqStoCSldXna1SDqFtl8izE6Q4xct/LH5N\n3/3x\r\n=9AFc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/density":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/tab-scroller":"12.0.0-canary.435866d32.0","@material/tab-indicator":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.435866d32.0_1625250173250_0.4967096517898901","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e4982d090338a5a343409536ebcd4d05351942","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":38,"integrity":"sha512-louxQuLUxKvUWzh4O+dFBOEBychDDD09a8RcfCo4oXxT95P5JgR506iezHj6uU1a72R72W8kV2JdaNPysrMuVA==","signatures":[{"sig":"MEUCIHMWA8Je3wzqosQ/KPByvan5dtJhK8vr6WYcW7EoncujAiEAuXX+TA9GVdp5fLyQRtYWcCtit2XTvOnaVdXVSZML5vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jrCRA9TVsSAnZWagAAeL0P+gIpdsP+gxBPkmP26uTp\nJM04Ut7rFybTSoLKcZpWOlkW33d4JZJuglbfGnBibPI6RGvPJHf1JQjOSkY9\nAPXnZGFwgmHzBvA7ez9R6AE1eUDD/L+R9HZJlZUmpfbX7mqRkXOObBVxla90\nsZPJk4mYZ3u9IVAdzMQcHbAblWkUWmaX+x9IsdlIBIidJnKHHWuqNLbUMM+m\nm4K0TIRw26MsJNi893RM79Hf3UD6ys2tTd9eR+ICeFkr9jOrSbB9onSFHZhw\nWbzXCVijR/f9NKfBx1hOsPbEsHXBUHLG0t83U7LC9BwZjQahWBl6V4wNvhu1\nEUFR0qnLz20RrVC6sWUfipy41eCIp95V6T1gQBQtVkWjkeE4cI2zPgJg/aG9\ntH0ofKkZRZE40hLrb8E3Ss9yu/r0ml7YzCZC5dvXk8ZwCgYhwkWObN9H5zfA\n5UiDBt+Ajp4J1e1aIFLPfsPHb2oJVKa1VjVwW8+VZTMxVvc2K/DqitXhPJY0\nE02WeKJ4/dcq/jsBW/wMWhVURM0ebIu5pgLBHde4GVdYnUN6FRMv4G7VSAIq\njwYnplUtxympjL1Cna8ea8mXNr05yQXThklhbBsDxqVrL3/BIZCwEJZlEoWR\nEaBdyG3KyDI0AXJOupODn/N7pXtxXXXI7xVPVy3acEH1e2ZsgxPhzhBdYsB7\ntvJw\r\n=i7Fu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/density":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/tab-scroller":"12.0.0-canary.d0f9f3f2e.0","@material/tab-indicator":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d0f9f3f2e.0_1625270507396_0.01564364854828515","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/tab-bar","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c1dee708896b4c93581404dbb169f64049d5e15","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.adeac0549.0.tgz","fileCount":38,"integrity":"sha512-wdgJALJ7a9lmSUnmNG/QYIngOuVnDojsBmtHrSxTdk3pkz4Ryvzhct388tB0EEXr9tSDkd71RwOxc4rCcWmc/w==","signatures":[{"sig":"MEUCIQD4rTkN21CAHM7f11UWHnYz3d9gbKogMQAbeV15H4vLkwIgHsiNN6FiqPFEtOxrhUFgEYY1ErpX1vHmgoY69/3L5VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xWpCRA9TVsSAnZWagAACI0P/R6jLBWF1OM30hX1rqGj\ng88VECxZ/QDY/Qz1dLV4vRVtJMATjNGK6FEzkqtr7XcRUIb1HdSfpNvHDiEC\n5NU6v1Pl8PM6dWHSYDqIgaAk+M95Xkf693+ru2JEbLoycdlXE0OexW9dcdd7\nxmdHQeGt/iW05cHa037xHdJBetN7uPfj0XlPfJ+oNuQKC0XkMh78Dhr7WUVk\nCh2CG8xlJwOW3Q5+8YE2L1Myeg/+jt24gse9dWrqjXtoRYp5zG//s953cN2R\nG9QQo5aa+FA62FiiqI7fcVi37Uuz3fMFhQx/+wkFgzkcPovrc4TOd+itwSnb\nVet23uZ952xMDl9nqWGl3PgpYIhU24dNWMDBl3dQHG/5eT6oGB7mx1A2c2/3\nH61x9LltFtbhv2lFPoUXtVZrusWTVBe7jGFj3x/9Gy9zVV+XeDLeU4DqlQtW\nvS/u/KxVZdkwub0OirNzl1RnveLhCzGBWbkYSH63M7w07zzzZKFdL2EjRG0w\nda8lMR3h8tlAYALbeh9Sq4gcWRPTiJCRfWHzfKq3lecLdqFW70qptcTXSYxl\nEteIo8c9CulPk6N5aGacmjbmi1YCR6Mu5IfLeQ7UJIHfb8nY0R2FKDsrMv61\nHt6qgP9kdkJxb7QH8/AMf7RVBojMYO6R1QYE5/AkwxWRpnu93t7k86mFcGYf\nQ6jL\r\n=/xQm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/density":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/tab-scroller":"12.0.0-canary.adeac0549.0","@material/tab-indicator":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.adeac0549.0_1625757097478_0.2743905759414498","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/tab-bar","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcfecf26f35a8e7ebcc4220b0bd77abfe00c1bc9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.068fd5028.0.tgz","fileCount":38,"integrity":"sha512-lvFyLPXO1/v3fm/fMVyryMDug7GOWyLF07Vb1KhHbXy5jlLYpz4wKw5GbXl6/qdPFqBKXtqC4K22BsU43XX3Ww==","signatures":[{"sig":"MEQCIFAhPWRoDlM+kVg27W3MrH51EmgHu063elY1bz0tzY8zAiBTdIKv9+VsgCxWEJCS2rzuRGiIrzNkq8MS46Vq1SnyJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50x9CRA9TVsSAnZWagAAQh0P/Rix89kXU8FAwLq/4QxR\nTiO8OxE210bvBMz6v6+rs8ukf47JwHoPgJPZm/g8OhJQw9+C2dNQ6+uHs3NA\nqszBBcZaRYCoDw8O/qEPzOb1slQw8KaNxrdrPCfhdLbeFeAsFQz9T7aZ39cn\npqs9XINM1N26yxCTJRw4+NBA/UBHmO/CSu5Gvk8oA2L4N32FY2gqjUvGTcaA\nDAjXteTDu+ZeFWW+Ni0Pw1sYvXf5Q6GCXqb6JoVVi2FJu0pXjMIX5fJiINtz\nX/+r5uGFr7w7zZi/tt48nhm39emSLU4ZyfbSq6sAGOvJd/UtC3RLjnl5lfHx\nZ1Nn0P43yVzr7i4aIgMeLhxNlr1LbZzOIhQdNRva30F8444IxrZZzUdePwTq\nfIxGSLY6OkvpidsyAXD36FCXO9aVLJxnDYuIOap4huXH43NwmT23USovSs9C\nqRhENl07DglwH2/g3/C+5nrpIm/jluqSTVWIxNjDAGfVjlneY5Tb7LepUIqL\ngWkYIjpIa/MhgnPlQwbuS4alcBENBTCdDnWlhauOAzOxpA0sIW43bsDBD6kx\nJnxGYhvBj8a/dx3fj+ORkSFk6hX9zqxoNOZ9cH2jHjrqMsqmSFwFh5Wf7RNA\nXR5xfmg3VCRboRliehOFmdEq12JnzzyhP+bt0m2M63sxYu26akuo5LIvO4Yw\nAD/j\r\n=g7Dn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/density":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/tab-scroller":"12.0.0-canary.068fd5028.0","@material/tab-indicator":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.068fd5028.0_1625771132838_0.704887338344131","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22159290c5dbd1ac7c8d3ee061c9e94b3dfe8650","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5dfec7a14.0.tgz","fileCount":38,"integrity":"sha512-m4rxdQaERuFDxmv7AgjsG0oVzjkHOL40dDCdih8AaW3JDX6S+gVMjTrwDUXw3w5CgDy33V/tqx7Iz0HVx/Srgw==","signatures":[{"sig":"MEYCIQDGpRz0P9eSEGTAGi9gCLKVZUGc6QiUhB/BnQIEC9nQMgIhAPhXkhyoGN+EAQoye67uVMUZfjnDOdqhUXUkW1hjNqnH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCgCRA9TVsSAnZWagAAwXIP/ipSNXpiTvXz5o7LY79I\nzveY7AQkIi68JK3k9iOruhHuOfoxEiKE0T/ja/NPUIQt6hKrGr5Td1sg8OUM\nhZnc1cAHfGd8M1k5pZBOomDkNX7PUV4cIoVNoBqIelRgojczPtk/ZWFdP2Jq\nEqtkwimjxfmJ29DF9jsUL5ydE/TfwLtIaiejnty6scXHPwhWV4YNxlvlro+F\nJlSBrW+jDM8ZwChdYPQybQaRiCfAxSz18eczNzAWp6AXaCEARSLcDixbYSdb\nZJlWJ0kWoTTootrHIwT70OQh3T+DkxKSLhsz6zS3KCtwFckgtHwXoZO4ZCbx\nmriKH8nZyBu5xZdlCjA55JxriLTG8HQB7o9O4LrD8RkQ+CXu5kdtB0Kf0f+h\niObVDZHtUo31w6uEMa5G/RzApWojbjmL7PwRpV4oPE69Y5t1syhF+qiPb6dA\nJje5kH4fWB4LKBtfLow0+452dHsGz/RooCPTvucqdEvHnrenjfFlOlv332YS\nCmDvHMlXZuyDMs9gr0MUUdMACOk6AEijbYwjPUPzfgdnSSHSKok6Z1X2ONeZ\nEow8nbMCMtO/nmQ7uMvEUWorRhNY4RAtiB8kdcCLdDZwjFzBCjLHW6t4xLZz\nWvlQN5a6j5JScU3s9cPa0ohyjO8GIuFGraRZtRPlhrv+AeHzsVpV2xr0EaVr\nk/g0\r\n=W64f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/density":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/tab-scroller":"12.0.0-canary.5dfec7a14.0","@material/tab-indicator":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5dfec7a14.0_1626120351562_0.8627573317802761","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/tab-bar","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48bc4c5d6c96074261585e065479a01e628640ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.07a73750c.0.tgz","fileCount":38,"integrity":"sha512-w0egB9yMXe5t3xt3Xr1hpU6NbyYFL39nFE6I0qgtCfDFKbsNqtQteo0qv3w2BGmHpiQTOgIz82MIG9FPDr03kg==","signatures":[{"sig":"MEQCIBfEoGnfwPGQoMq1RNVUBUpTTtNKdb7vpWuIWDSQgSa0AiAylqSNTr16zz8gz+IQrPIGe3esVauxvIntnStz4/jIPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWfCRA9TVsSAnZWagAAp8kQAJIUTmtk/k3kY8/4XUe7\ntacXLMuMecbR/1j8YW6tENU1HKkvSzHLbHDGfsu1MyMiCosyHSxEv+zYdyZp\nmgsXGYVZF/wqyQa0JzOeStDj3P3TzXu7sUOyAZUbmP6hEcFieYVhZblMjJ7y\nv4yv9FVeFzn2Bd0j6q4Oak+2V78oZQNERBUCQlqfXT4veDZsxBs91pbQc025\nzeV2WbYyUup5h4psP/m4wxfrpDnsWSjoEZo+IFOrFQuCG++a5j63gHZpvcBw\nrswWRL7lZINTGRzrozMdwkK/XTxtLwvVZoEuOYC4FO8Xf1Lr6CunCAnRWeGr\nBbkmcEt/tMlwCTpz85Raic+weKRApnrKMMsW/de/0gFVlVdUTl6cPUG94CUh\nfR/RRuIx7puM9Ie1Fymt/qshDku2ayj2kmiqHCt9UjFPNruXEeIr+/HlUbe9\nw1L07YowA6SVumSfIE7Yo4yDQ0WAaVak8fnJQ35DvlzFW12CYapAE67UKMK2\nOEsChi/1U4yE0J5zOS2MpwE0xD1NRdDNkikC6BWnUwKjbuw5l4k/lOK2zGA4\nPHhTXX4b4QdT9whZ0JGwn3edyhaCbGt6S6RJZVPfR8/YvDyK2WxfBQjMaZ5+\noyh4wxjjB83ERo6ubn1SOzvZcZauZIQd9mLkYOX2UyHDz/3A8FwYeN04sNGc\n0Ujc\r\n=XQcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/density":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/tab-scroller":"12.0.0-canary.07a73750c.0","@material/tab-indicator":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.07a73750c.0_1626121630585_0.12722455143527744","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/tab-bar","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6fb8efe1ad0eb152ed1a9d5ee8af38755fe06a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":38,"integrity":"sha512-Iwz+zHobkGdNRhksy33tIUnu8wHoW7JX+wBExwRiCwCqHmF/M7x/Zo2yzn2KjhXp+7fLoi9PxIC9F3ku6f9dJA==","signatures":[{"sig":"MEQCIGEvUqttQ4fnrxpXbSmXgdPq/nX4kN+pFmQCxd1S3w/QAiACfTKjyUCc3QXho6DL2cK23YFvttlEj2MJ/vrbkCeHMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PIECRA9TVsSAnZWagAAJXAP/RJuJ0u+nezZvb+hhMOk\nOTDW8cmMnZv8KpKf4LpwaB3m8XDOZdAg6whrNA5EQbHfBc4pTQIn29KmVHbH\n2LwsBxdWhiI/1vVRwg/h3RD7JyRLzdMgJSjIyCXFgnMe9YGZblDniUjFUPQw\nTsuXXT1Xz1ot3LkjrHmD5gXbvKaLvLnnxNM8Hg9usgqBTovbSCDZ6m8Qi046\nzv0KhGqR/0LVMJ2x0bNTzAnvhS0Syof0ngk/OfZK5M075E3xf+iNVeTjyCQB\npw5AaCR61v0p1o9JYDfS0NLgQJAPWk0kzsZJ8H6GwnVaM9aU5QvUCoHbIlLy\nxsqx/hqOuGz+CpriLxG5ASDG8NvoRGXBK9nUjGSuyku0a/fvBrGFNof5ZTok\n79oZI6gTnPPGv1iFqcw4U/CFzeTLe1VUhTfQX72PpUF3EZceyJiSVnicgo+w\nNKD9biNXqkNMjcyt9TSE2MV6IQY6nQ+Cfx4sm+3o47S8LjSQvG2N4MxH0NHf\n9cfr2BRegS/1GZjj93lUm7ubJgkyd+L/XOzZBgpK8SB8WLu3gzVaB+xXmpkM\nCqgeDBksgGDAqhh7G9gFNh5L17vWiSSb0fg8fpcKqIMTvFte1s7/JsmCc6nH\nFZMyBpd0W/PaGuEhWnJVgEvJ+ns+bfzVOltVTp9GX18RRHM7LjNoTPXctQdG\nWb21\r\n=ADYS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/density":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/tab-scroller":"12.0.0-canary.3e4c6dca1.0","@material/tab-indicator":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.3e4c6dca1.0_1626141187574_0.44996991557510313","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f1663ca507a827beb2de53c3430f81c693a9246","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ea77795b1.0.tgz","fileCount":38,"integrity":"sha512-oBdDFca5lHN60MJtcW6wzqw6znAu2x8rK8xXwNj2qd8Ci4RJMHZQUqmcZ9jlnbFUVz504+8jss7Y8ZxEBfs+5A==","signatures":[{"sig":"MEUCIQCN61JV2KVgCsgGbPlBHsYQeRH5q0OBAQ8jerctn3emWgIgQ/qMZp90KrNXM1IHQfzsPDmVAUigeCg2KBARvmW7eCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZwCRA9TVsSAnZWagAA0VMP/2MQg8FcC2RIjwvDFEHZ\nu8QHSAMhqWnA+NvnOLJCh3B2EEM50aMnaqqwgmHlB315KBAdNLepITyzoJwW\nG6+JZ9lwJTw9N3H7vCIObgPgtZYEBFP1tDqcDZVwbE98//ZNQ0GroiNTMVp6\nfzg4b2HxRjR0mAX0jDGaZQN56rS/w/67ZV1T58zIquYPS/PEucqOL/FVrcIg\nDjg2ufBd0RGp0Km2BgtrajRSZfwDblhqy8uIJERYthWZeBsRHbAThECVLY7c\nR8YH+YrwA1/Kx/LQRYVhU4PTv8lp7JrXXtne+PcBWETJe6JtjFRMnfK1MlaU\nnsZUzFkvF1UT6nXNDHH8ZOW2lJoNQpnY1dIaVunZjnrmIfTWHanHxXcSfEfE\np5fnjvcE6ZN6dymMKraybnnniW0IPoLv4YIHu+Y4NDF+0Cm9Q9eh4FsnIero\nwkvN0g82HRsopVi3T4nFibqq0hngqs+8717HDa0/h/hDuRCb9G2ZOOR4tSuh\nnvd39YKOBBSIA3aykijokyCKLScaOPSz8htZgIcAqBlUr3qxWpDFQb0Av49V\n6ZRNPZkxT8UGHQR4ADVUp6cTMRkTIMR92WZvlBJcdNQCfH9rj6Tdzhv8r4aB\nZ0CoANAiQZl3UGd905hKSonIMgUTnUPJSW9O/FfhK0Ng0jUwR5Av8cVPVO9u\nScWS\r\n=1oql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/density":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/tab-scroller":"12.0.0-canary.ea77795b1.0","@material/tab-indicator":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ea77795b1.0_1626191471703_0.8320760014084132","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/tab-bar","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1644b4c3fa5a0fe691d696c610beedc1bed7ec70","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.15a179fad.0.tgz","fileCount":38,"integrity":"sha512-P2hAhDQn9nNGOScVh87feVZoU/dlOGAD7yNYztsT84ckc6w4MkV9G8nk5uMzsPe+R8PC5Z3BOsjaWqX3Z087GA==","signatures":[{"sig":"MEYCIQCMISrBVWBcS+twmUsB76uto78PB5sViQDBglvgu2a7FwIhANrcs72RCvDZMzIW0AZS1N/uLNXmgaxK/joo6HFNqcgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7ddGCRA9TVsSAnZWagAAy8oP/j71A0ZboglDsLoihL/B\nAuKV1dN1Sl9s4XvnYMuR+L2aKVTt225KOZxzL3jNCo5MOpzl0lmnL175LD/k\nlpkeXlB3Qmf4Aa9w+mnf2sXwve2YDU8lgrUdL1RbzCpakrOOCOx7lODLxrXo\n8DhcwWM12cbxeEaE+LGIlxvv8B2AqUsLRsbHQUuWhFfRZazEfTOjlBCaDwbx\n8BPDGyuNM4cx0uJt+xa+sXYRUNcI4Wo4K4BWxi3nTnHvdkgLAWKzdUTgQ+B7\nngTy4BqmRAvIGQnOZwhcS5vc7gqV0PVpbSWEcB+gdwWvjCslCVLTr/cYypgy\nuO8idC337IY9xOV3bQy8VW4IRetmAI0vUzTGKaUXvWZSZTtoSnEqz/0hqye9\n8COmlhubAJpSLfJ1Xtl7lpuboDK/7BIRMmx9q974ENBDDd22MQf43aCtwU9v\nBFjWKsJu62dQaNVg24eDuNcHCizBvhZMvXcReaDmsnbj1+zmuKp0uwX6YMOG\n9m+sHkW8wntZy/AzpCEVcJiyhsaJEVqOSt0LXiAimHciz2crY7mDLNumXNBv\nbVf282ga76WdhgWpdz6Qb0/+Zpz+V85NWaFWB8Edmi9xtv695Ix/lQkCIUGe\nBD65yMdpnXDa94qIl8pucnli4++CqFjGkrfbzSZRj/Ytxv2+yUXgaW0ZkC/p\nh/hw\r\n=zcqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/density":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/tab-scroller":"12.0.0-canary.15a179fad.0","@material/tab-indicator":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.15a179fad.0_1626199877790_0.2564448397019743","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"730b067ee4e131efd5454c8ae23ba22eaad78b62","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.c73142a1b.0.tgz","fileCount":38,"integrity":"sha512-CG9xQiHuiLC2s49rQ+UAHRlpN9CTOxdeyiyOb/tgXlRXBSZcQSLs2UZvKlmrJ+83r0YmFls4Nml4oo+pSGZc5Q==","signatures":[{"sig":"MEUCIDjS7xhg+L5L/L8T6XzMMd46S4zv7mF2wCSODfo2FuQ2AiEA9Plzk+hAE3cDT/dyJUs5KWnbPpwH4bpEB4m9sbxSUjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9tCRA9TVsSAnZWagAArNIQAKEefH2Bxt6QZ08OGzoS\nN6sUA9hXMzA53bmom62da5vsvoAIR6P8qR7RxV0RtE4twRXTWZH82DXJJD51\n0BJp8xhdGaFGtbmibGP+E5q3aYzkP8YzxBPGLXfodS8don6l/w8h9tpYkhGR\nHvpHe0nvmvte9q6JTRRIVFS0GHO1R5DOPaXnUC1R7zkcNzYIT7cMgMG0QIsN\neHLp+3h1qbSO9EKuWPtjh+mQZIT+YkRWbZ/7Om9Kldhmxhzw67eHvx8X3m9z\nyzgOU44T4GNR4GxTZzyHCqzHVoU7hL/Famb6EOrdSIAOl38EVyImH1L5Aggo\nKbGFPrGW9nfNr6L71KDxpYA2u91R/+uKxEdMnoyJJFysBzpXVZX2clSDeor3\nVkE2GO+Qsg5l71nkTqNzHT8pqcGA+zDQKk6YB9Ym6ylBElTQXLAhUg0nhJqh\n1lu2ENYd1vcVi+lWc/Kz42SS+VL9n1tSfBHy9INtsDCSBbROnTAK//TDLf9o\nkAihGv8l+OfxijeaVBxZ9MvHJOIyt8YZmhFqvcTmpqOHpt7NOtqDzThLSKml\nm527n/zf2iMB0GVnF6iMzUjt+1ApOmTqi9OmIkHbqRmTN8BQ2YQFSEJita1D\nPO4CUmOD1kRdjQz5vIyiAd91hCS+7Zw0irR0VtRoP+5kiHu9G1HKdcdqZ0kf\ni6ww\r\n=rUJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/density":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/tab-scroller":"12.0.0-canary.c73142a1b.0","@material/tab-indicator":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.c73142a1b.0_1626201964811_0.4918776899930801","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe7eaff9c4364a8a7bab67ee429e53121e74482c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d923db73a.0.tgz","fileCount":38,"integrity":"sha512-DIvmVUiM73M3Q09HUA75iLxxjB7GuKaTYXQAUKNNo5gVRNtvWoy67/pLUipNtIi3/IgRWvxrlegvRM9p86cRKw==","signatures":[{"sig":"MEUCIQCFSOQeh9kqtXPLy1EB7L/aUoBy77Ehdf1xnqhI2O4dogIgH1tkFnupDkyvSFy5WPs90YmRi8nbDX0GKXEOILxdYSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f3JCRA9TVsSAnZWagAAkYUP/jd/r5maLvxY/3VmH7yw\ndDdqBFscD9K/lpDQDdfD5x3K98b+n3BHhxlUtxNzVsVJ6765gKCLZDzkGEmH\nFUiZcjxl2CRoSdQjvcHnBBvPTg0R4TNiTpyXc3oFgbTYOvDByUf/D9vr27L/\ntZORijNM1L8PBqFAXjjDLZnzn6FNmKSvnyYcXqZ2RPC84EQ2Q8+kT58LrWWv\nmzPdfmY8bj6bjbStcFugc71X5no4iETbQWYIquMpCDLiREkp1Q/HZCbgmsxe\ntxBFWWpaGZqIHjjMz9XZTL1MPde6aTzZU3Gl0CdSI4Skp9VX/8uWOFuS5S7z\n1LqVcxWhGSry/ps7u8J8ilyCe2KTEN1IFM0lq5ObminQBNvV0IatXDs5VP2X\nIX6+ckDJbCF4Enp7xUTrsfDus0zrw+gRaPx71wXntACQk+qe5e52QbtfK5bu\nx5/GsqMk6/Fq7/kqAbhJK+7dyVxU23T+t/yWlkfKChP3w30AIAvlOWvxTZ2i\nNNS3Sbu5yll2TUmiuEiRScYvUiP9fWPBVvDd7GENZwsqa6jeyTRllIh3G4b0\npgjL1aIZjQXjfRG9tt0bDjSL2nP5SrnjtEtte7zaDZLmkH8NG8zkS5zdHj25\nUCazCq0KXChZBUpPrVZEbdIidAqFlLzslK310UfALP+MykRfNSP/xKb8ESMT\nr7QW\r\n=cVnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/density":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/tab-scroller":"12.0.0-canary.d923db73a.0","@material/tab-indicator":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d923db73a.0_1626209737428_0.5249478909076295","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/tab-bar","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294a67f387e80cccade1700ab15ae79d9faee394","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.22d29cbb4.0.tgz","fileCount":38,"integrity":"sha512-cxGyfONh9tFK2tISHDSAWFfH/uxH/HfTTjuDQIiPkOLmr6oVgGPXP2AdsZ0Z60HJCAedbR9mdWCesEk8w4f8+Q==","signatures":[{"sig":"MEQCIFKmhc0jcVcW4SBRNhUagw/4x/4CI1o6QgdP0OTFP/wIAiBewdM7MY4r7wlhqoVTMrCGohMZI/zsG/9f+2fW2kNk2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkwCRA9TVsSAnZWagAAwJQP/A1BU/Iovpgshyl/YXEZ\n9hftOPlN14OPbSEpisMQhHT8MPrKtPwKQcuFuar08s+4PhEKVnY9ZsjpbJsI\nLwlor60iN+8JKsAiNDbFDNknnOjdjlXjw8dhuT4xEu/X2YO9NFD0C9dH7kNj\nHEnqyfd6jbeGmLlDySyBoPWjOqJVP0HleXkDm9YX53eHO8Ka8vKpqiE7mEDc\n8+JNyc1AtCYIqMgD0VAO6t0VbCIl/45sqX5Ldo0yqoo7M96ZCXogDrO2w7IL\noa/IZJUhnPqqE/YzCR0lL1DEnzML9coN91QlUFlU0Kq258qcZ3ImxSfoNuFK\nEZoKmzXvNgx25Ulq/xl+qDVqdXlaKsgacb/T2RZcuhEwE+AKZiibx4s3iiwQ\n249RFqzw8VLP3n9VPqtwCoMdzrRQywIrZy7Sfcc0O1WUcFUdaSE0uUc2G3pQ\nbL4LNyO9m9lOajQl0pjgelWNZQemQx2XMqq1Wm0PdA70RisKmr+hNITe8Nm+\n2R+MrcW3E2VQPysQVNgDAUUOplA19J8SRj7QyRI57Rby+r3obwtNCbnKL0Fc\npn+PiUTWmlFyo8ZTenPrtOx45eYcUugsbRi8VxbkYFmXeOnzs0OIY0LQEQCQ\n4T2/TWhsTuaeQPPEc8QE2+enyNhk1Y1y1pm3G9+7IVSAiMYcpHs8Gq5nak99\nA+Ax\r\n=3mjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/density":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/tab-scroller":"12.0.0-canary.22d29cbb4.0","@material/tab-indicator":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.22d29cbb4.0_1626216752038_0.8936566258008036","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/tab-bar","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0daa5d89b546d209e1183f5f0d8c82ba02025ae2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.2749604bc.0.tgz","fileCount":38,"integrity":"sha512-GxR0RmmnzyhmchJJP0r737FK8ja3Yc7GcH8qEa3ea/QQnt7+0zCplN6+jQfUi9czMkZJ49jKZQJ8seUyRCMw+g==","signatures":[{"sig":"MEYCIQCoPK6TrkSaZMGj+cXTN0Nv1LduGEOLBC6Hrv/9WkcppAIhAKQBZalpWWPSdSpLOt4eZwwzn6r+z/uDG3sIedrBtJkS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+xCRA9TVsSAnZWagAAslMP/3bm0aqU0TUH4GD4TWZ8\nkOaEepCwWwgouNauSnKclhhzk9OPoREgN3XMQZ9Yc2N43XtpEH9dT8ubea60\nv6VPkT6kyZOVA9N0iDdvms9oup382t4FyY7MRExbiUXouTNbTPFcnz4bS04e\ngwJDxew4Dmx0ZYiunNG9qpPKh2MUbU3CAClp0Lt15ldowF3dMOVPLWsDmCSN\nPvSfXLfISv2AYU+TbF75qaoQFY1wyNMvfvZNmfICGdIBuJHalsRjJejjWalS\nWtPmvMH1zLT+1fLZeiBooP6WkLBF+UGjVcgjcyLQYxkqE2UaRZLIoASU6n+f\nMy7Q9w6Npzrtdr5trIl7yeaBqcmtMnJdKuFnjQhCq/5TddYqEd0JOIP8gUP2\njUs+mcZl6p94N9FXogfNFEE+HoE57tLPtEhwqH4pjC9jiotJ/+YuS3kB8EDY\ntvuqLecxWnFDLm/Lzqikqh1w9tMkkyEryVyZV+L4lqLnitASTjL/qoUO1P+f\nAM2fGNu05PkQ4oQoMxORJ7PCmpc+MYAV31wP6buqmsBn2o3pMd8VQk5jP7V+\n3fUh8fnqqUW4Z4qEFo6pIn9GKNRgHpxqyJA7KkE36skPb/CeNoQ2bEwF/TOs\nVlPxE6rxVfa9m8adT1z/9h9J6Ws5YJkG5OmnxQHdRmWplRjPG3XKTKcVnd81\nljDP\r\n=pmif\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/density":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/tab-scroller":"12.0.0-canary.2749604bc.0","@material/tab-indicator":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.2749604bc.0_1626279857191_0.1926540600302411","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52410227f5253001af837dda2d6f21faa7fc0a65","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.e1703bed9.0.tgz","fileCount":38,"integrity":"sha512-1AbPUMbBv94LoOJ03XqC2IJDA5KGl1zK00xzMcvXmMls/2BkQnDEV1LPw6r6CJ8kfttgJhChzEw6YYrfwEQaHg==","signatures":[{"sig":"MEUCIQC419Y0j4xeplvQJtzpvfd5YFvCPSH0pzKNfaCqFhflIgIgS/5xALtH2HaciI4SupxdV8qLos4B5AQd6ZReptON/UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71wMCRA9TVsSAnZWagAA1TYP/RAngMnRYzJQF5zRNEiC\nP0+mQNt5XB2FVFZrhq0oUZlpCz+L7xMWyDf8NGgfjkzS/tjz8aa0K7lmrMhv\n9gSnx7/f9smepx2pOh8kaXU3P4LGxV5IkIkT6NxEe8Sfi/GLOufq1EymI5dw\ni8QQ0Z6vPEJ/Pgw9W89XzBts5Ay2GnxjfbWfsbbeAHPxjLZ+WKLY5kaJyTN5\nELm7sJ8DnZgmIUCEMuLSHWzATs1RoGyGw32Qvxhug191GCc1bWFcP28PAW2E\nyyN6dPZpM0y/a90585Ud5Wu1YKl5ViL6oMl76PHJMUyV2zayqP4y5aZD8fxE\nZkhrU8TRM8yK2PmYmKQmAaQJrfO6ggIRQQ7p73GTmyY3puIdoijOkt+AnsgZ\nmXQ8AhIPkTYMV6lXHa0SbMJ1AsXBLSgx4SAGSQCjfNTX4YhilMrMlvZRVnXD\nLW2AdDXBhbbOvPaPo57sRmP47JcatbzbLFJubMNjx70zxJd/+1wlyJ4Wv8uH\nyy2RywSB39xQUBlqFaYPyUcYUbS6AGzzAb1fwZuAtOSadYNmixDP5YMFkcyc\nDFriPWxSWOve2MekDxuk9C/xsUDeVoSkRifJ+uZbnhIVk3uCXe8m8EiTS3Lt\n0ud3ENO+JL7+by7TIIwPUzqvQZUTFHeFXpG/GWGxeLRejpq/AEfz9kehKylD\nykvq\r\n=iZSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/density":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/tab-scroller":"12.0.0-canary.e1703bed9.0","@material/tab-indicator":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.e1703bed9.0_1626299403596_0.9227824651663354","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/tab-bar","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f12de3581e1d905ae478ee1f812559c135172742","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.de48eff0d.0.tgz","fileCount":38,"integrity":"sha512-9r3axsEk4JJZZ4o1dh1l5DBj7bfZ/4fjwl8Nes956uQ/IOuKySfkLLi1tVSr6FEwj7ZVc7oix2xRAvgwJiWO6Q==","signatures":[{"sig":"MEUCIBobefWRJxPp0QlBTOkuNpDFwi12A/JmU/m5eAN83w5hAiEAtuGgoclVG8ez/KQxyrSonck6da+CDnxUIsT4M/AUHlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvkCRA9TVsSAnZWagAAXlkP/iF5z8/1RFsCn1sR5rbe\nuWGpu0wtruwiU57OS4Expv1Sm5oQ4OiqhL6YdFsIbzTeQMpEeTY7aq3Iwm+J\n8TiitErwVQ1GNZhswQYaXYf6UEjGOo4ETmDuci9IvooMYnllZMdK6eQPRUSs\nGTM0ikiYX+7i5NSK9mfe5dIbbIFJWnVcqDvH50DYhj9oXkZMF+IyvHNh4lVQ\nYDzvXTEdRPeDIUqv+pV2H4Ez0Almnmge1Uk4yeVJHsS3F1OyOiU+JNuXsNQG\nvaV5FWfpe9I69pUhfwQCGYyxxyeSt77VLSuKg0J3qAFB/vvxT2MHAGOqtRQL\nS77z5p6ucWbLmUajgvc+NVgATWWIf2YFtOFRFjSbxyqsYmO6NHJldBtb0dXr\nEKh0ayoqCVEi+XfzKrJui8yV+Ze8nUPz4Z59Kh8hjeUrjAJ7X1xjTqY062GB\nGzzC1toDaU3SQv/QZ7wwolDy39JX9bWsCQEpkl5Btluuepyth2X2E9s/Q1YP\nRviOEK4lgnjEGjXUw4Y8YAqp8cdFhmuIQ7+KbWrc1q24GAHImptLs4j81Equ\nq3USgVQpNc8dKTRnu86QD82ce1fVA0TRnyNFsxP67Ow6qeSbaazHA9OpZkUw\nk26r3T+sw7ZD3W3eRlW75V3P/alAjNCTqWAhJxr1ICAAGDLT2e+WdsJJIjjP\niQtW\r\n=JkF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/density":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/tab-scroller":"12.0.0-canary.de48eff0d.0","@material/tab-indicator":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.de48eff0d.0_1626368995820_0.9407844421501315","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f119fe37e075e91778f94be216c55dffc242ff7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4f060adc5.0.tgz","fileCount":38,"integrity":"sha512-X0uFW0Ar5B2c9X/nAkxqflGMrf2os3u7ccC2tyVscxZS1EIRkjoOB6/KucIW+j/oRIeFwh/XtpZgMggpFdADWA==","signatures":[{"sig":"MEQCICGxcy9FeLBeZjautvEILzhrjWuAJTSKR3ieHKVA+QflAiA3HwoBOYvfI6WEOtuieoXmSa3EhpxLaP3l7oBrH1szKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Is8CRA9TVsSAnZWagAAUkoP/0RygG6U9DK8k+Ik2wiz\n6zcdqrlGPoXniEFkQ0aI9CO6bPErW/IY+U+luw0kMs5EbBtO6AhWB4lA3AXm\nWGSxj5nMSCzm3Mio6bWaUC02vubjyBz3C9VvfT3JbP3ANXorq5Mohpk0cXhF\n6vIUXU0dB2JP7Zv/eWGtwf8RWhAboZU0t6O0M7EKJsZVcH/NkwCd9EPZZHn4\nxlI4yfLuuv58OWAoK1gefOtE7L49wum1VnRcyBDUfNwbCAuvYjwT9UG21YOg\nYWdDKHSUNqy8+wzD4Q+hU8dM4oTBvd98ABVNlsXFGmGwk7pMbeWfzzAbaxTW\nzyk5fY068EMnE8bF8euB4YeX5PJP+i/RQ+BUzven5/Y/cDK1yhNg8xkfO0T3\nAv7/Y/yRBNHxRK4er/l99oZKA6qm875nsacIdYoZNAaGnQ8YJ8H8xVwZw9Bt\n0e05xUn0gmKy/ZKOiq27UO0Cp1FrLb4UkSms3bwpVxUMNxQ5QlL9Qpdi4c1T\nFkPVmGQHvxvUQ06KaNwayZlYJ6/6RPEGg8+sxvdo1edAExUFmwniqzDZMNk1\nOCynuDBOmDNpFdxlNjD7IaYLZkJ/mtNvfPKJHCv2F2HzkXaOe+BCvIrRGiyM\n0gGjqYuWw1eY+6xhDPhcn3BGeSxF6tNAxAq5ydnZkM9/Qwa305Gf9zOJGe1W\nhMUD\r\n=pq27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/density":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/tab-scroller":"12.0.0-canary.4f060adc5.0","@material/tab-indicator":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4f060adc5.0_1626377020000_0.34871885797734703","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/tab-bar","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad04ffefc202332116a779c89b12fb87ec426b52","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.bd25779b2.0.tgz","fileCount":38,"integrity":"sha512-JtSWB6c7KwHLjSdnAJskr6XQSWf2PVxcqjPYeCHzU6yGuFMv1LqJKy2ecVkE7ezr8sbur8t75QWWml0uXsw33A==","signatures":[{"sig":"MEYCIQCbr2NNLqZ4wF8/lBDkfaVGni1ImEhzzok5SavcNllRJgIhAL5V3mgT6/TObbvPOadHIWskN3Yj3MHMB5o6RAanH6yp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J4RCRA9TVsSAnZWagAAvHwP/0dDAEDdpYlnkXx4u/4v\nMZdMds5mzliQMVJSClzmu6h5LnGj0oaLbUZoDmjD0iEkWkdQ4+QEOt496k87\n/N0ISvWn/ovkU3Gg3o1jMclziTkxNsqjyqMqGgQ5uUEHR6SErZD9yAiCAz8z\nX/TlgmxSyDVSSxaxsxmowlohuSeK5J3kAhV7bT6c2luAeDGAZ+n+P6lFlqjV\nr9edQn6CSfnxpIKpRHfu5nP6oj5GlBP0kflp6cQVg9yu13RxJnVyyklZJdgy\n3jQF8sGu6GC3zmUYWSlm//7NishdZiF391ZxEoXtx27Db/OdMKbsmuyQHST1\nhlTh9fkqBAXl/XPdNUBsuMFIFPUD41f4np2UuFQey0fed3wbLBQwFjwR+frL\nYpTg5jxtPB70svhmcxFCi1S5NXy3hAXVNw2MnAcXh8Lrr6k+4t/pZs1AYVN+\nWDeoqcj8cLqaJZasUE1WiuLKRLPEaRgu5tnOVpDjXzKS1g9CAo6xl6aALHia\nu8MiYsrnoRSNrGK0dQ+My9iKBqRgMYELummpPFpd6aBjTYf7RurXbSiJdpab\nIvk7BkTSPdM9/dtMl0f2oHsYyw5RJNarZTXB/m32U+nN/TTx4XXF5TWqdg1R\nQiHkuBKvm0l84V3QBnDtCphouJja0dE2F36lSRkYB5dq+MLl2TSwnUmJPfo2\nXPDA\r\n=Io5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/density":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/tab-scroller":"12.0.0-canary.bd25779b2.0","@material/tab-indicator":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.bd25779b2.0_1626381841695_0.16796512440060174","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/tab-bar","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4f46819a3a57948650e01a703a4a72a77daa054","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.9f68a932e.0.tgz","fileCount":38,"integrity":"sha512-XOysmGC7iOEp71keEywsxR+6ehZJfplNuVQcfWk9ELJVdb4QtU978uUhz1RJEXi+jbf4XRWros0ar8j32MEFiw==","signatures":[{"sig":"MEQCIAv72G20AVANUR+XQYkuvOooh52io/KwwTU3BZxHZVcqAiAgGGGv/nEqu4SL0Yj7pb/lnF7X24mqparx4yUBCGfeqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LH2CRA9TVsSAnZWagAAuE8QAJW91zdDEoxWjmaQtsw+\nru383Pj8prUTNWO7ZJnJB81q5WlCWu8GHD6YWRrv3liSxGDQEbX2P71Bl2D8\n+GIhUKsnVnl0+ZDkTU7rMK9gJrmtrdzYhfXt9qdV7AqImZ8QQVKwfiJGRzPg\nOzNA2totF5tRqcSjpNUPcA8IXCYgwT2NTEDsqvFj+92DI0WU2cs1ultvPClQ\nIB5mC/FWTYWAj9T3SuV5f/mznvU91xvwZZ4RZ3NUNRYlueTv4tw082qkOetW\nfsjibBuSq7ELQaSO1se4CZia/zUDDhqlEyK04eECY5bCBW66JszerlWF4OWh\nBAFbVZDoiosxHPcQ8e9pqi5KlhCCGpH/k01+v7pk5RgUZsL06AdmTF18/S2O\nKuhkDBdM5r3CB9befgtbbSk2khzek3ArfYthM52D6olA197BPX9fYe8B5BtF\nXFMrJKpJyKRlJkTFBupSwJ8Db5g9eKLoq7/1r1TmVIOz5butcFbzaVPyXfbp\no3XKhYFdcYXbOpBPMWjYP1xIsiy1M7PXxSQq30eTPUrKZ+fPm7Epc0isD6T3\n7/7gWH8kgZBMysuie5YFaXivQEDRMCP9x92QXuJiMZ86uCUD0SK/5t1gRMvB\nlYHqxDnXXvoEr90H9TwD2dekAQpUmyX6WRdJpVvpfes+n2HObp/5yV6Hyi/3\n3/NX\r\n=/rQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/density":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/tab-scroller":"12.0.0-canary.9f68a932e.0","@material/tab-indicator":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.9f68a932e.0_1626386934697_0.80622196058341","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4104cd343b3c779270f9bcdb626191d16f5bac01","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":38,"integrity":"sha512-s7AC5KXI7776mD5T5jxgfnWzQholRWWSiZ5toBolOOF4JmLRcRos1vFCyb+k8QF9hKcAV/4WiqAOlZdl36u1/Q==","signatures":[{"sig":"MEYCIQDUPwUPvxi15H/islNnZHXWFs4J2X0BccVFqTVtfRQqBgIhAPOEE2oBhFh6wrMnL8Fq23ErA2i+wWqxRkJvGOsiX+tH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z7fCRA9TVsSAnZWagAAlfIP/jczr/i3/fnW/8+L5P93\nQl06yWLdaAc3t0l6uRn3KRRzafMNFw9LQpJ/FiUWa21lHZ/ABzQHAHUaH5Du\nQwnML0FC9twI2ulFRHxJGSigllVXBVdlMFEh3sxsJIFXi5tJm4KKQ/x2bp6K\nOTAVlUVoZ8u/vXLRR5VJnyP/1DX2BcUfYDJUVU+ivsmMXVHUQCwscCpdr04L\nfPjejuLEye3Z2uT/Dt2ceqfXgp0j2FLIEIxbUcKRX4yHSy5lUkj5WExueeZb\nMHwCoAwjHLjd23uBcMIVdg5rx80D0TuSOTv8fBE/pVl4Oa8VLodosG2tpsev\nhxwJawBLFJnpfA4Ud37TPyiN12JvK/N7EJs536zSJMnaZP7XDlYyeS+m56nq\ndJFOuG/eFsDH3yzxXPud9DXzDOnZbbrbWod9xNoZBe3/kmI00F+hiLWRZnBy\nJroGzu6yPolbIwnV7qJivsGm2qQDewyvz87O1Ng7fvU1fwoKLFHsiD2Oyd8H\n5Av9QDABRoxHMbyQ677u40ReoOMjmTGSifQeJQkBQiADdsYDzNXX9kBMUe8x\n35Ub60UpvJ8XRuF9KzGWryuaDfU5Vdh+DL36PcminYNRdyxkYT1rXgnk6Ppm\nnHRa4q83YCINb36Z7fdl57sMcNVnXdefVr8jTlWzfQU/sS52K0DqQo4qI6R/\nju50\r\n=ND6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/density":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/tab-scroller":"12.0.0-canary.4eecdeaf0.0","@material/tab-indicator":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4eecdeaf0.0_1626447583335_0.5766793065680067","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/tab-bar","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14fde4fe8d5602ae97a9b573387d5a3bbc7a56b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.7239684d4.0.tgz","fileCount":38,"integrity":"sha512-fuLb0x4PoSeFEuvoPedb6KTCfPgXTGnH7DwcF9PhdxTGPUQdG1msBlTloTbUDBuDjt4K7GCeoHMeT51CjT9iOQ==","signatures":[{"sig":"MEUCICzN8L/nellin9fuMxVBavI3gzAs9oWZ6oV6dndaIa4kAiEA5BeUBS0MdjJSalYZEy3nfPuiJNMu3NaWdveALPyqGBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0xCRA9TVsSAnZWagAAXT0QAIMcoAM7JbmuAPqJxjif\nikOaRsLuYGQwSk/NZZwbZkRVeV5lnQ5nfZkvGLaheky05DJNmry6AB1rrSWX\nltWvP5tXCX1mMrJ6m9PXgpuaCMbr8Q3H6HznEYcXGkT4qF+n2cMjY1BwH+Cc\n3DVy/1mDfDE+q3dt52fiA8fYl9VeirFSh1FZY7J3hHqVOamw9Txw41wIjEw8\nIqGleGQQ/C55e81NiwrMEURKKJRZN5tSxRqkU7bgJKG6OaVEssYU5koBKDoP\nu8iAaZSA+dISN0oBsW480dsXO+E6POipymy805Ud3qPVs+txEHm5inFHbbWD\nXlQI1kJYictLJ7plKB36FHNypdkvua81OdW0AsXczbCggJNTwcSRG5XVFakt\nVBZUd0l/5rYoQHp83vgAAZ6Iqzt8nhp7vGSVmq/KqiGh8fSptjh5icq/aBBv\nl1TBTDxQbFVfOaECY/GUkV9BrkjmYg6yx8o8PGYwLYVTHFAiO9ULuC8nu6tx\n6mE8JNv81WOvWULfkd3JHuv8WSOJc+G3qfESSy+RZkXDLKfqvJjlxU2t92FX\nBYtsMjTCIBxtKlIx4JdYffgYQow9zJ5RR4Es/aq+oGvJVhaP54sjPKP62s3R\nQ5HSicJ8r8rgAhmr4BzKmC0jx75tob40jZ5EwvSz6BswqMxd2JWXDok0stsJ\nO8Cs\r\n=SWE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/density":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/tab-scroller":"12.0.0-canary.7239684d4.0","@material/tab-indicator":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.7239684d4.0_1626451249099_0.24263658237714814","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/tab-bar","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e7f4b5d8a2ff3dd35fb4e102695af5910d57f95","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":38,"integrity":"sha512-gMcbnw0gw45RBE9zUCQEAWfCwcS6GK7Pevt2dV8Fgd3TPWH09BNgdW9NryO3ZfdoQ0wgbQiAQZnPIwCgf5j/tA==","signatures":[{"sig":"MEQCICppsTXfEEFO1wqG/i4HhEBgsePqKSappY0IwHVOVDmIAiBO14JQPgn2BESaGJh8xCo65P7eJ3VlHAQXF1vnwR8+vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bC0CRA9TVsSAnZWagAAEOYP/j9rMr7KzMc+kkzIkuRL\nwG882VXkmspIHMYo3QjUlZOK0Nf0nCfU96yRmn/YyHODooEKQhMyWgJNJxF4\nu4ruigh00glkOXHVtLZqWjEbfnd8ySjB7YIZcNexbm1FSdCREZfMbOGpk9cM\nG3MxY2F3jQcessLekdVW6a7cDWcw5e3/MgC+Fw9L94oV9RAOd8ymgo3xPhAz\nvDcuHvHBJh2erxWlD/2+vnOOEm6fSk8/Ijm68b9zgJRvM/0mBRmpJ/INiQHK\nBO5N+BUfYd75fILCF7WqBbmaf9DDtCbSEbNNGVGYMpY5kLwoT496qC/XzPjL\niv9RWbI08Qi2ou9SFZzsAP/kHENMaIG/+dA2sVGHEpc3O8eKu0O23Z4OYseG\nRgD8qqhtTVJxXjGbvKfKtyLKBVN7tcX5FT/XqAOlYANMI2tpY9QJhhyGrWp7\n+prV1SaQlxbRGTAt7qm4VCv2leq0EmQU5hSEadRlRq26d9/Jye5jpj/BE48D\nzvC0qzkSUr495p/gIHjYP832GMhvd0atTRmMpw8UR38f3jSjJAupTbEibtPI\naEOvQ38uCczCkV2gfs2TuJ8pFRrmdf2Reh3BejK53UACpn3bPavBS949ORMo\n0okl8IEl8EZ2/AmkoaEDy+/YDSHEM1srG+GjY/n2XPVzt7hKPMMJPEBdvVtL\nc/pr\r\n=1Pd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/density":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/tab-scroller":"12.0.0-canary.d5f1f7c72.0","@material/tab-indicator":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.d5f1f7c72.0_1626452147884_0.6286096132626939","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/tab-bar","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75dc79929d1abf4f0827bbbd047fe5004f859f9b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.4d95812f9.0.tgz","fileCount":38,"integrity":"sha512-fPD8G826yQDt7UexvopOzIDvnwbMwQ2th4KrdQgnYzZMtqbFwfRldzy172vNLROTPCS2T3n1q6aE91ZOIt/otA==","signatures":[{"sig":"MEUCIBIfL1BBla9NKcx2z3jvLQKsOINH2UpFJBSsvCARGy0hAiEAlH6uPGyfosE/uc7sfRCDVbAGnPQ+IaZj+jWI5Y0GCU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eG2CRA9TVsSAnZWagAAV+gP/ROr7zjgfQ+DGr2tFQZu\n4q+qS5lrS9dualVoc2KAMvOR2XdaNpRoR/beXU4xy8EORDRhET5tq2qpLyd8\n2atCDwytugMMB89didvyaqxjrtIeJ5NBV+m8BZgK6EKriE0s52BkTJR+4Bna\nkIdkQcVdv9rMb80mL8T2etPKJNvdwCDw8jhGnyXJ76P/X9hAawKZa+BAyKP5\nv5n/JziXFTIDN1+prCl0c8pnvKl2aPjWi678P7DhUzMTDlqNeTcgwbh5TN+G\ngab9VFhcelXA0j68VjZgIaM3qmAJMTvfVV3lwRyp4NLIZB3o30UD/AxpRipr\n3X/Nu++ZXan/Da0qT5o6ks/wYSapPISV3wIy/pLDOEloZQ4N1f/d6jGbF7NS\nnAn5GKNkDoza3Z2zjcck4/Q78g+XQutotGNvWWtElIsBtff2OhiNnD5I0ao+\nFCZxKSttaVxNqhIZjf/TUAOv30tphBoLStGkY2JhRnvBcobk727Ll2el2Z95\nYuCbBkQNKgRf5gHgqoJcvqI7AAPjfOn9D6c5O8RkoNdZ1LpLnkLFOiVjnV+1\nNpqojoli3DbuCZgBhaJDAvc6rZDtceNbcLuz/NZ2nYPIfj6nf7Or8Wc7BLRH\n8V2k0TphacjpwZweIF0bw7jaJ3gmGb33CPe6HhVRaETAeMlgETSaCNrKV5DT\n1GiG\r\n=RN1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/density":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/tab-scroller":"12.0.0-canary.4d95812f9.0","@material/tab-indicator":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.4d95812f9.0_1626464694037_0.7361163374985282","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/tab-bar","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f7914bbb2fc69f72d33da466bdd83b784862ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.38d1846cc.0.tgz","fileCount":38,"integrity":"sha512-z6lZoMImfHt/NJffyVb4GVzIFu5NK0KvHjo3eSNfPuOJLBJL/5WI03Xl0IRT97RFBYIvid4MqoB6uieUK7cgsg==","signatures":[{"sig":"MEQCIF7ko96HTWhNVNeCPClV0nV5XcN/Mf8NcP1+1QrWr1sEAiBnAqNQM4xkz0dzBTRSukm27RzSf67wfetx2sSo479boQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfkCRA9TVsSAnZWagAAtYwP/j7VDPaW3AXHR12aJrt7\nqm5UlfV4wsm30+O+9v2Lp9tlmF8/pTUTV5BDZbmmN9G73aXJzCTRdTyJZRgr\nJJRLkU/2AFfBUJy+pcd74P02D80MKoRidOF14hHwGzQuxn2x2WKqHf8i94Ja\n0TC50caV+ryxLVFPU96EOLQg3ZJPTBED9VCjlJtLJ25JXyLdFYeJ76qE6R+z\nwodyCEZFXWJSw5JbmvdOISaxUrR5lNzZup0j1P+dsCQaT8VNzWvCUqyOocnD\nHwsmiLaR+G6v6sXRhkqQQIj1pFAC7tocHRllF0zyQbO4Ixz+o5NQ3lzLM7Rd\nYFxD8xaqmEZ8ms9WKwCa30HbwD0cGHzEHUDJt5McFXwgnpIGuedifHpOT8L8\nBnNdSCoW4XfesUxsEdNhWz8LIkZm1kIG07cn6Vhq9gOj7GpH4CCcECS6hZw0\n1qOEKBjCQbuiT+S+fr0EUeqDbzwYzKr3fzZ83V01nEW3uUSzOIhkhZHjp5Xq\nLDybXHIqegG8/VeG2kgUT9Gwhhz/YQAsI1GBdBjnE/eJjJ0nFeGdYeOhYQpM\n+Q0WV3CkE51Q/Cbptkn7S/tViOxHApTegxo3Ddp/Cq+LkvKkgcf7xA4rTuvg\nqnAsVhGZL/MNHfllm3Cmg/osqrsL0ioDX5KbpyYhxtz8SedjEo/1etsFzSDw\ng2d1\r\n=n5sp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/density":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/tab-scroller":"12.0.0-canary.38d1846cc.0","@material/tab-indicator":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.38d1846cc.0_1626720228000_0.8175533756375113","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/tab-bar","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2129379af0cacd7ad96b13022acccd35de3e650b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.3f691eccf.0.tgz","fileCount":38,"integrity":"sha512-4Prskx8/SLwlIFKibWuhufUv47RAh/8bPJ2DpUolQoguZTXrrmk65X5BUBnqglYL8FnMeVnlNnwdXEQHzNwW8g==","signatures":[{"sig":"MEQCIHPOobLkWyvzTiMRR5Vbxzl7YOeqU7cuiB9L3a/fpfIKAiAzYKlv+McnHjkvmclODz0zeDktYFH/KCaWQgPa1LfE9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vWUCRA9TVsSAnZWagAAP+oP/0V3UQJC4V5vA9pV/UGU\nwnfg+ayztIX0MPWQy4IDCHeuArM6RDnWNRNtcSvnG6ONoVndU53HBe6Yz6xJ\nHO61uqCxsOikplTw3O5Ei2HhlqEF/ePaKyk4W6VnVpbdFbzfutyaZGPX0VYF\nCvq7D69FeX9KOKM6NYS+7mknKiTqJhtx75ASuV9uC7Kcb+T1ECtG65G0W0HC\nIwbjNNf1sQMEt8OayICKIHuIc2Jcib3mbCji28ayscOByyKV+bwV2F2L89ij\nDFGsr/rb+VY5MBol+0Sl5oo7ipDJ+cdh4iE6rO/qSNTKfJIXyqYlv/GHlYOL\nKCMh5MLbMAUzqF6v5Z/BNJYgHtTlebGe0a8MzOYbNuANYtfILCBFmlcrkWsh\nTuinq5BIqxI33epXbUFuQj1HJYdf8rQH3uYdPk+cjoInbBjJWbym+1fYDT88\nZRdouGhEHdcL28gnPZFP8zBRmmblF8tCWpADVR/xU5ngY5BinLMj7T/0O6fy\nUC5x4rCFNbLV4giVNdmt76/hoT53xvF3rWVbMj5ul0vkROciYSYi4ryn+q4d\n38g8qZinBD8zlrbtxL2puoTpf0TNW66MqWvFx0WuBR48tDwwQfAL36eOKHUI\nYhdaq1I4+FANJHS/6a44qIMickmnDCPCL2yC4lo1ecwZF2EGsruG0jeSwxud\nK9MB\r\n=i8a0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/density":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/tab-scroller":"12.0.0-canary.3f691eccf.0","@material/tab-indicator":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.3f691eccf.0_1626797460455_0.5904213584957856","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"324b7f891a0839a8a85997c0061fa9b529f59886","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":38,"integrity":"sha512-sWazuWmakKah3SqFkOjHiYAYopCdpUKlBJNgPaYZffl14DCCgxKlnTq8oFAOliBbwvLjXDqUkwmrqOqEhSoOiQ==","signatures":[{"sig":"MEUCIFVHEGlP379NtnIISDBUAf8Y0ppHf4SbmkEq9sqfB9N9AiEAqYp3h/lMhRf9fuoV6P205WGbDvORjKRrE5WbOrgI4bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wC5CRA9TVsSAnZWagAAGiUP/2mpcs7J4O7qaeregShn\nPsJ9C+yv41xxfKUV/JPWOHh+gwwIFvWmUZaWPZI1zizIJwNRUHwsYXtC5NlI\nm98Apa2oYvdibVtIvotcvO9iUFNoTxCOoKG7QDEZPNnNPqBZwNTeskrLxY/L\npvqr6qwt6g0JLPXdqNs4hVgvklQiz+4l+wB3Lmwpu97yjspJ/SWbAF6sshSr\npCVzxH60k+PQ5bci48jqlyYB+kociUACTwU8QxAAscnHm2LIOcJHuX26jAfH\nv5iGMgd3xFhW/sAC8/+gKj+0li2x2izqsthY5BqVWUyU0e6rob3dN4F+2ccZ\nqOpObkPwO6DVkbFucQSB+4IWhewA/MeGNWkqs1Qka+oVZv9bxwOvcKLApxw2\nvPA5E8EX9ZjLe0epwwikrRmiP9vblY77oiBmuXblOibm+LZXGlBh4Ipy/ywt\n+lavQ9vUDEyDMAVGybrz97ukQXobMqZSMid9HGnjmM22oglqjXMJCe1FFIG1\nMgfGHP36cVGGQnB0U/ZecPeHFf+TBMSm2cLxjEMIKe3twsAXPTlQemBt1pkP\nQcj5T8VHXlNtWL1NLf+WU4C7iVNMBFrwXwW9GA2465pa19ND6WLjPk9/Mm0y\ne9DODVIaqW6lvY3rpJENUWPoIFg9598tBMDumPCaFeliQepW5bEdJggRLGKR\nHrLf\r\n=qhKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/density":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/tab-scroller":"12.0.0-canary.ebb5c73bb.0","@material/tab-indicator":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ebb5c73bb.0_1626800312954_0.5554390040227284","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/tab-bar","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c1b434b04506f98a71eadaf805011dfaa328006","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-nightly.778a0e8a.0.tgz","fileCount":38,"integrity":"sha512-JOh/tl3n7YoBbSiVRvQEwH7BqVBVwoSqM9x/veBecDzd5xLcSVG3U36hBRWcT9i9kby4ZSk+b2hrI7YZP+6v8Q==","signatures":[{"sig":"MEYCIQD4u5PJs6u5l/NTgquvo76V/v1JU0ML+9PofPVUcIbp+wIhALhnL49fg9WDLbkzLLp8HY/2cmnpVijujU6XLIhyItSt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zsGCRA9TVsSAnZWagAAOVYP/RhVz+GDDN1KbQgZEfEZ\nbg3t4LCVgyOMGC5ihyAQImSq6lFh6n/yIq/3KpiVmWIVqvvk+cflzbPFmDLz\ne/+kNR0j9X/0nml4wQa8txK5rZnbB8nzSfygxTTsu0dQDIPufN4aMd7nQISR\n9QHQf5CFx/u9j9ZKOuSOgi9FrvzQL7GWAiZypsQA16WC+7QZV0JPgUuXyGgG\nGfJNwOhhMx1aT1QN26X8C93YJa1rJgKq2DCoLM+4AbxsklINB4F2/zQ80wI3\nyXHM2urllMOSeKSJc/IHoKyrV3b78eHue7ncOYVVmHo5UdbIePYSmAn9tjTl\nKpQ2aWymX4a/NP3TjVyrpDipXEtF1DfKIs0KJ7gZAlqCTBqXz8SAm8e4EW47\nCbQx2y3k6yAmWOW6Dh8GUATLbrtgJhfS4M00//5zMR80ptdlIi7Al89lzWJq\nIFNeacoYvapqa3s+DqQXqq4AWarz8atdBI17748I9VMZvna1ClXoqcvzz+6i\nM6xv0aJb9pfsmVrjsRO9X7HawUpeEZcewHjadtQiNCP2CaOljW1tSSZZfzxm\nPkgg3zWARzKyU7gdzVIA0vQtdU7mEcNzOtLgcgq+OB7NbO1obRaH2wZMHHgC\nwLtK6/iI4uwzXLW8cq3ncFiMVnsi4/RcN8N3tbOUMqmn3ILpm2LVUflt19e+\ns2Id\r\n=4uC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/density":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/tab-scroller":"12.0.0-nightly.778a0e8a.0","@material/tab-indicator":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-nightly.778a0e8a.0_1626815238388_0.48325119055067134","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/tab-bar","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74c28b74ed3db735b88f4d1876dc63b0a9b22493","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.791311bba.0.tgz","fileCount":38,"integrity":"sha512-aXSxoAaGjBaW7kQhUusvorRGdZVWVY6FjAs8ud6diWzWP06UQgvUTZvbgIV5P/M36yoAI6i3KDJ8YzwrKshVtg==","signatures":[{"sig":"MEUCIHZj2yYqyQNF558Mw0+dw9ckiYABXeWH/BHDBiF2gZbWAiEAhGezke8z5ZaoszAmYRK53GFB5gK6jQCxHcNAoXu6Kko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90mNCRA9TVsSAnZWagAAIEcP/0kupSvGuByK5eGxn3EQ\nIijooTL6NprBl60vu8X9VbbF2eMc0GLB426sVYBGM4bRXoeKyPfUseLgzbw4\nfnpcpaj2Txl44qoaIyU/BiOdFu8q2GoXlO/GIn0lat5uZz2g7Bhx36CEVIhm\n8wb6hE+ILwHlSO9bkz6pC19csgEeZnf9fCHmprNFp90meiTQGmIAK1e5NSm/\nFsqXPyK24MsWGpnhCBCbraJwTiFaWmkVKl5F73uctywjJ1MEjGV6TItFTRBU\nIzIqysEcWH/iihcHkv1qsQhjo055Q5mZXih8Ed/FyJhDTO515A1bzpwFvB0w\nxpgPMxRI9aRp28rr2hViTpLTMBqEZj3Z8qMnWHF0flhBLc2XYnRG+Um9igMT\nN+v9SNiEm0trUd/wijaBiTSpcVssgVNbVBhpgqTWSoAn8H8sLJEu8Z8+AA5n\ndwdiOjhYqIwlJk+ndxiBskiYGo0pz3SLfldA/wEE3N/q2knt9B2kUoXdg8KB\nUSdHb4MWF2hk4MoLEdJienSdVRaPvknKdrB1aNq6HwZSIL60PxyT5rCTJtHh\nAlkMWyyRb3vJ0WmevdHOuuotpszcv/UR3czdjyN9EpZpnzBAKNTi1+22Kckp\nmAYMDAXCc1KmCSWQNCwyQR+IIq4dLNS0t1T9Tk0WDYDMAtZQhquTo9d4ni4C\n0zV1\r\n=Dj6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/density":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/tab-scroller":"12.0.0-canary.791311bba.0","@material/tab-indicator":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.791311bba.0_1626818957097_0.7800184275212882","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/tab-bar","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a442d7ed541f1c19af2612da6f0c2f535db1d02","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":38,"integrity":"sha512-zVoxhYk0Tw8aY3Lq8lOBEvYkzxQy5HhhL08biLnIVdQo1ZJHHGk+ChY4SlTuJX+Ckj6e3FTVVPOsWg25104KHg==","signatures":[{"sig":"MEUCIQCg6BbaW7eo/8Ojom1/jRZeNyv9lPR6BN6g47lIoMKYawIgcbHlbj+swA1hISbNm9Jv6E76kd0YR1V0KIs7kKvA+cY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D9JCRA9TVsSAnZWagAAmG8P/0GwGU7molT0a14VEUCW\nAzuIJkhEi/4PUKjtFG+CGFZppMgr5Cnwfvof+nXdM9BP98h7ZHcZcMYxErPn\nd/+iRc9m8Q1e6p/K5ohHVpScE+d2PRTglo54rbXB0hA6lvux6vpsd1wQCnqe\ntpkWtI9PVVMS3tA5cMk5n8VkEM4Qg7C7uU0b/xpbfwnTY9saY8SqOfL9WkNb\nT1xk9fVnMFD6j0IVeeSn5W0uFJ7Y6s6+uvxm/kw7Vma5PkLYmbT7iZKzNJNq\niiYz1B4LWyDUkSGfMmW/W7JHSJWor5s8UonZ5fTWt/u0UNtcH9D+X4uS83uJ\n4g1cMzMZns/oRS5ZGWh1IBbwYS2y74CXmtTckU8kOr10YaFR5PIlHc07bCx/\n3XXa6OAuzS4waiJFwPC9DNCbraQ9AVq0yStwuNqY6U2jPlRkCtV/jd6dqBAq\nwuHcJ2NfgmLgprT9neywXovkDOp5baGxI1JJM7kAZNetK/v2y6s/AfSegXx9\nPcnUBZ4s46oA/RSpnTn121SI107g6Zr1tBftJ3UMRs2R9oOodULTgbFflqTs\n9/I07gYqw3J1H7KiWgGIyIEXP0xyyYXQu+uI0/vWTfZh5CkS/3hI5a8wtwHc\nY5nWtrYFy/6uaLMJhvQoYfXhNzB2Yvvf7qak65IFiVCC9j64s3yqwTEG9y6V\npMrt\r\n=QsYY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/density":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/tab-scroller":"12.0.0-canary.85e9a6ac3.0","@material/tab-indicator":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.85e9a6ac3.0_1626881864870_0.702753138050654","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/tab-bar","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1b6934a5cfeea03e9a5dcfa3d0291349ae37b6a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.6b0442278.0.tgz","fileCount":38,"integrity":"sha512-BbSNk6QSyMFlHn0L1yliWUQsk3G/e3UHVh0mKM2McfiyMd2a7Q6YcIzq0A46bN59cI+Xq9y2mjK3A9U5bRoezw==","signatures":[{"sig":"MEUCICmQrR3wDG2+ayfIBp4111ym6/UN27DhT0VNMGus0QGJAiEApfLpQaUkhsuf91npYezCEPU+hPG1z9Pqj/F/aIGg5rQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gy9CRA9TVsSAnZWagAAcwcP/Azj8lYCaZOdEKC441zt\nFqU2A77hZd1ssGfaTZlJ9kyW3tQJYwqCEJ/g0Q6g8L9b08vkaVum21qD5uve\nYaUMMUS8QQ8AyMcl1iltK7gVcrSVKtA6xazDbCsTBwXh/WyYDLC81yRbhSJs\nQUS69p0u2OGWaUnU9lSsPrWJUkSGamMigsFc4CLrhCsnUKp2KfTNatheWtu6\n0MvGZSkqdG8odeRIGlt/yHwIomlf/n0xXwdSpaQgt4gPdh9VXTKxLkDwKFzT\nkGeYuQxRdOEhsJoY94NzuFe/+Vzi5MkN/KpFonRBfePjzlykwxiTuj6BUxDN\nv/kbkzX6GTXFU0d3M9J8hWfHHt1YZNnhJV5gagiFQ8tpEV9glAGf5qC+05nk\nKhyPkttNnUB1SfXcLTKgC0lkKxQst9YdfSmLCYuI1NZm7zHHGKDl+wfuVb4L\nipNqilKbXqxDeCv0Jk3juTzkjSXBA6Ze1Nbp4Ozc8Z2EJ7bLSastIO8o+DmQ\neun+6hC2ezJBFpJ3g0c0PLjMzJRRooDJXnl+8afIDJZYcWgCQm1zJSw/cZyC\ncmeriZlHlFf1qZmySzdqya1rO7JwlosSo1wSvMYyRuPS7v0U3fIySuJebm6Y\nHP/RlJJnziWEkFXq++e4ShrXC1ZvZydHxQKVsbur5YItZspzSNvgfibDimgn\npEpq\r\n=Vlea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/density":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/tab-scroller":"12.0.0-canary.6b0442278.0","@material/tab-indicator":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.6b0442278.0_1626893501306_0.20440180607754654","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/tab-bar","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7528707ee0743f508e159e259ce22cf9f51f3692","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.5f00e454a.0.tgz","fileCount":38,"integrity":"sha512-NDnL3cZf1buiroZBQnahSiio2z+I/y0O/wMc0E3P00bA2T9i2o+q8Xk0o8I11PaBDhVveHk/DUSKsqQxoBO02Q==","signatures":[{"sig":"MEYCIQCE2zjk8S+zHvGt9zbGE7lrQQssHIHDvGcPjc/hlJcb8QIhAOjA58ZejfKsnltOfX30MFVD/8lJWNvVHBuSlLbJJWCH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aX8CRA9TVsSAnZWagAA9S4P/3Mhnhckswhia7zpavuQ\nWDwyBuSo44YSopJz2vwfb4ckGsgugEnTzmLaq5yJ7b2rD3iGFAV+BGtuPq/U\nTDevs4moehAb98Ce4zjf/cA/WxUb5YQbysQ39TvNTWxgkVqErZzq1v1f1MyI\nfv8Raun7Y3GqXbuX1ucM9jhkLsZmz6q4LYqHmx4+bAJQ1EKWclzBiusR0E0R\nGfyb0xBVL1anrd+bpQ6um6KRef5TDfqVV1FqgcfILkuePMJzUo0FkF6Hn5ug\nMUZvQCUVe+0EgMATz5EK9EuyDCs9K3dl9T/8XVuhXSCxpm+7HOstBOPHuMnk\n87hpJoxDzqSgQjWL6ly6La2Dy8ykV5hv+lAuozRuHQa4izAixhTSiEUsdoqX\nLCYr3qGVVoTwYxeTad4lbHSkQXRj5qPTL8DjSJD9LznvSi5a+R6jUdWe/+ZE\niv5WK7IKzPQ2/DDUD8kP3pLWCynxdkSq1MeklnCju3x+yzk7oIQId86Ghgqm\nWDnAV8W1HSHJi/7ZGdWhorGYzmCYO7yhcJoQ23hLjWd40m0q/GbjIoyNMkgl\nnLAWqKrZRrGU89REM5c1SLOPZp9rNPuE74iTVbqvCwMzLO9dQ8frJ97ajxzX\nN4VmTDDMyB64MZUZYbOHjuJYh9BFaNf/SYY9cjCStvjJA0KsfeRdJ2TxtapO\nF5jW\r\n=qHs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/density":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/tab-scroller":"12.0.0-canary.5f00e454a.0","@material/tab-indicator":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.5f00e454a.0_1626973692088_0.49317338807522426","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/tab-bar","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c554c6c65ead114a24e5dbb65d791015543b2761","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.90e08fc6b.0.tgz","fileCount":38,"integrity":"sha512-Jh1IGkhUCUFzzDpBtasGT6ECE035ADJhL9eKwdFyzEeFvSmYCgnE2gpW93GHYKoziARISvC4T4vFS6efHceerg==","signatures":[{"sig":"MEYCIQCkFEb+oe2Rx4B9C9ece1PK0LrimoyET8h2k7wJA5QHIwIhAJnACyqezZty8INYfzF1/FMi91e3dq6A9YtG1DdFdC69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gHUCRA9TVsSAnZWagAAJk4QAIVoPkZfv4Nw2Nlyljd0\nkqOot+B0sRqYs/ttdLoDBGZKoSOU+amLdSXtYMAbX9TZ5Vggirq28bVbb4vE\nQi7uZ4fum+/2eYLfUvHidErS64Zqa4IyfUkQdZoFnr6AY4+7qaA6k0NB4OMM\nTrxgJDfJq6w/+mMOKAuRS3gjXoS4CceCPt65cSkhuSMfVECxLKBtMcnRKJuw\n7Zjn5C0bRInzyBj+F7Z7gqtj3H7K4aFIltuTlWcb0nZYhp/HgE7yePdwNZAs\n3mlWvUBBTMFiGzwm7N3rAD76jiVAr7rfUeKwIVnYd5Vb+x04R7NRTV873qYX\nlwVEH23TkhEFYjaFx9XrZ33LZfEijkirZExOhzxlXgGbsMOxpbzwlfQ9BR/I\ngaJ7D3s7Q07ONv1Y1vD/JlxzVFwAJTzO7/9sOrpfVF2zRBJFH0ijM91fEBKK\nMMkgqn2iTatNWiUuxKkZLhB/4nqTHfK5RiGo2vPpkkwly1xkMOfm/qTuoNWU\nw2SOuOMRnADJKP1s9iqZ72uwofYkYfrWUA2ESn0mpPyHsW3PoDOSGLI/i/sI\njlOldlAWBrIV+c/P8CHoOfFUE0/J/M9aGpYZ40O6B4f/6SaOKFa8r9qJTvt1\nqsjd9JCYvJf5RfRjbsVQqin4r3Ye4LnXSSr1cikVSUclbHtbcXRLFTqaZM5J\nY1U4\r\n=pI2X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/density":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/tab-scroller":"12.0.0-canary.90e08fc6b.0","@material/tab-indicator":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.90e08fc6b.0_1626997204821_0.5327025511972832","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/tab-bar","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8915c6c343ec57e2dfb3e7940078b4510d11083","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":38,"integrity":"sha512-srd1FrDtAGavJ9cG77eMnad7k7gtxNZVivkOrBvTYjgSrkJWlD+IvMr+Yg35KjKBIl0N4aupNpSQVgpwOX0jIQ==","signatures":[{"sig":"MEUCIDRwycmpENumrEeeniGcTiMV8JDuPl79LntRSeMQ7A13AiEAzgH2KMOlq+MvshakcOfenSP7KSxI1Wx8IXviTjovayI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbnCRA9TVsSAnZWagAA3agQAJGGoQfF2B3C1dnBG1Y0\nQi7l6LvhBlqsXIE/NYGRF8V0ilTeK2nWtgJs8QBaJgZqVHxjdDOGNVWCAERP\nFcdCTMhVgw4rRmnbtJW0KvR8QONmvOXohOORKBTcUTpnbCayle3ZxnrxPhiR\nsKz30Rn4yry60k0OgVUc6h9ZsssrzAfwJ4WCn4z7eUJgFtL0F1Ecqh4yxSfK\nhzR+gfivZMqZaFRzmT/v8isaiquBxnVplTaLg2/La35+Rzma/NijVq7Xr0gl\nf0r6WpyHmPBicgzrtFuUR8WOHQx7ak9fSPggtSe2eiOAllCIgNJ1U0Wg5lI1\nFMDxBEnab2xEbgG5xe/YN0+rxn8rpyFyzQ8qOGPL5JGvwb94OfFHHZmGlz2H\nmkABbHYNGH5C2Wej514Slh9sfQAHCveYKNgW7mERp/ovud4zNJPe0PmK/ZZs\nN8AQpUCsRAsQGbTrxhKvx+EHSPXGwvRAYyjqQC+TXTpORDI8xLKxCDmC8n5i\n3an9VRZviYLJb0OocIpS4n6lh3+eFgQXAbnNYFSj49RC828HwyridYkD+jG0\nJ/dN8MNjSjpUuvnwaMfVZIoOyIHRcL0Ou+E6cIC+wFqfRPU4peTVrXnPBKXa\nWZ+EexNgpI4vZ+EaNPDFvDz+hTvwWor5LOMzOGWhvbMvidi2Z3BNPkCnVJKE\nt7fJ\r\n=Nqej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/density":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/tab-scroller":"12.0.0-canary.cf5b9eb86.0","@material/tab-indicator":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.cf5b9eb86.0_1627064039763_0.2622858036914122","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/tab-bar","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad68644fcb7cc80dc25e130683468a63a6786756","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.3f36ac75c.0.tgz","fileCount":38,"integrity":"sha512-xrPs9HWnripIG8735fO43WF0jctVky1D43sou+qdd6bmp1Z288mLvAyWK3gEZb7UGDrwgUgbwoqw8dTKHpcC+w==","signatures":[{"sig":"MEYCIQCYNkMHsjSUGkJon5xsTEJ5f5linA+GlCmp4AlBthfZHAIhAMmRwm42R32+1Ajyh0DioY0WzZ7ZtbzdqyCWfumHhU5J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wuUCRA9TVsSAnZWagAA4qoQAJk6NiToT4AvABYFi6hV\nIXlWThxRXYPzJ7YF0eatnwUpm9BzPU6y9X/3su60w3yVd2yxceQWpGw2rSWy\nqMscay9tQp2GsU/M/PS9tZC6du6pDnpE33y+79Ntbe5+6xVfvn3SbHd+9dxA\nXszQr7atZAintACsKSqA6jRYfYoJJ8lbGzDCatefx89qDq0VkSRsAqcdIO0C\nG5zUO0i9yLUzih9fjnv1UHr/CsbZmyXWnJ0e6/hADrBqDVgwyPfhCI7eAYso\nvc3RsLNKU0a2wVd/VKkd44YxOv0TEthcRaHEH8R3ksLTCabZwT9CZWn8FH8a\nt9ws77R+cX3YVgxzWIr1p+KmKwWjyT8/384rikkFsGFWuPIZaTD/9Q+QnYZC\n7g6pKd6fjHT6+ACSuYWQfhf+irygRpatfYSz60ErQeugcL1+EKY5mxWjL/SN\nWxBs6se9v+Ou6vSB65OgYeywEQNVBk9M0yIBCVjzwWZvnZCBverKAmF3ZbY0\nag95ST4yRfTD7aa3YJnX5EH41yCHD6szbQO9YDNWoP4LMj+VuVOT36eVSGGy\nbLdv7Af+1m/GvT/u0WLPvInqXV5tT9IujCmh5Sqg7SZZ/xkMaz9hDb/d12ca\nGHrvLm9IR9F4M2k0eyIs0xcglr37MTl0AGaVeIJtLjoR6+9ZguEQwrM0epIi\njrw7\r\n=ooRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/density":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/tab-scroller":"12.0.0-canary.3f36ac75c.0","@material/tab-indicator":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.3f36ac75c.0_1627065236730_0.8677293800768444","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/tab-bar","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"092afa386d27fdb8d8f4f5a19bd3e2e50e074cdb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.ea1e1b850.0.tgz","fileCount":38,"integrity":"sha512-d6O4FjLEeqswgecw14LgdSiFxUFxXtlHYwHEAJa+CzjVruYx19q5qC3mKg/bww3n0dArUwwYUOVlpyj99J4XpQ==","signatures":[{"sig":"MEUCIFoSk+8cFh9Cnd/Rwj8fHQeZFgdcKXUNY7QrFp1NeBuYAiEAit/qFXtRZh4R4j6lzEkA4B6h6g7M3l+U0HWzBKBJVfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H65CRA9TVsSAnZWagAAzXkQAJDeZvm5Xkk3K5hlocpW\nGjVx9lnbAtYTJpZPGYve/6SDveItBhz0CkksrQkOFj262frQdEXsqkz5ZVGv\nsxMQ4r9cS7NZEXJ6g70PoE7fyHCUya4e5DqKF9bFXVA8TX8qJNAV9QSjcU5l\ng/XZA0FIZh1LPqU/ka2Erx0ZzLx4LmZJ+sGz4ZDE9xkw+TgiJotFKONoZGzV\nmz70xNy2puYf+EP1feFLAQJbrUJi0Q4QqiPwOYYhBYnHZF9UkobQuxmmaNbL\nbP+iE5cELXeJLwEiOO4iXMBO/txQAsk1QlBbq9hvy+XauRQHHUoNfAqb/WUs\nQbyKL6bfY9YQ1eLSyIidHjDVjDWNh328IGcaIFrikfdh5hMSSI2ZECtFWHlW\nCUL3vgtktYbsxmjspiwFPfL8JoM4WV0WKaQ23wbi5YnZzvPpc1+BGFMbw4Xj\nBu5WZEl/xYoR3Y0/H0DoQuwDJ2n2iUaetn5U5aWzjDviZvkTcaRdQ2QFChVR\n7xQkxW5pfxWjiAI/89esB2b9boZ1BekzUCxelOzgAN+DEkJ/709ERztMik9x\n8ba/HeF0E5GZ8X9Zqse+ztmKYg5KizhdkavZ5++Ox7+/k8hBkHZLYHIPK40C\nJwL7cVDmOXR88fhNukqI+hZQvuQTYTTl9PsYPrqHhk8zBdY614vQ/KwYjuSX\nQRE+\r\n=LQKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/density":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/tab-scroller":"12.0.0-canary.ea1e1b850.0","@material/tab-indicator":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.ea1e1b850.0_1627160249730_0.9296127963079421","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/tab-bar","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"288defca31c8b4f55298b8d4cb8eaa3b08e6b2df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0-canary.22f390c43.0.tgz","fileCount":38,"integrity":"sha512-53L9BoRnCENHwmyy8C+ylmsqXNkfMMf0ffa25lJEA3Qwbs13JRDeJ8PlnEh2nTsczS76A30Uh7Ik/08gGs8HIQ==","signatures":[{"sig":"MEYCIQCx3jaBSo4lLIz4mOni0a6SbqGEKvp3f7vZ/9KxUWK5CgIhAPqqijQ62KUekd8p3J+fmpI0xOBDTZ+FwKfa5TN3kHU9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFgSCRA9TVsSAnZWagAAVHUP/iMiQK0XeFaXrawSbLRe\nPlHI7oKwDVmCjGvLjZGmmhroIrGt5IqOLVHvWca4x8sPl5+ae5EN8XinwLXt\ngFEZgfVjupY509ihCax9xO9x5r8Spx9dPS75DS9kJLOqzKn1I9JBacVAMefK\nL5J6Psh2f3bUoFDuJLdKYxjGOo7qcm08zWRd9SPW30eg4v0eYp4G3kiWkwhr\nei8WLrGmtONWzHDCf7sn4SrIX4Yh0wuUbai7gKVwmyS5c89FKJ0HTgy50a3+\npnSA9FoJ4AbJk2CNJWBp1CAhN2zza/kG9YjP5eEwwmURpykx0sZG2hoaySiU\nWeet7Q3L12956bMOvaZ1pUYDZIzdeeg6MOZrIGCptM5SQXVaQ9iXzlafFw6k\nWjidPooVjBbpHwjZMbKoS3gpJXhOt2j+FdY9W2d1z3rHjSDz+YyUHNNj/2os\nT7lVD1sJHLUxfM2VviX4kbbwIE/nJrUCOFhzUYv9WD3RtZim1usWo1hQBKCv\nkEgr2bf+ldYXZkbUm7o2XNy1nJcazilifJWMacAbThCQ6PcnrhB9PsdFMh2X\nR36aMtfSezxP8pVzYlLQjlu0F39hSHd4T6omE195P1j+pPe8f+RY9eNAyBNx\nia5inqBgISq62zBGxM+t1wb5EbUYyP9xHau8jzw5i4Z+D+cMImGjWBKIwKUO\nuagn\r\n=npxj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/density":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/tab-scroller":"12.0.0-canary.22f390c43.0","@material/tab-indicator":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0-canary.22f390c43.0_1627412497807_0.40038257786396003","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/tab-bar","version":"12.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b37db9e12bfb3cb01569ed51593d2e6939f5b80b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-12.0.0.tgz","fileCount":37,"integrity":"sha512-lfA2RUZo0kwKqc5Pm07n6E1Liqr0pi9EATmmsqswFphIqfKu+ODqgS0o6OAekmeFL5Mny+kJuAOh6i1l1sT8Ug==","signatures":[{"sig":"MEUCIFXY0dT6VAEFiCHzXBCZcX8aUJBsKX9OQP2xLPfuJdXMAiEAwom1Fbs0l4N2aP+QNb1fjCK/8rIhUrY/+MX1kYHJzqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPVCRA9TVsSAnZWagAAkdYP/2LTTHrYLGnKO5093KdO\nc7CenuMSYCoxO4Lp2HTzTo9WJdooppSX03voLlHXwHXvypsZdy5qB2sh8FRO\nDGU1Qk4GN+RPHOn39T0ZoDYoKgrhNC3okTWwyZhKLvyR9NEIug/Fo0KBLEhw\nPD8TtokUx97L/Wc82ytToFa9zDQpCCD+x8HL+KKOmGELjH6yhG8VqHimiB3C\nWnpeZLGowb7fkQVoezCTLEF23RaBLkMvIM6I99g54uM4Tq9dcwWbC30bWNqW\ndCuv6dycMBsOAOZHDoe7p4q1IU8tZM53Jj/zXYbZubOynestRSXWp86GH3hb\ngA4NoCpGp4ys00rJkHLw8UUG5fS+nCu8Nkxv0WaVWfLJ6dbwW15ggKRwYYXu\nNt/WmREPrVnRXciMEcZ7cCzGMM7FbWpL63/O7OG64Vz5I6XRQqQr6XHTT9QP\n6Mtv6ygfbRVWEZV93VyFud/YdORYL9JB2wYsrWTrrhtTu/mmFcbICHreg+MD\n3uodyVhLyQrciCNcVBnwIEEss0ND3m873KmrDctdY44Du7VGXb5XLuy9LUPn\nJ9enME6OP6cTjfCUtp1emxMdb8TzowZmcg5TI+JFieRHr8bNaDOH65ROdldQ\nW1YyCFCfj9sU7Gv20X2mlIjvsK7a7wlUrBpO7rUGle0O6z0uMYWgh05BL7UG\nOgM/\r\n=MRhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"^12.0.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/density":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/tab-scroller":"^12.0.0","@material/tab-indicator":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_12.0.0_1627415509301_0.12913673376439383","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/tab-bar","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea2501aefd3b16acceaa63eede72cdc310129cb6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.ae85f7eba.0.tgz","fileCount":38,"integrity":"sha512-4csanS40WVM2JacYJY5L9f5xavdZ7ufd6UkodOCR1X6cvo89A2LsGIbYYCxjc5My9P70ZxwFc+bWpN+Ovfu3RA==","signatures":[{"sig":"MEQCIEeMOvu6IiWZJRA0tDCXKn72PVMHaRg/+RTutRsmCFQUAiBTPtLOj16re2IvSY9yuOwbp81s+WBQddVgxW/IusZbrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQ0CRA9TVsSAnZWagAAnR8QAJxp08rqW9NL6YI/5aDR\nJ8JcrnC/ZGtG8DrKRkZTE+FDgK/4p4bJMFgHnqrTSmzAi85Z00c1M4BAhki2\nzrxhjqK/xpMKHlie/noN6YHnwg0+OrzbYJnNSSS4fF9lFj936gj8wdSylEv4\nOi9/xVrVWsxLJomWRcSJAb1ARaYYSw6XsUdG2YFc75RaXsfjx/tK5i2U6uHs\n/X4GZlfPN2+HHUKu2GL0ywFFQh7K5qLVecpm4XApOLYKUAHrXoSmlyNumbTx\nOumeBt4ezy6dn8mRNChQM4UngQkA9XE9NE/+Y5iMcxNX+X+EvjI2Vj3niKo4\nqBF45U5DG0WKGO2DE53iJaebqQHVfYx35CFuxmO011H/KOht0doV/ssioAAf\n/W7YyU5cE0Z4a2ZuQuZUl5BJcPn/SOUQBkN8rZ6ga22MSTKrgTLBPaVZZ2Iv\nTPeWGrk+oYEn+haOFUV9Rmt5fMaYZoMkrpUv5bbE/pEv8UHm/A7Xf5IcAPWd\njiF9hwkyMVSszPlCgtZWzxxKGfvTEnkNbkAnsJCLTiWLF35g1QTFDy970YeB\nUoawDvbJDvBAfHU6TfrUlMthA94obE2rnLiSb07L2tm9sz16JTNzo3o0pPhI\nsM0MwphG/XqycO8M5b/K/bgscxQUs6wu4BuQnJZU6ouXjE4mwH3cNAAWNzlj\nRtS3\r\n=e0a5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/density":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/tab-scroller":"13.0.0-canary.ae85f7eba.0","@material/tab-indicator":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.ae85f7eba.0_1627415603946_0.7456095545616508","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/tab-bar","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b933d53bda1a8bf391b27e126291c3db3efe72","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.5981207f7.0.tgz","fileCount":38,"integrity":"sha512-2MeeDH/m47ap1i650BMItWkmEYKSfjbB49DZCnS+DU57UiO5PdcCVnDXc/Lsve4LGklUXgeeLiWQZdOH8XyxnQ==","signatures":[{"sig":"MEQCIBiE6MYqj0jKsORyWuCxzgiYWkIyp0fHo69w9kdUA6SWAiBl4TdXNfjj0Tit2bVfvWL8czNCbZYThddbw8U4r2n0zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSeCRA9TVsSAnZWagAAKA4P/jA9Qw7bsaAhX/zJf5jX\nUwv1J1f3V21yCNq2gmBPq9bTnwBs+EEwO9PXUFcmjl+ygElmcR8yzz173fI9\noTJg1QtBvPB7MpSu5j+sDowI0EAK4lCRbrlNv2Yao1nYWmVWSg+XSQf+amUL\nQ7MpwiJjKccfJvLVIGWayQBMqfm4QA0lwYqjSLahzJUJqUeoR2QBr9M3YMj+\nAlc21kY/GqZZfT7GbhIQXJSqhQdtVYWLbq87xXezuFOSkbANEB5tPr7O+JDn\nbqwobFyU/G9qm7cm12J3QJ6PPw4bkZl4dzf4qE9EQTgGXQMMsYv6otsfomp4\nH3Ey5Eop0hmnO41UxwVdqyv+6ElCe6fheMvVD64cEwoyD1cwL+vpjswpqq/z\n8DLbUF74Z6rHT12U0RJ52WVnL8u8MNsKfZLthXnL7OU+aIQj4KKNe/siAgBP\nwd/1WFwZEhNdhgheOiPY2hZ9CtSDLsCrqBBFdTEP1n2vyGsG7WtN2Rz0IWjR\ntkbXJG3+12Hj72Bi5OL9NXazvC4uLvpxHDTbYxAe9xlZs7jlCTgGv4HObmsJ\nGp9Rth0JXZwkvNuOZ5jZlwfFhF2335cwr00Mvv5fhcm4yOSF5rOqqNDrL9kA\nwbnOGaoijZZz4g+ji/KqvtZRxA1Xfa6iJg2SK5e+JTuhjrypXpA0hG36vnSI\nGJhs\r\n=ZAHV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/density":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/tab-scroller":"13.0.0-canary.5981207f7.0","@material/tab-indicator":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.5981207f7.0_1627427998651_0.20700681901117535","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/tab-bar","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1677544a717cf4d73f64a7c2b9da02ca63d0d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.83bdd0222.0.tgz","fileCount":38,"integrity":"sha512-Imq3lkmTaexg301GClDq9i99ye223OCkY3rduviFeIbOZCMDnKi6g8232xsFrpHGLB5hlUpQsjq5VJagF7JAMA==","signatures":[{"sig":"MEYCIQDjhH35q7s6dS8kq8iYDVmXEIdaIwof0r5QoxSCVtv3awIhAOVle+jsS8ojlOE5XK56R/giCLiZFKd/4WgMOQ0RaKbJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZOQCRA9TVsSAnZWagAALu8P/1/cW/O1LNb4RA7f8N2s\nybu985g5cbJvSXN3GWB7+oj2Y6JLOBjhneTgE85qnYKX57f/g3HgFu5Auf1/\nR3tJNcgkwOsz1M0szoay7ndnL1xFSpSzQrs43GCsCXcIcikNE4Xxs4ux2x4I\n95GJoRL0lWYgUlQmJoYaL+Nl9hhrk3vwuTLW1CYeo+dL/GRs1mPhZf3YFJ9y\nsarLaTuil5sIn7IrwlqlBS/YydIDvs5/MYbH51YOSxHHtlmj5qmNXkPjVsyU\n77iZ//34yomV19dmWiF4poObzNYLyQIWH9HuOL1GRppUZeuWYMbK9liLz04d\nmMd3zHs/5R0qtl3msTHyDtNaYJWcfY95hsg6CIUhrgUzVzHSD9zR3aKUqGKk\n9cbhW8XD3zOzqeXIvoc23bCE2pEQfHpfN57qgh/jE0Obc4Y7xVwkSGXkr7AD\nrJpKcyRfRcF738FWGPirQ0/+5Xn/F0raZ7adHgM3mkjWNtrbQ3yzJfuF93GL\nxG3b3ZlE0Vra9GQ7Mqj/e2WBdb+LIA8telDDg57HaQohv82J5yKN0Fi/4p+e\nBX8DdA8IWkkOHIlYLqNWCf4y26VLY+zD3yCyw8JyM4ljN9+9uZStbeCQdjkd\nbtOH81lVa7hmpVoltKJ0tHnrSsTqgithTJE1ljINcPKyKz8cWNOd2b3h2D1N\nLBQt\r\n=poj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/density":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/tab-scroller":"13.0.0-canary.83bdd0222.0","@material/tab-indicator":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.83bdd0222.0_1627493264556_0.9745855955962597","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c42deac88366fd92e34fdd3a05f652a172d013be","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.28656298a.0.tgz","fileCount":38,"integrity":"sha512-S3P82HUN/7Lj4FNV13Eh2M+kFpk5p/GAnpoStZ7A0/UJKucudPn6FJhwiW5iHpbyQ3GZ7ul0HYS71RSbUDYZyw==","signatures":[{"sig":"MEUCIQDYfu5QyR8JUl//vZoayqtmrQt6Jrc08flTfYcVOzRPDAIgf9rrIWF/DBeeB3FvKNkgWTKauSwpdMgP7QwlmZStmCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvAZCRA9TVsSAnZWagAAVZYQAIOq2v4bLmGJi3o4/+Xp\nIv871+GWLyQIdyhVhU/TPz7po9mmMNtKlHvWpdG/DfElXe2FAqXcxNn++AV4\na2aqQ6lXfy4PUaB+5xlBf2cyL+WEI6U8Sn66vZZ3LrreKueCuOOEV9VesaNI\nhlCCfAcTAM80na2afeq6NS0m+lN66XTCVm1Z+rbXlHxSW1C9GmVmJIEvLs5S\nenPtURBYleoftRRX9ba6DlKfmeAieiYpQrOO7VqgGGA6H0eBc2p//oprWojU\nuZnTseTl5T8ucRxbbwboshszzdmZuVSjogU7N1b7mw0fDI7dBbGlKsYjpq1i\nOjNf18C7A1cP/puEzPvLGvfnejptIcMhlc/RR8Yjf/WEpzKhZxBsmjlTfUEK\n5EHlYYvu6w+JPUQAPZoX8J6Ioi+Fg2LZM8sa2537Owl6uGhqxSkuF0VNbcnY\nhudQ8pud8/+C1PP0plIdXXiK34731NlbwMh3XSQeWbl2V5vZVwaFlHsIugku\ny894cJHfYmNN8OrtnlyQpe1rHJtVMA4wDW+lLZ6E5L474N6X2jh5hxV50KNN\nrtij1zQjYoN94xeYf0Fo4SzWdEKrohf1e8RGhP4zv802pcdf7XAxem048mTu\ndOEUnENkZOEarfKpSKQuk+7SBRYn47IE8R7ZyKW13PJkEJEMeY+giBl5fZs/\nF70o\r\n=eBtI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/density":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/tab-scroller":"13.0.0-canary.28656298a.0","@material/tab-indicator":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.28656298a.0_1627582489725_0.8390649006489763","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/tab-bar","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db0c1f234600badea0842da4f8573b5a96990e6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.9e797daaf.0.tgz","fileCount":38,"integrity":"sha512-wwYMH2i5HPSE1ceC4hnx7W2I7cfLRYHRvFO5q2KhvT9bIASZxTj5Z2oYn7PZ0xwgSgBW4T0vygZ7yRd7awZauQ==","signatures":[{"sig":"MEUCIDCk3wq6+CTM4oZH+JRNKG0TdL+EanoQNNd6TgiSfMvnAiEAr0XN6crE5BD4Rt4BE29xc3mY/NrBmt5x5huI2Yit4aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvVRCRA9TVsSAnZWagAANU0P/1UgZH6gJ4u5erqsHLWp\nLbeDNZ9B7DiU0cJ9tksPHAFMbfow9bR3+TGHypzoBNyTfbQmFgF9pNIWv2Om\ne64T4CCOatI6vJHIupnys2V6x0DjIZPnAfBbGSXn0wtqDbgF6IRsfNUFoOPq\njn4ngFE5rNLeOFEnhtbAzmUPnl8k0ZNZItBzLZTNgrozggQiAR9Jpjq1owqO\nHx/QA+nHdB8Gaz3r5mK48hF+yi15jegdgzW1XGvn27UX5KeUuXnBuNundrqb\nK7YrAcG5SFRS8V3+S/mHQZigefylDmkgALI/NF8jp0g7Jb8M8rCOsLww0lZh\n89v2xaRSnjqAvO/sQ8IgoffNbEdRSUKr67eSHLIabVeEUVQ7uC6UY33/8sdQ\nhs7Bk0fC3QNVq3Umdyu6zjQiYJTnAqdPqZwwi2aevZVJZkTQaC2KYQsVpFRc\nNhv4PSRBGc9hokZ14KpdF+ujmu5DxyCPuLVR6VfG16cZnO9KerkIXoJAF5Kw\n7THXIv61OA8d0Rr/WJe3NpeImaafoNnPx6zH5qzIXP9vOY5o1GOYOl5bjNHC\n503k/whphoswmN6UK2T6kqRI6FbMyNeLxEFMZyUeEMfUS2UGSWljqUdqLHmq\nVz5bvB9NYaS2f3OfkzXOviPpQG6tyspggfWs8j3fiPjqIL6dN1xkyyYWNx08\n+nlC\r\n=AT+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/density":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/tab-scroller":"13.0.0-canary.9e797daaf.0","@material/tab-indicator":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.9e797daaf.0_1627583825712_0.35340252149037754","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/tab-bar","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c115ff7145f92ed093d76c312c8b2f096adb7250","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":38,"integrity":"sha512-Kfap0Y5oIjYktBAc9WFykdHRuYfuEvL6NJX48gQeN1yenHb5qxoSrnA4qRtoVizIpxxroylPf5TGP8MtNNEWWg==","signatures":[{"sig":"MEUCIQCiKOnjNwERlfyjKtzwhHq2a1r5Z/MAc6eHnkZTscWWSAIgWnLLB9mmXpfzljPc/6xQOLU7vq1iJmJm/fLJdOoPPUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE3OCRA9TVsSAnZWagAAZIgP/i0hBUeH0654MgT301Rf\nzwspn47A1C01xlQ+7Mf5jydEUAyPah0tWBtfwYdY0jhUjJKDztCZPcst40QW\nulHKePBoHwTbaLkWnJlsEswHPutYDipPCw0UartHNkqXleikBE/gVpXBgtwa\nXQZXsMdUDpqXJN1/eP9g8oQ78TgJvl61hn9bH9dDW4E0zcTwo6eKNd0apNhV\n475R0C3QNQrg/VOfXNzof6enNbXpFPDGcP90gpvJ6vQkhK8lQei7/42J0j4J\nVjeibCyp6hVIIRVhetiba/R64Ri1rDXz/3d7GcOq0Kgg+oUcVELuaMkPa3E+\n7IePaVirBNHVHlXqXGIU0jbr5YQxrELJ19STUvEFuF05XyCbT5IYIrrGPy7F\noHokLeNmwhdMQulxatcX0th2x11Tko6lZzZFCLn5Ehf2cwMhDWo90eM8Yrlm\nt3wnT0iM2ppLqoOOfQ+uPjf4qaVjhmHx5MCK/Wrtfcx0exUnetJxXJoHx2AE\n3Vyu00G/ywPcOKIiM0LNGoCjnzZtws0lG8UAHV6ftbetkYAzTJyGB7aAVaAk\ntbRBfhzXrp06MyPfcu424kSjKYyS0+qlc7ZOz4fju5Jz4b6B4R2K419qDDeh\njbfqoAvC/cx7tijJmZTej2SQCw7Vn6gDwCBXaI2L3FDQzhPWG0bUf7jed0CQ\nVtPT\r\n=en94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/density":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/tab-scroller":"13.0.0-canary.adb9f1ad8.0","@material/tab-indicator":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.adb9f1ad8.0_1627672014115_0.7861023926163246","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/tab-bar","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3011bdd2b4f092f530968adb069f72f9f9691eb4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.cc5377458.0.tgz","fileCount":38,"integrity":"sha512-C5L03N9BoBudFy3SZrCUTBZEvD/46D2XawlwMRRbIryc8wGSE6V/RfoDaW8hZv/9ZFwGIPcLY0dM1XcV0Y0BFQ==","signatures":[{"sig":"MEQCH2WMHl9oP7ECEUnZgJfM8sDlZCBK0EsyJVGOgSC8W3ACIQDJmqM8dq7CqqGBn4oSFqjyYj1JemMxLUP/nYT8RviNbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHCKCRA9TVsSAnZWagAAvmQP/RNM0b2RAVNUPbQPQQrb\n1tsYXsQ9OQGXJm99mlFPxM0+FeOj0+VYxQUV20ZMsQAxfndenK99TSxefW5T\nqVoQLQB6BwuCrI7NBL8NeIBjifx8r7NqjniSAB/0Nt4VY4hIs1v1Hbc0hIyy\nWzsTELEtf/e51BEo9oS5DDb+yK1+u/P1sqPq2rGAIkfMLj0Za0aPNdYSSicT\ndjmu6wH6iWqO6MkkCaZjIoA8XHT9damRq2AbXy/uDH/e2snjKRRHjZi9nIko\nOtm+kwcBEbbUQviazh44jtT9C8RwF61f4pL3FV4T3cAQhSP6XE4bMj14u416\nn+DlcuH/TzVVnsGP4kN8Ym0RrIMBTuN+XwxSt7FpekbBkQLSrk/qNaSKhyuR\nRyavtRsOHwKCsR2tyR9tPT2EkMOfFNgdUrlRGPB7dDANRI5Rh4guNw1KFklP\nVJSd43Ma4rqIq2kPD1TIYtRwhWLiWmVjvEjWNO9jnIvDCiL7yzdTpwZqztfa\nf870NXYwSapsA+4b9m9tPmtteCLFGYUWxco6wxE8iYkMaNOGfZ5G5zYsGDJZ\nGBxJASW95C6BbrhBxkPD6sXujzmp+IfMxSgnM9U+vIOE/2fzmYzEXDqlNY4s\nyuePRErszMOw2X1okVo/Ba1+wz3BeSqTN1TN9pSDb3ePHkxS0iRKz9yINOAA\nWwNC\r\n=V7EQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/density":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/tab-scroller":"13.0.0-canary.cc5377458.0","@material/tab-indicator":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.cc5377458.0_1627680906480_0.08895856585899264","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/tab-bar","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a07f7911496e8b26d0a030359f95423032fcd5b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.a395972cf.0.tgz","fileCount":38,"integrity":"sha512-SgSUJzQ74JArIt/S23XJB263C2HWxQ3935eVGxWLa32NBIdG/eTK95egSZ65+AXm9XXf+QWCjAs3IW/CLXT/Eg==","signatures":[{"sig":"MEYCIQCcIBLHR1SZbChvfX28vWrno5BSN+qbtEZmy+CaaIW4HwIhAL5YEmxtCcUDNdVWjLf1Q6qHX9PbK/vxdVVTJogo79YD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQzCRA9TVsSAnZWagAAloYQAJdMcCgGC4uHHcalLVwz\nhZHknmC1gl3T7VrrFthyvqaR2rn3Mi+IKAguYhq7OyEQAaIZw/adZzjV9fQ6\n9LBsLO7BY4dDKq6WDFjgFqoO5QcCmjkteI5/k80kAMVxoH7aOfJEbipGm8MT\nMRT/kzqNcYHbFo0FbUGgPC5Fki9ZmJkjBgRswX8DnWKxO2AEBmLINAS8bsQF\nJm7GfbwuJq6BM/0ueNh5J8MkeUP0xybMRffHLfnGor1uU7jiXEDLDJP9lV8X\nMxb1J/7xvnD4vtrP9+NiJsOa9Gf9JLBYpV3jkYcT3nnAzyXOzMOz03xOHf/4\n9T0Nt5Kv4HF/mEQ8+uSle5yUSbaOKcpCuKZiqN2SFt1DDonR5xaA/gzHwcF9\nhdg0irFnbPx7+mr4phbHj2Fo88u6/3nLiAEuvYO9gc0PfiYYXPNIulrpnnCb\nHUHfKpnasADVqtavdPJnvO8pP0kYOxMI2NkIhSoeuzlIL9x9PTfFVTmS+u7T\nO9vFu5atO5bN3BEGmIqRiw81F6pP8BYMUrTYvYcaPfkrg3DaijItpEky3xvw\nSlj3R06+kA0GHD/j3NWG4/yl/U7dH9tgI//OYPyLZZL0TQjuKoftId92wZay\nnm56QJ/Q712H6huhLzLCQgKm34fl29ZyQT9vWQHUYzdoZeq5XtLJhrF8Kxay\nHkGO\r\n=/f/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/density":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/tab-scroller":"13.0.0-canary.a395972cf.0","@material/tab-indicator":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.a395972cf.0_1628025906954_0.9973484817830869","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/tab-bar","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c933260da6135ceb256b31d939dd4815586c4e6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.7c96e6b98.0.tgz","fileCount":38,"integrity":"sha512-4/cSvsWqCOG/e3yIr3gyql6bLmezsot1ysdjncUc37vVYwgTzAaLPMYXgpYBZEXZGZiI2gTzU+KVXvZUnAQORw==","signatures":[{"sig":"MEQCIEDPPTKM0xK8pPmAEVyDvMibpMiG+LruNcza34I/gIJiAiBS/QnGLAw7gR4ksR2L0DmQ0cpjXaX3fA5JUsHplH8ykQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCcAKCRA9TVsSAnZWagAAPyUP/AqKRAy26EMiJBFPBe4D\n1TasWtLni1VSkk75G8C65B7QenJaT8KqP/RIRGqz7yygPrRqBLIaBRib05VE\npFm3/T26UItaqK2smUjyZYSbgp+CaaZlsWZclP7lKOUmTKdO/oAv2I5Oc9eH\nXTEr+2Upc6DC4aJ5lk4M9LEE3TCAaVjisQnE4l73A7X0YEU3xJVp57xgqs10\n2FC0PVHPcQAxu0y0QJiMAkObC+GbRKAJjqhT+hrKSba3sPZp8Hm+0QaJwBuq\nyDeWjZlIxG9YAUXLGAupSZdRH2PTUabaEXQ6GYmCtLtQlbAO8YS2zXKZvNU8\nl52BZOWLBQkC/6NWSAG8ti4G5PXidz+5+RnQOJp+2leM286Z/wanXEuYoPAZ\nQppty/7lREB7PcrSLvqZaOWTLA9Ymim2J3sk8we9Iu/LPUvOa40OpzcArBmF\njLw9J2ochWPMEUPKeTWoVlycgKcTRvXICjRzfTyWE91QUg9clugi1Gm4q4H4\nmGJ4/jAz964XJl4KV84+eQz93WvW+wRlcyvJDRvCx1a04pLiIy+1H6xWg0xC\nTUvWSYYXqf3DPZrAqdRmkF7vnQUSoCRtTcXLnwAfKOMEdGYYBXCcVh3+9AEy\nI7+D91F0bl0Kp9pQZXXkx/QImIXEOyhGBU38MB3rOYdPdqflw8CHZIvmYgrW\nh98x\r\n=b4ve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/density":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/tab-scroller":"13.0.0-canary.7c96e6b98.0","@material/tab-indicator":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.7c96e6b98.0_1628028938705_0.966403919216527","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/tab-bar","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdaea6de0466046a04e17f68c6fcdad1e314dda","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":38,"integrity":"sha512-oPzHG/ZUCYrOIFFgzxT81rvz2eoT3lPp2uhcfP9uP/pOaswGYVGXgqnggkhj/2Pro82FD7bHabpFX1aeVMhrNQ==","signatures":[{"sig":"MEUCIC9FaSjqVxHI4hLJzq7+nlmsgNzbFbkNQhI54wtHLJqbAiEAg++BvgaTSq1fxr42WFiNYXjPOwFpJD/tXvu8Ecq1m6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCypbCRA9TVsSAnZWagAAuUMP/j4nxgNzmyPyxRB1YRbB\nzO3gGuZh6To5O2wDPcWcR4W+a5t4+LyNRbMUiVNjYsOLpPVASyvgk0PsDHAd\nO26dILKwqVY1jrwl8PWhoQ/nfEhvbrdTNQWfQnrQMLhYUBxjn3thOi29bWrr\n9oJJ7ddqZzm1t8W03LXDdJMQDqOv8uGbZsdbnguuc1TuvHLe9S36ORxmSIEa\nutHF+ydvDDkd5OfiYuDGf9MVt84EYxWgdAF0YDNRcOPEt/q8oH9WVIZtN+qY\nCz7Wegmds9ZR6ZAOkW3Dg6+I0wImAVZoli0pV1ag5t+ZDiQYmi8ydLE0aRd/\nTp5btycCbJTy2gDGOfI/5gF25RJalCeQP5aFcEai81D0JHty4kpFP/CxaL8k\nccdEVTuZrImP0DUwGslGFjT0f4qVHMmwOMkEjAEdCM2Kjgh/OwskAbXZaa6q\nfmMiv7P0xmxpCjpA6gqHd8KIL+m6lpIwdtI6nY6H0mRnRsGVelE0+4jpxUSH\n4nsppJX3YN9pspWxsolnAu2zQap8oI5nKllrVbqhYK+vkvODkrf+/KP1Y+Ys\n8sGcc46el5bSf9pZex0fUPzhsIhlnWgy0tkKO1AXWLpcIUOvAAsdOA8lozY5\nPr0OVpuqkwuUOMUG9pqtnyRiYtr+xPjoGz5w037FKtanwUczAQE6bFpD6RxE\n/Z0f\r\n=ceQj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/density":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/tab-scroller":"13.0.0-canary.a80c8b2c2.0","@material/tab-indicator":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.a80c8b2c2.0_1628121691721_0.23413185794055646","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/tab-bar","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6144e816929f7e2a3d32532d78b43876994a8d5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.3dd611091.0.tgz","fileCount":38,"integrity":"sha512-YveD/ySYwDetObm/gNFjnd/3MoYZg73PRosCvbVx3NUJuDokk9xu20URS1LyjfilYbLeaJAJRQqAgk9sHTKOOg==","signatures":[{"sig":"MEQCICW90/OIK8yf0/a/8X+JSdO3lY+6lrpL0ppyImz/V6q0AiBRc0r0ABEJzuU18kEUQxX0extrVcYI+YSYK3RXLMm38A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2HiCRA9TVsSAnZWagAASpwP/2Dl8mJxRTUD7nvER5iW\nnx2g0EkXnMAAfZQjMgoSIXsE11PE2RoUxVlboOrJm1h5e8a+xNubaU8kUCjE\n9T5xWsA9yy/k9iOR1NpydjhBPX9N5WITwYTkVjEDFbxwsw0eK7sYN8u+J48u\ntdwgANbwEU9RUGHu9ublNss9nLBJhYjHkwDRBrYsgQG7+24xmxYYyONnmuLI\nIDYuuJwEQSWcJ5dtXopAuE1eU0bacv+vIe7eTx6Y7NyzQoUzSppMCbRpksDj\nNwB5m4HwJsf77D3rHThMHlLy4PvB0JgcOB3lY/TfiISVIakRG9EbWMH0uLrj\nNYc77/R1L6H+HYa9txOchaVDD2Tg3aTDaJ4ZM9GO4XDHUvwxvQQX2oyZAcNY\nQbSmHajmhgPRov0q/OqRVIr5gZhTdWayboewxUZT/598NOcknJRu26X98wNT\nTh4JwgOhqgSjZvfQBpMg99PF25Dj57kJ9LdSr3hNRn5q8enoF3i3TgKbCS2p\njSEu1IXHj1uJh01ThP6IyLvMq7kTtPTr9+BCuzC/vxdpY5Nzn+K1JXiOOT9R\n96MB97LIvuiC4kOp820G1h3GuCHuPC1PYAsNWxDlGix0rMarhxYCECTBcSRk\nP04/xpyoeyiVPuxuSdgzPgknmv5PzwfDKE67K+R3i7RoH+OcqFFFD/HYd523\nSMcl\r\n=jNCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/density":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/tab-scroller":"13.0.0-canary.3dd611091.0","@material/tab-indicator":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.3dd611091.0_1628135906534_0.7919437170719885","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/tab-bar","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a94817eb477ca6f5342a14977feb2dfea8dd9f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.5dee37ff6.0.tgz","fileCount":38,"integrity":"sha512-MiL6ksBHqIlcby7Q5Ve7JXorLNw2Fo8UbujQnTpv/Ay233eUvEimP8LCcKJyPFAuySAOcPsWdaPZurlBn6TsvQ==","signatures":[{"sig":"MEQCIEtJV2wUlXrpAwHWHpIaWo9P7OoJG0/VSGSog9KXV5/FAiBL2A+uOxHsajw+1/5drXFZkG6DFETC48pZHu9X5dhDQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNnCRA9TVsSAnZWagAAqAAP/Rd0O+D1rp8aBiXqJvjq\nD7+rphcFxtNdByfuw5pZCXsIcGZU8+OnLiPAPDo/6DzyeLbWBaUUDvITggVl\n3xk6Gaet4INcHgUWA0nDCmFR9jBWGY2naYv8lE+Q/ZQSL/GG/Tbclw2lCq3Q\n0NhMfyJiZCbOL0AgdNPb2KrkIYb8ACv7oRr0HcxfK/d2iENaLjGo74iQ7Nft\n8f3rI7L2tF7FlSgghaHOjmKsK/J8SoDhtL8vyKf06tH70YrCvGR0O4RqV+Nl\nrn2qE3uRoRfgobkaadk4ZLEEN43Ftmz72Ps88F2hq1U8WghBLbFlolewwt7t\n1yBmijacPxrp4qOJ9J/DXygzG8trbwVLUspEpP3nr4M/6KP6mE+dGgKoQZ+q\nfsyxllvx8PNDP/hTZ4p/d1HVhiu8kdwe+kiqC5rVWIC9gvAUaw0+JLNYjznv\naJ9DexwzjPkpchhL7oVlKETrawfHycGkI/qdzk3PhupyrbAWrJExRRQD4mzi\nAMW+CIDFdym4PrgaedDfMtK57md3pS1mRwXyEpNpq5/fLymae32SyTE+ALu9\nOgbNkc2yMFg2zSSkuJNssfKKb1pvnKAHlLTUYJ83hBvC2lifrJVTKV/9OnC+\nW0ygk3WxURXMaEbK1ITw78Z+mG3x1nWToKKujjaI65zPbNjxA6k8npOJ3Sgk\n7H69\r\n=TRuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/density":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/tab-scroller":"13.0.0-canary.5dee37ff6.0","@material/tab-indicator":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.5dee37ff6.0_1628185447122_0.08220957424537234","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"229d6ecae4934f60f6bebefb21c6a1531b3b30a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.bf405d22a.0.tgz","fileCount":38,"integrity":"sha512-wN1CZedmRHFVYbfO2SbUNP9AnE1XszwfYhiGCSoHiKGvObMtpKYrl0Qr3AMhQvLiV97lLcdkTnJyxueaCUuHVw==","signatures":[{"sig":"MEQCIHoGR49BsekUtRd0xgkFceaYVP3TjSxDfOD+A1P+NcVOAiA/IyJIuBTKaYziO01mrY5dMSptIzDnbb8X8PFE/2OTNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfyCRA9TVsSAnZWagAAvbUP/0YhxV7eFdDrHvb5mJx8\nt7PSibZBZ/Sd2giZTEe++bGMTU9g0oZ6VeaP3Nj8xekxf0n9oygpLqxXpNhW\nAjrJp+fSSYxy17TIO1RVwxKbgUqixlS1cnNV9m+8vbxnna6EXFLMuBvYe0mp\n/6g02qXvlUWfQH8qib3S5WXkPCrheMRsVe6wq7//nrao/7KI4ziQhFiFc3nD\nQIw5aBWFiyFwqVhXx82QMpTf+zjANmj9RTnHn9osHH/PoN/bNSjeh0qGB2hd\nC7b0sVsDKUqIRD4oZfxUxlR8dAHonEMO7hzg/wp2vHVlSqMvV7QsGBrEh8+c\nPNx42jd9QT9o8JB9BrefF/4ZDxEqFfz4b6CszMM+EH9lXtomtA2+wzo5BSWP\nOuS7uL+Lixrq0r9DKoTpwH/VyD8b5HKnjj0f6OQcaWWRZzMj8rQCNZYifULe\nyrMUDBp+/1heOb7U923dzpTC8tnpQyrIalGUCjz54q0P8XXcjfpvTiw75uCd\nBDiBPUjY1gx6hMc1ySGMWRr1VAfEUw75rg6c3a+dKRFwTa2RzAy7OteL18fl\nsEgluwHV2DCskJy5Egn6Bj4p2o2B6vQtf+Mx8MsRqYxlMKYDwdqF6MS/OYm/\nEcweZoq37C1cRlle0lQrO+svoCyJnPRCNc9EnS7f9tDofzNHFOnogo4T0G3B\n0nSM\r\n=7kMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","types":"dist/mdc.tabBar.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/density":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/tab-scroller":"13.0.0-canary.bf405d22a.0","@material/tab-indicator":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.bf405d22a.0_1628194801857_0.89332480555426","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/tab-bar","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d6d289ab9c0cb7e9df69e75c2947f6c1e8b460","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.b47dd37a6.0.tgz","fileCount":37,"integrity":"sha512-2YvsSD7juIGwSq2txrCW319kjmI5GO8o1QxxBwRTy13yDanxwe+h1wm4gCbkfcM8IGuMYCxeAe0lFI6Nw/zwRw==","signatures":[{"sig":"MEUCIQDd5ftmWT/SjQu04IX3hoD+YzRb516822q0TPwAQcfvZAIgPQiXrKALSO6VRFS4iQPRJ2Tzue27uEmRS5u12X6hdFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9gCRA9TVsSAnZWagAAiHEP/0GJm9r2OCgjgN4sASQn\nNmRAFXsHQMw/w1tM6SjFSN5TBQT1wnayvzBJN23xhihGhOFfwWmGLQZ6DPb6\nA9dOnARe2UuSw4RYUisUWvkzDOgZgpgcAWzxE8NPr7UEBhtwyIal9exVO2V5\n/r2cm7kl67f58V8rQL5ClgpPEgaLn7mG8+H9GCxsXjyjeKV1R+4gQlSJn0Vs\nTlOjW7tuFvwnhplnjbxbHPRCyC8cQ2Kk5YXhtv2xIAIj9GafiyXVR5NtfXaO\nFWLxCUYE9H0gkxemcoIMRQoA1KvxZakzOyL/toKuUE4PJklgeFikDAHMszTM\n/Bwg7yXHfjqdJw8BSS8InBksEJh46V44buXx/deYIHk4qlVqLmQrze9yMDXE\nWN3+yOBTNtxsaebzpDP88oZs7Es3xL6Nag7/mjMP6WAatWMJ7hzzLwuzjSuh\noUS86mdKr20bGhGUclZGxy1pNzSF60h6jetxVTs7yH4fCJqy43wd8/SzrF2R\nL5u0pmQW00WjH1BQ5jsdmU5y9dPpI9dsRZQA0011qXMLzMv2fh9InfId80tq\nZ/pgDswnv/WGnnHz/fAlG06bhXCe/QaWDfC2L5xKgCNzcX8KiPNAWaRkMwR7\nOaqPZ04l3/fXZtg4U9RbOUul9bgFcruDemUPS0E1LWDWdf1KKMnrF7FpKYDF\nQnKl\r\n=yHk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/density":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/tab-scroller":"13.0.0-canary.b47dd37a6.0","@material/tab-indicator":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.b47dd37a6.0_1628196704501_0.7531044142058128","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/tab-bar","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b625c21bc732d2831c0188654ceabdea6b3a91bc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.6c82b965b.0.tgz","fileCount":37,"integrity":"sha512-ycWv+om7UsDLrCn667uyybFtGLIqqqilM18nlOwL0Z/bBN/iINcuxtxENkGvhuovQNKOCIdMp3adCPVZUxsD9A==","signatures":[{"sig":"MEUCIQCR3z0nVjU0VxWGo70ycKwIZIBdZgXyjyH91Qz95l4gIwIgLyet6wyNNtRZOrhQT5KsVWga6OpuP53HYMv1XxZD6jE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBkCRA9TVsSAnZWagAAclsP/i3bpLmWYV+R9uzHDBOV\nS1Gjgd96v5Fk2rNWYpjPNvqgLsqJhQ87RLOJ/cGkfRvmofql5Tw/YLW/f8s9\nwUqfKlEgZuy0VoP35kKXYnwD/lL9F5w6G5l3lNoiN4Z6apRdpLC+fJz0FHUC\nHcKLyco4gT7eP6dwiAmGTNJH79kawsBibJ5RyKf2zmbBZJgTsS2+HXB/vMzD\n42C2gweDCcd17nDjObPeh9pJx/OpiYF1xyaYuV6Vsz4rjzDINsf9y7OBSH0G\nxGaDDGr74LY7JVWYqj7+YdXzybngU0/k1x8I3qisYIwN6EsLjMqkYA5bF+oQ\noHTjR4yyaf/LW2/5JQcIyH4q41n5qesjqzXz20bo4kF6TJUQfOH3UVxK7xs2\nbQM6J9+JDTwJqeXuwXuk7KBvoqzBo0hFd2LLe6uwRP9vKhgcLRrrVJsRrScK\ngZMs0TX2C7N1mxY3C1aHnbCaOcq/8Ij76hfx/8eIX6oeVNLA0DMSmSzeraec\nFiuNghyWVj4f+KzjiaZIXuUIEVpM7jOImWm+Xl4f9u1GGbMQCHDtwEDT+Oww\neLPNOGfgNmscIofJTebTQQ9yOGwBDVd7LAAvdaJ0RH5ofcI/DLZWO6/PNa9M\nGjKuvr7L3L22r9TCbRHmnsPqiBre2Kc+Dti0ZHslU1c1uEaaoBC9+azySmm0\n25A+\r\n=Qbpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/density":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/tab-scroller":"13.0.0-canary.6c82b965b.0","@material/tab-indicator":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.6c82b965b.0_1628266596343_0.9983661061519922","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/tab-bar","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2008445301701a9a0581967bb3f108e94e213ec8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.4ca11fe76.0.tgz","fileCount":37,"integrity":"sha512-0AQ/XFpIApbub3vMCF1ED8KfOHC0UAS1xzUneNQv4RcjH9iRO3Kd3WhCICEGnQ78/38d4d4uZ+YARFdWzBbkzw==","signatures":[{"sig":"MEQCIDNrS6AX7hcHr7imo3Lm+7vA0IyI+JLhgcEstat461DOAiBPb5+AmXiBnhMSunSILUrzS7+d/Vui+fTmkAHsTrigug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWy+CRA9TVsSAnZWagAAWcsP/0aFnPHTRoem58VP/yB+\nuHF8fSuXLDSk2/Yv7j7gg9MlwGKex27TBal7oco/ms5MZpheAtb4ZysOAFTz\ny/EyG6US3c/sRQ4Y1NavxAGWFDTtQ3PdSkU0efqZMb1lk0u06vgPYJIEWtLH\nvfxLTW8129C8zhJiPlbJtQKvlDjNF3FI+TemUN25AHD9NKpvUkFdf6TG35Zu\nyEdBfsZpYy+lY0smO1OeaVswfp0SkqLNc3hfn8F57b9riY39I/csHmxW/S/J\nrf33OcgEJPxcpImsboaxnWvd1wEhyNMpovhGXBj1w07WRZAoRFQ2GeP0wuei\nMwBstvIWbH2BKi/HS+DY75/Qaom5O1LWLaCtnf1yNyGZaf7Lb48qvL3TcwX9\nPrDwLzabFbo09XbBAC0b08LcGuUQpmH/ixJq9sIVo7MRc8WoqjbyN9PUb/v8\n5Yxe3ZYA0DC99SwWBYLvd12NrW8CwsRgYUJ/C5yZ9WBs1tWvnwH5mu7JtvGn\n56S26roaRY9QkCVNuSaNcoZ544qb737koJ9EXUbCxQd+09IYkArkPdSPegYN\nLVaVM8aWb+J8wefcF0+tXKCdPTNg9AEzGA7CVZDPdbH0kfGORC2PENh8LqJd\no/44MeBODCJzmi0aP9f7zNUDZZ0FAsllKXR0/hBYEqHkdNTxt262af6peQRE\nAd/W\r\n=w29Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/density":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/tab-scroller":"13.0.0-canary.4ca11fe76.0","@material/tab-indicator":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.4ca11fe76.0_1628269758301_0.8066128091799454","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/tab-bar","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e140281a167de3e56aa4c1e584e20a3b844f015","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.510cf90f2.0.tgz","fileCount":37,"integrity":"sha512-hs9yPn6yfRXD6J+pZ939cIfMSuETzytaO7aTOkDf+WQOdx77sMSXu4Qau3VQgv3KF4Jr/Z09+002cZWRa8ObLw==","signatures":[{"sig":"MEYCIQDAXuNUpK5OQHi30syrCSQf+4/P+s5rdB7HJjceSsuG3QIhAKgFiaWNP19WTpYibOKHueJJddTDGRMdJk9Ssbm+WH2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWOJCRA9TVsSAnZWagAAf/IP/0VxKYjk2wdKr+K+bh3X\nUu9jhC1ixBPcblRzBPDhyrGzJDTT06hq4Rx9ZK0QTDVS+w6xJPehEtPwtRwg\nlyjSUc8RaOhtDSDxp32mN06wH7/sQYEw3haqmoOksTwP/bzn8tzJksJon1wq\nzVa4Csvlby+1iLhKnnSlS4vtCD1JqEvAiVgTB3K6rMEdiGhwR2R6eOourkmd\n8dIh75S6YFxsPD4+99P2kvD26i9bg0G/wpyaVDZsJh6RsUG3fFVDzSsLNFNt\naQl5VhGGvXGU/FSU8Hr28jsShQGK3PNv6hM/PEEHKTbUJm40w6nBGbsepr5Y\nJ3vuPyaGl8dB0Q242K5KlECgItfviToIZkqx4LJn4Ov/kJXU5pH2hFQMzmmd\nz/8FolHwfa34X1VokcLSJrXrAeEB0UAWiQga+HH4FLDlW4SNgZt/ZUKesaxi\nksXPRXlWXlVwKYhr3OSReBGAv7uutXV4xxbM5c0R/mSg9tmKp5UvvMPhnktS\nWURNzCrXMKXQbDYuzU1wczGGOB1NYjALayvY/qLqgnLZiNpkxrU9LnYWAzFn\n7fz4VWMByt8QK99ocOQj5399B+LjHExN/nxCqDLcMmKevgmNBztpTpPyPCro\n5kJ8iXWRH2HT9AmV4kSfK7V+Zu2Y5y+NOoAuJ+4KOklk23ucXsl6nsQcRXKB\nQCbE\r\n=4mwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/density":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/tab-scroller":"13.0.0-canary.510cf90f2.0","@material/tab-indicator":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.510cf90f2.0_1628529545592_0.8553105082692678","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/tab-bar","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efdf668cc47dd53bbdcbdc5310100f0a348f75da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.17580ebf7.0.tgz","fileCount":37,"integrity":"sha512-oc4wMPIaVdrI0kArYvl1EbUaQoIMhm0p+P1NmWLeafxlLtD8rRZcUvvWuzRgJoXBvaV1iVUgWPVMpCkKR6IPXw==","signatures":[{"sig":"MEQCIFOQwayu8C5mcXhtfvJ8Zmc4OUA4K0WXUbZEnRQ+rkXgAiA/dKX3ZHxccL1pho1GSbK/s4J0nZol0jMEW4X05DPuoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGsCRA9TVsSAnZWagAAP2MP/2+NBDszmGZtMz7zkeZ3\nFPHkYUqBGwlDGlid7JR8gtoaAST8Y5/kq2lcVHOag+qsRfVaF+li6OAVOpmK\nA5/JjZcVFw+HgXSk9q/W/9iO4eLbaFdAgxfNGIp5zlCIszAvyMsOZe+6ETch\n38K9YlPXdalmWMhQxx5Ya/PpDNo9H8DWKbcZ3YAVmZVL+SckjQcA02Gf8Eew\n9JnlUwzgMnic6yvUPq2SpibOmeqiywLeLC7gAvK/2I6Hr6AkyBXP2LV7WmYB\n+LXFfkhSC0WGgSBr3ybFfRZhDKN9rbEcMGhEaLHarJLa2WAab1ur04RTxTQe\n31NqwtPKheVy2AxdJrPtFYq3v7dQouP4sGRL9CsEcH689B5jDlChs3d9xvY3\nF9m2zD7wxpX0zm2aLfQGTUSfl8RZMAdA8GSf2Wv6DCHKrfz4ScMroxa9Klpr\nGMfIIaP1E3VK6mWSHC2iaRXUYtr2wRiavgnXol1MdsnrMdZ+tT2zt5GhbsAV\n6UHNShkQSuPJTBoNg5/HbYjNDuy4iCwgSt4uSyIZ5rI0xdFajkkR+zzSlxBl\nm+OqDEWf+K0sx/vqJHnZ/IETJ2pXQ/Fcg/6AQpiNQtfRTkIeNoIwY3enodpV\nVSJv6ExKIrNooQve+q7JlMn5KPtieKrAewuxZWIdzJlZwxBwnVKUrMH2vrVB\nc3lh\r\n=Huz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/density":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/tab-scroller":"13.0.0-canary.17580ebf7.0","@material/tab-indicator":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.17580ebf7.0_1628533164614_0.058661454569443716","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/tab-bar","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fc899dbce887ebab1a0e6838d1a9d696a4fe98d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.7249a3060.0.tgz","fileCount":37,"integrity":"sha512-WKm1t2iQEH0ulIa2KSWzFrN5iUQlMQVEyOna9v21/0kq6JtfnbiVJNn1qHKKKvbCwfXXHD9mLughZLHSTMa3pg==","signatures":[{"sig":"MEUCIDtuYFri2IPti63LttbJD6oc2NiDzlTnEO/4nwo/5YEeAiEAgEiDN2rYq6teWGWv7epYaVioPhLWzPwduVT2H+nLPtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXKdCRA9TVsSAnZWagAAlK4P/1EEPyh2zQhve2NwG/x1\nT3U+zUBVW3DLJka4NkY8M1tCFBpJzs5B++FWKXeKVl97eXaRxgcnZTHxWKLP\nRYRLKQhzwd8lvEHZykYycTerhjMzmvyU8rU39+NgdkdLcUXLtNeyR/rAxrFj\n9l9VRK89LSDEFM4h4C2VB4732KMDKWtCTft7xi6Gu4XxwiNxK67t8GUngNVB\nNCRFu5OmVY3TV0TgXmfgwU7JVn4AFhVg1xraUSm7Bot5BqplqxgR1pK4siym\nCUUdYk8jdSpGZwzPd104Etmp7FfVDTucpbkECpHUGCSjBIVgVpEtRZDZJh1C\nLHnJE3LhBqxg3ulSYIbs1Q7e1oeOAj9Elwl28o4SjRMfBd3S0znYxTM+mjyd\nvh3gqcvBYonUj2V3Rbbme+JyuBDuUkyrCx4sd1zf9lGX33K0siicyfmfng+o\nmmSKy0W4kXBvCefPEXqDchYVcm1JRtCTON5QKLNNAO6eMwQM3B46Q5yR/TWt\nlmcW36IznAOijQHCtrZPoSdEZ/d6QWSZqCa05fii6Bpouh2F2fC5E1TTXYHi\nGKcXEQKgIU5WwIoi35TwYSEzSrbQEU5ZJGjgKWSq5/wQB7HUmC72eHpMDouc\ndn5sWDiE/ktlPH+c7pJXtleOuqBqEDgTl72R866OX11yk62W8cfj9Q9umy5A\n/cA/\r\n=WUE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/density":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/tab-scroller":"13.0.0-canary.7249a3060.0","@material/tab-indicator":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.7249a3060.0_1628533405263_0.2448883137841924","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/tab-bar","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b303adee4f7cc6b0c802f21de3ed1659f85d090b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.4c405863b.0.tgz","fileCount":37,"integrity":"sha512-ym8fqj1oekyYWuBtdf5C6C4REuLb12Zd7qzgdP+4REYfrCfgAG/vy4Qw9+FP/kPg85MJsNT/NgDzjq24Z+TrPQ==","signatures":[{"sig":"MEQCIC4zuRtYP2obTaBx55VXMv4EJ0Jwh4WntuF+LIK79kGiAiBUYEsRqNadoD4KFsoeQas5K0i8oh9125jsY+DqAo5bGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErqMCRA9TVsSAnZWagAA/VwP/jjdaDcIV5pzFBoMJ24i\noelYGNbWT0WE1u3wn9i9BhfCknVsXErHvS8+JizXFKtog7CBpt1bZLYg3Zin\n94c+a+xycEUW7YWm0tcx7lKUJgEn0jU3+DugHNr9ASfW2GqsPHnhaq3wex2+\nLJy7y+NbWGbHpAGEzd3XacPDo+wCHyRDUhyghij4c6AIf6p9fzw7H8dqL8qd\nnG/m/6mFKHNXEofnapb/qEVCzvSMaAP7cZx/ZxAHt+cxrs+nssIkXxZBdopf\nQOQ032diO6FtasOg3REe9LGF2e7Dh2W8ayXx37U7H3+fCjMr3EplyxbrCBuC\n6g2iqHtXPvocni5/K4TJ6f2OJIMdusAuaLhvbD58SQUfNEssfrHp0bvFVY/A\nAOz1Q3gtkUlw+ouYMP+NqAZEOukkSFvJL/iFRdFrPzT7cqECGhUswF+dj1IB\nvpO36T4GcBmE99Nochx7qgMlPK9VIJ7MSnveVTddJgnfHiO1fIY8Wf+geAcM\npnuerpH1LCZqmuZtg6wYAoEhFX2gzWMDKuuX4YBPwT92k2bQngEBVTfo0c9Y\nu+51W7Q0mtth6hQQDSfjl9Ka1qli2jzZ4RKsBz+mdkJLYvtMRH7VjSDJGUgA\nvfDowQFna28Xw7j7wMinCK46dMBiPW/aixByhYswoaPAM+uN9sIMX0YemjYZ\ndeLR\r\n=6XMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/density":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/tab-scroller":"13.0.0-canary.4c405863b.0","@material/tab-indicator":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.4c405863b.0_1628617356241_0.39807855284987537","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9206cc68c3e8ef553cac0428147314144201a021","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.f4241a42a.0.tgz","fileCount":37,"integrity":"sha512-TpUFjo99tJT0abiBX1PO4pXvV3V+oO78RuSiYBn/BIMKeO+1je9dBO6abUMbMsXeCF53klkq8IpLYJO59KnxPA==","signatures":[{"sig":"MEUCIQD0zBmvADTkDFxQZFFAvYacKUXyiVGNHqzNHGDEds/4ygIgGSwcfNNs66y4ajGrTb9C/tIv2ZcC1u0VBcP2h2CDMe0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJnCRA9TVsSAnZWagAAchgP/3YJB39XPrQvaJ/+rgzI\njIiYYUSs4ew4wMYd/PRLss+OIk+zzcC92yYs4wnGVbihJhz+dXIlM6K+mdGI\njGWtsf4qp9n6S209oiiUHc+0I6tBq54WGKqtlLsfcx+kksUomI8A2NmtzsG4\nIAanCRfdPAw1JjrOSAs2FTF/Gnn19x2hB+ihKVpEuz2KtL/APPIljBuq4sj+\nt4T4eOu5TXO7+vKCX4/mKz2PH4ZWTv0UoseKb+B9u8NiGe/1pMq94l9IamZK\nbip6BhJg09ClPvrR2+XGw+wwi0HHqhzn7S4tnVo6DkFW66NqZsTEaEHJWym1\n30QDT1efFHQ52WfRcxAqD+NJqH6nGdbmOMTVpa+TdZE2rGyIRO/I7dJjq0mQ\ny/VP6Y6Csi0eeSWBbScRKn8hvX1UcyUiEc+nMbDlyfp1sBXmZ0gjOXGSjC6F\nue3IE1skRVS4hUSKNkHgP4+hXWaVqaW6zkCOEeAzQri1JX1kZw3VPUXiHuhD\nbGJZAQWCiMCtLE3T+bWBNcAr0LEx3lu+rcKxmZmk9fYIZnH+/MASZ3nwwjb5\nei9Zr4YfwxzzaBAT4zy2e0TbEgkUcuNu8l2R1gp9SbDyJtXcKP6rzbWDROaf\n++7Cmtd5mU7n/cVk7QxOJQVp/w7qffuWJyv4Lhdr1j4N3pkmBwpiJL89yPM9\nNllz\r\n=Tfcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/density":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/tab-scroller":"13.0.0-canary.f4241a42a.0","@material/tab-indicator":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.f4241a42a.0_1628701286927_0.9253095302531931","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/tab-bar","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba43fc9e4f56c693ba32fb54071d53b740ad1c4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":37,"integrity":"sha512-s13luDjQfviSkd0/aCBR8OMZ4PX+j4DGYm0L9w37DLhwh4aPIDOicDd2CY5AyFC9HU1tkKtfx9Tc2w//xbm/LQ==","signatures":[{"sig":"MEUCIQDSz6n2BYT/+6pjevgXORNqBNpe6ysSQ3J0+gSUWhwQ0wIgJkKKDVdInEYC88uH/AKb2sS8nW3K1am7U2SJFKu15jQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEF5CRA9TVsSAnZWagAAOjsP/0pcvjiU0yQG7GA+ZYbV\nP0snWGjyGvzPyMyRoQ6UmquuAdo7CjrEHsRhQ8Ej/FnJWMjUXu5gHpoDTKqV\nyTd6K8fu1z1NjEpABvtftafCCTZIAQTxi91L8Xna5GjXupNpRe7msnXlMU9/\nlFgCiEToICKpNuex948dAIZIjzNqKRizH0Mbr2HNrpRyRYvGCG2Jq7NrUMIw\nvZaBrhOF6hMeaI6QK8cBxa5p0eVffKRBzFU2ev8zRmnMk1OEONPksIzt+9ER\nM9OZW79LZzmDSj0ZXGTOOXids2NneIFNBBgB2T8ZXvIxrygSIQUieAh1HY4C\nO2r+xFymZuEpcGtUo2PKc0m4WchKw5BvIt2oMYtTAfKpv8ejq+MO8V2H0O7z\nzDgliJNDCnFVRHoklkNBMe60O/xn5mx4VCCUgmSoWPYFZDhoIRZCkbtoZ9Im\n+RScY5RFyri4c3PgTMOIq00Sq5sgoJwHPsoYItn6c4qtzdIG34xeNeH+ZH3J\nMlOVERxCvFuPxYK9bxPSOB30fZ38jHSVyIVkTNHttz7wJcBd7Acc32KQzHBy\nJwDlKyrEGHr9fsnn0vj+zKpyvc+t+63DJQu/w6Ye5dm0PzyZ7CuAwgm797fN\nDlPPKmylk9AIxeiLojVPVtevDSMXaiL0340DYkbVPTCTrsC++oLuMQs1DT4D\nT/wq\r\n=tzaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/density":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/tab-scroller":"13.0.0-canary.0ad12ed3c.0","@material/tab-indicator":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.0ad12ed3c.0_1628717433260_0.47481160209588946","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/tab-bar","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7dfa18e436a75427e46d5559ef38b6d22b9d1f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.077dcfcfe.0.tgz","fileCount":37,"integrity":"sha512-qgc2Y6zscjunZn08V00dlI9afDbP9jk//X+T4jjnned0Jyaldth6B6qWygZzk/Os2Z8bxwwTGjloDC2lzX4i8Q==","signatures":[{"sig":"MEUCIFQ5GlUkpkmy+bf3RsplxnpPLovChCsv9yvF3uj82kOhAiEAkFdnvk19pxGuV6iK/tkSNoggvCdUVlCLuZ4bRUxd/eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWD/CRA9TVsSAnZWagAAoiwP/3/yNi4UA+u8xlpKZ1Bx\nAvSqfth7WVY2wcVVeo6VTVPBaepmQOxfRsm7lWeRBpFn6aQ9/sGFVzUNxr2b\nkphTCEdGSpb9uwH/XUI92OldedYnW272cTczTQuoZGXoZ3mj/kxv/nFHMw2n\n05qajUiPtPCMD4rfTZo7Jnuxi6T7QHQWH+wiCinFYgUshM35RNGlGFEVBbeb\nBV29UXna34cLv2PCFyz3V6DYKsxZDA41dTzzgH0XjfvrvClBz0dGT1U9ArhF\n2RCr2Ff4oVTczxx5iRLifNKAE91kncDTWSZF54JqwEJyhc/AH8izamvMIBl0\n4eEHbCY20NIrX/oA4HiTAxSbZYrusrjwjsn7aptUo3THnnDV1AmFXtXgZjBn\nK4nnZ2FwRmb81uWgW9cRHFQRmkfP1l3HlpPwipqZDw7/uR6hxbh3ML12HD5d\njAbqSd7DDQZZAsj0uAQgWA4ZTXtU/vaDSjN8NJ9iJE+drEiTtv+iKmGYfe4y\nh05tpD0Vu8xcrZSq7nWbiGAoEfnxbt3sKpegg1krk2IO59UM92ZkhCLl3al6\nFUkkXyHKODK1bLs0SoPL6zL1V7vOS7NlQb3KMSSOFQdBzj6DihkYsprwwmMW\nqvxeq5CkQOmE/obHqJyOELik6i7pFREDViX4iOnbAl1Btqy0bQ76kn/w9huh\n85oZ\r\n=Ilqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/density":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/tab-scroller":"13.0.0-canary.077dcfcfe.0","@material/tab-indicator":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.077dcfcfe.0_1628791038921_0.9605585239306431","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ebc0f0ea153b21fe2d182345cec321b73b66329","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e3346766f.0.tgz","fileCount":37,"integrity":"sha512-LNE3JB8/3syswiaOCaBgwm4Mflflwqc+GCWMhHCLuM6ZBNjtr+gwXqTftChk4Z66kJ+RkxhgrdHNt597KbwJ/g==","signatures":[{"sig":"MEUCIEkKZ2gPl1hjwkqMDRzo3d/mamF2dZ2rkw/SdXiDqNGkAiEA58BwTjQxAAC7oNXamhABkzGJiznqRDtJ3P7NJUHgcFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsw8CRA9TVsSAnZWagAAH+EQAJz1MAc/7zPgRciUBI1i\nHvoECCAXYscOW2pY1sGajwNrICIYAWGJ3FKIjDuvovFDLvpCWsML3+ElVtVD\nx+LmiAoU1xIcIS0S6V22qtm/dbgOnwEjMTm98XVNc2PpsFjuHpj9KG552ilb\n547WOFEUbOXFg4KIv6lv3z0Vi2nKwpF9+If9WNsz7jJH9zwWzUqMb5tfOmi6\njjPRMtLKpNSshsSWZiR/ZzYhi38Dr/Eb1Sw6OIiyRMAOHYbGcy5Cv6mjS8JS\n3Ju7UDRAikvPl/2FHRF1IcksiH+vlSnT4/WjuBUgj2TkCr9xtY3jfRn82GvP\ndvpMNA3c1ryGltHn19jdN52OQkpCYRUhgZJqlj26YV+hMFeQCxcND8uU1XTj\n2kKeeMw5qKvnjtAqlSrM3uXjkWepRcy2ipcdTPOwfmmSXhIFspiGA0rTUsiQ\n3wT7KaKBO1pNdFBZKhkeF5G0+a8sdwnshAs9YaB9vEf2cI9+xp8yA7eAG7VI\neDI8uq5UzfyanxbuhzcbcLreDQiBDoAV5uAQR0nob3Tg5cUqKBYLKx4eYTr3\nFNmqzX9zrkqSx00O3SMerrJpJBdzbPy8SSf21ZJsUsrKesTwO1wWZ6z+bgC7\nq6oYqgi+Vnp5itYkWoNlGzqzV8UVgbH9H+LvaWWvrNxWkMvBJqHn+Z1017z3\nFiHY\r\n=+iOs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/density":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/tab-scroller":"13.0.0-canary.e3346766f.0","@material/tab-indicator":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e3346766f.0_1628884028408_0.3421947678522401","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/tab-bar","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bcf238ea7a99446a6e85b4f73c2cc848c917610","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.2fb068fb0.0.tgz","fileCount":37,"integrity":"sha512-ZUtltxYIH373plu/+A0prcf5mmm4EWzG+ghMwaYtdK5rO8IMxn5KcPm6dH6auouzloja3F0gUBPFYAKYsr2dMg==","signatures":[{"sig":"MEYCIQDz+IxVJ+iHPXZaK+1Ucuo40wva5AZCrR4cbaC/Bf/W+gIhAKwa26Lm2tmIdM8Q/Yi5+9F29lYkmHiScFRSOwazVCcg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsz8CRA9TVsSAnZWagAAjSkP/02WrKQ9dIG4R9zo+s+u\nEpfSspRpnJMjm/suKF5LZ9a1zLM59TlFkE1BDUBmij8WBH//VNfPtekMJiLS\npm6Yf74vkVuJ6qpyBrKAeTU7bXO2AVhm8HDlFBSPyXI2zYpiUWblJS6f2xXA\nH8m3xN8ThVTnGvWwgs6Ra2x61Sql4YUDzsw3q4J2c8i/0Zv5qg8P2+JkRlpV\nqec1eFm1BqjEE2DanUxKWCV9pfWKsHbuIACjzVvIvwdSLtjtwYUQuc8N2n7S\n0lFrjC9c2+QhQXPWZqn6zhlOiX8QVoEF9iLOhKUHAXvobBbDrZsGfeuFq8uo\nD5bbhh7YIgifgFgPEunNeR+0GmzpvWJSSp/dVq7eO3N/N7FtEiLJA0btT3vs\naevwyZeEsZ8v9YHVEslyKFhuUVKGlzXx2s9iKDVUfJhfXMm0njDooR45rmja\njfmEoFR/vEGQFl0UbSM0SpEI2xuUE2lRvliIRHyB5GEv1Fp1fwhPkp1yz7Xk\nIQm7qWp+sNAUKdPcjgOOqmICEtpXH610lHYP8D39uCquUfCv7SVwE9TVi83n\ny+7zT9BFvdjjbNCyEyovlf8B3WtXHZE5ttzY3DMAKYItUWlKxbRaYMqZanYC\nrlqzsqneGskcU3BB7L/XIjA2WaxBgDZ3XdpRCSgQ86gbdtKxRR72CP4si6Sl\ntkFw\r\n=uoil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/density":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/tab-scroller":"13.0.0-canary.2fb068fb0.0","@material/tab-indicator":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.2fb068fb0.0_1628884220525_0.41502711665112724","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/tab-bar","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"656b6b1e943bbaff811333484939cbd4bd55414a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.fb76c5069.0.tgz","fileCount":37,"integrity":"sha512-KQxmlLH93KgVWaJHvk2n/n1LxiOYX2eyR+oJd5bPZXis95UcXcpA0+133yl98HSpHRzCT7gTu8H0c+ukiATXVw==","signatures":[{"sig":"MEUCIQCIs7ytyFUIvJ5GXpIkj9VzUFnJUxY6uvVCoRUDLlmmNgIgUTh2F+ItN1LlcVBHOANvpGk61UrtlSPkm8c3k61uPnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsYRCRA9TVsSAnZWagAASvUP/jolKwBDT0dzOWB19qWd\n7dvM/mfdkqO7IjaOxt3+ijEWm2rZeC90cjDkfND0AJ9iWgX3K35f6/QhaTX1\nJtZSx1VPSroKRTRDtpvkny8tibZiTAO7J1dd8Q2tFDDI6KJRzrJJ9cq0rYIu\nOcFpVvtFPgxSiiIkknuWcjfCdfK6VXsZz8+SO6nXvI0O7BBK3M6kt2ltl37R\nm+6Njj1AnVIWchQ2/oJDgvJMpin/kMrfdycZIk1VCSctXpJd/w40Z4Sj7fqo\nBwifgtnQ1294iYff4w7kUFk6gw0Zyt9/beaPrZ7li1mZ2vW3KWFXFG8ulk94\nonKy2bn13gNyYBZ9Y+EmTcv5nm0pUxFEnAdeOFWrRapThrF7pqzYpaTToR2W\n0Twu1jmiA/oqEuiLT7dGNh0GhxhzIEs4E4BvoYKwmcO0SKQJJPYjfb7XPBzh\nz42rU0Y//lDVFZCZbu1miblF275r9GnZrwkxn9Ka7wQTCM5xIfRlnV3Pa1eU\nbKTkCexvYstZB1FYo76t+s/6wpUXbg+9S27uGOqWfYHEBaMwvZ1ZhljeqZul\n3/ippR71h1dVZJlgQUzC+QFCkYmAC/F/KjbGcpoI5ecf1mENA6Y7l+hSWvHm\n+I7pE2wAMThysh2kDhjFCGK80R2Iw0WpAy1k997pgVzb3k+h0KxIAAqEEzWc\ndmUB\r\n=yTM7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/density":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/tab-scroller":"13.0.0-canary.fb76c5069.0","@material/tab-indicator":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.fb76c5069.0_1629144593615_0.0733601718721224","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/tab-bar","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7829512010863918c634db916313a2d834c30046","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.457d89aad.0.tgz","fileCount":37,"integrity":"sha512-lz0tolFyr7c8Fla78W1KCw8TtuCf2+f1Qqd9z7akMzISwnc0YP/ulrrW3ERtekw/YlyVK/wgORDdKAyL+Ny3Lg==","signatures":[{"sig":"MEYCIQCrXoHkirOIVf5ezZng8QOcujXBtzz7Px5H4YKTtIYMPAIhAMkQsHge0azPMC3oFYZCnbFmWtANoQcdIx921T2Apa1X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9R+CRA9TVsSAnZWagAA9aQP/AuYsmZ2YynN4BCdQC/U\nqTAVIAsETnU+ov8yCB/UY0kwIEZCYSp/lYT0/MRXRp9kBDmI7SPkQ4DiGA2f\nI1cVn+1y+q1ARuWdzPFbMjRmT/shwRNqSjcNzUtL6eXNBCXsIqheGgpB2POT\nExNi2Zmhm+LzpgMNffSr7arrLcDUn7//yKGmkAskp4rmAyX9MK2oj4AfiyfM\n9ZvIv7/0JQZOQH6DNRC/pDZelc3rxOrsa6dMTGoSjWhnMSroIKm/YzwiFPQy\nwJ3voVSOVKBQi2wiz1oepjfaOiPMFYS52ZfeurkUnUzums2gW9vtuyS2cvJH\nFzFCgHNeiWkGfDgW5QcplSoVK1CMoYfwA2Cj06FLrKYxpN51ujIfjADK+nWG\nAoWvAsN2KvChtLX/3OWLmLoNAa2oMmpy43CM2GQj3kU5/SGiBdEa8a9ymw1C\npMGXAxk5JjT7Z5gNfeven/Gxe/YBIioxfsHDFC+9j62APmPv0VNqC1zS8dxl\nW/rJbfRlmaX6tWXuN/067uKtQrcE/KZUYl7xBDCeBbx31zwQmiyEJ9yXWfAi\nkcPP8qW6RX3Nhhqiq/+qFpnR6vVZDMShhR+Rh2w4lTQwfsluYQVGCzEnq7Bi\nhfl8h/41FPaPHlenirCc0SZQt01NhpH/D0TMWNoHtrPDE0tGITHjf9t6RAf2\nMgjI\r\n=y1H1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/density":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/tab-scroller":"13.0.0-canary.457d89aad.0","@material/tab-indicator":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.457d89aad.0_1629213822528_0.11074519887164302","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/tab-bar","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4faaad90b16a17235f6ac44b1db205cf6c13ae4f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.0de2f2edc.0.tgz","fileCount":37,"integrity":"sha512-NSKs/5zjSh7rIpx7GO3rEgMvb4+MjzvjgKVl8Svey79ws54WwaRNuYEQLosyYY7jc0s/wpKUeohsrV5P0L0E2A==","signatures":[{"sig":"MEUCIAXlekyUNxCGuJ85Yzcz70URmY9q6CwR7eoDT8ALuGxnAiEA8fRf9bfITm2HyfQJqHtMzOEr5yISlCbcWA5WIm+Vf3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJfCRA9TVsSAnZWagAAH7sP/jP9UkyoQ7wgnRGB2UoW\nSCccx4g2KLUOh9Pp+YdPZIeolC6e0gbSlVNM1yzen+QfDTYUnZiUV/ohoPag\ncEbOCGK28jDTVilbooWWf1fktCysGqNbd4x57bwW1H2sk+MerMe6xgKNYGp+\nptdRBESpJenhM7wpcpRfYhALhjj95TKAqwxj0DaD2jA1mACdXpSOUuoirWvc\nCqohNLaRXpzoSRIYZpagsHBm67S0SKCM0M7jnEaRY2kIR3ffZSq7qd8OoDpO\nvYBugV8/p9yiYSsH17ctmuuNWfTL2sBtE4X1SyjRgF+8lG8/kE6sLaqqSr8v\nXYhhj/wwKj45TJg9GzmOcOxLQKgnGPsUMQiRPnB2/GA0qZETM2pBWpr6hXao\nSptDJdZF7zBCo/ZoGOwCLiYxfwjWqSzAcv9Z5sPrIlkYLjz6qmiC7Qc9YZzS\nm6w/fo+z9IJwuMaSe7+vEwxZdeLcrqMJ+374hWPpKLAhPSZTkiFfFrgb4Sjs\n5MwbSZPkYhxoiRY77/OJMmX74xoHbcbU/WwE/91IcQ8lHsLcbsVdfEd2eIRS\nam8mikMxzbK2zR9GNopWukg9rpzvPUlQ6S3WIvk4hiBAiXHAymPhBtIrIT+i\n8dJKKc+5kUojlrP8X+0SWp6gq+QPSnrO/1nA7WGGi+vzCi0mCpJAi3mMISwX\nT60f\r\n=vhJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/density":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/tab-scroller":"13.0.0-canary.0de2f2edc.0","@material/tab-indicator":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.0de2f2edc.0_1629233759689_0.7701276897319171","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/tab-bar","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c6a672e92de4302096200b7445fbf9a631385a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.1f9259b9d.0.tgz","fileCount":37,"integrity":"sha512-xFATxV/Q9jI5qUpA5Spv2LYFgyYrx0uY4LSDMI8HoXoiDx5t4qf2kHVyGPYFW23k6JKw6iVpduaiwnhOmqOXLg==","signatures":[{"sig":"MEQCIA4cPZnShxq5l6O+eTELSIqCBZSZ/0X1rLf3oeL/AsSvAiBg19dYmAf/IQsQsZXWxjSdr4AwksbpReL62XSsLnQ86w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUnCRA9TVsSAnZWagAAnA4P/jM7nUYCA4/Kva1SkuFG\noMslUn1xQP6LbfeLRQQQWSo83NqebE2vf2WlJCC7aixbH3MhKvj+OfvMat3a\n26G6K3KtwQmBaWJDgldOD2cPXVG4djRndnKguyE6DC8+MKtQl1HrXzfGWgKx\naDOapwVFcZX/fR2NfvrNlf6Y/xMkNLBUXoXLMwDlRhpM1sjw4pJ41cUfEa2O\nhNKCRyp6fwZfDvm/+yuGLGUd5gitLi3UjakvjQw60MEnzIsvuD32d59Nmy7i\nlKPx2uOIxuv7bcvMjWj2bOr5eh1wjOO/jUwPt5XeAZK7djm2uPVrABORWDpZ\nh9+98q+YPTaWRgx1TuEhnHVp5zdJ5AylE/jVKlIwU73GSp9v9YCH3mFQhTdA\nsDRjoKePNn4+SO3eFzvf1FGuKTwK+Du1oJXQ3Qgv+up+jSHu/ClVZQ7IKkiE\n4FCCl3p+rFA99NZcM7uYT8qk+rg/LNo2VcUAlgKk/oTWV2hWgTvY98uEkaRy\n1hsFWQBCo3b8fMi4V3slT5jTKd5492HGsG9X33YlljACPh3FHY3SS8DM5/Sv\nNOeHGGjd32OvH/5GEzdOHUaDcivECep0530a79SpBcCHVXixBC53m35VvJro\nbby4o3qTgvMzt3BlzPwnSTHuRVHyWz6Ao6w3v6it/Aaqf7/3r9920oHzR2s1\n4AVT\r\n=BpTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/density":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/tab-scroller":"13.0.0-canary.1f9259b9d.0","@material/tab-indicator":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.1f9259b9d.0_1629238567060_0.27267535381520847","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/tab-bar","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"048af7736fa5bf270272d09c4910649a974547f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.3b9290351.0.tgz","fileCount":37,"integrity":"sha512-ayUrSmyiRAHuodtg3iF2jp+GMT1uu90KdkQuGwU2avVmD3cU8f9vydmJWSy37+frIrIDCOwv/QJOqSRGnhbzLw==","signatures":[{"sig":"MEUCIQDYrVJls8zqTjcQc3/cx3C1ZNGwNtemslWXoz90Dj/lJgIgJ68G4mxWVtX9gXclc6H4642y9BVFz+4jW7sVrpI50uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnnCRA9TVsSAnZWagAAjgYP/jGjlW/9Gsb7r0f8bmKr\nSz0wEaH9nfYquBxLZF3WhJEnfrUJ4mcrBZCyVHeEcvHL4YNICuKB2V80MWtj\n3SqL/6N+3pENr7q7hnxoDK3utyUjbuTphsdGqRTdwxw9V27t0SMEjqfwfOuU\n+qM16gdVxzZNobPhzFS2TUP+qTvbJml/jZm67UE8oqk/vmQeVSGPSTpZORga\nl4+cNnNXpwGoDEHTZ8nMlKQAiHX07REaQ2QkbcD21LZMp2pJmsJhfgn59Sr5\nJw+YN5pFvkcwOu6dajIJbdL0JkVPgPpKtEDU2uc2wuTZGADxjTwwzDj7TJcL\nT9H7ILY5I+iVwWfMgYM7/L3iWK/d0Af7CSZFMEZx9fwZbDU9Iq+RarSg3J69\nPoKKItGaB/iTmPLaSsVFFlWACTpvqteHE1zCrbnaS+EUT9ZCxZ5EWD0HMkn+\niqzA7Vbtf91jonOfSb9r59rFFj3FgoKlgw5TICzHBstRc6dc65h1vz2me/Aw\nISbRnpmJjkkfNPMStU7dCYb8Z0g0xIoHpcQeFhE5rP4sJSylJY/HD7Vk/4xD\nfhvfLEVATWrSapPgoFlfKV1ZMbsq5hhXxkxF59YB0RWdGNZ+JIE9fhRytiK8\nH4k78RFgaXbsuT7wLMkWWyHd2tkUU5kQk7+tOpV140mFKJ+7ZxezaQcyDFuE\nduW6\r\n=kOBx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/density":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/tab-scroller":"13.0.0-canary.3b9290351.0","@material/tab-indicator":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.3b9290351.0_1629264359363_0.7578783146556607","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e34a4391c61ac731701c3c79ea4f146cc0c03494","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.43d2eed2a.0.tgz","fileCount":37,"integrity":"sha512-uMqERJhNQ8fwtpDR3g0iehoTi1cKurt/7Y81IP/rhE6PeWdgZITVK2jNfBTfoqlS2dJL1MtHPq5aXG1cJwxD2g==","signatures":[{"sig":"MEUCICMnMqsXWsDwHcTLEqztc5MFxkjSBzx4QoY0uvZUTFKfAiEA4lBi2dYwMINIu8tDGccTzxOTt2UlEGL42BzEsX/wSI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9yCRA9TVsSAnZWagAAzvcP/ROk82yS1xeHxJVvq1jm\nrmPTWMdk+L+Jhpk8Ais9NHteYboZfZ6QP2WXQ2l7Ok1sFxbXBHI5XW5ZvQae\nTk7G0Kumxks45eao6x31umhB+o25ZXgIbihZN2Qr1p14u8c+Kx690GXN3B1w\nvw/AmSTWQ3h3ycsQQnBWi2wO2EdlnCAjONEm/Ymuwm0E3TsiCaCF+bzBFUwQ\nTee+5woL0xj+rOxRdNM2wIlL8DKRjYi9uxh7qGKYJzDvzbdbBtkzbC7f8QI1\nzEa9TwXa1Dl9UngVozub03FG3DcarNDAc6R8cGNWlDxLhc1ZkyeWBBfyF/++\nOICsOsx78yOMydvSn9rDveRdOlvqFpTcqOOu7JUx/sFFa/q124KvBc8iSK0W\nXRUCZ2FS9kkop/f/S8X2My0oNAehGKCs4GXARQ4vFhpyKk7l2edLw7TxQNT0\n0gM+H1gs1Q/SbZrjr79svtjVQ/Bxc8Wj82BQVS0jgDblNOZp6rK+8NKYVajC\nL2BEZ4gOjJIExF4p6g077yAxKMY0e7fgs9/CO8r+RJjy3kKy1YBm2u5DLimO\n0hAP8nD/wWDYm1jlsAVYHoz3zMUAu2vEM+kFDXEWy3Lb2zzXuVPblYWjIc2a\nFKToBnVjARbxIBLW9R6zuP76BvKDcWJ6ZbBkL+2e46VGPdDbSee9EJqRf9jx\nJu4X\r\n=/Of/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/density":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/tab-scroller":"13.0.0-canary.43d2eed2a.0","@material/tab-indicator":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.43d2eed2a.0_1629302642452_0.5825221975701311","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/tab-bar","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69db75ec80694f8792879514b125c817a4ff029b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.0a9069300.0.tgz","fileCount":37,"integrity":"sha512-B/YSArXpH0SiKn7tbldbMdmf+Lr0QKWq2u5xJp67G1EiYJ77A6OfRIfAMy7lhOTdT/AMuVGOdnqJVEQAZjB1kA==","signatures":[{"sig":"MEUCIFa141nJXXeoMeBF+Q2S7lb7q4yWD8OdjGx4hc04N19+AiEAgLIxJHlR03sHNklj7ZxqaGalUlZRduRTQ1U889rhHRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoSPCRA9TVsSAnZWagAAUoYP/RpOOdCgEc+SbHkF5OZf\nTb2lAijn13+EzaV1J6dW0zjXicuSI3SeRflyYS1jQ6kapefK3yZp1DJxqgiw\nWVv2zr9BF/d/AKir/J3zA8v5svjzsfU/Zm7D4Rs/ge6wzyhOY6dTD9YUump/\nbx7TzgdF419iXJ5VnkosB8BF11zD4mZpxHe++tJl5y5bv/FeBaHrE8i1PQdo\ntyfCDgpeoC+yqwlZcxaujMRSyk55PsG7UKOvE2AUTmZSTN74ZUzT/PCw/EZE\nPcUCl7SRgl6NE7Nye+UXH0qjg21y/m7XsbHflaxFFHphCmzOnoY936jKtWGg\nN6J4X836EdO0CEeFdrghYx1qd/60y4v490qnR5zI9rMRarObRTdYlfScK6Rg\nflsqOqA9mxHOgGPZ46MOXiQbV3LwsAZwwRgpwBTp1BV2dNeF/ivCRLE9q4rh\nlhXEmR9CFvv9XafP7bGYRGdoOSCmY/z9shSXP8aF/OKEc/7PQ4QWeqXwKI6f\nNOsOViBjrNdBylHgyd0IZmUiRWs3/V/70v9IZ2TCrlgGejZJm20Z30IQvjP2\nTRX9QdLfyiio3JDOawH+3E2gcXRFp1PF92ufkyChhgrG+btfnoqNVgGG6ojX\nw1IRl5+EyJ5y1gg4iWtl9+1gKukG0Lq4nHnXBT1lQf47fYtSRlXPzahrtyBc\nD3xG\r\n=gODZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/density":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/tab-scroller":"13.0.0-canary.0a9069300.0","@material/tab-indicator":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.0a9069300.0_1629389967103_0.5766559704407301","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/tab-bar","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d186b4e0c8db25c7ec44b84b5a24760b505c47","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.7da413ed8.0.tgz","fileCount":37,"integrity":"sha512-hx/9zlpcHRrHfy+8IgkcRyHSs8NLDXRcAgr2e6v79fhUfDnDu3XbcmfOFrWScTv02KPt/09GLhgnSUZIPjYNCw==","signatures":[{"sig":"MEYCIQDYxSzYB71wp/tl3mGZrmyOTy5U8g8Sq1X8XEK52A+i9wIhAKZ+6Xtgcz8OZ0QE3Ek/7d1oEWoTrWZpuiA+69kM8j+x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH89TCRA9TVsSAnZWagAA7FYP/RMMT4PJZ6JaQDIFFeRV\nP6rKqFbK8EwY0Qc99Az2jeLU0RDmSzwradpE5AqfZNZuzwSm/pQg8Xi2K2oE\nfFQTNkigshs2XeovepTXglJjEYC4fUnkX/nLPkQNkHJ0B6R5DzeJmBYSNn6G\nLFPzOV/zra6Rhs9oyBM2wDplIGuOUovaDyu15MvomFsYhg3vu5Bwl9VFm6DO\npfxqf7t94StjPpQY7v2iah0EDZIpyseYU55nF1EqnmABUV4jHcM1CA+kuBRm\nwpkJZCHe0Y2BzpQn92zIpgNWudlzTktJ7l6Qc9e5IQxxhr4+iFZ3ftZKg0su\ndZ0n+AQ1N9upkWwNsgN9hqGzZXmNeADk/pdxmwmzbnCRf0weQlXwxL8H4htz\nH0RyV1Tg1FuYaL5XvFtELLlR2InZMNznEvqrQKSjGYdOohrJWKPau5NiB/Cj\nqxA33XxMeL5+dS1i7edI5ceOzhrnStKyAyIltWxIH8Y6OHjCVn/TOADybyTQ\no5BNquImHUlRiah5+SnZqKIAyM65VC6b0epzgNkIM33PRM3ySD8ne7MNScsv\n7I/4vewBo1Ku/J+K/xunsD8C06r56xgjdkY4Pd7BSWR54de92S6mXr2X1y26\nokdhvWcESTOpVyklYGi8fPQoDCWdpTb6IfTdIFM+nzkdDOJhcxHHNAmfE7Wo\nSv4i\r\n=AOUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/density":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/tab-scroller":"13.0.0-canary.7da413ed8.0","@material/tab-indicator":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.7da413ed8.0_1629474643216_0.09366339232781118","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c845ed4bf8009e3025bb10998c48c43882a4f936","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":37,"integrity":"sha512-U9MSq8Q7PCfOmKtUIOWUGC+Gub8+ohXlJx65Iy9YzO1llhEKHsJ+fdKniQhugTQRjjBVogxXbqONxw4w4KXuvA==","signatures":[{"sig":"MEUCIFdgxBl9LctS3Sh2FFc4uNxLbYHDtJt0MOQh4ddGJEDFAiEAteMrsuO1ycoRSiKlO+7fpjFh1CLeAK3HJaAVWF5RcDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOnCRA9TVsSAnZWagAABk0P/2h3Rye6WBF4NXy5o6RD\nP64TGgXIjOb3ci/IIJkJ2okO6u6hGNBjLWXlDA9R0SR+0y39/3ISyDed6MXU\nVlgd9j7stHqIXT1s9ghkNOuQFh94RqM9NDtVDa+k83miOdzvH/MG9wCRr4AW\nnenGahf9u3//2sI1A9kS/g5zkAnJQREobi8qt4xRizpwFveCcOffEZCe2Fuv\n8MrXbuc3yh0NPGLq15V0A0lJodyH7PjJ6HWihKN+aWr9x1Z7V4vGfFYS+6iq\nS01hzVOg+y1Ly5GzEj0+W1dDv5ROK+eg33SylA4EhOj6dNv1q9W6SpBiqhx0\ngpsfu9cEXNN0UUU3OP/ugoSa2vpToyqDKbOGrkyLlTNfPBRxrtyxK0hs1/aG\nGfMtyCIWfRi1wzBWH5cVDDEzZsSLzzVU+SNOckGE2LUzF+gIU2uBfHhC9b6O\nSDpTv0AqJqumsCmuiA7Km22k8zuVQfTx8Cq4XZyvOn+iYHgPPjNhlqLzcFhx\nw+QIwwjv8+SprdBYy1hBeqkRuqUx3rYQuJBSITcA44uvH3SzCJ/4aCwIEaof\nLN4m2goyBk6omdLoMvpqFvg+A9UVnatfrPnG1IktG28voJBl+UKrHz6kQPj6\nhSUWuH8jD+N+aCOJZ0OLA2gkRkle/fe3/RlZt5PemhqS07A+Ov0sbuufhWkA\ng0KG\r\n=9Wcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/density":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/tab-scroller":"13.0.0-canary.e1e69fd8e.0","@material/tab-indicator":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e1e69fd8e.0_1629488039359_0.20374751834062943","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/tab-bar","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"864c5feaa2fd60cc31fbc684dbe41a5cca9ac465","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.f5afc16df.0.tgz","fileCount":37,"integrity":"sha512-Fmss6etJIE+1akrAQ/3cXZI7QVaf1TrsDFT4BEbG6QbWNg80dcOQNnZ0Tlyi31Io9NTTbIECpMvBKXwhGL60Ow==","signatures":[{"sig":"MEUCIHEW7Jxv3KSBIymucNaDfN4ES0QEbwG3M47LhpwSeOnxAiEA0FB95tUBEw3IKbt/ozuJ6zS/NAdK5iVtmMQKKxNKE8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBpCRA9TVsSAnZWagAAmKQQAJ3EjM2cXLnLe1GBpgIz\npIvAaWF2fNRac+5m3BG3Ohi5GWEZrN8R2b+TFX3HOh3wMZI5JN885CFnzv4x\nc3fPVXpsj/SNoj3mnMvqVc9EdEH2Ciui2Q8kxFJXL6SfEKyUe160TjDEChOc\nygmyW1SVZ0zeC7GAwSkxP9zcORGN0D4fXI4n3jFByZSyjb7HS+0UtIkpc21p\nlyHn5mqZBlvG/yH3C6kFnLSMwK022vxz6SXyORsBXRFC+SgdjsF4qKIZaHc/\nuwG9MKvG2TWHWSX9Lj/vPP1X6g6Az0+fZYrCGCMZCrLE5XAJLLhKxBN746Wi\nA3J5kzjRxIscj4tdxMVsxbp4m6nB2Vj0TJjHBrSiWak6dTNiyxshG3a+aQ3f\nDSx6HFvA2INF8KIrKLp5r2qh9FEK0qKpmvp4XbIhYFwPokZqXuOtsofrkpsd\n6l0ORqbo/gxI4BAyuHDyMQmYXWFUmTzE+4ZkTHNQiOLy9/F9oiBrBMIoroMi\nUUpGvqTUO0+qCtcGuZLxiX+kpOAYLlj8aaj/NGfk/8yG2pIlIhpnWQHs4JZf\nr0mFeCUzmJ6armq9YbjvfJ61DMokF3bgDHNnVSQssFLW5T2iVTOs0jHmuGJ8\n0t2Chmp0GSpxzpVNlnAeOl2dRmzdsIGK73qo7radrPsOyZXTqTdqMUZobOyK\n3aAg\r\n=n8+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/density":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/tab-scroller":"13.0.0-canary.f5afc16df.0","@material/tab-indicator":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.f5afc16df.0_1629491305853_0.6266173468656357","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/tab-bar","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"867c828613b12dcf67b9423bdab7879120bbc81a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.28d0d75bb.0.tgz","fileCount":37,"integrity":"sha512-b22EPVto/XysktUp0nRQqf5JnWWjbZrxBhbJ6CgXt0sG7JYmlN6TgWD4xaD106MPiVu6SsqVHSYZcr7nOdvlFw==","signatures":[{"sig":"MEUCIQDzBbRoaRQ9q2Z8XR3S+rafzR0VVW76mhvez2JmJmIgbgIgWMoBz+BD2lZOyQ6R6GeiTdJdlWZ7qqzeD9ufUDX+ZJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICsOCRA9TVsSAnZWagAApQIQAJjZeFv28m3A4pA47LF8\nyi+ydxKko7hD2gVUs+O9e8B0yXvYfT6rvHM7KXm05XK8vyAsjPhcZL92WljJ\nnpvHLOvohdOj70VQ7kZ7vKtIlkVs0wFxY28EKkllR3zoPtlUOPUy1kFgi6sx\nS1Ax9GrJpbhvPoSyyDhRzmY4MYBqhblnNBqg28BW4kT/yS6bOp4a7GnQURyj\ntq70+GKxlGwgnqFfjb7RVQ/SN+WG+JbymxGsTA7KH128LvAZoLu4mvJ51nE9\n54p/xzwyHf7MK5p4Tkl1u1sVFNzueJDGstyShx78v9pYwBC+UHlwm+8KoYM0\ngPP+p94WXHGOYauz8Lk3u7vwMgZKF4hgTVi5HXyCtNnZR7jBUNkdrAhkgfU9\nC+K+XfnZCk+Lhd5sRSTsu9PpkH12qwJNg6S406K+tv5bCv/3K4vGkqdY2Kfk\nXFQJlzacqV39Ew79b8Ummjm18rgiYJ38yBhkHzQYmGkRyxdSC/+Pk0wLn0zw\nmImmPtV3kU2SilGgLJJrzQI6pluCofVkUMVuZVm4TdTCcj9sY9K3ij3kmsOs\nYZXzrLV2ngUW+kPumTmaIjebHLQmk3zrYa0SgTDxlIlSNYdWb4iHUf6wjUc0\n7iJ8ZeKMqKboh0qQ0E7mpmvnp+g408dslbB6S4LtaOOGU5ZHS3q3qNTAFYs8\nOzkb\r\n=ASi/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/density":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/tab-scroller":"13.0.0-canary.28d0d75bb.0","@material/tab-indicator":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.28d0d75bb.0_1629498126067_0.8606909444870783","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/tab-bar","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73fbcaf34c80a5414ffb621bcbafca9e1038fde1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.21ece5360.0.tgz","fileCount":37,"integrity":"sha512-tHPsKq0XWYpy6+skBIFrBjotdxmp5AeoANSeHqizy2mGOUHEi+t6LqDWppC8D+nM5dCPV+4RWk6iMRwnDdijQw==","signatures":[{"sig":"MEQCIBSCtvYAZfykx3SOO9RYw2KOImjfFh3eV4/uAqDNnNR9AiB4c/083UbUb5lqjiW5vd7z6Mopz0wmNbIYK5BUIBttGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID65CRA9TVsSAnZWagAAUCAP/0vGKqQFlwerIw2lafMK\nV/J5lS3wdGnSINsUE0ecmmp3nuQZzmP8kbHas129sq9/P9o/ZwoIRk64/NjX\nobU3PjmyIEmVGq6D9C4K+OcT6lwid3RpjA9vq78MiayOMvVStZL3+kY09Ows\njeFxm1XeQrTNfsJua4LH1fLwJPuBdUckDiXrVszFJaRLqiX6UYZ9NKnLhgT8\nVsnelE9nn75H87YWpKWNyQovnl92w1ha1ILfZZ98WVq4llpkGltmnYNOx8Zm\ncJCiepVtLkngE7Mjc6ALwQvTJS7Ig+P4DauXS9RN71Cu0U9GqW0u+QsRZfvI\nsrO0b/qoM46bHHCxWGdhqN8JWt1ISd3NnlsxVmOB6Oh/Bl49eq71O5j60r2k\nhWqd8lw/TLoY9ba1eN6OOaRIJd2dNmvDmPiqD0LmC81FO+IfzIcVyZ2/ybow\nE9GgIz9ltsJG3sjrwwjuAh7ED3a3tJs8ZOCqx+GnfNvbqhYRU6JDM2W82LQW\nZMoHugTT/tox/fbz/l7mjGf8XmuDRN3FOk2YLVHCg7c1rMwWYz8eGrqwSvee\nZnx2ENCdiXo79zYD86+1hB7Zm20rmuMivfQeR6yFm7CVy1LbTIQdBkrS+pF4\nWKbcWExFMN8TyHrkGlYmBcFeixGp3jRhYwS20h2weeGFlTeX7T5P5UoB6aZx\n7SFB\r\n=ddue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/density":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/tab-scroller":"13.0.0-canary.21ece5360.0","@material/tab-indicator":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.21ece5360.0_1629503161554_0.7690610382153202","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4205b9b458d764b3f77e34ce9bc27e3415f141","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.8de07c02a.0.tgz","fileCount":37,"integrity":"sha512-DX56ijHaCsaZNEYApJz913IB7Czt+32BG0JiKyIzVWfetbvKA1ArkfFMUR+IkGFP5x/6frjB5yXHEZbYMNrCjQ==","signatures":[{"sig":"MEQCIAmO0f3gPdpBuC8WKc/nNVENqyXAGQ1wAywjmYUee/OTAiAtImp9RSyMBjq/DjIavhikgrRtZ+qtviQzfWwY+FCWFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76eCRA9TVsSAnZWagAAqIgP/09iqE8yx/Ry/bz+kRnj\nJ/Fp8PLaRQASKHFhJVw7Y7T6+f5mli1PVcO6rDupLHYnTxQSriVrlebUeuN9\n7xM018VcRtBNrMqjBfA0wpoWodO04W4Vd+aF+jAOKmaXReXuZ6bi0jP/9RPX\nKnjU3VCgzeerfK16WXD47CRZMAuEW2HCVdImwvqlNbR4K8euVg/Ai7MEYmzh\n1MlbQrfpa0v57Pn3vH9ulm4imRJFk59t03SMYz9yBygP9do308JjdQpwR/CQ\ni2/X4Xi+b634G/zU8WsvvgbNzQS/KpKktOwEd8FMWocDqMoelqU3QOC1n0I7\nxtKBOnCft3lvVvNeULfXLW814HDmXiiIxBKSyVNuiRJOGVccWLZ1aJDKhvLi\nqVPYI0PjEsJD65cLuG2kwxSjCtNjLdH8fU2IUw0W4whhHcyiLrfzd8CruNNV\ndFkhEAob7lR4IzA3aR/GLnIrlYwCdxfTIc4c6bEEUoHTqWao4qQq10daZqEp\nD3keO/nfziqTxpyVxQXetwDchW5XDMm1D4fsdjtG97fp2+WHp8kRelwmj8F9\nvsjGbSTYp8QAwsTzoNj44DJjPOgOxV6UVk9m8sGNfuXtuTcaYnHw77VXdm4f\nRulrTLLdN3jv1CwYK2fVefdRYzBnEDFn/ss29r/4UAN7kalXkWTy0/Lh2y54\nF2UV\r\n=uUSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/density":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/tab-scroller":"13.0.0-canary.8de07c02a.0","@material/tab-indicator":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.8de07c02a.0_1629732510194_0.1260398791780999","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/tab-bar","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"598d5149760785ee6768fd4236d6102ce5521753","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.65aa63b0c.0.tgz","fileCount":37,"integrity":"sha512-VKT0PZXAII2cnjgIvWKgWr2SHZePeQNMlPXR6g12fz9u0V7qIwiZturHFnAo1LEhogiGM10gjYn680eG0ND6Mg==","signatures":[{"sig":"MEUCIQDkNW6HxhTyb7kqh+YqjK9faFAPxQZhQvLRRa6sTsVXVAIgKM7eOwAT6+nfFPj4/6WqWtxjn/2GW3qTUIBJAz4ziqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRCZCRA9TVsSAnZWagAA198P/1Ay0GVHN3iOBdZY26j6\n2qOKNK+i0jWjEPSUCpjWf+sr4yUFq6/429zVp6EBonTx04Xg4u7a0JrzhTon\n9rT0eNIRziR1w2Uo6Y6OZUMdrqPqed3y9xyu3DAO7Q0Gd6yqT/NjNDAPeGyo\nJMABCJuaIi2xbT/CeZuLfVtHFtUDmUtEHgNfvvAzSdJSZtbd8Is3imywW/iH\n2Jc2njgN1N2fZFrLUhWpCArTufhmj1TS9spDhyAE2VlzD2CS04o9Vv7AWcVj\nwEhpvQw7HMZrBTCRI22oopdG0Jw2fci0tOG2KUokLqOVpdpfNY7lwC6dT482\n2TGAiq+QEDTbzhfNZJ2x31AxZpqXOerblFgK1m7kKml6R6LYKfpyDhLJx7Kc\nfW9jtXoOKYlo9ebmM9lhpYfhqcYKUkxU8gFDy7SUq0VeYS/vMlmTXVDYVIhw\nYjP7kOzNdDtC8jO7kQu7lHr7mNkmZQgIvL/C9uGjbPO+q4vT+dQgBGU4seGG\nijsP+t+WT0YpD80VDqVx3wPB1M3eo6PoUJXfGq5PnBX/tdRgwwRe9lgKZ+TB\nYtAKBBmDU7el0VMbbTpLSsreezpRhQRzXbmJnPmRDrhHk7O2I3eXFl9ONUtG\nGlmXzZV7zfQQBMiYiYiJIhHRypH57004uCppwuaoh0pF7v9UinuPMGJ65BLH\nTyKB\r\n=jMII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/density":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/tab-scroller":"13.0.0-canary.65aa63b0c.0","@material/tab-indicator":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.65aa63b0c.0_1629819033535_0.22217729336119763","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/tab-bar","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17b42b3a4cbe7ee2b6aa02a1027ab69003078ef4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.15981e9d9.0.tgz","fileCount":37,"integrity":"sha512-d8tq+T6g1c/NaR01t23HJuft2KMYgO5v2zgQOSyxhQgK68fScClsdkQY7WD3gVGnO3v+aQygZ93NoISG3btqzA==","signatures":[{"sig":"MEUCIC/bPYp6X/VGuCKi61IZFDIj5NjJVdyBcEyY978gjGElAiEA31qgC5YuFRd3O6BSIwbCjDTHO56BtcGIm4Oc0DyJf3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvyCRA9TVsSAnZWagAAwxwQAKKN1f0Z7cAc7pVI/Lvl\nQLfMV4Z0K+C1c3FrM/dOOM9gVfSHqdcp8gKlV2FeFvqYwGfJtu8u/K+DsnOG\nTVXmoZ7LQDUR0vqxS1nD+S9V6yB6G6YfqMvOco2A0fGPDCSTHYhgmmA4VPn9\nvjaC/MDiF5krrAdFi9MPf+Ycp1E5YcSSy4jL1AsTMc1bbvcgr5idtLjsgRC9\npuA4ZEue3W/kRJpDMpnK0qzyW1/25rG1EXJPzv4I2yWLNj0mG+D2h6ZjSlTB\nP/mfawlb+04VqMJza6oQBStYEbjZcJ37kOAnknYglYwu3GfA8F2FFvevbORW\nwQH8tY9ZryJbOFx670f/X1YUjwdRV0LMson3p96LgOwbzKDrfc1wp755/L4j\nQsODobTmd/43q+BPbftfeo7++99DeRm7xnWxFGIc8jbZB7KzyfRQ3GvofaZx\nHxSfhLEn/LqFHAf3syRyH/fovdvM0Bmcd44+piEs17uBxBP1IyolVNGnc9PJ\nxCs425lU9BSN+u6kY/XAi4rHsacsJrcGhz6oVRiXoaOayowUWXXXECTPxOZi\npXXXzzfRLnWzig4BvEqrjjW48CO/gFCdyfxuG6SjJsk5SzQAe1D0SOxWhNUQ\n7HMxXMIYXGFHfIveMXFWAVOKpoCnKrvoo8n9L/JFdtHxMXVuLHnjnmZm+Du4\n43Pg\r\n=Us7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/density":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/tab-scroller":"13.0.0-canary.15981e9d9.0","@material/tab-indicator":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.15981e9d9.0_1629821938458_0.8928600882529496","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/tab-bar","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508297edd3c67b6a3d57fb1d794be993e64159a7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.fa7520f62.0.tgz","fileCount":37,"integrity":"sha512-sFnUC5qMhN3qjIBS3BapfHVgSekdirZB6dxtmrv0ZMLGVsmJmwaqwCo59ebJKU3P97qH+s7fgKV/5+fqpjb0eA==","signatures":[{"sig":"MEQCID0pLLgaqDES0LcEy8fGCkhtP7b+gSTgJZ4MO/roq1BMAiBJF5fBBYeimz9O2VclW1ggzHAhef+9TLSqcEW3V4eh8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXLVCRA9TVsSAnZWagAAKSMP/A534aTAiM5L71u4+wsQ\n03m5yzoRZdykgDnPk6L7SRapChAr3uCT7r7r2R+l3XZJ5BRsADJocHFz/qGJ\nlntOqwF2fBq9V/t/rbRKoGHNIt4xZGQcl9VQEptqI8pQrQ1Fgv+gt467N+qQ\nl4ndh3NwhfUPeyDk3i/UueLFehgWJWqqiRV4nKBMZRN5qKAmqNEOZ7erxdhI\n1LdRRI8Dn7ZUIUIXPav4eq4xYsJY6FvQkKKIFXI/AgfYLRiYcAQeIc/nS8d+\nJi/+JO1AR2BgzB4VLcpuonlbq66YLP42EM7An6Zf3q7nM3o5hhYi0w46cq67\nqY68YssqYttIEUlox4XIIJbbEs+zLmgi2qOWeCiJvVdlt/z+qfBdgeUaaL3K\nZrhnSW0mXC9RHilUU7mb4gdzOdM7IEpCEMMYFKA1+WRh5aZcTQ75ocWQPhNP\ng3dyIgQr+0FzkrwyWy5gPIhgpaa2AjmLUP3iHfPbfSK32KHr2dsgMFFiM0Gg\nnpiy5QkmYbDDPa+Z13364PfblbbSrBS/xCtBLGhKgZzHJrKXqc9rfQJCqHyD\n/CtJH16hEJwFXrp8f8LUqp6X3AQhjs011QyHeTCNyuguqWcrEKi25ONemOFG\nmacb6IuJGvEpQ7wiBa4gI93HpozuQAEr3eTLFzao5RKiodv0khZw7r+Ey3jf\nYj8V\r\n=pizi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/density":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/tab-scroller":"13.0.0-canary.fa7520f62.0","@material/tab-indicator":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.fa7520f62.0_1629844180879_0.8503749786636483","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/tab-bar","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3491767b717d7371f7664fda0a71a410e19e1315","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":37,"integrity":"sha512-JekQjMqmuLg3aYDiIDXdpi0gmtHyIK2yn0r8pY+Y41GQmeDClVv0eKPRgwUDOE2MTk2DJ8WT5wiTsqhKDZSK9Q==","signatures":[{"sig":"MEUCIQCjKVuwCb2jICdwXVh/qUQ3y/8WZNlXAm0ZqrRc8UEldAIgG6CUSYapvX49GHN3UGWyuXkpe6/hJyD6kfEaDeWjI60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXerCRA9TVsSAnZWagAA25wQAIocHC10bcYmoCDBvp+T\nBiago1b4k7RXQtbLBtWDBPttJntWppPlR3qda4bCh2kyFmfYXPyMMgNUfMFy\newJ1zv/82dQVjg6l1RtsE3pkUMeTDAkyfwMN2kFP9xpASyHo7l3AEtFhuVv0\nsO2BdVOT5N+JN+dsuRimQBqBkztCRiRKvOaVRP7f/J2EluCfm68CVSymTLQZ\npgnLl/YNgCeV9JguCf/kHl1VIwTjmqHCEIrqqxKTTiuWUC2ZurrUqVVXW0HO\nM1I1rnpW+Xdp47u4/CrSHTFemnbtS9Lk5JsAq05eS1qTPfYtnFFdRWnsL4nE\nrygn0bP+kX3b/r/3h7GTbesqgMOpi8mLJe4MvPha2SoU+j/E5Dv6LitI+SC2\ncoAxfoPPHHISG0xTjuEFP0OxWJ0jjFJEfv3MA0v4x6ksr4uQzcLR2hd0lRhr\nDP4hYrYIUotZhhOBA1mDfXYup7X9PAh7zfHvlt4Ir6EWu7rKzGUJ2vNW2yeq\nvGQORm/QJMrPh/M3FG3Lqv8HVROl2lc4H5Nc/CHZMljlDqgazSNkSkyCta0f\nXZcF7bObFsjx/nuLLSSEut/QrUUb7ogf0mCL2e5P22Ku/seA8X931rxfgmU3\nuKUilbLGcNk7jnJPqCV+mQMP5q74liMi+hL8yrc9UL1EuwqXMRz0ZzO3czm0\n7KC0\r\n=CIjI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/density":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/tab-scroller":"13.0.0-canary.ce25bc3ec.0","@material/tab-indicator":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.ce25bc3ec.0_1629845419148_0.7802198706506287","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/tab-bar","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"686d098a8f903371136c89942fea3d05448175bd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.12f5622e1.0.tgz","fileCount":37,"integrity":"sha512-4CaO7+9UxK8JYVUEoycLjC4QLQysxq3XUZ9SINwBft/bnwyM6hW2ybP9d4cDfAkwm6aHnpEwTDuq5tskw1bvaw==","signatures":[{"sig":"MEQCIDGugK6CnKmurXe/fgF4jwBVBlOMI0Xmh0nK+jNA2eAkAiA5lZqej/8G6w6snkRcdBynxEBxaTwZRYUCDR9VEaFH3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6oCRA9TVsSAnZWagAAmhcP+wURo3PLkbtCPGtAegOU\n6Cu2cRhmXtz7yVKjElf+MYCHF8EwLHHb08FY4+3bgOpD6ojsWS2MDIa9wc9N\nK5OkN4Z+fJnIs7SMlX/1Ee2LzYc/+sbEGgAQHCx1kDXfSTR4wZK+NndIVigN\nU9LZXRFpSRgJYdT3bvuFN7bYfEULahxScS6clC5+U7/Veidu2FZdWBtE10ZE\nwOdcrPkFzeOqPVC4zj2MTxEJaq72VK8JIQBr25McH4Qq9uSCgVRKBZacv9f3\nDf41llOqu2loSaQnvpfLnCzSKn5w8UOkL0bnLPImL+vNt2vkBZVaWhDzRSFB\nHGOIJ+RIwg9AmQDa0FD5rwAq8AaQwI0xk9lxWsD7BWU+0uhACw0+ovx5dpDw\ncleLIT7PUqY+nSJBYzW/Aj/T/YccGU5ldMMfzc32PdT2kGVFrztUdYksVj4R\nvObwp0AMeExqvX2blXmb7rNpDLfSixjXumI9X95lzaN0NAnZbDn9QVPtI9Gv\n1VRvky7mR66JPAgkJflRwtiGKtzo/T6Q7Lkp0yNpoPsKgmNQQ9hj/U8w6rJy\n7j6X4zb1Js/axAzrWYuMCo+qb2l0+5a1dahSmhF8xPo5K5tZ7TDFupCV8jJI\nl8/JDCwoYt1/eaXqaqnx/ejirmZUB/BCf0Hv3XEvs5gdrrSHwxuCFLBWqv6i\n1Dvb\r\n=0sSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/density":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/tab-scroller":"13.0.0-canary.12f5622e1.0","@material/tab-indicator":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.12f5622e1.0_1629847207966_0.17393463275531973","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2885e76fd3341f35bd5a68004aa8d3846212b3b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d97f8f133.0.tgz","fileCount":37,"integrity":"sha512-FHRNtA5WvIBraEzz0fLNPwI8ycXfeZ/BH3LpPveGhZt8gqymVO0OiVAxM/RI9Ar8eB06NylaRiilFtqHGVNdpg==","signatures":[{"sig":"MEQCIGJWMozh9dK9NMK4khIo8iK7oO4ZwZKPaYld9E4MoKTBAiBLhfKBCCrSf7u8n2GkD71qTvPzQeHbne2Bf5uEtu9GQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo1WCRA9TVsSAnZWagAA+zYQAIOqLjJMdF3Ci1ISuAbt\nB61or6b0QiNPAVk7cvVeELU2Ga0xxz29+lw9kagYdkKaGOM85sbCTXGya2hD\nlN+haXWIaE0XYgr2l71CE6b5dBKwe5q/mXdoepY74gIIZcUG1p0G3B/6Fl6R\nhjsGicHCvx7PUc0s+YRDvpbYprKxx0sy48hKDC/Z1CHkWQaKoLpllX8u1s+/\n6qdHJIKcnrVenCncSFSBF28JZ4IBJobp6k8p5i7hlhzOpDgSZQDVGzeVQGxP\nZQMKeZXjIaS3Tnx4ClFDF8SdiRp2gUNuOVOqkqsizsDgPFKFal5QHw4c1E80\ndAmzAY0v0otpcNiAdANvU0Ro/XXPP0yEwo1CTJgV6iXVxnw5Z8QnwRnO45Ft\npwoeP6KyAn4xeNxbf1UT0CFfWPCVqJQAXwIYz7zeQWmm1SjZmNhgw1a/VthA\nICvhMV63TqV/62+B5F2iPlGii2M2Aplmex7noZOnFAc9CruEjOzxgGxsttRk\n2uQViPKnlG2l7COr2b6wo4buxI9Hw1RlbTKh4/yHYwLuVHmzi8TYiz00gEhe\nFHo0XmbWRt1ik7EpvI/X9cXzmx6I3meIbUyCW8/5scRtIwRSLw4iPWc0nu46\nGv9bvjbAGHH2ysICfyRBsmNzEnEuMiP0P2XMlNoHrOqS5Tl9sh9FtcT16ZLP\nWJSB\r\n=1JrZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/density":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/tab-scroller":"13.0.0-canary.d97f8f133.0","@material/tab-indicator":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d97f8f133.0_1629916501570_0.5915515459340124","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a74ab88aa5e29d2cba772dc3213d4150246b17a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d86fb6fac.0.tgz","fileCount":37,"integrity":"sha512-E2pKK1s3/f4c+ccG8ftBFv5uRLl8wlAHFbW1IF2XC1XEDnD0bi+djt6HofUI1oDT767S7USKLB+qg2wpT28ozg==","signatures":[{"sig":"MEUCIGAxUweOMCVMPXoTA9Hw2D4zbWD40s11Mu59OOdgQzn7AiEA8OvvuSgo13zwtrFDpVw0N6i51XncitDyXpLXYZoQf1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIlCRA9TVsSAnZWagAADDsP/0LH5sEpZgKKxDlMpHV6\noVZJ4out3S31/lbaGwMSFe2WZhpwHOhNoEx1UMU8BS2j/rt8UhRSJwOoT///\npyHd1XeSPG7j2yFN07mRL7vfLfnAFs3woEjwxO45b6A802s6vS9tiKX57kcV\nDJklWwWMi93EFG1Sk5TVuTRjEr61XH9s7J7rIgQT38n+p7Ltp+R+x7liVe51\n5sBM8SUt16L1UEo5OIqyOPJLLl+h4Ya7kYEYAeegnWlgEW0Zus3P2VrHVuO7\nvt4T+UEutPvI6am2clW7bAAm7Yi0xOhGn+YTJXVcxaAX44GHDZjWZst2UHxd\npDdcWpFpuJTg9sb5AacI29IChHDmjRihfGfIc6ZTjPUxhr+yWZk0KYHn4NfW\nJA3EoZJKy8854jfze3HbxigZ0y9YFherUnPw1utDHOanPnOYVDqpg9KxYW72\nj78d8jiN8S3+/QaZRDPxq3kmGueh+p2v0tnqpRTYeK9jSpjqwKOc29U90FlT\nxFLKNZ5ctgcSgGYK021TF0CdX4m9He2CXvbh4VND47UN59ITwt8YzLo+IePU\nGRiLU+LhXBj77+VpBKx1Iod/UDvHJAr3zCIMtcGQeW5eeATk9cu0097PnQyx\nELu8kyssYczz1jCd4iL+Z+/A9HnGnNV0bgJyLvwcnTAikGf042FmhyFbY4cW\n2aej\r\n=1LoN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/density":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/tab-scroller":"13.0.0-canary.d86fb6fac.0","@material/tab-indicator":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d86fb6fac.0_1629917733297_0.35862367195783595","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d0cf6c650858ecbb8b6f049111473758f8faaa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e8554dbbf.0.tgz","fileCount":37,"integrity":"sha512-nnaSLJcjjAcVKnNYZmcAtlwlnxGM6eZPseuLSBzGKdZ4yPRiEwOJIKBh9pkY/uZzzAJeZvZ4wnk28RJP8Wyi+A==","signatures":[{"sig":"MEQCIFyBfMzeCaPrP6o54SVIkWTzVkQ6H5cEzRLcAAgqQEP5AiAGoPYQzOD6553kx6o4Pf14P8mOmJf2I4F+FweMEQ8NGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2sCRA9TVsSAnZWagAASlgP/jr1aXiw/wP6V8LiUTP7\nAVOC/lZu0nYojDPsCNh7Ch7wGYH31H13ogulqq/VqKNWxrSXj2JDos5nnQf9\nxiTmKl8f0eQ+SJo28J2Z5VEU4+4KQPwv9uwfWD0AELkty+DLo8beSM6lrrPo\nQjGo3cTsI2GUE2PX4NIcGR2X7FB+HJGOo2NoLbAZuPR8eU5EkQnrf9uZBP6N\nv5c1ybsXDK0QfDKje8iiQUJySJ3SWlIBBDxuff5qgzyCMDrrq7+ROrvTOVuv\n5KjQ+qMClVee00QMNGSS+SspHBXE2H1PNkhRMt5pNLmMwi+dtm9+2Mq0d4X4\nvqALX/q9vrFcCAk+e4tQ/vBSe79rmc9OZRmN4cmEyVyRiiVblwDqWlp1GPJH\ncSdnQi4TJlwqysma71TVWUyPTVPNDj+A61/hgXSQldZ0wkkEJimnX/qW5ku2\ncAsxmvS6fMRsIas2ZmbjSM6bKWYG3RQYsMMQhOG+q32VA4XixEXlbHLp0kiT\nMUQCFG4E6p4r9YhJegr25Tx7YRRicQOtTG37oYp4hoioHMYOVN5dCKZHDqQB\nfVDP/gsGZ+ou9Fk6F7ujzA6xUwMAkkrVu5fnJfnB6gtHEFiHrGik1fTrbNGM\nfGhAK3td6ItuAJJmBt+2oMbrNOgvclkXZtgG039subduVIsQY1BY7/yYk0+c\nn6VP\r\n=Ej6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/density":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/tab-scroller":"13.0.0-canary.e8554dbbf.0","@material/tab-indicator":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e8554dbbf.0_1629928876320_0.46494006978248614","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/tab-bar","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a00718f82a13dda1eea4018c659c300e0728eba","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.877e3fb0d.0.tgz","fileCount":37,"integrity":"sha512-5gMolI9Msp5VQyZExKmKe3nJiWiUCAN4jB/GiZ2EvR5d+znOPin6SyydkPOgZCG5XfHpuKFDZfGEvrOgvk2A1Q==","signatures":[{"sig":"MEUCIQCCOFpiAtniwHSPc7/yDZ1l39Rfkq2TBsVeXodGwxGgcQIgG2rl2OtTLJ0w53wFW4+4S17lTJhco3UbHNKB68JJdBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7XTCRA9TVsSAnZWagAANegP/3LCikav5W9iU84BFc1Z\nrWZI+VVOfjxXD2EoCRm8H7zOehNo1ehVpHi59Tujs5/asRpSKTxPuBmTS+se\n/K4uWvocLjgzeUY6CFcOQj2P65Ye+n6NCUeL7ye4n2uqle6vzruijww+lD5v\nETU9IwSZQHV6zDEIJ8Ay9pSeE+3Q9M01ohuCrT90huNDP7dY6jtcQzjO5YVh\nXOUAjClX3HNI0YvdvbKkQX0e+o62pqdSYsc6tjjuZWVZwLdXRSjtzCO7Cm1h\nsEVA4a9S2ZHhjIJCBnSYBAuRXLK2VzdVuU4LanAHcdJts535hRuL5LPvm6By\ncdYTuXERIACaWS0je5+jMm1nWY7H9lnSzuzlQpcMXZ63tE9DOshy4eBEU9es\nG6tGU6CtC8cNVH9dCajC5+hYqCcQEo2VTAjGQFPpBv2beqhF7zwBTKSXhC3h\nxaAT1JeATjsGHbUFt4a3t0xf7X9LEZIfPHRZrk57IfNNj3Gotka+3FxiNTzs\nfcwzHcKQz5rp9lIVB9iBqR50F0y9KYjAoLqXbfCSDzOka8vQPNS1vSd61VPJ\nYp+D4dDt7xRyY0D90JYRcx9VdWe3XzPRE6PpkTpt4wu9kU29qrafok7G84P2\nHzWND4Ue2wB3gan/ilMQG2TMWEotPD5oOJ/qorYBeB1YRu7+w4u/KJn1vDCF\ntT0b\r\n=Uh7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/density":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/tab-scroller":"13.0.0-canary.877e3fb0d.0","@material/tab-indicator":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.877e3fb0d.0_1629992403509_0.43900250271539965","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/tab-bar","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab58da830ecb09d7d3b0dee154c85c57f5855ac","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.6236f3576.0.tgz","fileCount":37,"integrity":"sha512-6Qs8NQZ9tKrJv8eB/V8W9tNToOwm9Hur2Mz+qDxPxKckVTqUuQS4JZwKCPicWvLq2zW90MctueeDduG8UftucA==","signatures":[{"sig":"MEQCIHIaq7PJuIHBMUXUO9+4sXGSPLZKp/lKrI76lDEzgkWmAiBOtqbGP2AX/ldsOT4FjogFuNBZa41ALbTEIWKvNlEweA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7xVCRA9TVsSAnZWagAAb3AQAJlTyGpiovFQKAp1wUGv\n4Ysb/LmCnFue2CnJ75sJ62nkMKagx3c8SfC2Zbs5MZ1zS+bHl/SGNyYEzs0x\nCLKCKNaVNaQxSFTDr7bwCYPHa6K3xSVE1XeIt68VWTyjbRip6JQR/wk7spFA\nMMDl0aFRQv74PWyIbhmo/9HKG68bLeX980hgyOZ+ozPUUpwUFwgpr17Loxke\nNjpovtOyYtDepHvHsmhFwul2fQksggS/FiDVJkqVPBXCeiNOtXRDtt0f6XTl\nVAJYd/6US3MLsGcD9UBOe//YLkMWRmJEk59pORcJWb5mH1yCkbm06JZ9ogKa\nlW+INqHsOuXp0MYgi7D6t3EWjJKQ2HuK/73ebS4e9k4oXiwUnm7gCE6ZCR+q\nVN6whlbQmdVik9gzvrTnnRz0LaNAFMRrhbs64cjq6JPMoh3KzhgXRzjk5RLC\nkwFKY52+ERq3FcV+k/zwuqNWaF7SAQz/vgJB7LFvAJRmTWgG2uW4+n5NyHFl\nMUblpsnrGuM+0UPuk0Bj67UF6TbshGu8YvH8d7bU6TXPwgsu7L+iMO8Stb2c\nc+pUaKHNpohLcRa9xKThiBWXqYPyzW0Mga4NzVfXSFCBtRqI/2ud0jX4yy1x\np3c7qCei3/2M0e67N9U/RGPuM8kvhKyRITbe/mCmhzX563sYKBJyQjEfGJRQ\nWQJ5\r\n=9irf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/density":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/tab-scroller":"13.0.0-canary.6236f3576.0","@material/tab-indicator":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.6236f3576.0_1629994069461_0.9858986971202941","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/tab-bar","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b3eba54ce9d8a72c758fd2b4306fdfc8c55087d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.1d19158a1.0.tgz","fileCount":37,"integrity":"sha512-BK45oxTlRwzWlGipgPKlykl+xNx84FMDf4DbIfzIvBia548khsdsGKVr3qbRfuWWbFfczwXS/DCUnEAqsrSTQw==","signatures":[{"sig":"MEUCIAR9BBkYdesaidsD4y365aF/ByZ4Gdqi420StHA1N1+tAiEAgDmWFOmU9RgyF9nOQ5/WO6OlIeKc4++8G+fgnODDUH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8snCRA9TVsSAnZWagAAvGIP+wVVBu2h+b78z9uuNtCE\nTNpfS39rTr7DTGXaHMbrBIqVUUBglRALZt+ALWu7ycJspFaIPSI206pC4sAU\nh79D/XHxZ7W5eHM5OPmwn3JyevXPQwHd8hzsW5wNiCcvou3BHT99n6Qa7wME\nakB5fqJpcEGzHBOhR2EoDvZ5NRlSCU8BbvY0LAHKoIFbWmT6R/3fu9X4360O\nVw8u+srgfmrZkaZbewmGXsqre1WbpVYiMpsJJyt08YrrqV7t8iKJJrUKYRvo\nvpk9eddE5pz3VCVAr4U+H17jImLc2i+AWxuUFofqRo7M5bTavTNEmhHZL4Tw\nhbi1tIx3l1smr8e6Of02UjVzoxLzXJjAIoI04aCC16JPIeha982aqhBuPybV\ntFsVb28nPiQ1kfCT5nOl92zemnDpmzYVxbV5MKbX7ILob0b4YFrupdhARntl\nz93K0zrvSfrZQwi+9ZKESwUegrDgyc0YA+JCuLF5dMG2zgjwe8OI3Bnf5Ias\n4HV9VB4cTkIGlQHLCbl2OLopv/+NEePamAihBARCjmZskkmxvzTZvSiojRgW\nxhZJEycUbzKz3IqrbxK1zIIWnpp7raf992tDQ9pOvGGAGkUTD/OboC/YH0Kc\nYoy2GzwKBm5h/wZbmyoyBOe5xzPJTSs2E6ZRh4xHcRaCF2xRCMsFteVdlGDO\nkdaY\r\n=j/Fv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/density":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/tab-scroller":"13.0.0-canary.1d19158a1.0","@material/tab-indicator":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.1d19158a1.0_1629997863191_0.5993028517490893","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/tab-bar","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"556faaa580da11170d49479dae18eb218e1fc31f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.6adc9e83f.0.tgz","fileCount":37,"integrity":"sha512-bwqQ0DOPORpTRv/TeMdLnppsu9ipHdahbxK8ORKaoe+pYP6kHKYJePsDmijnY3mYBslC72EcGmElo4evN0apuw==","signatures":[{"sig":"MEUCIQDayGazUQxYJh9ApzXHe5TGJ6E/CbktamLbgSNI9JtjuQIgbqu1V/HbcZL9jnMb1VqhPO52h+MChJ9dDhb/McRi5XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+uCRA9TVsSAnZWagAA5AMP/iJl7T3zGOOdj58kLZIS\nhHbCgOuRiNYP3iFbOWhqDQunQKc2OExcX7br4rEfP+egnZbAill5ga9vY0VC\n9Q3VoMRRLjTnzSIKI2yDAmOyYLpRSolGdTWAVUWZoeQG+c65rdIyvVYKb1AL\nE1TnpYFL1noIeh/HJtIS61jlZ+uQ0bjd62aYWbLKfm5WR9wRz6k1rfZpE04L\n6Y+LB2IP21Ax5q2/JiSDfHG2nJEE0j4zN9QfiBSgdvO3TLvF4a8cdPpaR3kw\n7wp6YzWun2PrfNLCTw/Wo7BZQY1Zu6BeMjbp+WEqGj3rNDXGjf0WxAqMNlnE\ntMy9K8etnNw7Tf0mS8D7zZnBAH6SvUC9VJpU41ShXwhMtJ2+rwE+7lNuLs97\nuZ0zaEaIQd07KFpZp2zBLTX64TVHP9Pw1OaPE6iMt8y/FHb0UWiUxfkJh80Y\nqe7GTHRIr2QBH5WkL3MDJ8Ifm2/SyV98kY2q76QFDK1M4qaa8RYdWylKMl1S\nFiOXovva11oqkmuMYdA7exdyzNTe3CsZ0Ala3uGEF2UNkS3blbjtrS9zOLxy\nWqiFrQh289RUf3evX9+4J8hidL/UzM2AoCpUJ1+AR9FDN6nfJbTb+qo50FWA\n0Ap5A9OzXCrs7aLvYlgWX++xzQSJ4SPsoQbi40Kp99WPNstXIg4Y3eQtP55t\np/3x\r\n=Vh1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/density":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/tab-scroller":"13.0.0-canary.6adc9e83f.0","@material/tab-indicator":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.6adc9e83f.0_1630363566500_0.07984758260953706","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08b909a6fa8d54ee4611fdd24727a9bc2a6a2030","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d082790f0.0.tgz","fileCount":37,"integrity":"sha512-LErGTJQPTn+G88ZBtd2eKjgz6HzlNeIbYNkQOlaCgOQacRVqdpKGuLJlDC2dyDET0iK4g0TvvUPt+v7jICM1jw==","signatures":[{"sig":"MEUCIDrkjBkFN69GgDUAvH8ikXwsSq35J3obRZlCG5DqqxPRAiEA1lE0NCrqN/zafcGnfaEXMN2uSClL3xjba5Pwx6g/hRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/b3CRA9TVsSAnZWagAAyoYP/2dM1Fnvyu9NeJH8tgKc\n56q9dagatPcjV0t1KzJV11dxdV2a36afVcNObI/ZjbCyHapVuTvfRGdcLzuq\nUdIv0OdesRZs60jY2lY5BpGK+WhFGy4aibl3+DeSNc74qSb7Y+kxOq6diM9M\nigQgAD+aEmRyCkK8G9gEfko5V2beWcIHHSSOPf6qcSkgr1ijVoNkQkkReEAn\nABRFYKMo74O6Bbowallvu7yBsx/fVeTNHvyb0+VkrG1msL8ZVERkPgCTxIFw\nITUuqnLZ9nAdXbhPVzsXGHEW46Xoi8NY0S+yLaXRxZRMtzaSqi+KPpjfwrZb\nq5mW2NrZLn0Mb/vegkEdcjAURBxwW4AbdM1TlYnvOrRn3LUsoOKef2Ae0Svb\ne+BHan8h97gBQnFq/FEgU5kNUlbZRvx6Wsrel0LOerJZBt7BfzaYqew9En0z\nH4gGZD0BaVz27UCEvQMbi8JqR6nTR1NGBAJTcJArcOOdsO9y2/tttEaoZeJF\nAqkrVks0ipjO7n3ni5J/1XehMtlk45CnqFn8+iIwv/imhr2CpxoIxcW27626\nX9CaZ0GhRW48q6UK6rF7gLNOiOsgSuROjeWIzhFNXZyOB/fupMJynkeHpwWp\nmrb31yzb4WK5dfE2+XSZUTD8QXurNP56yOlAzVJJYHrcE/RGurjutuio2gqH\nIKeE\r\n=FAoK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/density":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/tab-scroller":"13.0.0-canary.d082790f0.0","@material/tab-indicator":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d082790f0.0_1630533367509_0.4930415620729023","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b941a1a6900965a52b6bb5758d096eefd0d808d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e2c4f0196.0.tgz","fileCount":37,"integrity":"sha512-v743kE5ff22/Cypc7v0kZMKrLWc+PKbvGkTMROqoacm9plZYbvBxuSLEjzcb7lhDUVSBGZkJkv+iKDIxLktP4w==","signatures":[{"sig":"MEUCIQDiz9AiR46pIVT6gxXssQ1JaIVGZHNdAjnHzIBsWPW45QIgS8+E3b42kgxu/9k628A/rm8Ao7o/TSX/OzkzPQHJOkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDNFCRA9TVsSAnZWagAA15YP/2/vS4KExAKpzEj09VBI\nQ1S8NUXQTLXUJvV3ae8GK7+DzDMNryNL6vnKIosLuubVzsHy2u+Zgr4s9F+4\nGaSvH50FqOl72IfDhysObTIEXir1DGsV4vamXA2R2/dHRaZ0qLWXpsI+D/eg\nj5FVEdGPyVFU18dbCjBX1ex+HotcepZp/tmXXea6VWljGjJHMkg+tXGjZWI6\nvkPyQ8VWQ7+rIWl2Trg/+PadIftijQt2tD1UeC+7hdzWYGlxxgOuR50POwOc\nncmR4aNgKWkNAiaYMUTKbHnV3PkRIURDPD/NOqOmri5HLbj8zm71ZUUK2iUH\n3Ye53CNV5QXkIdr4W359B/VCh0LcmFZ438YkX2+A3Dl8EizRuStkDvu/zoaa\n8mb62B7i4k35wbOKgoRjDz4jmCpcgzsFuKLzmlJWeP+s7VANqtlWW1rlaSE5\nscxdt+z5J7rY2mSipKRcZSkUG9OfyYZqYUgeOyxzgCtDwZls8MyF55I313Na\nHyvUX1YRj/1yaoUxmV58hHIJhLJto0ASj4nVSaQ9seuZIMEEiAm9veR84Rs/\nCFXmNZnTLT7zJNIuBRmzMWiH2cuPhRs/ZI35J72tXP3YE2wXsyAxP9Q8xWpM\nRfe7LLaVN2+VT+t/jROfPtO7Fv9bvW+ahKLtWMBaDqUclunRltC5MdB4z/VM\nOreK\r\n=4HpY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/density":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/tab-scroller":"13.0.0-canary.e2c4f0196.0","@material/tab-indicator":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e2c4f0196.0_1630548805031_0.5661096176815748","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/tab-bar","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54a31746d59858315525511fb07f372dc934c8cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.611db508e.0.tgz","fileCount":37,"integrity":"sha512-yY85bRHsW+Cx2nT15OzqlbSNTyymMkhQNjm89Q5T2a1lgiK/kXU1MsMC2jzoMfkLdX1QaNrnmhTCVze2c3Y5ew==","signatures":[{"sig":"MEQCIC4BOmUrRj7dzkA3uze69fT+2Z5KoYd2wHsz5Xa8f8+DAiAq4yHbk09vO/qLh1usRMk+RoYvsC/0YiXTbi1ESipGdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEIzCRA9TVsSAnZWagAATQMQAKJOOWjWck7IgqF0kKBP\nMxXRrToPBsoT2xvU4swDhrf5Dpyr6JFUyZVG+OJAnuIW4e7RLmQWCqOVpXm7\nhgIrpHWz7sdmW3vfxBIGuFsNV1UcVzBggJCEkeY7EoTVhACjhLUrC6Mz+d4H\n4mrodXTMlO7u9g08co0SnW0gSzRaP4ySN9N4fINELtIXeQEjW3S11gtfG9Kz\nvwC+6/9SlWuSyNE5/asNvOxqqfOZe3xGbtDNm3/7TO7/yjiRKaSu9o3nbWa4\nb79cC13/0xbiS+CJhi5xqKLyQQh7c2Ur+9FjJLbAwijze1ZLiGDZMC4zW9cX\nvqXxa063CNO6z0Zf22b5E6PW8lvuuBpVB3z4UsHrRlnUsNPRkZKSs9eAgBG4\nfUAq80Gr3o/z/e5Wd23fvIcey99w5LWsDHUhi0EXr3AJ6AbTS0nmTCueM/bP\n1TOvyxrB5tYMbJXFNTBWHtVPMRj+AC3Vk/kWRZM43syqx2ox1RI8JR2R+Dzt\nDW558hx5M0j14bT3ng3NEd8/b4T/DGEO3NB8vDvZgsw+NERO945JtiYtZ2fG\nwSANBPlHv/4NEkhvZCI7l3kYR1FsmGWJUoFYRCjZpwU+se4Kxs/ihjTZ1D3E\n06d8EZ+cahuRSIzphjxqawFSPQ5wtZ2H+ou4JreGoigjDk/BR/SVTAvezVo+\nb9bB\r\n=a8Gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/density":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/tab-scroller":"13.0.0-canary.611db508e.0","@material/tab-indicator":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.611db508e.0_1630552627765_0.1414118012056591","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4bf11d1808c35142e19420fda68fadd8e4e1013","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d4706933f.0.tgz","fileCount":37,"integrity":"sha512-aWyg+B/dD/qjeN6TR44KvSZwMAj6Rcq/bGAq/VphIBodsiXd1nz17HrILuR+DQ6slnbtf58hun+z3Lzuy+NnOA==","signatures":[{"sig":"MEUCIAtzaCNwTaqvYxcUUkiWwx3NXtDtEGIF+3YaWcLRhJ/YAiEA1Kx8Aj2HHAJP/KcThSih1F6uBDNTZ34aOix7XGRlUGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPA9CRA9TVsSAnZWagAA1cIP/iYvvouYRrgdxZcpG5tg\nk/H0BZxEsQyfwZyg0yYmRfN/nKKDjZORkwTO2GOCkB25TMd6T9c9QL1Z5VNJ\nMf9E2dqfd5eCB0/EKSpUrmyyCIrQyO+n2mh/sNInOiJbUePmG6Su7e2OrtE2\npENyKjDZ5nlnwAJvDeKKmH5LjY1OvEgpG/0Yqs+GIpiW9iwW1+LsFHHKX33B\no4SMRs+taLnuoJ1eKzdwQpHRSagr57Xb30scZOnZ3PMot4KZagReO/dePi6P\nVAIlacvZqODWlZNmbJsWUkrHntMlMZkISLdqOEr37cCKh9zmDwdzyROZP6sF\nFCvXom/brSfyHN/KppylDw04DiZO/v9u40mCZy/JLrVmGT6VfpecNuC6lCZl\nJhqIG1Xgxjnfzk0LXxy1daVvIVvVZRaG2LZoNlBWHM8i22HOGpa0gPBQRiHl\nfmfJUDQSrXR1pk/k7j6Zb6VZL1fWj8XIN5x4+uPmzlUWxIB+1mPdZnUN236P\nUJSXgDtE7junTcQr1ziZ8cxAVloZXxVN/Op5btkblWVZ2JrNhmgTUe2YmUqk\nD4JqZX3SM8Il5cwq+E6Pgl/3+0NCaFYe7UMh7EritfQ7hPvvOjoCUwotH855\nA/9aqepsiF3XjCjriAwipRiwJSEQXMk5QZz35qoJb7xb+PLyAG4s9BEyuPV2\nBcPE\r\n=tSMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/density":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/tab-scroller":"13.0.0-canary.d4706933f.0","@material/tab-indicator":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d4706933f.0_1630597181633_0.9799787232562573","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/tab-bar","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68651cd4aef24cefbb71754e4c7135184041e96e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.c16fe03ce.0.tgz","fileCount":37,"integrity":"sha512-JbpfnObEI/q3NFa0lZwbPsmBOMtJ6k1+FfqEi3O3G/YOI1oeFncR1cQBu74mnoobLnljauQOnCQz+5yMnEOB8g==","signatures":[{"sig":"MEUCIQCx0dGt4lroYEk3vF9vXJpk02sXw+kP+osPBWQ/rpEWFwIgPQUTHxLrsMJ3E+R6vqEVVH3gqobdPNK9nKvvvRyChMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ4ACRA9TVsSAnZWagAAfccP/j/5/zN00dybS2JmRqjn\nAKq7eU32B9dsrE76jbwlMchCq+y7ln6ntIJJtVGOHwfTzAc/b9LDZJkbJaBq\nqFSjbZf4Qw6eFnKPqs84lc/CF4Y39ceMWll2vy8l0c3AHkNtY1x324DZUpqE\nzWKi3jO9IrNBeSz3bq1vy71C+C7eLyBgGbFlcvMbxPHnUjLLvYX6qSzmY59I\niEI0p5KvGkoBgBmDbw3lbE9rai5KLmPWVYvLLRsCDEWJfzOPDQrdwDpgv2w0\n/4025E+/CjY4dqEETfSohLKc77AsfaEPKcRJ5S+RCCUruc+8f74s2H6ELugu\n5q3dbdAB8sh42COT/eZGn3D6C3nZFSRJxU1yV4x8lwmijSvIvKarg2iPi12a\nxaFbxV/QL7rN7BrsVqBJtJ8vztdCZJ+IhVkDADr0K/dvH7Ko/+qMK30Wvung\nJsxeU0735Ays5XPsGoy4npgKMc4M06dws4BTjuzkueCn/TzkRzni0QKG7E4q\n/tL1nGCeQMvhdW8WDnWv+5AsW8fQYKjsOCSi3zzMtOvbXl/VRMGSYlUenLa6\nUahK/PaCk4+HdR9t7TldiZVxrWVJOe0wQK6ZzE3l+DDlYz17faUUK02r8lA2\n9WyGL5mLIG6mzV2NG8SrigH5kBvVxSZBdGOCtvvGTpIAauPUlqojgVeLHPYm\nDCFO\r\n=h/q2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/density":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/tab-scroller":"13.0.0-canary.c16fe03ce.0","@material/tab-indicator":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.c16fe03ce.0_1630604800765_0.7575112981618013","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec3438e7ab36f72270c1dc4976e8e2ef7b840b69","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.9203a958a.0.tgz","fileCount":37,"integrity":"sha512-izrv/yzuI6SNyGVfafj4gtEjavdw7bX9cBNWAIzJUS+HoevqD8WAa+cF20u5mM+pf1mhZ+mG1EngkBQujYkS7A==","signatures":[{"sig":"MEUCIAFJGtrpHtuNvulScx+JBPKoui0UQXM2eOSyUibN8KRjAiEAqLzsAioscJRu2kBf2FjwX46lfAMX1zN8d9JGQ+CqY5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWLBCRA9TVsSAnZWagAAvG4QAJWS5D+yTjT+Uv4Dcfgn\nhQi2opvAoiYQJ2Jdk6vQj4RrGE4KbzMzX7RxENycc/+yi1jgmDvN15yGkWWT\niGqv6CzjZEg3AZ2sGuUkpJsUjAqVbMDUQJpgiulzrjbId1GEDpQGFCOty7u6\nwQwrdaEiq6zocxCxwbMgfdLOhXPW1nzgDVb5CHDvyINcUSRd925hshZOUWf0\nUcS3AKWSU+cPz+lWu8/s8p0inpfAkvZnw24wB9nRtJu/kbI26OpSpSnu3HH6\nS9/4XSt0ctcGTFD76/uhWAJjJwsyk4ciyv+1jvHbCTiUgkGU4i+vqbigUCuG\nxUTTD87HrYfOEWs4hvZwEuT6eXoDnXGjTlYQrPgmT+Sp73QgE6S0xB+3hIDK\nQ3fcfsJMR4EtMYWDL2cML5FqcrVPY5AIOiF5V7NUzjFObEoTfPEEaM+iZ3tG\ng94hWgcaaa9OkZj30gKW+YYjyjirBwBFb+OLzwVXyEjguhCIDUPp2qBxH34P\nYV7igQ26MdJN7lkIFs3KpIvMoAoCB1jsEgHsuytPhS0Xqi8oEHSbRlQz2T4X\nZAr1tOx2dgyajKd/ejHxRnf11Zo3wBpm5tPz1V7TFRrutSjKLoLwTcONOLGX\nZjzNbDPxUM0QMKrNmm1vfHTsENKRkFuxaT/5UxPCnX/L8DCjDif89wtAU+HX\nuBt0\r\n=yuLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/density":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/tab-scroller":"13.0.0-canary.9203a958a.0","@material/tab-indicator":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.9203a958a.0_1630626497575_0.6772933326035337","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/tab-bar","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874219636a8816ca779b0e4118f7c86be90c344f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.fddd5ae93.0.tgz","fileCount":37,"integrity":"sha512-TJ89AkMgv6PgI9IjhHorq+evtisDgOxGp3efhf/TiuZSF5oYsKNneSE/Qx6nDD7tfBXdydltG74nZIXe8UL+BA==","signatures":[{"sig":"MEUCIQDs0p8quQryK8fFN8modn2kOTinO/5u/WtXUOyaRLDPzgIgV1RjCvWG05aHi0fY0fwpZ9JIBpO1gUTP2wwVqmxaHGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9+CRA9TVsSAnZWagAAI7EP/1+cChAILLcei49mALsD\niKduTWz/1s/VQSaE+aGp5mMlWpkzbezul3gjSBMe9gQDgqcVgcUylwdtgy57\nmbi26aYQ/fZOEv4Tmkezew3gMFeWinMMFhEDLKjyhYoT81X5DeZJADBm/bqz\n46VEUM5WBDCc9L1nKVd3+j+m+g6VcBgiASH2YuwPfU3cWHw4laafpJDTe/IS\nZu8wO0WEuw8uBQSBwGjsEK/L8+9k7i808C2Sdzg3tqbooO4K3cWdrbm10ETu\n3OaoJJwI4cmMhq1AUiK1YykOpYynD0B2PAzVjCaYC9NU9+DjXy0PMiF13b0P\nI3FpJCnKnQReCToa6whVnKMBSbebQ4GQfS60nC2kUHHhKZ26HKODVMs0SWHH\nocVo/t5KED+FyHY/YV0GlhGolnFzMhLZCYDwy8AlmI13lthXj88nwRdZjutM\no5r4zVIZU3lQg09mhQXXsUDDt9hDOdvlvj+OCLvFpIGAJaV+uero5W2GFUCn\nCePtpMlVT/EZUxMlb16kXMyVCtMzlft4B8y77LdChIffq4Zh9rq86y5vRtWY\nYOTUyjTLOBRjXEqoxjyhzQmSGdg/Wy8g70wZX3ICSFE63e6hGwfVMqSOzCpZ\n1jlVdrZiBBTyJBipXqdt5y5YAYne0wbJl0ALb4LbhND97NxcOQTvANRpnpzB\njvRU\r\n=loS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/density":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/tab-scroller":"13.0.0-canary.fddd5ae93.0","@material/tab-indicator":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.fddd5ae93.0_1630654334577_0.13210421139615658","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/tab-bar","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7893d970f2ee54776c5eaea6d33e3ab55d7d41b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.117599a8b.0.tgz","fileCount":37,"integrity":"sha512-aCvBwAvlegoTXaPMZ+klNUazzUkO8aLM3n74lpuCNTGkgCw7ch/CBm8CTxAe4xonDjqiSfDREwDb4y+dRDvLFQ==","signatures":[{"sig":"MEYCIQCI221a6SCQET+O2yP0vZze7jecABNDQY/JG9avAHMDNAIhAPWkjgvzwq5XWksBrP2AD4l1Xmhgt+NTSavlOF6S6OzB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/TCRA9TVsSAnZWagAAvTQP/RPPFBpu//DquMIIPAni\nwRHhYDlVCFPHmTSpAVmME65K7zqZtetK3hKHeLWfvDCzhy9pjAxs5HMwnK7n\nFq06YFOhCSwfQZ1taTnCiiGg/ChL37WIRectTEy+BT9SN0X38angWd0YfpZu\nUV3CsMmVvlVXu8gm8AHMpjQ2Go0eU8HeNAimJV6LtP6SCVvltymTglHr9Iji\n7EHo5XbPgs4XHRvfLuh0AHQdBGaImLoskbITjsZuUYVhoR3tmM8dibbUtOXB\nyMUCaxaF+s2HJe4Y/A6t/ofLZ2aliE2Rscgb/c+9c8i4Z5w+c7PL1unHAXMz\nSQyf0nRdNhDzuv58+I+KI4stYldLnNNtYxcMwQL2O9sATbYGTkcSY0EhIAIu\nZltxr3kMV1Sb4Qlg6gKAFQxwJoaq8JZq3TwnsLCW28xypsp/OaiMzU9dWjKy\ncNX8YoJekpeBq6JM8IDLhyLbB9ldoGrv7WFolj/L0aqvlf9ijbkOLmQ83e5A\nlNlRe2lokS+7zFM+2JsmAPS+baThfBosAgLWv9IWPHD4iLUSu2EkYKNmV5HC\ngd39+1KYweYOB63m83RvxJKWUYBNg4nzqjk8kdLHamar+2hi+RBk8qXYUvCm\n0BRsBeCv2OYQJohCvDuA9uCEZd6P+7uvyBYY6Lbnq1DAuUImo9TygSzHahuZ\nmFmw\r\n=pA4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/density":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/tab-scroller":"13.0.0-canary.117599a8b.0","@material/tab-indicator":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.117599a8b.0_1630654418892_0.5020157608435689","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc4a190ce9f455c38b559d731c238d07460d71e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e4180d07b.0.tgz","fileCount":37,"integrity":"sha512-0Czw1l1J2Kk0e3AYnJ5dZYjtJ5Onw48AdRc7atGJfJWIVOqlpNeitTM9c7iByJYFRPRNxUkcBBvuJy75LPM0/w==","signatures":[{"sig":"MEYCIQDl6EwUQ6mfgtEKLq+lP3n6ci1MA/NN42gKRkFKQeH4AAIhAOWRbgOFhSGEGhW4Bo666VSi0QDnVtXE6dIYAZrg/dbb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/uCRA9TVsSAnZWagAAGpEP/Aw5dS9tewkRY+JTxfdS\nO8vYHi0WCzgiIFYnsPT8j3uDLIJHwUQSwA3zThF5mTM79v8ghhqh6cFgU2Ys\n3jNH4wQ3XyyGQBKRpSk2Ue6Pmp+VWzSjYNbs0QfT0XEPtqp+IpiSCuMUrwxp\nNr+eYuWzAuALUiiDAFVq+hL6Un7BSvyMq2Ls0K5x4tX+r1pSUjEViGp5vaGs\njATyA+YDXBGBzkAJOEkNR/9zH/47FAYpNMtV+GuHTigWIoNOGaj3mWLxFGTV\n+vHP343HlKASAbl4YYGhNNmjc0jNl/dDUBo9B1tNraG6BfB7Nlh/+5XQIjRQ\nkPIQHXuN2VldH/BkVFjioXUmipBvHJIbVjYEIm4j44WSLRsJTe7WjruExpyG\n6EL6QVYKu7WyYXm17I81xhoNzZuB/TxuFepWWPcxhKNsQnGhrIpwuNB06KC3\nZk8fSZE8jgJ74EKju4xQntbrLIy67QrDapzq2T/YBkacLE+syA5+O8S2O823\nk6NXdQT7+hcSBzsJf4WXOFCOlKb3JOfM9C4L2mP6BeRRqNUl9ctC1Iyj/kL2\n8qk24XcpIECO1LZjz6DewxqTk0du9064ouCJRtgphaK3YVYstLEBt5tXdWQg\nROIxiZI9IE8EJUAWVpTUm1qKYVLPJk1Y7+H64oUhIqsdC2/i58BOEL6dh1/1\nLO09\r\n=0bu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/density":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/tab-scroller":"13.0.0-canary.e4180d07b.0","@material/tab-indicator":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e4180d07b.0_1630654446472_0.353793346377657","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/tab-bar","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5faa1d5bcf586b459661c9e5246acce3b03f3c15","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.42d175efc.0.tgz","fileCount":37,"integrity":"sha512-IMvwmUtaMx3eI1gBtmUoXUHHr9ihvAjevY8LI14H+pIpBLgcLni0J6SPxa5FM1vAA9jPQC+644JSYX/WrgRbbQ==","signatures":[{"sig":"MEYCIQDktAjM3QTJjhjwsVMwhyGm4yisn5ekPEUHq3fx44+bLAIhAM39b0X/x/3wvilBzWe7ZeNGicgCCfeodOV3TmWsCBs/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLxCRA9TVsSAnZWagAA6QsP/0mPnr8LrMD7QAO4mZRF\nocN6WHi2bMT/JP8u/9i6Lf+620U07qH1Op58atxs6dDVWt5sIRKlOIITmGto\nYoPEo01nauVgwRb3j0bE8KrFczYP1MLhH14/iAUpPa1YR9EDuf9zW83SQluB\nS1acT9cXrB5nevLsPnhk6nnWzxQ8dajF8CjDoRr+KFlUs0WishmKtHBB0xyO\niZ1GP1x5FWc02nNf/zYUA+BizJ6hd6zg2eMa5Hm6SLhhJXmbOKmNji0tBcSr\niHyk6BJ8n/eT07P7hLlVGDy0nWr03HIyG9oQbBI9tl8TbaofWB7yaG7FSwZ8\nEcmVKFDq9N57x9fJ+X+aUucLWDT7XLYKXVOVnOAykVRoeCCwp2JnjvTSNqk+\nSjTdmvfRD0mrdRVoqIZ7KHBxYwNyIsgrA/rFWHnIpPX55ouKYgd7bCyckqbI\nmfTm5Ua02QMX7OGaIHZlALbPtepTjt4SW3qlfNVzG7OalkGsEmtPgwJBzBHX\nz7x+3dQvY5wQHLgCerXvGRchPVjBLAHaLvOGaKG7V2nWDp0FuWXHzXYBAisn\nQm5bP127+uqPUcbmmFMB1rOup1u9bZwiBy58tSS5fc+NheMFzgVjp7kNQolp\nq4vdm06IWEy3NAhnEekqFKi3Y73jb/wBhl9laFTTCQctPewwt2j71xPSn/Xj\ns+6Z\r\n=IKpQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/density":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/tab-scroller":"13.0.0-canary.42d175efc.0","@material/tab-indicator":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.42d175efc.0_1630683889637_0.2783769755575902","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/tab-bar","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b59238fee22579d1caa9519f8d8681b6f79b1bb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.72464476c.0.tgz","fileCount":37,"integrity":"sha512-htox3ByMaGF0LdkwWoKGyvkkFzBzls6c6auEbU+AzCxux7HVhDzosswoX4odgg2UXeIFrf8TWMnaEIPbdgqqcw==","signatures":[{"sig":"MEYCIQDa30/BnVeojWtrb7QyJ9AbKLVmRNRrPTlFzUetuSuXMgIhAPHjAEjS/OTtzor7h/ZSV1NgnH/4UXdyroZUyjWoLbl0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bmCRA9TVsSAnZWagAAqTcP/1R1trWbF04JjZ+f/ARh\nbXvREsSk93H3f2UWcIqRqS2bQHHoLU51PbJDgY65PNFssr6TY5CN4L5EHHBX\n+DcRSq5mSRafhBJtuQU2ztXZwvIBAV01yjx9KmnzuLn61f+GwTePDP8/CqLL\nXYUqK1wTkQROKDulseKew5SjkM56/NunwBd8e16ED31Xc+QXu/yiNxNvkxg6\ndZ5o8GGJ7Ca+D+ogij5iVt0idZbEjuw0ahkyZknTVXgo+NaLZoQFltbtKhHa\nZJW8gWwBv0fF18NsTx+O6PZhud7dGLcCcNd0Bq5Aaxq5cZtfSu8EDrSAcT0J\nVGRPn9mxUerJWYITOuZMnT9wSW0RV3FoDOh3RHy0gqpAmUIqjcAGjhWVgaKN\ntwotHU0K8YZfN9NDwjKiE8cfNI2bNIweV6Vz+IQ/9w0+2v1ZVVm6s03Ud0Nh\nl5I3gzqRIelkop+Y9N6vEMF5OurQhd5atW8rXIwOmGtr7BrM15HjYNPARm1F\nWKTXqU9k7rsN8Hz1Sp69s24oWBr9FPM5HD9xJs+uM+v7F2lvncwWXfHKJHux\nbL3sH0BafW8D3rroBv1M3X7SDzjiIGIBimzWFqUQQQ+rJfTGy+Yx4VZKh7wP\nKamY5azhBOL62Y5aZH5HJ8fcBPFYNMLCEZDJsqOO7GcmaZYlUjnB38tEP7Md\nVwNh\r\n=Z3Gj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/density":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/tab-scroller":"13.0.0-canary.72464476c.0","@material/tab-indicator":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.72464476c.0_1631028966473_0.5315707035780526","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/tab-bar","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b2ba06375cac6f82d0cbbc989ff953762b8497c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.37d4db866.0.tgz","fileCount":37,"integrity":"sha512-yOMZlgY8TJoSlNQeSB/YeFwXTFamEboBFeCa+sN4PvFWim6YtW1ZlF3S/6Dvp6Vt2T5HUfu/1tA9kxCt42uC5w==","signatures":[{"sig":"MEUCIQDTkluvhYtHn3nww9BxZyH/mOnE2TJ7w/9e1t51dhpeZQIgS4/54FX9dDr6fwdvxbyS1hEf4QHKtFOwaq1njBNYAWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhusCRA9TVsSAnZWagAArEQP/0K3vz1o/8O1chjoIvs1\nWJlJCJXt1EoKqTa+aby2zZTyCjIhBO9qBOW0cq+oanXWhm+QYVoxApyPPp/t\nl9Pj3xFp7+gKyBA+AJD0dWrTygzuEaGQV+64+Wl0zQdrsp6kvLkVYW5d6Whl\n8PZPe8BUEx4JjMpBM+S0idnk75+Js3ys/De9bnrSUJ+B1Eygd63NES80hNf+\nZH7Tma748YL4yPATEOPOZzRy7I5gmEVcCrdt9shodPby65YTqVUQFHsGa4x3\noNR2j20DwqZyfFImnMBqxoNmG6emw07WsP/7llY8E/ZNqCrcPJj0ouEApOSJ\n++WWQJkPC+rKsDtbTAnfy3S8Xvb3Ob6SnHEPCDEwPs1A1SH+DGxgxTVqPhh1\n0NiJQq8npPDaTv3ijgmjO6FQ+g+8wzR+h718dFoMbM9G0fCmzlGe7JrbTrPv\niXIg7gK2xQoWZR0xjW8m6H1OHI8pFqN4ApbQ/3cCNoW4bZzbC1140BKkMsgr\nFgZ25ay9DfNGgYNeurdrJHF/44kqQxSf6/PRBRz8QYunPMTc2eoGnxriqEEJ\nAzInloVM7OF8sf0hKiYOG1Q3boRpW4umqsRFVYceOi8+Ca3z6SmaInPsNrNf\n795nR89sja0a1t7I7XpMLAMSGo2aCLEjelPk8q0uLcGxEfncCDJSFVx/UJUS\nNeFA\r\n=IJWc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/density":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/tab-scroller":"13.0.0-canary.37d4db866.0","@material/tab-indicator":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.37d4db866.0_1631198123855_0.1438751975726733","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/tab-bar","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0ed3b00c088c1aa96b7bf49067ea3b108769206","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.6df682e74.0.tgz","fileCount":37,"integrity":"sha512-Hra9ytCMWthwCo4y9YjchJ07TZ7n5MAXjkMgQ5jcMq9nYtySDAJ3o0O0sFWMDkaaSGj21bacQzpRn6S+w8HxzQ==","signatures":[{"sig":"MEUCIQDp0E/QbMjOeV9BeyZi4ma8wYTun/wJiKWYlaDWUJtziAIgAWJmoFCA+jX3LD0gFyrujya2GBsv3BWPCLPZMS1MQFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiwCCRA9TVsSAnZWagAAgycP/1WuMFj+5XpB/vtS+zbB\ndnm05Xk4krF29kM3pO8ivudaapcQbnUwsnpDiWDEkevaluZM3xvi2ale3m7r\ns9E3c5ypWTILqkuHNK1fedqgB+/I5GpXFDaJilPlkKoNQgqxUYoEqvnH0X9X\nFLr3bXGxqnqvfJNM52HOEP+aYP7Pcwnkjz9hon34uqOoK0AzMgDpXfVOVDN6\ngbO0z4Br1UFf96YjjseX9DRaR9SKzZ85DBFTIRqjyMxC9xbJDBnwJbnzcngT\n64llvHGEigtq5aEywNTJXRMcqwaORnmKL8trmbUyOl3MDa36s1q35CdD97UZ\ncTjwPMo0hk1gFSudZJpMjYLR26z9GkG3kNHkQgH/wWhEq54g/docAh6OzomR\nES1/deS1hSYawNcpM3P3CswbKaCqm56fjYLW1k/dkWzydesAR7SbBInjLAWP\nU6pejYC6AixPRsmFQRep5f+lwmn3OdPKnYeVVt810CxJArK/Szl9MJw4Aw5U\nnEbksjLXdAtKt6EkuMcVtMhTHAXzLE63Tw7cjXVo/dMf2YhscLcBKmq1FB0T\n6/2WRDE/8n8hf2/kbm/B9zzS373ub67K4IMqu6hwoNDMGRiOICOyINjHKoH3\nqip58qQXbDSUCVtiZIlVowzEeD+kwcEjKTjIhfiEz8uOAKwr/oczxzKBQ+85\nBl43\r\n=vjXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/density":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/tab-scroller":"13.0.0-canary.6df682e74.0","@material/tab-indicator":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.6df682e74.0_1631202306268_0.83293855323672","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/tab-bar","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49f250e942aa4e05ab977334b9b3162d5e94f235","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.b49359c35.0.tgz","fileCount":37,"integrity":"sha512-JkEgA9OgZMRe89JwzyTsSYlpH6VEyZ5VvMZ7KqYCZPQ2gTlI1BTJQVQBh/4/I/rM4GDvaCX2hBDHrs17gAlD8A==","signatures":[{"sig":"MEYCIQCrGfDELnaTK9gUM6DQ5TQIwzCh4ah6VAfmHroPGSCsswIhAN3oMDnGAuhX3BxnKo32YXamc5ruD8ElaTPsLrHDu208","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkZhCRA9TVsSAnZWagAAKssP/A8CISQ8uekIKqD0OeJ3\neWwVyxxtuwvjqH9Ffv/EXeyg94fAt4RmIwcen4H0E82fUsoyDT8yE1gb5G7E\ntzr8FHWySPXGoX9PmofTFC/JsiW4IbqV0a1tnT/WDjzoZLpHbsp58mWjITj9\nX3FqmUseK7TEQOdQBNj48QXEw03hV+achllmEwQ96ud6lomuw5UHFLkBB0Uz\npUsbOMarhum4kWnx2ydyjVjPDeB3kUdbvAg4G11cwY7E2ezIPFt1Z7UdkmrS\n86RN17BX0hB3pv8CuA+6Vm8bHoozS8iY7UuXVphGrKNk4UCJW3CAvCFFD2zg\nRgOi+KDZ7u6ovfuF9ydswTH+Onw6O7mGWu1p/YhmAgRXS3Vej2L9uRiQMMZj\nZ9hfiVM+rkDrYvj4/ysmW7wVfOhVVORohStD4eZOV6yhMTXVkvtwLoyOON2v\n1baPu78QfsZsfR5wyDHuClDWlW3aovjIfqM2oibAqrNfdHaWVUX/yBh0ZzHL\nps810VVcoGzKVRBGPDqimE2swH6I+2FQ3gEQeXkaFqeRKDpsMhK/x+/IuecC\n78xYC+KsPFtGkNVAazMUTLH+yAYtqMAWm/AVXcLd/X9yJIjn4OUie9N9znUo\nxT9chfimdKrCCuoHoRS4cpshGMcCd6ZDbD/glAgm/Xd2xlc99r6oUYxZPjfZ\nPyiQ\r\n=JjbV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/density":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/tab-scroller":"13.0.0-canary.b49359c35.0","@material/tab-indicator":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.b49359c35.0_1631209057442_0.2814576461265501","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/tab-bar","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae8b0373552fac995ee2a63d679c1ac6326372b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.470bd34e8.0.tgz","fileCount":37,"integrity":"sha512-i+aUiMNOvFLy+xtKvrg10UUBevSMEr13iDsZZ4Qy86I2S2Hr+vg/J1A9eRIeC2I5Qr3a3YFIrXM+nmG7grANBA==","signatures":[{"sig":"MEQCIHxAp8nY/o6yL/piZGBLaa/xmXJknuifc4Eue3TJDf0zAiA5kBIlTeV8GlMmqfJDBvelugV258vATP60DY07PDfszg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkxiCRA9TVsSAnZWagAAKpMP/3JQLDZVvP6TTuD3OkUg\nVCuG3JhWyA7MjzzXGLm1bRq77zdkeW9UyP/ghacTbt46QVhdqEDejrlfQPDq\nbUZ4r44KI3dcUntTq4FCzNvc8OehuK3Wv4B7+A+u8jlKWOoZaM3QIpCExf+Y\n8KEzTW5rc5FB7jUGn7S40poIfK8+H3hQmz+rcMnvyc0zcYnPoZ6UGJBGEILT\nic69+hm8utyC2uvnyp/hRzQbslc6obGaPSRknUOsZwG4EyKCep32Z3F+ev4r\nruIAjpxtvdm9qMs0nUeEEYDc5N5W4i+lzhszRq7R0OW/3pOdULQ67v2y4f5D\ny1qIDLhLmN8+t7JTX/M53UpCy/5IthHgeI+FxCc87BTEXwEg9LbN38VGkvqE\nEXjSWm5SXRvYm+mGPV1BIlKc+RTkT9s8ipN4r2x4sWd7609OZDFuC01k1uUw\n8CNtCZOjtXx3NvWZg9GXam7Ii3F2sf3ly/tHQb6T2kLMMeoVcZIIwIuVxtVd\nCnfjpKkZWTRW2excHWKvmCZsYYgBHHmNw1GPE1rYueuNbOcBm4QGb+L2CQQJ\nodxMMxSGMjuC9yD4ew0ziA2QE1mHNJUwD6aPDxmi2j495Zdcp43jGKTeTqJp\ntouXz7brtiNXL3F0RsaVCb42Z66Ugo403WZI0Sf2N/6WwM6w1QwynZoUus/k\nCoSq\r\n=DrZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/density":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/tab-scroller":"13.0.0-canary.470bd34e8.0","@material/tab-indicator":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.470bd34e8.0_1631210594201_0.8083822194689354","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12dafdf4f51be7188b3404c48bc4d335ffdb369f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d48a01771.0.tgz","fileCount":37,"integrity":"sha512-VFUlqgHSn/RpMwW8QHnnOoxt7m7/vUhz1GTrZuiOKXkuDva8Vgzk1VZyD16RHQODRPTwkyRY6/qI90wlBRqtmQ==","signatures":[{"sig":"MEUCIEqImXJw+4cnAmkAZsj0TeDCetzNduyKCEFuBXpS4GE4AiEA/HPFS7emrbipWTjeIU96ktN1TjxGnZTvd0ZQbxw0L2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk6BCRA9TVsSAnZWagAAlVQP/2UwYpqNajVPURaHpG8j\nwsyEawzzdDJYFgoimklHG0Tgt9UQ0BaDbsCBXgA9R7j/kA1fQZ8j/6ySum6i\neF4j6gsSs4/k5kynmVJIGIELqryvfxnX/0WGrhVG0J775MKiaI1EcqTh5Gqs\nleCohf/uKPbWd6fqCgTIq8EfTWfACw60VcGgZr/+5fVqxAuHvWU2jcp7VpbN\niS3c2WLYqlr3MNoltf6chhHSxeGePhj0PT/QAqcRmJrpMfDGedvfaFZaQ5vu\nOzlBjoXGUUb39ux0pC8iQrCmT79v88q+abZhkhuH4zKn6NIWVNLlsQLquiDE\ndqQkIowzw6y384Wn1flizxeOXwV4ZvJODJJOjD7cKVY8AIh1QcHeLP8yk/Sc\ngzzfhhBZ/YOpORYIpegRJca1/YoSj7KL5edQMt46PBOzyAGNEFM4HurTwGE3\nL1ZZNCJPG5YoVKcCCHCBR7Cj3TvsmBEA/xIl4yr7d1Auv1tU7WgSTtZEW/L5\n1s4W9wqbmjay59XHS5Xdih0xOBnpheQLMeSpAkLNnqKk4DKVQ40oflJeRXm9\nlR2qENjOaq8GHghWUB20p30r3UfDORbM6GVWxgY1sgmSlR6RfwWJx3tBM4LM\nUH9FM+AvHQ6N4xH370RQqvM+WN0GPep9bhVXR+gXFmfFwJ3H/ZrqzbAElUvY\nDYYC\r\n=j79d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/density":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/tab-scroller":"13.0.0-canary.d48a01771.0","@material/tab-indicator":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d48a01771.0_1631211137675_0.5612109061163282","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/tab-bar","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c825b993e3721c59bac58b986992d6351fe79ee9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.13db34b34.0.tgz","fileCount":37,"integrity":"sha512-1O77v8A5FHGziRmU4jFzCk49qhsu6K6lAbj1oTWDoZDV1gAivuUdiFLlNXlHzHQP0NoJdzg5xektlJHEJ9bLEg==","signatures":[{"sig":"MEQCIF0kyfEv5RwSOeHGLnXeJ+GlveFLVLdNxIzqFTsPZBcEAiBzdEb7rADoGeCC9e7wz+BylV1rz7mSaE3UA0duBHndMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlIFCRA9TVsSAnZWagAA/M4P/0P1j1+oHUaJj03HlqkS\nigQLpFs24l7h2JwAImQfUVgxtZgfh/qHTKpiF0BYV8b4uA4Nc4wkbv0mZ7r+\nFLC5ivx5pMqRaXZoxqat1xgg4/PAR0epPmiL3j5Z/sHBYBRigrJiCrwOzehY\n8wVx/77wEvS/OvZqUPkdCL1pCXHsiZlsp7DP9c9afwjI4XXZ7/PntK+tURPN\nB9MLtNdhQIN/oaCpr4Sfncb2yqxllJzHxZsU5LmotbjyfuvNvBzldCz4qFXj\nk+g/r+L2WnfMcpIhVkAsPblW42Kt0ffgr3IOXvAO6xkO6TOIcKr/tCKtI/hY\nsrHmHMrOtc+QAF2sC4Trlt9odzVTbRaRtfYgOVPa4Fp74U07WOgXgQiZIgl6\nh8dvdUTCxR/xsANpnTl3LJq/Gb7WALIx9l90EhTXxHSgBlndewzpUbkgIYOZ\nHaC21fhxgRntcqQRHFm0ZN1mZukwppMeMMYQ4Tk7NgeOMzAiX9P8kb60Bu9U\ncnOIsDrMCCWRWJxmBKYqUNG9IAHc04g0W6prcF6gyt0c8fBOvjpMDEfd6BHx\nNLdBKXJbPjxIto5BndHvJF7D+AJ/tdoguijirkz9cs2cvACPaQHhSUqbj+Re\ncBgwZGHtD0RJaBvGepFZo9t9vNfHE9AFsKzetBj/BnugkeSvMUf39CH04+wF\nKx6T\r\n=Fh2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/density":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/tab-scroller":"13.0.0-canary.13db34b34.0","@material/tab-indicator":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.13db34b34.0_1631212037407_0.651052670608931","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/tab-bar","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3b9047f0f5955d29976c08f3e097ce814658cf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.864798678.0.tgz","fileCount":37,"integrity":"sha512-aH0gzzTUoY8FQWW77xRfHKKKNeW5NbVj6G1dlV0vKMc9xJu4nXUJPEwM/q7TbvuYOJVUXewFjz8hmgsW7pA2aA==","signatures":[{"sig":"MEUCIDFblKjVP+RjlGvJOr6ZlSup9JxxN5dZrLLeW3M7B4RdAiEA0iuDpiN/p6URmXUGtsRMlQ6vxIUis70WzYvCFCwS3L8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlS4CRA9TVsSAnZWagAA5oMQAJt5QwnaKp7RkkcWpvei\nCMHx3S9Vt49SFoJlDcl6JI4nEWELk7R1id999LlgoNs4zrsHfN9t4qnocuLI\nkK2ji9jPePpckJmIafQovauRlZM+dNV3PtLwG+DA5f/ZsPdWHm/16cCGZ2Dh\nF8W/nYq/GfMEMi3zkNoew23DF2yImiIq12pbTaxNB3ey1TZOSnTzvnmwhrCi\nWzRwuAgdbGo3sr/QyMElHsFHex1OvDRAZ+YaBwJhXosumYRHzwA833aAU6OC\nlgNGs5SJ2Y4vGZq7OyEwR0Lkjwg7xFI3+E1pVD2yfUtUQ3ctKFqc0btfs9XA\nlJpbvSvBylxhNVmMj5lr8zAAb5TIuKdIcIy7ersjpNE+n//Sfr3eWOm1+Rmm\nSvmS0HEQCD7r4TxKRD4Wzz6kvWU608T0dHR7mNwQ7gyGFBedE4P3mT/SIA9q\nl9zPQrn4h0wEQJzt+qUw03d3Nr6LZQMWvRaQxq7yqfYeCti33+BHT4iy+T7P\nU2oEQE+uVhzWOIhbA7MdjFX1rgjpYV6BGa+co8DfduKif/8Dlx59m97VNBs7\nc/aptbfKpwXXoRotjMLlCfKx2f31AfJL/vb/CecYB9/G0BbL5Amp1pdRliO0\ncvSP8+6I8cg5vQnufAyiYRTrtUJhX+p7OKlAOFIE4ujL4OBga9YUedG8jRjm\ntMeB\r\n=8Cff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/density":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/tab-scroller":"13.0.0-canary.864798678.0","@material/tab-indicator":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.864798678.0_1631212728656_0.5163357230339238","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"757f2ac262ffca1c2df2791800e3debcf9f79430","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d04bda3fb.0.tgz","fileCount":37,"integrity":"sha512-PSuw4D6ppjgkTvpga0wMF30TzZdcoBWDgeJs1bAh67FK9SSXMTOY7zPt/fqOlqkKxjZo5qoh6mzmpPpVIXOiKw==","signatures":[{"sig":"MEUCIBB3sTrNsMs8KBEsjhx/sVzdiyi1wzDNv7HpLwJFLEqvAiEA8lHRl0U2u6sQRl0b3/6yarpggwnN0rpGNsWxs1VJ6N0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3iCCRA9TVsSAnZWagAAWS8P/Auga9/TVQGg6gvsuL7e\ntD0GH8+8Wv9lTNp23PxZBiadVPhTJj0tiVTigbN2tp0ALYp0n7vDlFG8qqEv\nao+TPdT7sROaaMBIzU4cbqzbG6zUSEEYpofKdrplwrgOeTNkDc01NcRaewe9\nUMN19xZqmA8IZl9Pp8w3PiV3+JjN9WRWvsjlacmN7tr5+IbHEJa+xqqxrg6L\nYg4z2p//+PvUQSmfRa59YnoYSlbNwk85zMBNlupz0Wat5Fm8EFvK3LbSkqEY\n7HxcJnlqQNTlvldGEdxQU7oQ1Df99jJM9UOuCMEAMxhCvkaiPASa7vMRFRPU\nJKVnflY6kMp063MlnHOn9WSDo3196Q6e+lt33Kp1WnnoGzeEW1Lr6ZKoHbHQ\nbL0GATssZu2bRDX/+ceYg1KdofeKUKsnhZNs5swNTSgZSyUsb+QBZLUtTzRn\nOAG4dt4rW3vNX7y3Q2OuA1rqTLeHXkj/dRhH8f0jZs5sMKxewQ7VWor3w0SL\nJiT6ME6t+H+rj1RDjjKBw7qd3NwzjTc8bX2c+y1giAKe3BQruvDLVPIEnlMh\nLUdrXsNOb0BJwFwV1N0mm+a/bOafHaKMXakcMYKiXe5s1ZffcGKprEPeanUf\nGg8eXUTjV2iH7i4FqCsoNNii9jYIVz5ji+UOSXiaY2bvY3nJaZt+Uu8SF96a\nxGwy\r\n=iKkf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/density":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/tab-scroller":"13.0.0-canary.d04bda3fb.0","@material/tab-indicator":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d04bda3fb.0_1631287426169_0.5600960530434524","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/tab-bar","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615e370df40dae23f627d2c12569e1ea29010782","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.5533f73d3.0.tgz","fileCount":37,"integrity":"sha512-3TDB36d2On/AHzcAhp7emLoWh1Ti8sgE3i8PdwvWiT52mCM/fC/OgUHpuNC3ZrYNN3Xqiu/dP+R4O2a75Kkq4Q==","signatures":[{"sig":"MEYCIQC6tLbubn6UixTA7XZrxLYUS9gVVF/Ko5+VHJ5pEVzhDAIhANpMK4xkIudMg0WxruTvukpApf39IHGWvw31srXjm5yC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9k/CRA9TVsSAnZWagAAZjEP/RxYu0lxLugW/FkqJwb6\nFOZ0rIAONhx59XbP9fp5xf0/6C8gAIlJ59kE7OkwNqWHxkLyUUmwEN9o71b8\n3dVtIoYkhfJ6M7oMLMcKzh2XwcCvNby4CIvHt6P5Ov/M1Wp89vSVVtmbfBrs\nIfRHjgyJLyAIe5P3+cYCVxuw9bMBA5zOB+cUYERMubFDLJz6C5sxEba82MFk\nkuX8f0LX0sc4MR1X0e9eY1CnY/8acRFm0bCKzYXGVu0irl9eY1x9mkY2MMCy\nwqy+5Ol75PMulGCH/cOyg5QpBRWtQdG9I0wplBwnY/CizL5I6I1mTq0au1Px\n7LEYumF1Wle3m4Tak/qYJyoixt7at3wc/e4N501lYVxtjV79lnQZwgdyuWLV\nFO+nNSNEIm/N6LAcfJYKb5OSmczW6wud0mm1c8QnJXFg2kQc+pTfSXvHkGnP\nChlVLzHUAZK7Oos/DXQVv9cdR1sJcD0VSLHkx7EjQacd0tMWnbObSZ6tAZTo\nQHkGCcJAYY/ESVYiDkiJnfPu5XGQGCCPZx+JyeBFkO8aBsu8p3Ixd0PvrGzg\nLsWO/XM+lOMttL6d93zgOVF4eWqdfdB3jVTrOpmeN2U7a1V/rcI0EnNNafEc\n/FsXsoXPuZ227wzy7JL30Oy3CmwYdNqB5Yh4W7LL3dUruketM+XQbSt6Dl+N\ntTMG\r\n=VpAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/density":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/tab-scroller":"13.0.0-canary.5533f73d3.0","@material/tab-indicator":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.5533f73d3.0_1631574335139_0.1886011930828937","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/tab-bar","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbf68bbd7c9b7c8559b1000f9ccc065f28336cc5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.08398f880.0.tgz","fileCount":37,"integrity":"sha512-MZ+Mb74P/pxCYPudHQYkYXolkgZF2G/zxyViVrk5vMxQXcuVevxR31JAPLWvzhGmNOY/O1W5gY7Bucc7+qRZcg==","signatures":[{"sig":"MEQCIH9/Bj2BH1TaaTWAG3w67P8xZdf8rWrpnmyTFnKai3PEAiBhTTzkHqYUYUE8FeBZXEQ2ZoCkzpqU6QoG/qXSZmtFjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BpCRA9TVsSAnZWagAAoi8QAJYuKwZhfWs599ZoX9Gi\npOLX9j1oIzYHgBJqZN9MDwsEWOTNyBqWMh/9fLqhLGy/tsXCqNEOQ/3FrgEa\nAhFXRYdzCyc9+77ekRhCkS+u5AwB0pivJHUEKkblD0grklT3yuJZrJT6MtVk\nluVVA9E4hMPkDyS/K6w/LNEwAx7Yju73cLIeVsIbH6GuftOv7aqLz+b3UlWJ\niD2IiZ8JEbemHLGcdYbfzCZ5rcVz04luEfKpox9qby3vDGrGcGqtWL4lHBmH\nGL5jBTmjKmtgFBgYfUltUeQGyyBXkzoi8rK+qF70QP14RpwTq/O3ERfmTgN8\n1bDVTfRx2ohmQ2oT8myvk3lSLf6ZzeanMx0WfTOHJpGlFJjKEkdvmqVku1mO\nbuRFmHlzPvpoYVw8e9nUekBYcQ1ZBxQuQkzkni6KYvvJIpg30FcDDg1PWtgp\njV67zilr1fOhQV5r3pk3KHhCz7t3L4Yj/F03ER9jsTSL/bG7qVBST+2/SL91\nqhIOPd4KVX37b8n+yLT3cLlfw4SLcqDrep7dmdzjwpkTmLLxtjSpukpDqYZa\nWlhO22EARRuadWnXsFfKtrYvR2Wlp4giiqNYeLuWO0TwXaZhhE3ryqOGfPPj\n1iF4lG8dnvnnZMg41vZs8Cp8K08m8+tXB1KuuVG5Bcsrata7z0Ye6/GI4KLJ\nUDXN\r\n=Yng4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/density":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/tab-scroller":"13.0.0-canary.08398f880.0","@material/tab-indicator":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.08398f880.0_1631576168906_0.9944699270371029","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/tab-bar","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89bdb7d2fea3c76add549b9ecf9fa5862638871","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.818f4ee93.0.tgz","fileCount":37,"integrity":"sha512-zoTL+W9Gzf6N9HdBapOZWTD5RetObwG9tTtj3htLht8F1wEFmxwrRC9ws85QcHcEou5ycpOSspRyt2iEZdmjGg==","signatures":[{"sig":"MEUCIQCZ3KF+lxYL4SZqgRNpCan8xfViQ3IsFcGtKSfY5wSTBwIgVuhas3t+aKJQKQ9lHTQSSqsm/82iKtF9DfESsVTRA6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjLLCRA9TVsSAnZWagAAilcP/33HGIQpO8yC7abSYBAz\noWbY++8PJ/9gYyuGOZz1X8NmbmUkGoBqMyBs7vJ9WgoYN4k2Z/w0owE6lAQK\nYWPsOYxqyvPB01wCrhvSoG9lmjIqA5lFRVFrVp1k7xeHYYG73+jeTCeYRAZ7\nWIZqcjnfTmuW/XeO9W5cdSO17CyDGeF6zYipkgmn538NSAer+4m4HmL7+4M4\nSPHijRhp/x1Gwwl3nJ8I6US4XP1ZKXxVTzPC0uvrTZpHZB6Wne7F0S9buIml\n+rY7jyYSrVzBC83X33sP7eDmdKmT3eMOA2wd9Bi8ecjr16Bn8IlS9KIsr65P\nuXsp1GiXHycAELdC8m+4kDwsh0NwzhPlfGsoOx0KXsqfhTVGjJQhIQZDcwDk\nW5ht2aqthMOxfsIAY79wziI3G5J7BXNjuFUvGlGe1MeMTtPno+vXQK7zEd81\nR10vvVJMC/tqaWADslhPeBH/Mv+8d6o8TGkfDEaDdek74IYI2dv0pSsltQdJ\nbeqjlblArQdq2LtfgD/rmJYE3xHEN3YXvcTUFBH4xfrCxLoHYktSbw83mGY4\nd9OeZJVB+zK3AN5+kN6kmRZ3PzzOeSMpjuGpER56fR0xf4NZdXEfl5zNP8hr\n/OlLWwHGK9yLvI0cvbovEi0T0cK6WM9QMV3vtZH5jDXPlrhBuuhBmIWm9XkO\n08Zb\r\n=CLRb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/density":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/tab-scroller":"13.0.0-canary.818f4ee93.0","@material/tab-indicator":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.818f4ee93.0_1631728331169_0.8903776679849982","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/tab-bar","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd498ee84d58571cf2c78d45b638afd11af9c58","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.8355e14dc.0.tgz","fileCount":37,"integrity":"sha512-GMqSxhPZCvwoqaezmW8BaSIwDcO3+8Hhd/7bvg5+9pRTfcGoTp3zVht2Et83T0USSeIw1Uz59ZG6F5JLaI57fQ==","signatures":[{"sig":"MEUCIGlJFKFI5cp7zTq2Oi5B0AZ02G7V5eeM8Re+7kKx4z0CAiEAy3CvHVqSnfU8dvlL1mB7vtQdfr4pR5Oqx+2G3yir2As=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkYECRA9TVsSAnZWagAAKCcQAKTKH8hi9VqMRdb4Tz1N\nW5+U9TbmPQW5zSAzJwoS6bxZKdExD1tcaOJUzO/kYCa98Vf4IPme7u+Vgrtz\nTUgvjtquAkW2DVumm2OfmJKsdYIA5941fX4T36HCFpk/IVNP1lRcKzpRpRT1\n4AXBUZn5U7BG+CW6X+D8/XsLcVjtAG7t1Xz0LkyOga5bkvnbL2bbabUVuqBe\nEXyZDni4NdaODzpshov08l1TeGSOIm4Gh2hFMjNsNFnqLctkRXDkHWul5TgP\n/heyuKnjQuVup9MYpsgBV/0ez4LXaH9GyzVauhVw0UOpwshqReKbLDfcD+Qw\nfCmSXXngILuie4pdi6XaZcNoHIIhYGBdnSDtTBmvpJJ1h0D5eOtNW6GYpvKP\nJMl3sf/jcZyRHMqhU2wv3TAYu8kro62iXIDtLfY0PsSUHdazp5VxRlE9dymc\njx71LfZpCC7ssjUucNITZLQpmWb3OjKv7rL/nHaLHCtdrod8TiHHOg3ajlTn\n80V/C5EVfiuIO8pkf+XxdQN774SOOfUahDgTyylBTkJup8EQlXH99H+0cOuh\nLUertANv6wRgQN7WSZVz6I3+2f6t/5+T8GSuzR9JC8mPRmERc8xFuYiPOsot\n6WARA66+KaAWYnN2gUjVcN7RiVkSNtxSLNvn5RF1VUIUk9D6iaw5mGNMvlCr\nnNJ3\r\n=m5eb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/density":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/tab-scroller":"13.0.0-canary.8355e14dc.0","@material/tab-indicator":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.8355e14dc.0_1631733252581_0.8375986262875017","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/tab-bar","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a01b515a4a14ae050216ef12df6c769b2cb3fe7a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":37,"integrity":"sha512-Rjw0/yB64VPZrHfNzSedLzMaq7dVBerTlzTA99kGccPzWpArl8QxBZaQVKmz+tITSEePUyBmy/qIwzRZkkR8Vw==","signatures":[{"sig":"MEUCIQDBt6UAv/ccvxmE8kHAA8OwcB/m7qm+2a5DTqTPgOTOvAIgFbFsglbkRFNWsNIlhXZ+xGDut3B/jjNyiJTzK3JLmCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQm0dCRA9TVsSAnZWagAAvLwP/jpCOTtg6ge9h2XVK15O\n04Y5jh0z9Xt2uv0qLRmSdcAjrPaNIEgLWXPOBiS6grs3fzd0zl8howr9nMBE\nN6X6+kTdKgHZSk2ttYXEfRS5HKedLag+xCGhWqXOFpu0O4AnPFdHr8S6kRj9\nxEEt/3Z0+udHVmgI3LbCf/oHwXowjnYu8k/NF0IGropRAYlobMaOy4rYNr6Y\nN5EzcOAPV9jq7lKeMuSFuhlTg9HR2CrK3X/Pmc6Ucz4amXtHc+Tbq4n+3I7P\nVo1o4/J8n5ktjSzRHxbT2WJZCvKhWEZ0BtzAvKrEXn/B2nOmTJmMgWE6K5mp\neCAd01dsKNJSS2j7NYZfa3+Q4Ecq6sTyFOWCbzUEIKSnslDAjQuCvREFaZ4L\nGxBBoFSssdqxjiZdHl29sOktQCJCNHcneBVLB5pXSg/fpXJYLzpxACL8T7B4\nFJmTLZJPakAKPRIkBC6s9mo/obBoH085BEuemJNOQBRmWVwMPwHujpv/kEs+\nfs9cmdTJEvf9CNV+2480FFrnUGCcfKtzteGK1RLHZ0iYcOAP7scu+orPGqHo\nwx/DG7XTD0YTPkKmR/1JS/VdEB/QETBVpcPJthBzBPtZX+3F5KamPhoQGq6Y\n+tazydVmVkgE3g4cRfMT1kg2gF7oD9kdRB1bjJ3uZiqCH2TjTLOMEKhaMh5t\nUScU\r\n=/9hw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/density":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/tab-scroller":"13.0.0-canary.d4e16a6c4.0","@material/tab-indicator":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.d4e16a6c4.0_1631743261628_0.5124312716664685","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/tab-bar","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8817a5582217726be7b6986627c7e4a2959d78b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.65125b3a6.0.tgz","fileCount":37,"integrity":"sha512-AbCKxL6MNknDdM30WpWhz67dr8/ZxlzjV1wEBUh7o+/RPPzOhspJc5RRCXuUrLKWf/Yk9uGA/ePBJvJw1Th4nw==","signatures":[{"sig":"MEYCIQDCOr6RN4/27LhwPD4yglCO2uGVCmFpJeoL9JAdvS3BhgIhAIPdcWm2vL9LguqFKLbsCzVGTUYkqRPLYSpS5cBP1lo3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7TWCRA9TVsSAnZWagAAS/kP/2IfiROVUY7gpcd4dNWm\n+/HygQK0+u5Whdf4o4TVM4EC6wkvt3AoyrOHxBZ3Tw0CxyKTYkT0vj9QEsr/\nZazhk8ImfKkjg3sJ+q1ZM16tCP26z59fkwHEiJlERMDOJf4pdJI7sdYJkSZF\ni8suCak0VBq0/WFx7gbllA2ZLwFuPPmPzo/8VHAWwAPgRSYrLHd2j6I0BLjs\nbVkKEnDXjNnWdS3QF97OaZLinsbFNw8lkeHJs95XdE2DuUiQEAKC9dqbpnMe\n+E6+vZukMB+RN/Dt/YB2VCpYaM+YlbMm05cLZP4SHYx0ZntpyhhHXZSxcBaS\nSa/i2bbu3q/wvTuYwl700yOyaO7s+/rCY8cak6c6/kUtlCfHPBwjfG+b3AQ2\nx/XzZ7FYmtaUGEPRQyvEeAif3Prh3f4Q0tISNxqPIcSLij93zM1tI6LoDeKU\nGjKMTiZaZTO/BQXrdFu6XKZiDHAxgDTR+BN27rjB0UCqiDtBRhBMTjnAi2mC\n5wTdPbOH1ZjKM0DPncMxTcc5IYlmvZfmHCSQn0ye55SRiviGlenUk7MjVRr7\nQAf3BFEbCaWiKqMaBeOAW0kJ2dn+ylrcS12nsrpxSQKjFuEh8vUMiWWrQfne\nTLPkYT+Rkf+FRdXLlu4hqMuP/YV6QebJU93ksyC8zaLT/PX6eLMmlHb237yD\n+VA5\r\n=sf8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/density":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/tab-scroller":"13.0.0-canary.65125b3a6.0","@material/tab-indicator":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.65125b3a6.0_1631827157638_0.49074541111801073","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/tab-bar","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2986cadc82bb11cd6ce2f6efda85d12b3761f083","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.80a583365.0.tgz","fileCount":37,"integrity":"sha512-pWN4AzWvIuNcvPuCWKSJqhIv6PV7ldqnzSvZ8yReurTgDABJwz7EmxLR401z1wIKbR8g3TpyYzN+BJ7gQ1W3JQ==","signatures":[{"sig":"MEUCICX+fMFAQIOrznnOsc2OcmM/poi8xw1DVN0JyWmx4YV8AiEAnggAbTxsiobWzOrRGfMo5gk+ekwy1Fka5NxQp2BoImc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/density":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/tab-scroller":"13.0.0-canary.80a583365.0","@material/tab-indicator":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.80a583365.0_1631911029772_0.2762406609826378","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/tab-bar","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d121ffdf5dfdfbd93ae09684b8f4bda7e2cf61","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.83900936a.0.tgz","fileCount":37,"integrity":"sha512-EFalAmDSz8/T8ftns31PPiCNYQljkN0dFQh+4eHgr3jFiF8wl4iP9w7iCBa5tzNpMM+Y4t6QhpKgwaGHXv9Y4Q==","signatures":[{"sig":"MEUCIQDXSAd4VEL3kiJwFNMVJIL1wG9P786ZsZWVLXOyt/W+LwIgKTDgt1ur6BBEtE1tMKNO8oivJkdBrf2qhwdU47nQBf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/density":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/tab-scroller":"13.0.0-canary.83900936a.0","@material/tab-indicator":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.83900936a.0_1631921140963_0.4402391833693957","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/tab-bar","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"189326c853efb738b74a3d75740ee9c38e724eae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.860ad06a1.0.tgz","fileCount":37,"integrity":"sha512-l5SkLFUza86rDfV0SYsCT5kwuRDmjbM7PdQopP6rsos1v7yBhAGsXkHzJZHw1tT8CHyXhSiSHErzeFWheO/7bw==","signatures":[{"sig":"MEQCIG7XlTLsVIJTC3jiDAiW8QzUaM3n9KF0aqFeDkMqqw1wAiBhama1JAe1jNRtC+1NF0LSXXobovldd772H5O6enpqJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/density":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/tab-scroller":"13.0.0-canary.860ad06a1.0","@material/tab-indicator":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.860ad06a1.0_1631921845424_0.8524890866786154","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/tab-bar","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2e89e23b1d78bff2490a252b11109cf72e94c2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.3b8d4429e.0.tgz","fileCount":37,"integrity":"sha512-GAhinVGzudIgqDPM7T9eOxpcLzKXaYWKz23uXpa5DkAw8GKoBdLjBgOZFukqspDSOe9dtt0FpnZsxC2sY5KiWw==","signatures":[{"sig":"MEUCID/M7oodve3mPeLZWmuoXed09Z8e5pi3VHUT2Ik7haEXAiEA0Dq4BhcQwwgXdMVfKojkMtsGoCKpdZyw796Eqg7q/Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/density":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/tab-scroller":"13.0.0-canary.3b8d4429e.0","@material/tab-indicator":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.3b8d4429e.0_1632160132158_0.9141246646975045","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/tab-bar","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6490a3078acbd64978cabcc2d555ff6bf2828391","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.2da3606b9.0.tgz","fileCount":37,"integrity":"sha512-hOo0FVxLE67IxqeY+DKgWR7F0UzgWJd8fnJs9nEgk5iu7Wwd06T4huA2+5Fgxh2+w+imVZEA7ioBU3uS5vFfxQ==","signatures":[{"sig":"MEUCIH9tjHHg9A2CYlnT/MmJAJ2LJFkUYPcolbxNX2j5l2eAAiEAtEt5BHRsM4m03kTO7f73tgj4P4mCEVnT6aSwNHdny4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/density":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/tab-scroller":"13.0.0-canary.2da3606b9.0","@material/tab-indicator":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.2da3606b9.0_1632166737646_0.5805152497899078","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/tab-bar","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1c48f48f2ef579a2c454f32ce657f38471687e4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.e8c598d1e.0.tgz","fileCount":37,"integrity":"sha512-wBI6Gq+HSlLvqdHXVWmOKDbtZ6Aw3NK5lTxhesg9ac33bwzYVmSC+YORRNAO6FnGMduN/OrbJGvuDUgoldLC5A==","signatures":[{"sig":"MEYCIQCvYN++qNNyOn2manKbqzqclYoSfHB9UDeNMNWHQwIlGAIhAPGANZP8NF57urkG9IFzRYq578rudnOxJvWGIzmsjoH3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/density":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/tab-scroller":"13.0.0-canary.e8c598d1e.0","@material/tab-indicator":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.e8c598d1e.0_1632172402132_0.3607531089784366","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/tab-bar","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69c6ff44ddaf38b82aa46b1e712b59486c57ce4d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.1340ee9f7.0.tgz","fileCount":37,"integrity":"sha512-zNfj52CfSlB1MOiCEC58RwSXfeBgOVUpCqPKcYTZ4I9OI9tZT0m6nuCwi5uOIIGvC/sOSxkb2Qx9RTp3owFi+A==","signatures":[{"sig":"MEUCIDHJEwJIF+OaIDUYJZj7OtocJ4ef+ZjKpFALn/vmy3vMAiEAxcVYcRGWa37PzSAEMcLPaKJ24iWmj1gGAPvpXVf3aDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/density":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/tab-scroller":"13.0.0-canary.1340ee9f7.0","@material/tab-indicator":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.1340ee9f7.0_1632333558066_0.44838649054841273","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/tab-bar","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9322cae79e0dfb18e055468d040aa5afed5f57ff","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.65084baff.0.tgz","fileCount":37,"integrity":"sha512-3tXGVKGnFXE2ulFWdFbayzfIF0N9XaTTxHrRMUFzi3kxnltB+upkjhNjA59bObUTiWFLrubSR5KhJLGDbq/ndA==","signatures":[{"sig":"MEYCIQC/BFYr7pR4QRjXKTivO9gcsum7L17B2czgK5ZI+YGtWAIhAKbb9q9EOcTUTcQWKbpDm7jzkAV+jXuqiWyjbihBRuXF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/density":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/tab-scroller":"13.0.0-canary.65084baff.0","@material/tab-indicator":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.65084baff.0_1632432417708_0.4600871235186774","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/tab-bar","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d2420589e30e41507b76d0a25a746b7e51dc96","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":37,"integrity":"sha512-kVLTDKjiCNzX0IQvNI8qaObAMU4sZuLuYU7EsSoPLxOeGAAnj9ivBjlg7zdsVqTkuaalC7TcfqVYuS8QwhTKPg==","signatures":[{"sig":"MEUCIBs0z2WLvNI8UBylqQegqiCFDGHFD3x0dMF4/RNfCUBMAiEAnBmUxhuI1ts9kRfKyGhv16TfTX48w7jg5CfW7d/Jcuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/density":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/tab-scroller":"13.0.0-canary.c79aa0cdd.0","@material/tab-indicator":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0-canary.c79aa0cdd.0_1632491003400_0.7991803191478672","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/tab-bar","version":"13.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0ba597b507a5b62aac91837d96458dd250cee14","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-13.0.0.tgz","fileCount":36,"integrity":"sha512-GLODDvwKiN867weT+WiSR/4Oum2hw0Ipl1vcJxtZeE6C3PmGWBE316j8a5DLYvf9bjIPLYLNLUzLU3QnJB6T5w==","signatures":[{"sig":"MEYCIQC2jJ9stoidSJiIcd5a+61qZI6knjbjaA8gzEsn3d1ifAIhAO19LPvich3JcK72Doc2kDRwXBX/7lxuaoBctOvXK3q+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568294},"main":"dist/mdc.tabBar.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"^13.0.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/density":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/tab-scroller":"^13.0.0","@material/tab-indicator":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_13.0.0_1632512830668_0.7958599188421496","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/tab-bar","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a09bfeb6b2283ac48b0fc0fbbb6036877676628","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.198431fcd.0.tgz","fileCount":37,"integrity":"sha512-mdx1r87fxn7+JrF17U9WxgI03Lmm/g8jdNJNGtyf95Y8+spDOPeAFChk4jrb5uqHP7/4lE6HfZ4LMLJjLb1k9A==","signatures":[{"sig":"MEUCIGFNTEBKgyc7TFyJFYvrQiAWIKcaQhotByy5uykvKzduAiEAqxUhNar530LeVAS+5oMmFg9LL05x6OBY7D84y2/isQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569350},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/density":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/tab-scroller":"14.0.0-canary.198431fcd.0","@material/tab-indicator":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.198431fcd.0_1632512875336_0.5024248720590789","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/tab-bar","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a40bb1ddbd57e888b52c7ab63f9d2f0f770e3a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":37,"integrity":"sha512-dYm0TevBbwiMZQkUieuWgusXfWtWQ3VvJvnV7k4sGw0UKTRQkF4icrHL44i3+IuVvily4eBStXVDrOTOGfr+GA==","signatures":[{"sig":"MEYCIQClS1hoBxVvbyVemeETnr73F9biqDOUvf2xkltaJKq1hgIhANEL3afTfObBmyR31a0AobwBY6WnndMLBGbcBgfLCTYa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/density":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/tab-scroller":"14.0.0-canary.9a02b6ef8.0","@material/tab-indicator":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.9a02b6ef8.0_1632575551038_0.2548149691894641","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/tab-bar","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f78e8efd69b02bca69e3f1e90a547a7476aab4ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.758ce31d9.0.tgz","fileCount":37,"integrity":"sha512-pNOUb3d9kiSDp4iG1LEaOvGNP6dI4S43oSa3EX8hUUiK8xjA6ZJ+oLIVgp/txYelCdelTG7MtcP3u+tDedJ/dw==","signatures":[{"sig":"MEQCIHcMeFiGuSnmWxezWnnFpO1yM4iAq8WKZ9LKOKBR/S1FAiAGIE2VGQ3Og3iuxDqhSaGUW2d72HDbdSawnn06H3S1ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/density":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/tab-scroller":"14.0.0-canary.758ce31d9.0","@material/tab-indicator":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.758ce31d9.0_1632763850337_0.8172166834025123","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/tab-bar","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9a4b21d15efaa5d44c092d0424dbb1a8cf98f6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.86b50ef74.0.tgz","fileCount":37,"integrity":"sha512-FnYtogsDkpDly0sMr0pNSvRex89Dbs2peEP32hdOSIXag+p1z1IYtpliQ308Rjvol+v31e36XoQb5eTR+jiw5g==","signatures":[{"sig":"MEYCIQCnFFEJY79CyLBviqyw16SrLB3baeYQTjB1DH81JxdlFQIhANap8RYaA288CUEacuFtC4onA3C5D7QNnexpte7e00UV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/density":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/tab-scroller":"14.0.0-canary.86b50ef74.0","@material/tab-indicator":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.86b50ef74.0_1632851069761_0.786023016485637","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/tab-bar","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48329b37e154446da6f05b662363f026f5fc0ced","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.b2fe3528b.0.tgz","fileCount":37,"integrity":"sha512-aNdQQ17gFFdjUyTvyPWNstqGz9BX+9JXE1cLxkoyGcczm7YuGMViy9rXu74D8PRQUa9vH4DyiXQ+KlbQE831GQ==","signatures":[{"sig":"MEYCIQDwQo7GoM0Dh2RWIRcNxu0x9GoHtdISIMpDIkpeDTCB/wIhAIXgaygcLWBXD6bBKdnlpqK8l8m10xzehRGGRQToUJNa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/density":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/tab-scroller":"14.0.0-canary.b2fe3528b.0","@material/tab-indicator":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.b2fe3528b.0_1632956292105_0.730257330130951","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/tab-bar","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d1c49e4511eec80482619835e64fb14f4d22ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.586e740dd.0.tgz","fileCount":37,"integrity":"sha512-UHSr7DqaXlz+I+vg0RUCLbu2/tqI9eVc2YMSONrN7rVJ4pRIQfIfdNjwU7x9EbS466Jxe+gE6zbwOgPPLTIdzg==","signatures":[{"sig":"MEQCICdsHPGm/bGOvnIPJ9nZl/zFGwWBis3AgJoY/+BEELxTAiAJgJS5uLHICXEqntnZ8DsbB3BjKxnc86nnJLWxc8Slvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/density":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/tab-scroller":"14.0.0-canary.586e740dd.0","@material/tab-indicator":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.586e740dd.0_1633019558640_0.36814756287336947","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/tab-bar","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0857c6697745eb955603d4c84f47079da301fcc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.2ac92d766.0.tgz","fileCount":37,"integrity":"sha512-GHh7qjhIZvnljBoGSWvgOVzgujCqTxSp4VA4MKujHr7x2+rv3FQVbMZDVhLohLYfsIxj4Cm0ObigYVsgAkahdg==","signatures":[{"sig":"MEUCIQDS1SsK/NGdgGe9n3akwm6/hzH6hSojmOE5KKoNsbRh3wIgLhW9BI8t4ibCEDflkXrbmb0tfMEbw/IhXL5omEpyF94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/density":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/tab-scroller":"14.0.0-canary.2ac92d766.0","@material/tab-indicator":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.2ac92d766.0_1633462202841_0.6258602730940406","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/tab-bar","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fdfb4bb9a7ad8a4ddae52ef9b012be67dfdb219","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.353ca7e9f.0.tgz","fileCount":37,"integrity":"sha512-7PjYPZDDz9ln/d0TB/1KFGOXDYodI+UiPGd31N7m5yaoG7Lgtsp/RFu0MONSbgpNIGUAPwf0pVGNVzDGtwa2Nw==","signatures":[{"sig":"MEQCIGqa85uXdAwrZrvUqnalJCFXg5lmrqmIvckEDSCkvrlhAiBT89B4syqZWh1V9TrHnan/o5dcnjhpCE5DfJbofX0aEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/density":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/tab-scroller":"14.0.0-canary.353ca7e9f.0","@material/tab-indicator":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.353ca7e9f.0_1633718895734_0.22301122483007152","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/tab-bar","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee83494f8cfc356d8fc161614fec652cf6d5ffa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.c78ff0429.0.tgz","fileCount":37,"integrity":"sha512-YOGOuPwwbA/huCmMYVC2b8cdzlGXQEyGigQyPMpQuVvdKwrbdDPHaa70fPYqLy9q25yBxoP0no5l6ZiFjSUQNw==","signatures":[{"sig":"MEUCIG5mdNDr2PhVBPFFxkojKBMqhvXBHVah2AR3ZtgqrxC6AiEA5ZdblYaewBNewBFqyQB8TJNnVWD3SoZQhrTJZpc+DZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/density":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/tab-scroller":"14.0.0-canary.c78ff0429.0","@material/tab-indicator":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.c78ff0429.0_1633973016929_0.7533662124018949","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/tab-bar","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"670c1dd54a978a91f93d7da8dafd1b2b2ffa837b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.261f2db59.0.tgz","fileCount":37,"integrity":"sha512-hr6gqL0FrRO8ofFi/EPc/A6iRIzcx+ruqzUlCjDgCdMDOOHZsg9ULskGiN7/ocUZnpPOL1AcdE05L3nAWiDZHA==","signatures":[{"sig":"MEUCIQDKbz3s2VWsPKxFAb1PqB/ABiGMck6dnevsp+dngOOPIwIgSp1/8C6zSDmI/wPKvmIFu3GzgQfKw/jirlNpwsyuX2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/density":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/tab-scroller":"14.0.0-canary.261f2db59.0","@material/tab-indicator":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.261f2db59.0_1634749268754_0.05625016363270241","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/tab-bar","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c56f09f74135da9e3e12e11eb33145ca7b00304","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.9803d2dc1.0.tgz","fileCount":37,"integrity":"sha512-ILr21Z0l1P4vxB3FaI6grbGWpSNTokUnHTXMqykCAoSbgPTdAqBxjhpDEKlJkeTpfvGESboieKMYQ2C7YWP5Bw==","signatures":[{"sig":"MEYCIQDc6PH6WWValV447menLntvsCs6lF4lRTBCTJq+Ra2HKwIhANrCnhNUjOfTklL4FsqFW4meyem56bwH5YHHx4+KTb06","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/density":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/tab-scroller":"14.0.0-canary.9803d2dc1.0","@material/tab-indicator":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.9803d2dc1.0_1634757791663_0.826937321034557","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/tab-bar","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12c6f2e0dff176f296028c2e8cefd56fc6909748","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.348665978.0.tgz","fileCount":37,"integrity":"sha512-S9mMJZFvbO8btDlErlfyBBNFpZWCVtdrUZCDU3Gu1itVxQmOAk6vjtfpW/cLwqI/65LRgYRHWP0QQdXFY5ma9A==","signatures":[{"sig":"MEUCIBCbJeRqrf76rq5iUgsT5h+YtQiAPMi5kmMZGmLFdQ3NAiEAqfP/sGS5qlHnt/cH4iKfENvLadkwd+qlX8wSQOuTlJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/density":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/tab-scroller":"14.0.0-canary.348665978.0","@material/tab-indicator":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.348665978.0_1634827929069_0.03241807366731009","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"637d6190a24dce194714e34a32a8a1444ca03f59","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.b2b979a8a.0.tgz","fileCount":37,"integrity":"sha512-Zb/3BgmF6I+J3+RS5rocjSHoEdfzpfSYnHYNHCiJmuExDoizHPvzuukANSSxvTvXBwn1XD5BIwLGKc0uhcT0kQ==","signatures":[{"sig":"MEYCIQDXE0JccLQ1tS4nLzzKBahLQZ2oETJIm/nYkzpiw1GfEAIhAMZuYmZWwnPgRX1tXba2HQdndSlz8NuLzRNJXp9BEJSJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/density":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/tab-scroller":"14.0.0-canary.b2b979a8a.0","@material/tab-indicator":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.b2b979a8a.0_1635434037953_0.8121595713853758","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e09d3cc6cb4e07846d8377f41226de8de1885c5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":37,"integrity":"sha512-rn7fDyUK8LDl/7TGjCQn7OXB1AwoOfb956XLp5n9rthWFlDgpxcJBNMiyE1BLLGVBbUTRJu/YaNFa9D2Gi0OCg==","signatures":[{"sig":"MEUCIGMi1c1jAm1/yXWfGwkxh0m0xLpGlafCWZNE1eGMCx0VAiEA7RpweXQD8jEEERas8c8O1l0TTg0Vq5WfYHb8iMnx1MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/density":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/tab-scroller":"14.0.0-canary.1af7c1c4a.0","@material/tab-indicator":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.1af7c1c4a.0_1635443662494_0.39792414037891577","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/tab-bar","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354cd81bfd5baad00095139ca7a4e2223aef88d0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.4afd353cd.0.tgz","fileCount":37,"integrity":"sha512-DYgEAFE541YYWw9Zw08Hk1on6ZaJ0WtI2UyZCTeIH4ETJepc41jnecp5mxUENUEvM6zD7LOTxCkOyZkWweeXUA==","signatures":[{"sig":"MEUCIQCGDer2iqE1gybKktfPfOpN7ah64KKamaj9uAA2n9C68gIgL/azPkKiQFV5wLGMLrnsYQTeCKprYv4dYB9KTiLva4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/density":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/tab-scroller":"14.0.0-canary.4afd353cd.0","@material/tab-indicator":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.4afd353cd.0_1635519779463_0.8579695895886312","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/tab-bar","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30aff98d4c3a30a6be237ecd2cfd89d994a8d158","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.a986df922.0.tgz","fileCount":37,"integrity":"sha512-bFQsyxzpyQOLg3UnbyDznbiDoa5F+z+Jnm6ZOKt8f4VwAJjC4C7rSZ905bb9XPqe2a4fu01TfHgSnlad4UOJmg==","signatures":[{"sig":"MEQCID02YKtd+dKThfM8oG46Cg+/X6XLwwTsvsZz9Eleh/Y1AiARL1LahiJnX9YWlNOvEuM9JVJXeOhEjEzVJQ1TiflMoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/density":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/tab-scroller":"14.0.0-canary.a986df922.0","@material/tab-indicator":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.a986df922.0_1635543390886_0.02598881015286225","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/tab-bar","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4de97a9b6eed9de0daa3b0f1d9c9aabd8e76dd25","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.c3cdff07b.0.tgz","fileCount":37,"integrity":"sha512-RvYnv1mA9SSa1H3e3tUKP8hpe7t3ktpVCDiu5wKSZjc1svZw0IdyOvhfccGKuIrJLufdYrGfHFdVo6O7kwexkQ==","signatures":[{"sig":"MEYCIQDX/AN90Dr6N6GusP/eVuNmexSt2n4VBWJsXYK+SRqbYQIhAMIrmcwZcUzeBrfBRZ5LkTNE4zNMwwKREmrXQ8oZ427X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/density":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/tab-scroller":"14.0.0-canary.c3cdff07b.0","@material/tab-indicator":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.c3cdff07b.0_1636484840605_0.4457881915239206","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/tab-bar","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ad45d16fdc934f6e5cddd2c017bf42bd19b65a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.468392606.0.tgz","fileCount":37,"integrity":"sha512-FZXYbhr4DRnfSRW3wil3/403Rs1i9oJhNQVTEHAY3mmyfhy/P9XgsRkizS2PYRUc9+2aaXm7sXlliA9QvOlCqw==","signatures":[{"sig":"MEUCIQC7vw1tftE6PFuew2sY03Jh25kV9yqUJpqCWZEq9RxEqQIgJ/DltENJAumoLRqxUAJscqSDoWtd9IwgEJotqQKLRaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/density":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/tab-scroller":"14.0.0-canary.468392606.0","@material/tab-indicator":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.468392606.0_1636659691023_0.7485002553785995","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/tab-bar","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc46e9eb2ec5c347ce11e8cd0eda016b194d74f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.828f9803b.0.tgz","fileCount":37,"integrity":"sha512-rU3f9cl2iSjdBA1+NZW9LsfxAiN/oawyOfNvIjePZKq084RXvYlE/OfVjjXFgxKSm4uhaZxdFQpGZpsRkNiRxw==","signatures":[{"sig":"MEUCIQDmj492rVzmJT8cFTuqkZigMjT65jg2mtWNN+r60k81NwIgdXBBp+ne54WA27Hk/0kW5zT7Ckg6v06k5uuoNDWsTgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/density":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/tab-scroller":"14.0.0-canary.828f9803b.0","@material/tab-indicator":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.828f9803b.0_1636660325592_0.41577126261531516","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/tab-bar","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb238c3ce69b2dbf05020fb9fee907d84b2523fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.8795cba87.0.tgz","fileCount":37,"integrity":"sha512-9S0sK5MGfIW7//spjGAAP6XxG4u4EynTPSfd6YxZ0NCWgLKlhXqIbd6aPm0Ft5kfw4qYtxoshMnplaLZzod3Cg==","signatures":[{"sig":"MEUCIQD1M5eajCAUHuBUjS6RUwN/Hk+ug9rss416/wXfu0hYkQIgaZbc6cB6hzkAu0vD0Xc15YFrmtBMxs1YpYnte+mtNyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/density":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/tab-scroller":"14.0.0-canary.8795cba87.0","@material/tab-indicator":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.8795cba87.0_1636660686486_0.7090988034045573","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/tab-bar","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd6b60e4489e49c197c59277034b542903048bdc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.cd7f8cace.0.tgz","fileCount":37,"integrity":"sha512-VQiXeUQ5g5rPphNmXJcocbxVbkmSWYszQAbk+MqSgnn4z2ZIZYkqcCtPOQKWIaqR+yUM2NJ2sRwJL1SPUQMrgQ==","signatures":[{"sig":"MEQCIGpKTes25oOwEw0e7y7S0lUZimNrTt7HrpU14ToE3jUNAiBGqtRdZ9IXGzqKOK0mKG8MHHREHg5ZOMSAGuXYRbPxjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/density":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/tab-scroller":"14.0.0-canary.cd7f8cace.0","@material/tab-indicator":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.cd7f8cace.0_1636660788470_0.8300289258228086","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/tab-bar","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"442478c92e142d75b6c404e0b1c854cc1198170b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.207230eb8.0.tgz","fileCount":37,"integrity":"sha512-MZ51ult1QA0/nTomqwHDnaQS25pFDz648CJ23WlkM3Z8bNGpUX1OQi1HZdrriwImUuWRvzTJSbOzdiBoX3MOuA==","signatures":[{"sig":"MEYCIQCBzk/xZbl9yJXd2KaACwDLS2SEOVmwht34LOYsqlSe+QIhAJ6wcDn6TDdInLcZg2oVkOBlw3F5tR93+5U4ORuWktLF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/density":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/tab-scroller":"14.0.0-canary.207230eb8.0","@material/tab-indicator":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.207230eb8.0_1636669564462_0.25064035992607137","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/tab-bar","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec6b33f082050ff4f6065b50d96b7b299dbed483","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.991fb99f7.0.tgz","fileCount":37,"integrity":"sha512-sXaxV0JLgr7F2n5L9gn8VPzaXpAk4HDxMWqUvrJOVyCVU1TL6eChJhQAmkScqXeTMzCgnXdt1RTHeQubg34H/A==","signatures":[{"sig":"MEUCIQDfBmwlbGJuzwcSCHzPEh49quq+aWeCZY64aQdYjUacWQIgSGJxv9dB5rZua60GiuZ/T7I1RW+Ss1zcDAdqHxUGiys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/density":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/tab-scroller":"14.0.0-canary.991fb99f7.0","@material/tab-indicator":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.991fb99f7.0_1636670265386_0.05920384724459882","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/tab-bar","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6351256eb9d23e7a09e209f2a911fc379f82bd92","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.15db4f164.0.tgz","fileCount":37,"integrity":"sha512-9EWHlPoBCJ3prnHijysSF38aAclyM5WdWuUbSB75/dckBnaa7utZhiz0iJuOgGfN0LAQdplCzvfuryQ4wxNYyw==","signatures":[{"sig":"MEUCIDXrY9ByjrxxcgTIppufSIZIvltWqWRlVPmgTaAbMHcwAiEAiprMwzqUxKv0/Z5gfWSwsoUtdgjG2deJtKRPrtP5tiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/density":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/tab-scroller":"14.0.0-canary.15db4f164.0","@material/tab-indicator":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.15db4f164.0_1636738270451_0.46193694480334146","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/tab-bar","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"977248fe310f49d517ef9a7303eb8dce5354b30c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":37,"integrity":"sha512-2/6lz5NTQJh2WNYKrfny4g3uRntowniXXIbc0dsceOa1K7xP/QvUZ0tSfmC7OgoNR2QUif19cInqBltGKXs0yg==","signatures":[{"sig":"MEQCIBeP7/CnVeWVmCh1KTDGfBBfDIlVhGZqv6T1HdoIpBANAiB6JtSVR7ijIHPRB48nnpLAhU5u0P4rBKmmeVx6DXIXww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/density":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/tab-scroller":"14.0.0-canary.8fcad5a3c.0","@material/tab-indicator":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.8fcad5a3c.0_1636744520867_0.3500446937945374","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/tab-bar","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181543a2c48faa7d6f503cc02e04583e7f6c263b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.f81fb1d23.0.tgz","fileCount":37,"integrity":"sha512-s+dS/8nlYPEZtolo3VoteQTL3MA+TyHSiHtX8UGPYGVHRqjDl3taRtkcT6USb+gBEqO+nrZ4P8P3qxiVbVq+Hw==","signatures":[{"sig":"MEQCIE1to5Re+lX88+rLwnWoVTvL0Z8N/B/MwYI3WNVnssa1AiBQ+nXz3umWJdRNTUawYu5KiJvjN0VAiXeIscuw19ZUqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/density":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/tab-scroller":"14.0.0-canary.f81fb1d23.0","@material/tab-indicator":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.f81fb1d23.0_1636756898497_0.9975855050823899","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90545e8857887a5eb1e61847c4bfbc9b546e9c2b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.783f6fd5a.0.tgz","fileCount":37,"integrity":"sha512-SkFhctzZyBZsyCFoE1l13oAXethR9kjydVVA5c59JFUN8VSyfVALsIZcohcse6WUYx2WFgM/O5317pqhQ0frIw==","signatures":[{"sig":"MEQCIEUcr/yKyzxidJIzxt2sC+7hwlfN35w8Jxupu2jHeOOCAiBHOE/nDLX7Mocjl2JxVjtPFfedDOzJV6A82Ht3sMTeWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bwCRA9TVsSAnZWagAAtqsQAJYTUOYRBpKNdCpmjpyo\nc6qDE+m0Q17C5JA0Y+w1/96U721EfdeM4vL0HXb8prCMtxNf9Kg8xgATHMT7\nt6ZXz8q1Sxuw3ZnSzzroTH3MPdTVnUm9W62+DFioS6hxPHzCSFNY+hEDwcwQ\ns6wSxc/lRF2R+WHrDh2Etzme+mdSXtx+WEHwPPyUW6EyEXaPiFXlIRbjvafB\noMTNJ5KK5ELQHL/yRZJgvpkDD/hxWTFDV381GyyiMe4Za4/odzMufl0qJtWj\nBkLbR2kDfRtFRLwsA1oMzyBxn0FYKpDWsoszUe+GGMBWb/gntUsoL9ENVkQv\n9hmnKxkY4bud2zHr5XvUxckal/QXFDyhRgkIWNQB3B9heq97ksN+lCEbHzmP\n8xtaGLr5AE8KS8OzAy6+cTmn7LD6fP+GQdLHMhPRZYYackrRasfHyEfvm4kG\nJ+1HO6rG8EqhN1W+3avOlVMfF0irMjJrw35DalXXjqNFXnQ25L0rTAZTfiDs\nsSsCYmtk5PvZuKRCMNQ2/FoClf/RIey9xJ/UkJtcEQ2gvXXOcXnYkWULMKTS\niiQ8rg5NqQ0Wk/WB8cdvImqm15NXULVqaue49E8r767+op+T0nhwSaKHJBsP\n0v77G9YnCAvjCGT5GCbfXvDknoAguPo1BGX5rVM1+a7xrJob2bS71LLq3emC\n8bqa\r\n=s2pW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/density":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/tab-scroller":"14.0.0-canary.783f6fd5a.0","@material/tab-indicator":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.783f6fd5a.0_1637041904262_0.2213948440315634","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/tab-bar","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de692b6623bfc91ce300dbbde09f1fe5e5b17afc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.d57ec74c7.0.tgz","fileCount":37,"integrity":"sha512-jap82qyI52nkhLdxnn6GNDGvfQeKqqzGiWEiVRsCTwfF/d4MUZA7mujYNw9xkA/Xq88H3FJkX78AD/xRUSpwsA==","signatures":[{"sig":"MEQCIBsTdg5N90/sY77fuInTlNW4Vui4F9wy2+70+G1srnzBAiBKI8MNe+Y7MYJcrOd1aReX3AzQgsyTnvWgoEOsLC+LzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nvCRA9TVsSAnZWagAA0wwP/AmZIXiHA5NZOI6RD10U\n6eI51gSTjGmDwJJzewx891oHrzm2WNTlbJeiHzamRrxyOXMh97aVH+H+6xpV\n5Ayi1DG4VVPIq0mHDkgMIykvVccJDCWeN2o7drb2I2tm1gewBq2DPC/03fma\nRJBngOAU5R8TVVbYiMQtZGqcKwpZ8/voi7sUmPs6fI0R+KP7ruBNq9GSv69m\nkXDCtU8NG/7v4xavYhSef8UwTv1Y13kdNtLnGmLiMTPbpNEeBIuuDlQEPtah\n28+Zbcp2QEnL7Mxt4BXL2ErQEDGc5cljMaRhkd3EDjMnfqJLaFXWPFEREk4f\nlQ4Ll5gshlnGiS32g5lQTu62JIKkDqfs3rFJ7CZofQMTLt0/dNiOQUMU04K8\nj4q63iYouYMa6PFbkxozX0aUgahyzNRVHdm+5YyWoB0VYg183DL1VwuvKKNy\naswZaoqZc9JqVUTVz8QDz5Dge+/eXveon4PhuX0yLddBIj/7hHJFOrFWH7JW\nl2D4MQ6jKwcxJLtzzwo7YGendXdHxxkTeRkLH/P+wdnmkjAPBNiyxPvl0UBw\n+lZE8dRszugLO3Xytsbjidw/MTaxN7jS79wgEjeEL/bM4xf+EMBZpY85f2hf\n9O6rMhbOJtPz4CDgO3I7k7HDV8rVmnV2gEfrMjPvcobF4aBnaFJw8VcQtRsA\nadjS\r\n=Ulo5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/density":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/tab-scroller":"14.0.0-canary.d57ec74c7.0","@material/tab-indicator":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.d57ec74c7.0_1637079535401_0.24638761596583048","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/tab-bar","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a4b461869422cf01e218c77a219be0df9ec8db2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.554c71829.0.tgz","fileCount":37,"integrity":"sha512-rvfvMRonIfQmmiZa8MWdB7vlOPTsrMCJQkpnY+nL4Cn8xhfU5J0aJcz80KQea682IWhSVnfzJ+VZMZO671lMMg==","signatures":[{"sig":"MEYCIQC7qN00LTFdMpDyi+jkC5q9cvgZOMycL9RwzSsQc929zAIhAPgggqk47Bt9C5qc2vV+Pn95vOl8A5KP8TSwxpYGyt6H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9qECRA9TVsSAnZWagAAxukP/3EqeMFwywU8f8BPbngl\nw0IrHLmoRzEGgniSRJ1WxAuF16S70AqSaiRzYqlYHUtKesFiPTIs1IwHG38i\nRMgYY0naXJ7AoYF5kmmPTIoHq4WBVrUcac/6moLKscAfhnA04qlSo+YWhdEN\nn+iTOvRdpbeixDdEFbIOcOtyPKG/1XbjDTnWyXTbp8tn4t/9lfzK5EOUNvSC\nTQ66aU1uiBEjs45HTlgn7k//jMguzWRIJr/f/s6g8eAzJ65id20wOItIbbRU\n9wTqtF1ds6CmhcDiFlrGBpmhaE514orRd9SIBo6UKQw0iqjcSkCI4sANlHY5\nC6Ob7YOKBEWGSdaf7xnNQFFoo8FYPSlx6sqcJ0Gel1A8UNnB0G+he5wnBpN6\nVPHUqQMQa+hMYMxiZC0ABcuzSDpYSwMbVE5CdSqLWgTBvHIw2OqHcPfxsFhW\nfoDGO+9UfSthC2TaUXpPgc8/4gIGnILbGR5rX7UBbGeo/TqN3ccz2txXi9GG\n7Jha6taMcSlriKMhiZYYmOx+Glk4/4+0qMMvbTt6Z2frT/e0zl9nhYXzcdzR\no9anWYVeRvUll/WN2DBknu7AbLdCzdlw6swvXGoGNtjXLu+ghyEylKV7xDJK\nnXiA8LFk6g+gXF0QGj+OC/uKZM3xla1gJSiYb036OMRchlX8rTWod7y6ASY3\ntQj7\r\n=I+Cx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/density":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/tab-scroller":"14.0.0-canary.554c71829.0","@material/tab-indicator":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.554c71829.0_1637079684492_0.49014819707493906","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"631ecf4bf616463f4cd2815024a305f863430e41","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3ef470efe.0.tgz","fileCount":37,"integrity":"sha512-PJHXno6Yql20LvIpRIAAYrnD0Le5DIl2T5rD7wwFGxu7QL3YeFLmSTXcQ7z1rdPeeGRwdLYADPLrYpPDsk5muQ==","signatures":[{"sig":"MEYCIQCI1lLnjRScqdSpjYoD7eQZAQo82fI/uQRPdjoA8ahAhAIhAK8lWvOstqHCoJ4A0Ude+ozrrVsp2T312mha4ovTZYiL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9ueCRA9TVsSAnZWagAA7BAP/inJR7JitqGIW/F9qdBG\nkTft17AnCQqKoSbCIuOL/kWHleKpq6Kq/xrekiDgwAVJPMwJzKuNDo7jyT9l\ntAY1AFZwJfaQIKODn1erD7tPb3LTaEBWQK7tuhBcup6oQJSnY3ysDM/UkANH\nDg6y/x3KDvhbmSQYKT0AXkvTmQNq6iGhjEolBNT81YlvCMA7R3hjWecGffQ5\n/P7J0ArLDngploiLKWmrXcoIK0b2GrHqZpgR46aN4S55E90y/HmzW80qb3tF\nT6ywUx+OoOveqhBlX53H+QAK14uiN5NQixKS7tSWt0aBhVD88WHYgK5PIKkY\n8cqQnaXUPvbV/yFiIW9mSKE9+8A27y0PFcitvIkI5rfvQ66FUyrSe+QOmjFR\nfiFaB23hZy3V5bQ0r8unuSFq9+wQXZqHoig6ROhN+DGu54BOEINFeQhLBSsr\nlw4XFhBOqz7K4DKtrUZtd8gn005TBYuoP7nvs+2rdOnTkvydAMqTQ9uoUHrY\n/ZZzGx7Uol2NyXlEQey8K7GoZdxrpLCsiUUOYYXcuu8SWbphgxt+o7DPQQ1P\n8OAPQu6tGwwkRl2Vpwn5la8vPtJLPc4o13o92SPo+R5EX1uF99tg42L1PAd8\nH8a2CJ2bXOqwIZvca2n066ANvP0shYBv01AXxXvoCTYoWsjxwFyyk6Tr1JfK\nw9TV\r\n=0r1k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/density":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/tab-scroller":"14.0.0-canary.3ef470efe.0","@material/tab-indicator":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3ef470efe.0_1637079966533_0.5388621998921623","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/tab-bar","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf02b04c29fba138af1529b9972b0435b4f07b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.61a28b2b5.0.tgz","fileCount":37,"integrity":"sha512-QduYIRb/sXrHwwDv9zafJFxAqziKTiaKth2YMDAc8StUnUP8PcmNazNq5z3n4pH5bzbVafcW+u7my/CUh0ZRJA==","signatures":[{"sig":"MEQCIBwQqLz7cNdnTYhce4tGWLL2M2Y8HTg6DsqxODX54lBDAiBWJsi2tqVcLm8HwlIZQh+wDR7gn7uYr+sEsrtfWIpfaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVF6CRA9TVsSAnZWagAAfqkP/1/XwQpks71snv1hJG7S\nUgMl8YLPtTshE6iwjaeXAjNQIUqLp1fVcHVIkwK1+Ng08PRWGI5iqjqqVxDm\nDY+TAGWS9UljsemWXKRoH1Hw4kzZBC65xocRYx/cv7tbGBJDD60mnqGRmAok\nn6IQ5F/he4PJIP+5Y5j8PcX3ocfXPlJ4bCAQZH6qdQGzGNbnrQAxGRSTLSW0\nwKfBndiE68Uj0LFNYuERUA5F7whshv2e+LIhzzkpiFRa7ZoVv/BQkIsO5j4g\nliSVFyyPi4UitsvbLRzCrdaCHLB3CETFkquCJxKV08lS61D0J+t19C5lbnbn\nmCvkBeRiB1wyshWIOkz0HeL5wBRptN4pHClUvMdQp7eB9RDGroNJHPSbyVSw\nKoF30lyFo/dwOAc2eZkakyMQTN/tWCPw8Y4Omw9radf77THR3qlVJPmha9iV\nmtCU1kOZYCyWy6KjKr4FAtV/tdQxPAo8dteIVzAmaZ68L7MYCtYRT+gmak2U\n7KzTlAbC6LlgfI/7Jsog0NF3necvozl5DLkxnEE5D/Caw7tR1cB1pC0Tfu5J\nW7qHDmzxIZeyLNsh/jJb+VKoiSwAojiPLNxInkhk8K3rIWpOQuR6kqfcTulJ\nc3xA8j1ZR1sGnNLSSQf904IKKQVLQXj/OAWf7LpDoJxFaAJj1LgbqtR5Qr2h\nJ593\r\n=3pXL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/density":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/tab-scroller":"14.0.0-canary.61a28b2b5.0","@material/tab-indicator":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.61a28b2b5.0_1637175674242_0.2765554520334659","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/tab-bar","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.fae6c652d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a532e84963fa72ef6abc6c6813d58e250a0dac","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.fae6c652d.0.tgz","fileCount":37,"integrity":"sha512-9h3MHzQxCysdxcGbrNsJTr/Yh0G43Qxn9cLLWPcALdfKEwYVc4PIdaJIwJqMvQXu70Do8Vml2yS/i9sQlqIPqg==","signatures":[{"sig":"MEQCIB3Q8ASD/mobQKY7hpGyDzgEn7vfdG+wT3V4/uA3aec0AiBODR0fzScIPmwna7s7ubUPHD7XNDuysQTlnvi7ydkpAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln7HCRA9TVsSAnZWagAAAm8P/3hrl8EEqZSzLZMV6vB1\nz20gjGsZ1W7sB0jq0Wjs6DbJSQdtO+l5nOiAPiQXclGejhP1jflAU+lLWpBA\nan00RmnZKDd3E6k7F44ymYHhSCcVZ4TFHjV54yzkYGpJZwhbvF/nM2ZuBD8R\n+pvMOC2YAcKPEcnaTCbJQUbVi3C/jFw6mk1yNRbdj4Db/iH4kN0DsoPXbl8J\nkhAFCmK6hKTRvr9tC1tC5m8rx1wkgfnpd5giz0OpoK33jlm0nkpJzL3zaxZR\nJPCsaQqFB5WqSvwsJ1DAtU3NiTf7RJ5mnUOcoPINoIVQHXPPbwmVRfmj6xr+\nQ4koCBDymrtzNG5gz3dlqhQoj0iwiHqrQHPL99DmoChSD/PjlevMuqMbXuuK\nV4fUj/7CDzeffFJ+07Xu1b+dqxP0QDITFS4+AbWOuYDHXAmYw2qen4ViLg0a\nf4MTElhAFriMDcsrKCUx9BBKQydUXEl6Iv2ohLzjQfSYLOgFP3Qj3KbibtEa\nrxCsZeAfxJtIA6KRW/jxwEK6MwL/tlsUeuWFguebGbe5HNKw/Lrof6XgPMZw\nEATBX/t3JviKFpcUCDlepAPeodJXVninXlA3t7tCgNpWypQQOu2YKMYBfZ0r\nSNihXiiuhE8GYOJdIm4FgOMnu9R2R2wIg5iT7YipzS3MgHSzetSviTF7BFRq\nrZ/T\r\n=T5Si\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/density":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/tab-scroller":"14.0.0-canary.fae6c652d.0","@material/tab-indicator":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.fae6c652d.0_1637252807193_0.053507095246569714","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/tab-bar","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.978a3b5bb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd0b98c243bcc3e664cc2b15ccb3f917f50bdc2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.978a3b5bb.0.tgz","fileCount":37,"integrity":"sha512-yXDPdhmFb1gfTXlsNMryFSbAiz0/Ci0XTNpU3ljHnQHZrC8OEvLBFhOU1X4WkBo4P402Wsn4U1Sjb1CodRMMAw==","signatures":[{"sig":"MEYCIQCtEFICyovOntNucdtWNDziyYY6lu2cZn6ccqrEIzTqeAIhAKKhbeHNEhq057YbQuuojiugJc/32/SadRE/iAoaU60P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/3ZCRA9TVsSAnZWagAAj9YQAJFfAUDLQIg+wQCzQj8Q\n5w2FrPRHnLLTauMlvIFd6U68lDyADeUD0YatPRJlIatnkADm7EwHWflIKzWJ\n3koZfTUE3ZJ+rZVFEuRbbF7iD6Q4gM35Y9NhvKVQYvJyzSRYOKxWNZ2p9FAC\noYMN0u55JAqoYZ6leo1OYlw2QfJ5e0w4ODD7wxqE851Ig+t5C68axVKV1wei\npB307vm9U/2nHHlUkU/IHFj4Owa5JoLqWbV9Ij//P8LG5Z820I3S2mZywpje\nsrDxoKB8HO4sgQe3eLl8wlBbETSS9niW5nMa1H325tyKqSrFpykjroIck9+o\nTMtBPj/NKgKmzg4djl9x9oOnP4Q7GFa76qM/hMC9YHXesTlrWpMTpndm8q5C\njhTAHzyCl5ptqMsxhYQzYneXGB04OIa4GMlCd3GEiPJkbEbFF+Gmb7mbixUh\nUwsUb9hgEqL9IWP6yBhnCbgmbudWap/hFdpOtjwqdx53qPQUwUdTb2Ex0Bht\nKmC5uYMo2SvogfyVw5CA1VYG7HP1FubFmvW+dUrNKrb3VQbxGk2l/9kAJJjy\nPeVziUfB42zs7nk2NIavGCfZoqf7vfIU8LNfYOD616eplwtDk8GGJAd8sZrq\nFm2JR8rzUouzocsMWi/CtI9jZvTMadx/xevzB+nbAwxr4oM8BPmXu+Rs5f/m\nooHP\r\n=zt2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/density":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/tab-scroller":"14.0.0-canary.978a3b5bb.0","@material/tab-indicator":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.978a3b5bb.0_1637350873079_0.2147592328148873","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e6f43cf44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c002f6c15fb73b859b51ed48a7a5f0863c002b9c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e6f43cf44.0.tgz","fileCount":37,"integrity":"sha512-qE6vH4c/KIKmKl5dxLJHrNTFI4W8fWYvSLzpkDKnGydQGfXYcpKv/AqU9TEbamhamoVDTJ2dmOT8S/RxMOQOCg==","signatures":[{"sig":"MEUCICl9qhp3C/rzvWVVz6qzHQLl0xXa/4iLJxOOZ50Hi4pcAiEAy90x2iNAZ8sDOcmjLEzEtF6anp9Aw+NKyT5GocpLAWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9U7CRA9TVsSAnZWagAAcYYP/igPDohCuSqmwDZb7SOB\n1wn0WavBkKi8TaQE9rjnmmBMHtyQtdd+jLEeNLKkfRRKdXGZEv9jdVUAMR7f\nW0qp1y8ZD0IbH2HbOOAp/n09TeBDiFe/npmAlzF2SGO8M4+ur5RwrRv9WHvq\nEAllL6mQr695c0enPckKxmC+XE+jlBl1N6iM0KN3IOuO5jSOYdZR8EV3Q6mm\nau6pY0IcdPn3Im/cyNKscWSa5THBCvE16ju43yg5VV0Dnr0VkV8zYd9CM49c\nNP0+ZW8NlKGGhGMOadfwY5Wrr9aPZqQ+RpNFN2XBlbWVhSbs45+TSEqlcz1+\nC6h01vkH3Sf8veUS0SaXLrrwEpEmMUnl0ggLJpN4zOLeryhbt9+i+oyFDj2O\ncKaqhXSFDPccHEmZaQkEXZDcpu3u4yP7IZsqgvpEWRTu+lljaVjxIc/spoJE\nxto99BNYpM+c8DRpeHmXubnFLVXZ51wheATDOblaOvJSQBeZAfrrjMjEyDsX\nbzaPK7s1UJhpDeuNnKTdfGS+J8Dr+43lRA60stsPZzga1xJYIxqE39JP3xhZ\n4pfwSpEgz+UR9YDY1CvL+9vyZt5liG/QJq4JZyEEj6/LndVPhdvJ5rjAYNJv\ndgpZHCwZYLqMjahWdPND/3wf4+pjyDe8IuBvMB/Rs8KzjWsx+rSoOIhVAcR9\nVi35\r\n=BLYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/density":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/tab-scroller":"14.0.0-canary.e6f43cf44.0","@material/tab-indicator":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e6f43cf44.0_1637602619013_0.5803468652812294","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/tab-bar","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.39cf14bc3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70f51ace4b45f4d45c518cec7b9303e021894794","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.39cf14bc3.0.tgz","fileCount":37,"integrity":"sha512-QtPYzDIFgS1+9Ag0FZoiKCGJp0T2veBHiAf8mb294kqf43IUKjAt+2q+hHZ8z4PUaHRFN1RHR3PRffWpNXHYNw==","signatures":[{"sig":"MEUCIQCxai5bLT3yBa5l0WrU5prF5aSoFJDcjpItnVlo7RAhKwIgD6Zxc+Etc1SvnyfwiEgLOuvFF3jjKLF5tMGMa52VYBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJxCRA9TVsSAnZWagAAZA4QAJJJt3vMpYqBRokq6o4L\nVJf+oIn1/r3nUW6/s0Lj/0mOl3UGNqLC50ZBN3UIgLsRjYhxbtAvyDYUDW2y\nm/CBzSBJdZiSSq51wox2HiJF0Wo5vN5IyLLM6HKEdz1cSxSMJ7dZWJbxvKN+\n64pAyjleLVT3H03RfZ8cv6hX88zwWTNCEmAolXytJBsxb0SjIWUUV9ewNOUV\nZmMzxXz34NwSgluzw8XCTIqazbrtlyHy4HYYrzzNZU9cXQLVf4SBtOX9Qjus\nRxsn9YI7sOKSvOZLH8uGm+PytxFbyQ7xN0rhX/ZiZm/VL4G6QVxD/twCwo75\nJerlQLU3yT4zaeXWtiXS6+530zebvIzl6bT+bPcVTeYPCkFlvkEZw3CUKD9m\n4sHMfqFpvlhMidsKlBWA0t3q6n0fgthLg/THtPfuszpgZTXJ547jZkDsLqPy\n6ICMPwywFfKxbpSAhCTKhBZAaoZnCZ+svRaBDe4+kpkchg+cFB8I+nrTfwT5\nUgnSMfTbeG6afBr4j0XQHXMXCPEC24Qp5l+UvDdLJXQzHSCfVrJ0Gszq3Pc9\nx/BNuHRLuNO2+qbt0SI6iBf0W+sx+MexcMvSZN47eXLlUH+/+G/CtoJ0mkyf\nl+oNjtNOaUKELhwCT4JUy2mn2zF9/xk/NkUptLEvzaTs16khbiLLtjxmBvmC\nGXRZ\r\n=L0jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/density":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/tab-scroller":"14.0.0-canary.39cf14bc3.0","@material/tab-indicator":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.39cf14bc3.0_1637622385745_0.8669488556265659","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/tab-bar","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.93134d453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"019bff9195c76ba48cc6df1309c8c0dd9a578477","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.93134d453.0.tgz","fileCount":37,"integrity":"sha512-bNvvtj2/kLx567nKk0Ed1vdamEhw7i7BfcpJvXj3iIx0tKi+OdyOWLP1EeKykqdhkDXpFkM1cQZTWazPlu/0Ig==","signatures":[{"sig":"MEYCIQD3JVW9njAQwntoqoEdqXsCWfNX/SBRc/fiblJoJrmQvwIhAIm4JWG7Xb/OMK492dttRqOgP1KHWGgcXnyRMIsaOzN4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQudCRA9TVsSAnZWagAAgzgP/3H9eKBSlZ6J2S+0NNXZ\nGas3HnjnOVQbUfaEEwlW5OWfkLtk645Mxn232gQJ5H+lXkZTBEiUGQPk6q2f\nKAtWCDtaog+jgwkaEVqXY0TN9dEHHuqgfihvJ6zlrhLrSACLtdR9bxRqUU4k\nJjrubh/WR2eRD4iX/jrvK8Lilfxm/CWiBAVavKOiX0NVH7XWBP1XRb3H9srd\npqLXn/neM/TQpHRWjkZ67Zrbg+b3sNoLqmg9IfXfYRG5brnXIkEWgU9UxWhZ\n8iEgh82Uhxq3KBTWGfak2cKD/xPN8aav0Zk+GF8v75l5re7jU6ZayeGlaHTs\nzIFSxfvt2U3zFSGyoUYOtaKm+0vaky0T/IvWkIaI/Mxb+xYOJIQdDf1kpWUB\nwhKA5cw/kif9BJSutmQNdkfH0cnY3SJFxpKPU7HVBiw+8kYiLiB9zmADP+oB\nOVjghENhdDd/W4SnE+ObatYSIUFlCoqXIvC6AXIxqgwTbiNWrPVr5Iz24rC6\nsCRNTa+q8P1AeSUS+A+TfPLUzWFOlstC3VDY+LoRurUShB04oibeSbFeDzOK\nRgdWpSQZI1IsQa1PudCS/aP72PTFyHtitpyD/Dh+VZw9HBpaipnV1OwOLnjl\n+gOphcYQ48bqD6H44nenfOCHhLKFemHtdn8jwyn59lbtMmB+f3e85P6oXFLT\nq7Ow\r\n=tjnk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/density":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/tab-scroller":"14.0.0-canary.93134d453.0","@material/tab-indicator":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.93134d453.0_1637682077342_0.8671291941264223","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/tab-bar","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.bbd11268f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b3c54416823bb6e7d284cfc269b7b4873454879","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.bbd11268f.0.tgz","fileCount":37,"integrity":"sha512-6OStOMyqmvB/OQhSrDCXAB9L3L+Ez63OW9kNeG5Sk2Pe+x3UQaw87acsBL6P1Z+pzYCMEU7tgsHiJVedXp2uUA==","signatures":[{"sig":"MEMCIAcsVJZNoLOrUanXfevsfnCNaImkVM3o+8AhSK0C/22+Ah9wB1qx+Wa8Wd5rM0MsVDDn+h833IYorqZAclnTM6X/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWxfCRA9TVsSAnZWagAAPUgP/2etXkSDMu3fpxXCGUSd\ntYt/Fqrv7vhW0czhhcgDT/HvIRlMyfDg/zCykZKs6lsWXpn+vcNfyQyWvqBp\n7GgO3YgXdECZWba6BcZT7uiYjE3zT6DicEQoEBHP7q2bJHN7QzqqEwsiIZCs\nQKfqZYPCZ9qmNaKvunGCmOLu+2ngW849g9ja3J8/0Iq1g9GreKvqoqSHqvAM\nMPlwTUW3oVtbs7bIdVixsGhm/DlIj6nCkdnD2/mK/xF2hfiYhvE26bzQQ4Em\n3AOB+2pQmdvvRiBrI2s0lDLCFYYBSGquMhkNp6Dz40hDhftuLKzlQX+jUhcE\nI4PKZLiMwK8LRJUWLdMLfLuuoJZYy7jlad/reYWfq9qQBihGnWyq5UXgzleo\n1Mw8vQiY1H5+aDPSTu74LBxrWGA1OLn3ycV6CJHxVRXm+SKUlBdgtJRz4Yg9\nCsqVjgjytLyZmVIcF4g+ieO4918FmF56rOEkOJvLPGamVnIZRotDLSB4E3Uy\nTmxs1oZFCNKM8RCHli2EOAH0ZuxC52x0LF3A3YBRx91zrfcOpVGr4SP1pprq\nl+kTP2HlLX858vcx89If3A+Z3rYS2xsfXAkmF8HJlXbhwCf/+H17jqbE4SK6\njqVf3dPjpFZYP8+6yDZDmFBGtbaiqNvlV36uYexS0WKCjU3+nAcmtvprk7Ue\n2Zta\r\n=7YQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/density":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/tab-scroller":"14.0.0-canary.bbd11268f.0","@material/tab-indicator":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.bbd11268f.0_1637706847380_0.05318150889178064","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3db9c4d3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65da0b90637fc20ceeba7586e5a921c36a12c536","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":37,"integrity":"sha512-66bRlUk4SMWR+1ml7BL3fDoqEW3CZZWyBbdfhGQAkG9qFztrebkhcvaEGpRPrTiFo773iMALYvLCr5/AcmO0aQ==","signatures":[{"sig":"MEYCIQC5Vfy7tTE6UE6U8plHLB5fJJPr2PHaMzFO4G3uKt0TtQIhAOEMZY6lzTtV3Kj3xUweWzHCP/4Y5ELTc5w3mwNqyCzW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlykCRA9TVsSAnZWagAAR74P+gPJzAWw0s5uDcrTWO+k\nf6aBmC9OvQrbU2k67P9piY6qxfJuJGzXqz6GhR+NwxzHLFUVSfU5evZCXEMF\norSXNZAmo0/jC6oWJn2yU7ELr/RhnRm4A+hKt3QJJxZaKABAKkE+Q0eHs5Qr\ngI9nw/DMDq8HsI6r7bwuxYmcFz27RYazJG+61XqslcDKCM839RWfQ3ExJ3Oa\nHplR0W6QBfFRDZ+cP6YTyqu/8iMgVNWmIcYOVWfqvEE83RsS3H1h/BqOsC5g\nWTnu2Ty6A7Sx4bobZ6zWJ1hiwzqUhYht5gZJNeJS4qIJ6kNduuspJxAvyTvz\n8Pc4StiNDg/APzPt8co2n/dAtK+ueqMR4S/aaCoJxfp7jbRoMPomaaBM4TQo\ni8eP6d9R0etOBoiPGBR9gqNwvvIiPgtR/rJHxmJKqtkgrx3s8KsY8Z7IwEkS\nohK+4gAxtbA6OplPK9DjSCcLfTjDBAzK2vOR1T8dw2/OJ9olCMcabpaIayNC\nRMkVmPfJxCaL6qIjYxsBJpFwFpj9cHaeD1wg7mJmvsuVAQW2rCkNg5ZQt3WG\nZikffmlZKaJiKM0gUvUnqFvbe8OUp4C0Gv8q8bs2G54FzdSaIvxAOv/pCIZL\nxaSWkY9jcLRtrtyvyjzyDrk6cgMdCoPzbBTo9ejdJvw1H7DS9lZlUjOcS1HL\njgeN\r\n=5DZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/density":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/tab-scroller":"14.0.0-canary.3db9c4d3d.0","@material/tab-indicator":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3db9c4d3d.0_1637768355911_0.27369554706864485","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/tab-bar","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.78305b6d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914ab3964c8dfe0b1b29242a7f99b778681ee28c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.78305b6d5.0.tgz","fileCount":37,"integrity":"sha512-ipCWGLKIoDyc4uxDc5hLnu7eIOuKXSHSE/a9IRG4OtWnW0C8idqVKpQbFYseYQRiHa6UIlaraikhFOJUR+VTzw==","signatures":[{"sig":"MEMCHwZA3Bz5o/HbGFyClWdF2Z3E9CIreNRz0JpFTdtf9MMCIBBKRbO856Ua7Rl44vFweHBYZFQ0CU1Uf8GAsqH9EF2J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpf+CRA9TVsSAnZWagAA8QgP+weuyPgQYNv5iNjDVy5V\ntyM41mau6p9KpxX1bJzadTp7LxN0AcUosKYlqixjeG8ZZr3FIKb6XWBLw20B\nzR0aDd6mnDo0+wsU+DgL00zz9VbrZ/LC9t4X6ipUBK7PKzyWIEY1QMNcZCol\n+p9uWPZAFB4p7qzr5ChCieOuq3H7mKwFTOZaQX6Q/0PjKHx1gjPxgXgngF+u\nDBa8hTXVeOrqPP54PQQDYHYEdUUMgvGse2NwEqrZTyRsDKp9sOndBr/zor89\n4JUpAQGwVywAXxcNRVfe2EafRYi8+Fu4QdUu0bR2gyn1YlwvF8Lq8TDqRKDT\neXTde7BeIEx9gh/c2Jcz+pgTYSmJ4SWTlgh1LWE14Y3xjPSqYf2eeSxIVGix\nWiMJyE4uZKglYmTUCveAM8urBgoNGZSOF2kxqZ7+BXRMBhJlxWIZX4N9X1r8\n9eywl9zFjQKaEpmgOVm/V4RJGco5HQb3+iptri+BghVP2XK2w5XNhpLGPxb9\nCN6XelkxQTtVgueoOyIG+NH5OtNX4nI9D4nNbVPxNc0QYoI1zgtuRR0MgHZW\ntbahHjvhcmF+WUv6ER2dAHHyYbFmmXyG66ZXukZjPEWU/fud8BsFqka+cNfx\n9kLIanlHBl4xxDzY1z6/qcfG1DWiBh0x6MmdFqUgJyl9X1l+yvq+DFycMKJR\nJe/d\r\n=VZf9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/density":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/tab-scroller":"14.0.0-canary.78305b6d5.0","@material/tab-indicator":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.78305b6d5.0_1637783550280_0.6946346112838955","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/tab-bar","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.43d08ba77.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9555b25eedd3de4a9a658e738b5c68ec55b025fe","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.43d08ba77.0.tgz","fileCount":37,"integrity":"sha512-ttaKtUa5Z6/jHmXf7llqhM/yfHs55wcGtQ5sqUfCeislLrqIXUklyPz36WUUm5MVehdQJ/AT3JyYtqa+ORhkBQ==","signatures":[{"sig":"MEQCIAGPlBTvaT3HUqbsHy7ZnyNUc5SHn639nqhTAay1YGpzAiB5AKms+c2NjgUUFEDt37sdiGzZ8IGN6bhzvFdwJS39bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxxCRA9TVsSAnZWagAAh/MP/1pT8HRL2CEWXao34a5f\nn5XgZ9Dg1Lm6KR07SF8Or7ziyCAr2y9Dy2s68Iwtl3kb3IdWaeVnCP0gnar2\n0v9LNrThiY3VF4HDiO6Jf0LSbC+R/ZNcs2wGZ8w1EGhH5hKjWUH9awjmlXEI\nh3AIPUz1/xK8J1M/U+QmZseiUz8xlFiDCxYzClYM4qoIS3qha1K3Zn6kK97B\nHmAK/UPPvjVq/IV1p3IVHtzUMXL2xjabSykCmn1Rzl7wg5dzEBDzDMXHuZVO\nceVcu0j19svFwl6BVfT0zWtclnrTf70dTyjFb0GZdXSfrcohC0qZW3PeCFT5\nCGISSTa+eyK79QFUUwqWZ+P1CBxPEzIB10PFA0Ppmf0uUbUepijt5j7GOaOU\nYC4bsZoF+Ro8ZPeZkzj7yNsO/em7aSQSHZ9PLFh+XmCL8sfO7ZhZAWQZ9v1Y\n74Sum+/JLdncWShFtMnnqrBpoBB6XJatpty0pCWvEQuPL4CIJrP0BP5xC7gi\nstyhcrcg63aiQOBWoEkdSDwCFPDrKpzshw60qMdfJKsT4V9jsU3Nv5ZbDqLL\nG3jI0ijEi5gN48ysiEX/RHtATUrMrxczBSHxOs3hGaK6L3ldcP4NRf1b6z2f\n/DXj7F4r2Sv3mW7QcugFMVhSdKSy8EHXOpclGawhZQ48a/QhkDvX0CvxfKKR\na9pm\r\n=QZU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/density":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/tab-scroller":"14.0.0-canary.43d08ba77.0","@material/tab-indicator":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.43d08ba77.0_1638313073024_0.6608453231343738","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/tab-bar","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.17a072535.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9239c386144c55c78d614e301658c3d69a9549b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.17a072535.0.tgz","fileCount":37,"integrity":"sha512-dLIF5xrMUAStDT3V1ZnleaAK6jpPOAYdz8jxeP91FYPXldm5MaYD0diwSNw/1zaMZ1wzsGJWPlItrI+awX8tBg==","signatures":[{"sig":"MEUCIQDwWOspHYNRUAPh/fqmzGbKntSzoDGywkkiu3NpvZHgHwIgXD2BGDX0i2J1TktkjoeX/giDAbwVsyLRbkBTVyoPZu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQtNCRA9TVsSAnZWagAAdkwQAJ45UOCYUPGhlaKHuPSQ\ngtJs2cG9TRn7AEtNL4NYxlUeCb8VdnlnvN4u3T/k08zFtnFMmoCf9qFbFBg5\nWd3yGP1X97A0VNy64dkq2cbJJ91ZiKoTEdLSTN5zFfZBDWxFPLDRCyc3n5LC\nU27mqUGHlvACQSilcX9pv0adnN0kb/bj8c1miNd4ZDen5kN6upUJt3LBjHlZ\ny/PKOuASaJbDGzz1cC8yzNaZ/uyzGuToUzOUCFwo4B15ffNE0fJHe/GJZFJc\n5ygF+PjUvRVYOrxVcioOQGRzVMat680x4wceAnMnzb6MKITJTz8R15lEKLkn\ne77j62+EXaNuwfD719IIdFzu9bhRqvQMWa3UgMxz3jYiWToG2Ac8lHHIdwEn\nZyWPCs6fLri7ElzoyOmb/g0gJ7FVGfy6l5PPbx0wvMQhGeGoCcJF0JBGH+Kr\nrkGb8WWu7WaKCV5MZWvTDALJ7zUneAf88SleALEj90/N1tj+JJjAFzIlp4FX\nOFJa7/9pcWBlYdGyoPa31ArVdE6c7L9sWOQpuwPB8Umokuc5hYcISq1+1PWJ\nl84qqT5BziongRlX5NCsKkb4SdUQgLMPJ59LC6N2QFNGe6+Go1VqUdGffK7w\ncwlDcJ46PqKW5MAOAYd24nLA1fKnQaC8QsyxyvW+Q5LU7IzSUS+deUSyDeto\n0Hej\r\n=hClC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/density":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/tab-scroller":"14.0.0-canary.17a072535.0","@material/tab-indicator":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.17a072535.0_1638468429725_0.9005286123584875","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/tab-bar","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.5d809696c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04caea092c6c7384ab560c8030a540b1ca5474d8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.5d809696c.0.tgz","fileCount":37,"integrity":"sha512-pd/7GG3ypqBPti4i8cbnElzo2NkXSPx3xTEg5YjXukdGt/xgNYl2OZyvg4nIWfh+ELi4gyTqp82PazvHzW57ng==","signatures":[{"sig":"MEQCIB10n1K1BSF6/RimVGc9u+fGEPK6EdxWbTu91QjvNqf9AiAe6Foodp0nYyFyHjTjOT90tkhsHxvGslCCc7nPY/KH+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9sCRA9TVsSAnZWagAAf3YP+QA19PU/WVE1rehHPfPh\nvaS7Pjin2pY+TpA5PVF0O0TiQ1s3ckgLftCTunzxBLj7SXgpakaJa2uSIUOe\n1YdbT5uTBLfdj9CzqqzwvziJFAlHlR0gQxV85Frs+3/MzoVgfiXn5VIqpuX+\nOTys64bL3CeY/myxdNtC7qElxQlNK0ldowYb8U2+0YOHCbU5WqFed+iraTJu\nBpNon/ChPsU6dZLwmddIX5vf9pF97vpK8yIxEyqJy9CJA4KDR81RtYvHS67V\nait53XVoI/IypLCZQTH6WEH64HRnEwNhslQ+X0fEfPQJnWFn/+GE7WGdjecx\nV4bV7Dj2ZUE9CzX34uv31jhldKql35LurasencuqEARXTaM7ePqTufAc6Dxf\nKGK3ODnJPr5JlWJjaHr6RbiY3pQ7LAOgg1ziQ5Y0woGiNHk6e9T1NbDzawMG\nENkAVF9fN0eJT60xBjbTB0tjVsB+8UF5PglFVsvWHPAIvMgpq5Iku7dzlsxW\nrappI8XLQ8llSr1RiEoEZEHOaUGWy5WXM240Hn2Vy4Qju0XKmlYeGGz6NNtk\n3fvTjaOcMse8aKOh4Ctg7xz+DjjhFNDAvcX/QzAiCACNQONbhxYO4Ju7OX3w\n4Ouiewelpwyn/HSVW2RlWL2D3mPiSkkn9KL+GQRWNqmN2MzK8ZzkrhVVRyGU\n8HMf\r\n=DNot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/density":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/tab-scroller":"14.0.0-canary.5d809696c.0","@material/tab-indicator":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.5d809696c.0_1638985580742_0.054488031019433114","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/tab-bar","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.b6510c8c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67bdae738fd1d11fe8e279853448a258b0cefb86","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.b6510c8c1.0.tgz","fileCount":37,"integrity":"sha512-mI+LBWv9DuTzmMarNrT7DECLqrYxSJDMKOlGhjGthL4dm1LH0CydSQX8a5dSywrRwMfwGt43b5zsBJLLoN4IsA==","signatures":[{"sig":"MEYCIQCARfcDtS3Aw79Oy7R2Ri0R1nZd7TDo6dL+bVmrtJ324AIhAIqAdDoYUzR9iyV0z+4FUkBdWdNryFgaOygZ2tLbJim/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPSfCRA9TVsSAnZWagAAU+8P/Aq3Oq6iBgsRcBc9sVNP\nVsMLqJLrGSCytASKiZMcifbvoYXQrcXVK87BH5YZT2jDMt2IdJxuoXnlM1rd\njpydXQZCLXy0usCCrS/RK8ofQCwtBKyF7RKHI0vJ40wPLJECI/37NS1zjbEn\nbnfJVyEuTzRdj+Q9mIJdizvrAVIEvtMdnY55MIplS4+jlEp4ieqA1gG0C9FD\nFdPFcqeep30Tiqjfq01/acVR4Uznd7gURTN3zfAoHJceilCtySiV1mOt7xPO\nSLfzFVfX5n+BjAe/JlsPZeTDN9nc51Rv0eCyE4ZWN/3mbGVo6WIesl1RoK9u\nhOLuYmQShTVfWBN1d4r4J6JB2clJdPBOAOu01nhyiI9c5kq5kY1pcrVDuaum\nr9P4l4C92DeWoj0Z44qEXjFKabMlZ1innMIj7fIq2sowR6w893WHckLJ7xtQ\nKEWiw2ZKwGa6C0m1geTWQb1AjlS+UyRJNsEXKq3trXQG79BZYhWuBtaiJY+a\n9NdaSMbmCymHx5mbBsbyhweeR9Rvswiirgi98EefxDN81qhGMhZkpJGHehiZ\nk8SNyZNTofCXwhG+X/zW/o7Zr52SufJCS2fheQ65ameWq/Sv4Rsnv1gRmR66\nkiXDQOuLg2KL7yhMeoegvafVEvWgsd+PWdEqDys336wYKtHPEy0m7bbvPyWF\ncR0X\r\n=J06y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/density":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/tab-scroller":"14.0.0-canary.b6510c8c1.0","@material/tab-indicator":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.b6510c8c1.0_1638986911460_0.7592015969392982","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/tab-bar","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.f460e23da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6339f8852a3f746517c68679b3bc10c47c65ebf4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.f460e23da.0.tgz","fileCount":37,"integrity":"sha512-2H1wpx/xhdW4ZI0elgVjcQOPILAxV1DBNDoXdH3flfpEiTRGtZTIhg7wsK1kajEuyKJV0lJqDJiaLD1oVBSMhA==","signatures":[{"sig":"MEUCIAhsm3vHLcP5joNIqqrJ36cuQ5WlsrvXbV6D7m7g8J5HAiEAneQLKS0YaY73Ah6dXzqFd/hyxzwfwF1mpmehae95yAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3HVCRA9TVsSAnZWagAAFNUQAIYN2LToYkDuedZNuBdn\nPcKc7HySRcggl+pfl/JxgNFnMFiapO/fgL7QPCC8F6rgyLPbNurANRify3Du\n6f8zLCAj7BrukITiCptdxUCW8aqtlMo+8oOXGjLRju8oRx5y1hCzJU/nuAqt\n39H4GlATSBo84tr8FsJTB7OY6Hyasvow79ExXI31YADSAu5FsaW1AMVwTMI+\nc5Wfk9eunCR1jMvbwGsb2nwQL1rDWqO/bz0AeERQNPnI4FcI/f+m01KPMt6K\nQt7jVBDBfQftAjkpU4QMvGoBbXEIlZIDEpO6DNVbTutwa27cbORUzCfIQM0B\nZnP2lvdVcqdPLvmiz601TpvyyewsUzn4eZu4yN460syVjmKy0sghel7UXLmC\neryVYzS6fByIMLhplb21ODPyPpVJtk8DMysl9hB4sYif1SOa1cz9r67LgQAV\nrnDZn4uKWSryyH5720olQu87vfv4dohajqy77SdvTQlryBoT3E4NoJsdFmQv\n0bC4PZwX4Ij3uiT7oHRMBHQE5+/t4LKluJO/omxQ0tt0yXgxn6L1G/Rlngqw\nwSLJph8G/zhpYOyTRrcw29BoJasSwCf9TpPh+hI1wY3sYgyYMxjfXzOTAojN\nM3GdJjve1ZbGIYEJiiIUXXXrooHqqncdgp408St6bbqHL+lFvxvlovADASfp\nePUo\r\n=X75Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/density":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/tab-scroller":"14.0.0-canary.f460e23da.0","@material/tab-indicator":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.f460e23da.0_1639150037319_0.18817365337093062","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/tab-bar","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.7d8ea4624.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec86c97ba83e5783b8b461a1260c2408a3710d64","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.7d8ea4624.0.tgz","fileCount":37,"integrity":"sha512-zV+z5c8Q5tx27ox29+bPHBFQ5eF9nMHVpYm1jrnJvxCfpAl70VuKRWXl77DOZk0ONHn/SqklyJh9w1EXTRxTew==","signatures":[{"sig":"MEUCIF1SEH29bAzseSrVFbKZ6vprlN9oqzYWKi0a8LPws/H9AiEArWZUSJgNWQR7wXUvEYHNusuUf2pVEm2KzXkwATG6wLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6sACRA9TVsSAnZWagAAz/MP/2o/w/gQshxn1CggTzD6\nleMX67RqIvUR8qcP+DCQ3u05nRpXC/QudVBHlCMoU7qZ3QPQDzVeZyG+/fr6\nxGHPoY/gHGb6XOFw/1/rcA/dTRykKuuNz+daeZgLB9KQbEnVdlAxpc3r7L0D\nQv68VuTA9V9gU7jCnClR1Elqe8AzyLJWuPpYgFZcVoEYN117NcI5dHoDjNEL\nOpiC8Gt6sz8v/8v5WcTpvUeDRcqWTuG2ZKhmdxVSMjexmVwhsHFUn9bhu5aZ\ni2JxwvmrJMBspdw/n9IzCdZpy3YTC1OeUNlRMBdjyCXMVeEfK5jsrEriLtWX\nXy5SOWI20aabgN5/vQo4xnFwwXKG4Ek9N2cIhBJjMvVMTY6m5+NDwgpKehPM\nb+TMpQZFDz2NjnP9O/VeWY9zHOKov17RQBWcQRxB+BZIZ9CgqIq3zxLhlWs0\ncDyrteHQxgYDWnRz32OUknzBYAXDlMDgm27ZjJGQu4GlZuruMIyn6ug3XR77\nNlZllINFuiUwXYhFuyI0ZONH2kU+vK6fHHDhiEAn9OjaCOxqyni9F0b+Urqh\nCSLyDfMJLD+ft+g8Ni5pRcEVe0WtkzUIUbvDcqsSZ3iu30Kwh74BM0aRDgdx\nQFXk47QWcQ5d0YxyOJ4fTjvbA3KYsZT/QEixqzMjGLpuUB8H4xpg9O38k2EK\ngpen\r\n=pOy1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/density":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/tab-scroller":"14.0.0-canary.7d8ea4624.0","@material/tab-indicator":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.7d8ea4624.0_1639164672476_0.41078434371611783","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/tab-bar","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.8fffcb5dd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c87da2c98c2151ed5335671997a700029a9e65","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":37,"integrity":"sha512-O4qR+cQ1nTPoeanH8tKopgghyU6TGh98FK8j8RyqKBRpVoq8nGfFb71r+KKYpZIR0ctKBlYi06pNJVq0V+noqA==","signatures":[{"sig":"MEYCIQCNI/31D8ht7BBjLSfumgWrI/ddHLCB45VvP7W+BFCW1QIhAMHOihkYey4QQTfmJa7op92mIULdGwgK+5eHUlXLN8Ac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFxnCRA9TVsSAnZWagAAyQkP/RJg+YaOg6SFk7i0cstx\n0mG97wEBmtmA543UdyRhV9kT4DPbJqg6J6RgIvzDxYpO66BnAEcrmF/YsWy9\nBsqdpV7sL3etUaBf1tkdI+NqoVKbLgKh1iI98P0Pg43dXwxUgB7vcIr5iVNM\nbKG3d1TwFlcMpuPZrEYO0i9UJ2YFNvmLKNje/bVJBnlOpzmoHEbcrS3Rgqip\n3PwRunj4eZpoDWWbXZ5l48tAM/9ZTpBbGlkPAbijez1am5rILN2e5pfGXJLj\nNe6jmmHDqZN5bkX3sdh4Eb7fEo/X+5jyPFJ6Os0KsbxWoSCPeGoEKmVHBhp5\nVfAWrGMbTXK7pgkhVJfDAiP69M1QgIAFUUOsKOKPeVSTbz95dFzY5K59GoTc\npVc3ne/Bi+TyuYYEUvmSsLgzOUDmHyNANFRf0Q5Pg3LGilrSx28gYFBAlWH0\n8ALEUPpOcQ7ffJLB7u2jHUG1zZbSikmHwB1zXXwNkZTnMsxW8alAh7xSrmhC\nA6HmuEMbe1dWXUbTWxMzV4ZGCS5n55gA9DoM/fi4HG9695iUfEBNA1uu+JC3\n0y8mKtORonbw1uJhkWf+zIh5/KV9iY+Qkn+HBITD02ziDBuseS7qAQoH+Yi6\n3ZufdBpzy29osTKfEUFJ95yWTzeLlbCatHUD0O46gGKHBjKghZ0BemjU5gWI\njgrP\r\n=eMXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/density":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/tab-scroller":"14.0.0-canary.8fffcb5dd.0","@material/tab-indicator":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.8fffcb5dd.0_1639472231693_0.5554792911648487","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/tab-bar","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.21e1cb9be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e215107d896d9583634dcfd0cf528f2696a3941","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.21e1cb9be.0.tgz","fileCount":37,"integrity":"sha512-71i057VJxBQBFkYFaUkYhnSbQVencKdhCApGFTSkDtkuPAa235YA5z52uCDj9xP3B8tkfyQICu9O/sdJqk9uzA==","signatures":[{"sig":"MEQCIGp1OUimdhVTo3iGFgQOCWZ+SwY5fJNX+OJcsmhi3H/uAiBf/YamwOc3m8dpMlQJ8oclBDwD9/GFDXPtNkJFUTUQTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPN8CRA9TVsSAnZWagAAC1kP/iSh8G0P6YSeN/yX00SR\nF0KKQ05ziImT9QG4dOzKhMw3QdBTE/WA/V5OBFWJAGtlv8Oeph9zbNrtVmM9\nPOktE1YTj2uHoJ+I1b6XHE85SteK/es7k6Rz35VAXTf4dpAb+eGqtbrmye5o\nDjg1wbDWEbgc1JG6Sh7unYdfHh8PfhprmGhceDy0yQ9RJQELQ1DM7OLKPJvn\nt/2OJbOKTGsnh2Xlc697uB8rBLhh8VwAvHwKfDVgk98GG/PqhDYI0ts0OQEk\n2zLRNfG3BUI58I9pJ3XjOT0/MzDYIF8ToMNPPMFL1rkGJxQriF+70TfXMbEf\nmbLEf+9KuQ0GrigP1caAGDHwNItasAmiOk0cWYboRVYOqiFpag7D9wKPORbJ\noQ53v1fPg4Xg2I7YZWGX0fGuSX3MrnMZHzswcF+tztoxhKFDddtDxzNUbJ2z\n+SYbPcTSanRlMqu+9QLyZ9iAgEbgKQqPSy0No7CVaFXwRsxPPjeFA1cAwuGi\n/aKhpMnCdrEV04R8qBeU+20MiQzDttZA1gKhLidQqlOi9XZIOROUVCSz/oQM\nR6cAbe4ycmeKlh2t0EhMx0/4d7w/zk2F0poX63vgOXWn0cE7qts3s7t3InjS\nAK6TW7Y8ieCh5hqqMrwonSnQxLnofGWGcAzIoJsmjfJrLRC3Lxrz5Zw3FNZ4\n02K1\r\n=ysos\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/density":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/tab-scroller":"14.0.0-canary.21e1cb9be.0","@material/tab-indicator":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.21e1cb9be.0_1639510908493_0.8755561326131605","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/tab-bar","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.ba78e8724.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe08632a626b8bc34573c778da0e9c83816c1e7d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.ba78e8724.0.tgz","fileCount":37,"integrity":"sha512-Prp8UfUdHgk4mVkPwJgC3IRzwvuxlEbU26k2qFS2jAd+/nLL1XDegu77B8MiV3HfL4BSy4OdBFsLG/NJYiqLUg==","signatures":[{"sig":"MEQCIGTrUUCJaceAZEjBqEms1cQrle1I3x8eY8jEU2AGCdcaAiBga92X0ZRwiS8M7llHuWgAiVSfqIuGsdeujslDZk+7lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumjcCRA9TVsSAnZWagAAnwkQAIfMOpByRAL3rEUjxD5J\n/+p8KvoKeytg5GgbLbGXroyKWk+J/OGU4/+gCiw3xTQ9g3vS0jY0fSprE4d4\nPLxiRUpSlUTgMOF8P7KzdmcmRNajwvpgZ9rm5mq6trv4zS7FAuf0KPU5TbtD\nYt1bDpwr/Plg0Fx7tf+xqqE1XbFNzWSPkOC+6sloa7WJ9E9YJSDH7jnQmC0G\ndWcOQLpa5XDnEhQ/JsXA0ZO/de7U7v5RZVNXM8TB6Gv/lz+WpbPGo6TXuJQG\nIJqWFxEHA/GFgAteU7aggoWeWG4xsQ7MtzCZdCcxWGNZfY4lxdWQPFryTknF\nY+9H2QqQ3iuCAujwihGuNVvtnKG0zgMwsw8tmihxdiZBaV9bDMApzo9aKHee\nLbAxpwgkm2BgfiHFYog+pyfRniPEGJqH0PknsJDNW10UK4sNz+nePs7eucYQ\nySTckmylN/mXLJqwwPWm/DPkvpW4Bkc7TI3Z4uX0e78aqWrXCJeXE/cgyS06\n/HeuEnD2jNagYgouotaaEUGsa2qMqT9T7FvQ+gpMmgt2h1h1zyRVGLg10Hby\nQ0p4XmGj+cXOvrazle1ySWhVv3Vp37lI95PwFeszWL8yqANPff/UmGMZETWp\nDbd0PYzSIP7jl6hnEsncZectbCP3YlwXBmWmvU7gev8IE8jQw9pha8QdscLn\n1LaH\r\n=sGD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/density":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/tab-scroller":"14.0.0-canary.ba78e8724.0","@material/tab-indicator":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.ba78e8724.0_1639606492551_0.27819036986183643","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e3e073c00.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25b900c932c76306a5d69c8666c5161304fe041","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e3e073c00.0.tgz","fileCount":37,"integrity":"sha512-cZ3ShtJuajk67En8gbvVEk2EMQWKp8DyEOZws+7xNbsXpdbQdwvIzapYW6ljJA0f/Dok3c1aB9Uqr9F99RxjIA==","signatures":[{"sig":"MEQCIB3S8681cpvyT6IhIN7ox1eFX80DjqVcrjzGmY4yrbh2AiB48lSPAmHkzm6Cd7J642p7fcTpGSxcSaMNYuMetiguYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPGLCRA9TVsSAnZWagAAASEP/jjL3pYGxOeZzw3uqyte\n0iiECtzTZnPMPOGoYp2U3b64FtTt83bO8EH5/zTk4lj4fgez0JXtlJAb+aar\nK19Bw4IXwfDldZ1qyGUaF9lg1R1hQnElOMCDX2lt+e825M9UOBqtU34RQ4LU\nQVv4c1O9Z7z+VQre81rtZ+VGZPEDQRXCalgzGEIYZ42Yz6ZY0jZmaECl2B8L\nMq0jyh8svQjI+OO4271/zf9i3to5AqTSapXlszxpsXbJNcMyn4sC/NoZzTgd\n0QTJ+w6R3HABlEKkvDEVp0MHoESpB3p2E+atSXx72gM+ZeMpUXLRsACL60Dv\nzc9CHhEhgHwI1XaH80Z2BSTm7Mj4qu/4CGdhFjHRB+AbGhHG7Y1N+idvuSML\nxkdQTiT3g/ut8ef/p5f5mvOguY+ZvNgzwK5WT4s6rh9q0s0ySc+R6k5GvNH9\nnGQ5aWt/GJfc2u2JOq0WQtphmZUVoN2fP+I9uSaRPMV5PS1IKmDX+im3eCq6\nJwHuVFKky1WkMZxJ0vjWw85bVccVVE/MlJUR11hMbHdib5NFbEhccKgCTJX5\n/N2BaT1+55iibHEbeIxcDNxzoMyv3OMClyfWOBgtZRxl+f/ivflEJoLmmCQv\nJM7FaQXF05DpNdqkGawIRM6XhTan6AADgkTeg8k3kj6Ujqhwu7S3mNXHW2DZ\nRYnh\r\n=Prob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/density":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/tab-scroller":"14.0.0-canary.e3e073c00.0","@material/tab-indicator":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e3e073c00.0_1640034698854_0.8461909527360887","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3366a71d7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8100439734a66b5b8d7bd6eab112e466e5cde636","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3366a71d7.0.tgz","fileCount":37,"integrity":"sha512-d9sw3qxYfeo5Ryda7d6rdaTMxgbrS3wkdd2bPpoN7efageiTxkMsFIRj3HWLm//DBAkMKEtJ3biQwldszh0cgg==","signatures":[{"sig":"MEYCIQCDKGBrpEOIxGkw/LK1X1vEMaKEg13EEnnAj96wKIw/dQIhALMl48ASBApRqY4AinVSQD61ec1/WAWCasIahKnWIgV1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxtTCRA9TVsSAnZWagAAH44P/1a0Xv3ZbD4dmDAb9BPG\n4jQmq3q1rp7sNhW9lC8rkWdevFXe6BHgq/ggkUN87DBqM6buleHhpPvvsWE/\nuDXytqr/DBExTAJJTIhzL0DTAS3O0BjNlOkerrwp2rwzN+3hEsaWyx82xr5t\nENeQ3YiMqh/Ni5lmb1uCQZQUlmfbZiYySSfv6qcH6417jDgBLRA3haRWQdvr\n5maeQs1onNDPYiACRZlrmywdUUTJVLvTPFfpnuxvwlZNVc5esOHH/YzBMBNA\nObv49suzKmWoL7N9OE5l+pb4y8OsQ6tbMDz0n/qR25EOmwhV6ahrwzpYtzUJ\nVwqubzXR1PWp3+S3kTwZS2CI7MLrp47Ky8Dhd7cnQLC1ojeP4jcS4VvmFHLT\nr0qIGGSC240aHMB+afkVPZXwdNms7tCBk2wtr9i1YFZQfq6olnKvtv6Z+UFT\nt7ec/A4R1qACwWbCv5UGQVE8UeSlUEr0SL7oSYbtQ5w3IHabCSTrxZghUPYP\nvDfhNkrDTAi9UWbqcr48vV2QpejNEOa/HD2J9RuGPZdGw2zsgGOnLMDzXG66\n0ZU8Q4EK/n/dAlmKNU8EHAmBxFj0n/SqDKbc9V8bPaIt4KaMnxHrdZ2locg4\nv18LTcqV2BEfuJ0SZZJbhiu2KEkRiMGZy7ENM1p9+HFwq24vpj3z2dKliDUc\nxa7b\r\n=YC7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/density":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/tab-scroller":"14.0.0-canary.3366a71d7.0","@material/tab-indicator":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3366a71d7.0_1640176467473_0.9798326007951572","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/tab-bar","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.c047f7c19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ff1976af488c28313bfdce451e498c77f3e1a93","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.c047f7c19.0.tgz","fileCount":37,"integrity":"sha512-oSnXGuSbKfu6yC8UU7+SybIp5DR1k1ZHY1Yfdn79dGzRG5wus73KdzXcp7M5vKTZccVZCAujS9t781QULc34Gw==","signatures":[{"sig":"MEUCIQDUsT0Vk7abyP3WhaX7GEk5jtbjNWMV4SPjjuMtPyZTAAIgRNNLodGKzfiIIljP6s4L0m4YM3gcaqX2ZuLRL2iACGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cu8CRA9TVsSAnZWagAA/gMP/23FklOoxMIiVIh8ABlT\n63xyP+YbFPTy5AZuOHdZKFcjZL40CHo46TKaHS5zEkh9js476YJHn6R5YEzu\nC/AoYhjLc5kfHN/nhahm6NgTXE3hP8lNIxgHs3NhA206yIGN97TzxGuIPOoU\nsoDwmYsIMfGZeI88uenHMJXxd0Q9ApNrvVAkc6l4S7No2AE7v8F3kjFqAsoy\nwbxtl+sj13mx/oQzV9hxIphuluDYW/iVkq7DoTCjAYdhr/YIBS3bka4wHOiH\nMo2NVUSdtFJ341Pgr7uvcFYNOzdztT14VkZSqNSjDorwJDNv4iGTcZsmIAOK\n9Yg5vXsN0AjuUqrnpHPnB2V5hvzMLeKtS6mT/ZdTk/Z8t0ptEQezgssUFORl\nbB6zWjJnkaGx376TZulQQV8Bp0dJQ0rZXmLMD0PW2rODb6g0E1NukbfsaHXz\n7lG28BNWbo6O5+6oM0Whw8Awi86Q8nkdFX9rpvW/OyetbSKoQ08AiddkdOkh\nGxMI9UuShRL5IrsLFKKRRzz3ChPy2cQQJYCZrKAayZA+TcAJiTiyjVwtkBMR\n+ushI9ix8ZG80X24TEtvyT44sSZZEZp4nGY1fepJJo6AOttJQ52uh5gknynP\n1ybpeIIvozKjLkC/ugcj9K3cM7nbOlje1355bjPLdM8nwWa/SEA7+QbAnWas\ncbjG\r\n=cPsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/density":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/tab-scroller":"14.0.0-canary.c047f7c19.0","@material/tab-indicator":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.c047f7c19.0_1641401275850_0.24864978988431652","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/tab-bar","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.05db65ec0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ca0fbe60f715579b699cd5e70cd22abd2c002cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.05db65ec0.0.tgz","fileCount":37,"integrity":"sha512-nLwD0VzxxWxgbbys3tqx5xhmDBkay9qI/q+sOceVF3Z8/rVYR4vR/7CDIjTPDOEfEGelPo5xCaqsnqHQE+rNxg==","signatures":[{"sig":"MEUCIHaGnjCmRxnJT5k8ExFa2aS4mfYk7RQj1pJxkSj6OjPiAiEAvb7DB9+l4OO6Y3RXA+QQfUZmtjOVxseIMfX49OdFoMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yPXCRA9TVsSAnZWagAAsq4P/1Sg6ZS0q8h+nVgxWAVo\nmP5IfPlhV0kuKJ2B01cp44XUW/CkSYewX97Yv8MbjjZXb49nU2llvY/ii+vQ\nl5YDhKm/iTaC9ttmaIXrCyPnYY307JFa2o+qFUS5nASdfKCLUg9MfKb3yWyT\nyodntQSaO1IN5vMwOsyBkpDUKilOWaHAMQQFN0tUjS+pmMis5SXOQzGCyz38\neS2vSs+rXVYWbEkZR4gqI7nTAbU2rPDOen8CsS6KfrB0HI4i+WYS8bFEye7+\n5AWCNA4l2lvJNwnJ2JaCCgWTOdF77RLe8C8p7mAiHTpCa46U/IBXjIZ2pFCI\nPi7a1hRkpx9DVSm27PaBdU7HdHHFXmbhah1x2+qmn+B0qFM2f6lgrExRSNUF\nnNbcUAU6zNd4AeIQjDm6aTMgcztGIvc3m1jiVdqVR6MW1ygP2sTygmLfCnp4\nos9a+pFbFNhRgH6SEUwsQRFuvmR6E5ttoOm43FCzy4QDIGY9jay5lqPVvxJy\n0QFIRk9GKYb3jphxOIorJZepvKml+6J2rj80QEXy7FW8W63UlwxJMbzNkF9I\nFrHayRGZiCCApaYJ8zEDII8iefuiXDq5jiGmrUJK6l/iazOUtEOP9uz8u72W\nCWjh654nY87o8KRTUZLht9xI3eWChtZoLLlbkcUvzflSyOwRU3rlzwAfWPUx\nywW6\r\n=0uBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/density":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/tab-scroller":"14.0.0-canary.05db65ec0.0","@material/tab-indicator":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.05db65ec0.0_1641489367708_0.5315338489966972","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/tab-bar","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.6ca8b8f85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c84119e05ad5059176e47eb176dda223a96fef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":37,"integrity":"sha512-udpN67zkOpaMxRGsZLzcpWsgkXwJHRotGqQe6CHbAl9XJFRz9fdH9PX+t/QTch8Lo8+I1uAL8NFKXTzqSA1IBg==","signatures":[{"sig":"MEUCIQCD5cRb7ax5dfSXPVc88e4nJocpCqPkcxJqS/mTa5aqNAIgK0qHpF3glF1Pn0WVIChoBMsKrXrCvISXd8uFk54rS5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GRPCRA9TVsSAnZWagAAm3cP/iYoP8utYJ27vGMuBEyT\nuOBI1sJCcqVpJhE+3HnCWEvUzATUFzV794+rVLSZ7vUY0d2xMxMWYkjraxEy\nBq+Kk7RzCrOy46h5ErwzNNqFsMNA7myv/nrZ2yQ6S/jWVi2x2+Gufyg9Y2jO\nL3DvRojJlD2jwFZ6PM9MjHcK7bOi0VVT9K3NGfxH1KfDfE0valhQxv59NEcr\nuLEt4YLi9rj1QuI1MRvDxuBA13MVJjhGDlGBVBfuR2LHd/NL3kx45WrGHals\nnA8FvOb4VFSl4iQp/zy8lwuBwWwgXshDqG6W3gxR3FIMrb0ni2x6y8yZ6iJU\nfrxB0jeIM8HI8m802SIccaFPoSTt9BSgssYA0hpnmtd2be5t2/Xrr2vStP2C\ndr7GVeR4h3EFFv7gpFsq1KBHMc99HM/+gYwk3De45j+UocNM+HWqnUBZExg4\n/iBE4Y7qPIqXDgkTzQNg7llV9m0xXMQ0/i9H7qCB1ep1pEHX4tNzptIYptgH\ndiTARbrJwd6qwfKXPK6ZI7Wuo+Fj3SS22P0gSn0KlhA58xRxB5kuXfF9RL95\ngSScFD52XwQlJYtkScVCj89fy/AtuPU+0KtPRPIB01gumVy52P2SFxCUH6ja\nKjFUWWXzl4ZzrBX4uRNtSS3GkJhzEn0vDqkxA2djeGw/qgqqy4NSiCG9yicX\nV6/1\r\n=9SFk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/density":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/tab-scroller":"14.0.0-canary.6ca8b8f85.0","@material/tab-indicator":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.6ca8b8f85.0_1641571407131_0.35490139544375765","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.173ee7a7a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"453f6e2c3db28742964ca0e0b9c3abfb43cc3528","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.173ee7a7a.0.tgz","fileCount":37,"integrity":"sha512-D/2ARGTfPBDDaSLm+6/EZGBujx41CAsrENGvxVlLvx3mEU70EESl5VPzgdTQH5q55dLAwIjOpxaySEzM8BRo/A==","signatures":[{"sig":"MEUCIC36ifssg+RQRDJJKSFfakyZFXI8GqGognxaa6YqUfdzAiEAjdoWGEEYaunxHjfYdIx2BfhlP+jM+TbLXPp+4PR1nvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUvCRA9TVsSAnZWagAA80wP/A3/V96C9NjkOQO7/9vN\nyUAEQV/vcQsqIEY5Gya9E7txbi0oHuyGDIYN2RuE60Ch9Wo6Lsb0oqCPiRtV\nZeiu0XF+s4GhsCXFMJfFmOqvZ8hm+keYjjG2lVKn9gmoEvBisN7JPVxYN/Q9\nNoey6qLGKzP7ZEKL+W6R7YE3Gvx5m/y2xqLgbFwlUC1bH0Hhe6Og7JGBemIN\nRd3mVbHrwlPXgdCGLG7NZCE5LOOU0ErWPaomwB3IX3/BZ2kIZcMrwnCb0KLi\nzSJ0PXTXsWplJvu1lio4KTMjlZEaY5ND80wEplsJgb/UcB3++zuwDfbO/FkJ\nvYENdXkG1yp+cRI52R7RndpMGMd2eDkn+L4//+qZnDm6NBp1ABVReGqIfhc1\nhNc3zYWiWAqGOjLVqbhdDdNk7QFV1Q7eXCvd2HKGcnSX8RwGhavsm11FSutR\n1uRRHeorhxt1Tvxq8yah9a8QYVy7Yl1Ll2evXzvXyiaPWB58tHsqPBgnDc9k\nEKgT3xOWuuDYABUggOpQIJKsgJuuaRWLmrDgyuATHKDHRUBpxT3+ptPJRJkd\nt74k6xwD36RzvA8yiEqS9n0Rv9/e8k3kldZbpMpzvc8sI9lebeRgRpmpMGTH\nX8SBkkGEZ5vDi9ln1KosZQQwHmWAiog3ldLCP1X2oDHQUIabBtOcgJD4uzJm\nhwDH\r\n=OEpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/density":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/tab-scroller":"14.0.0-canary.173ee7a7a.0","@material/tab-indicator":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.173ee7a7a.0_1641833774992_0.6625987712238515","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/tab-bar","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.b704e4dfc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49a02266c6a237bcfd905db4134d61efc9fb9ded","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.b704e4dfc.0.tgz","fileCount":37,"integrity":"sha512-boMoUSX0l6CFdDeIykz2gXbYZM8AdoY4h+EgBCzORXS9VE0gcdCqf9qbs2Jvg9yx0xDAmdMeXZJad7mFXPGL1g==","signatures":[{"sig":"MEYCIQCzjWsK7ZnLHl5Uj8frJDgCzzxAoLiNFVEi4+Nv2aQLLAIhAM4PdjCmqzHjGv0jhS7ALTQhK6THH4HBwFZcZTd6fcIs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HxNCRA9TVsSAnZWagAA+MYP/jwMOQ8LBTzanZiOkmDa\nq5/nlSY0XyVOAW0oUtWk0S+5pd6xVPLrtGAK6ptnQBz4N751rENHmhGR5eyf\nW5EMPkkPxJYBT1rVCoy4KSPoJYIkeoa1aS3B1L23yCePWGE/FxtOOlbf/mlC\nFEObLZ/gxw00WoVvdrxCnSANTEsloCXA0Q9kXu+ZwCFHASVtfEKOjQpj8V++\nmTt4RWh3CqiT6FBBchT40bxDM/4dIAsiHypuxMx4B3t2q0k3rU1URFPqP5R6\nXY2XoIp3HR6SI/XxiRwehIw0qCjcJgfb1itdAIKQCsA4CNPM/iyrS5W1PKMC\nOUJ++212hkp4/txzMcUWhDG3M0FK8wUKpJqrhrBoa5O0i9/bvYfVGmlqvNv3\ngkN/5MH0wEL+4AtDM2wMzY6R8Sx5a/uVFoZZtkL+I3xP1DDLNsPuBAPLa3c/\nZI93wRCEnXktbRstYk9lG5P4L0gAs0/zxnH5QOHly3IVClZVZBu83kl64Wr1\nq21WkM+wSq/jA/cEGM9Rsa+eNgfYcCyBZ8NoBFIeDjt7VzzH9sRKlUZ+2ukH\nUu4jMJL54OSvipZ6VpJEwVFrRShxil9UvRonaXfiX3o6z8agGjF0cN0zMEvG\nAflOa46edmylCxDd31kfeQcsz0WaHLeDwcWAqiWyFIqYZqEYki7xfts6cNvh\n1UGK\r\n=HxsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/density":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/tab-scroller":"14.0.0-canary.b704e4dfc.0","@material/tab-indicator":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.b704e4dfc.0_1641839692876_0.7493018669394436","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/tab-bar","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.c14e977ee.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a548d942e92bbcfef043105ab3fa28292969cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.c14e977ee.0.tgz","fileCount":37,"integrity":"sha512-/a/AkGWBZ3Sta+UTcr0mxVSOE9nMBq4AarOiwnW6yTNWFevNsvJDgxvVzC/tGWuRwT2v2QPu97K43+rteMGUjA==","signatures":[{"sig":"MEYCIQDxwDynF5PovMjAAaGA1M0ibtylW73E2jQcDCIhkmjD2QIhAJlNMvERmxG59NwuuxHEpI/9xTMg8PkstPAZi5qAX47V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3aeHCRA9TVsSAnZWagAAB3wP/RCPZkOJJUkItEiUq69Z\nefMyk+8nPkkeasTHsMi1HyQ8+xChKMKkp9isvV9v1b7/FbzCDDDcFbgYhoYq\nlEDhZNmQ7cZLBkfbmMBGdQIiaY7IpINYIMrIkMKtWnZcxeOkHgWdmU5vaVPJ\n9Sb2zdzj+r6JHe00KO1P1hLJHMgHij7s2i1J1q2WtPXmpA2O36eW7FU97yWs\n/hB7qeNOvWSTJfLsnATgR1n017N8/3++HXqhCw1+pR9bRN3Dazcu8owQRmWU\nZs1UcPUsvrOrCm71h62Lk7ZcJdqQb95oL7t51PCp5AusgvKWXpnM3uJGIcBN\nZrflFhJXnpIsqd7kcBP4KowQij6zPUbNL403A7Qo0dmME5tHz6Rv4OAy8C+R\nS3yFdjOOcq6li59Pg8m1YxJaAkfEy7ffRmUP+AKAYzsyxB2vMKADG3vI07Wz\namdd9/eqwZyWvaW1jXx1awfofjAs7GX5B+hN4ZMBAmCuG9lpv8ST6YFv91j3\nOpv5Gw3hCue9/CG5F9Y8+hCBTmZx++bkuSoLJARtjQWwoMA23dENGqli7pYY\n5kTFk9ltjRxCaLar97/q4hjTjhtBWVOZXqCUZNMtvmANK5F3KvcJfOdmH0mx\nY23MKB54HIWCzS2hwGRIdRd5nTktjfbWRAIEkjV5RjGLgmAFI2wY6mwCkhAS\nZiIU\r\n=g54U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/density":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/tab-scroller":"14.0.0-canary.c14e977ee.0","@material/tab-indicator":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.c14e977ee.0_1641916295317_0.8047527218175321","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/tab-bar","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.b094eaa4e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade63d1bfa33164c1c46d78737df280a93e0c0e0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.b094eaa4e.0.tgz","fileCount":37,"integrity":"sha512-PlTZx+Os6ZgtE4qkvjUgPuu1pRCv7QcjuyTezn1JRNfJOL7cM2zQfevDmHU9KbHD6L4MwxlqgKmfSDbeGuQpww==","signatures":[{"sig":"MEUCIQCMbxjxRhZ+EJOQRIo0vOcpDjpP2j13xO5t4NWtEYGMqwIgFASK4L7xdC/+kc+Pa3cyxMaILUddUhKImIchXRGxu5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cSFCRA9TVsSAnZWagAAQHQP/A+BDxaFM3udzptdrWhD\nH64JZYWA6Gplccrdc6u3cw7KAHKznFmkZ/Dc3W5q3/ERv9ABzIrA+aaph8it\ntGGYlHHqEhJjuq5uN+Top2crZERHSNtL4AnhvNSotaAcX5tvGjvyQfMXNafB\nGge1z+NREhvIJoDYtP9w504xgbGcs2IFUDqI5v0uwlGuelATIXDaHte/Fcjd\nINQ4uOrNnFPoMbZVLzKAnO+gaOIxGZEOOIGMWrj10d0hoTjQ+oUCE/1LHBSN\n9lCKl3Fu+ANMOTQ0Fimf87e8F0tEbu1Npb5sDDWSlF1Fcxtq9wmKtXI0d6uo\nyAdPshB14ncucml/mqmuh74R0SQ7/ny1zlDWHwN8Q/GVNEjoQPjk142YYfAV\nLYzj99Gb/TDgj6Jq4+OeFcelTznwl9tdgLTzWrczd6n6rkFz8mWXgYTB9TvL\nt4TaaUJEt30FQjPBhStpAmN1JzHyQnMzsT6oQIrh9XDup6p6T12w6lCgevts\nVDdoADxiXirDxFbtNzoS23yqaA2FAwFkanGnwCzdZkdigc1I0FRVo+mEIS//\npMz+CslO/WV+ENCtelGSFfkTqnjsD93Ze1vg4MJPKf0yWH4iMVeK5+6e1cm1\n2x1bRqSJzKrbVi0Sl7BFu4qKhPcaXrU0V3jQOfUqv3YVkOPQWfhsGuz5UE5Y\n+8cB\r\n=ADx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/density":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/tab-scroller":"14.0.0-canary.b094eaa4e.0","@material/tab-indicator":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.b094eaa4e.0_1642185861276_0.11700487402383497","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/tab-bar","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.390220e42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7aeeb164216a5b2b01d76312f6ffc5560e6a65","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.390220e42.0.tgz","fileCount":37,"integrity":"sha512-bt5PQbqrWadVn48+ZeEJJQik6pU0Nc2m8BETWsYZ9eCgMcIqsGomL4tbj3d/Wf+7CbHPhX5KR7llqU4L+QOW6A==","signatures":[{"sig":"MEUCIH9qvuLjSD9eXzXIK2/zA5qGwXRZMgHMJMzTOpWPN0VdAiEA+SDSbrpr/5Fl/QgI+fDAdx0LZwhKxk86mWK53HOvYfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z3JCRA9TVsSAnZWagAAPcUP/1Fr2FAAmlDbYspal30u\nnL2544FG/NaqWpak70dVpdTqBZMR0N1B3uRzTYWWrXsAHA92N4Lk8/4A9OD+\nGJSxrNcbo9D4WoN46DlRHo6bpTGc9lf6gtNhJHgwTC11cj6dvdp41pA5GEZ5\nITWqCIN4g8UEGCwA1P4o24YqO+kER1YUzcHz3r2TY0BV4Xa9YMdypOJANTA0\nGVF6DjxTSMd+goll84Ga3ZjS8REYiyariwPy39aDl+VB5rrNJyN/d5wb2z/V\nrSge4jHzKD/9hwpXAOo3zBJcARs59fkFHRHGIo5aEQPmttEXPOR4QFHsn0t5\nzrsgFshfq3yFC3ebKFFAqpqJOCYGUOEYhomrw024ElPeKMDMYnCAbj/Lk9Vy\nXa2PjBVZ1laZK5PN9Xt0nC9vY/M4UaQKar0kzJW814tiWllNnGfvq+wFOY36\nmoKCQo1wLKzsS0j18OngUtGu5COoswtXWVFpH2UluOe5VO3RRZAshcngzkic\nt3cJ7t9V+nJVwGiD+L2LwMEi4Vq9jYQ0f4BwkHK+BdATctHWsyfC1fj7ckNB\nwxJfItA38Xf+/VOytVjir9BxHBYXmufcn0QHUMcIa+t5vGyZJm9DSplZLf09\nz2RRgpiA7qsw2bGxECqbhiKSKs4aCtQL0d7FQEOceUMeTNhQCJY+MvCWsg+j\nwfb+\r\n=HqE7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/density":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/tab-scroller":"14.0.0-canary.390220e42.0","@material/tab-indicator":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.390220e42.0_1642438089068_0.5317373126011262","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/tab-bar","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.4b5391f8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49874430c1168a2cddce05b78422e87e4da1320a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.4b5391f8b.0.tgz","fileCount":37,"integrity":"sha512-49J31GrM8CEZXvBu/YsEpB/d/hKzfoiIv21jck58QkfBHaeCMpVi8sx//doJzVoGsHHXy2HBghocmmYd+DNQtg==","signatures":[{"sig":"MEQCID8BAjAdz9MrUdCh7uqLFeEriLWjcQkPC8vhOv6xNRLvAiB5yQ1M4DzkdeG+DC8waFLf2Ezy7OocqKvpFrSvipYHgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KTBCRA9TVsSAnZWagAAaSQP+wUWsStLfvN6lXmawgi6\n3OwZTSvgiyamU8o5AmwK71QIevsnPjB+qk+pXmFPUa7EymzrGlIPN1eqe1mj\n7n/jSu7j/MB1Du2CTKjYWH/EUKMY6QSlia74p4Ji4EXO/NjFgV6mreNhOH+p\nVphrYQ7bIRta4d/0Nf2ejXvfuHxZ+yx4IMZnqxP/O/F5RzwPVR89kL0etC2V\nYOs1MMc25qzN+nxhEySgV2YvrYDNmOC3s9XtO/MbmP52wh8zKADitb85DkND\n6YjBSvPDQB2QdrcU6+/MWhyXkfN8g5/eqqWKaiAazLTwk8fM4Iz64tmIe3IM\nZcDqooVmLkCMO3SDpkYEpHt04aePnqru8OWJO1f2FLjYieR2gCw8n/1/Vlbs\n6+jsaptOu5u21uwBy1KVPn3BARhwOf9XIhcL6Gmi/5LbQEf79XTc96Syakz/\n+6jdiUv4uI0EdVKFMghcOKrgcuSHGtr3xDJrh1qubAdJL7g26bjh7eRit3Sb\nDp05gQtBYTE1bfec18PwVQ58K8Itq382hn71/1RR3oYBz88T0Ll2EUwB5HWR\nh+SduIP6PrWFBk3Z2HPhk6TIFpNm5KeTUtI+r1cRMDD/E3UZygtJxx17Hjc9\nmkDLXwdh4f3nJVV3JTz/JqTl4tzGHcX3U2gdzLU9q+iqgCnhX+fVfMhEkjGh\nhlWr\r\n=MSk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/density":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/tab-scroller":"14.0.0-canary.4b5391f8b.0","@material/tab-indicator":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.4b5391f8b.0_1642636480950_0.4467404675155138","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/tab-bar","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.cef6bc623.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5efd131659cfb419d9d395fb9e6c531e4ac31204","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.cef6bc623.0.tgz","fileCount":37,"integrity":"sha512-f5wjnso2hOZd0gpe+KN0EVl3sAQ+0ts8DSTSf9bNn2/W382A2HSezM41OpoEqmeqh9k2kC6341yZImvU0BUrkw==","signatures":[{"sig":"MEUCIQDNTzzrVmm0EPfsW4e3PHiDwL7/3wq2oytn9xtjtVXk6gIgXJcVogecabIvBK4VMeHCky4u80QNfiLVtsmHiuII9R0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KqNCRA9TVsSAnZWagAA0FgP/0yburn2yw3uKKz4yb/9\nHHqzqhK5eEisiElguwr3/PgPWBmrIHdSGVjsE81vHAFCgIKdamAk55+gtWcJ\n3CJOxUSMI5TR7V6HCtKS82PyOyx8MBGH9IY9uvJkNHOoqDH7oVF9ZL9dqwDE\nABxDe8x4Jpee2bL+nxa9+vUKK6xe6mFEn8cf4GOjVzFst5Em0l4CPaAMKtfk\ndN7zh/Sp3UT4rpw8kYp6XnBGJJ36+up7oBczlWYIWPHlkKsf30MG6NHSJGz/\noz/qKz+VjnP/HBCt+81u5PIED81lkwb/m9LLAYKmiRhGtNamR34aQBaX3KpL\nyqN4PQByeeK96X0ZX8oKNnaRiE4B2CDyPH2i/cBXhbVEnUY3m47fumzoZNzR\nrIiFS48hWd4WTP4uY27wdRmLjTGWhnKbTAUY7iJ5sVmdptMpjTWfJzrI0o2x\nkOD+FS16KIly43VbWdUdvSaos2vDDUGCV1B+3uYwKewCB1aaWY/Jm36ocvmB\no0IMoT+t/vIichTv8vUtFI9xclbACf0yLRgrk99dclY80dTJbjz8OVGcDsaO\nlC2Gd+VtBn83ESWNW0w3fvzLVzcqHYQXVmLNPjgx9DLb43iCsVTIGmErUd/8\n7PBnFOeYbIgrQ/w9atKdSvqHnqLKtR2CmQs2KINQ8EUQcVfgx+XkK9AXyx5O\nNuqH\r\n=9ovV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/density":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/tab-scroller":"14.0.0-canary.cef6bc623.0","@material/tab-indicator":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.cef6bc623.0_1642637965390_0.3668318733409237","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/tab-bar","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.0379179c4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d844c5f123f319234088ee9eb5ca4fb412c5fa44","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.0379179c4.0.tgz","fileCount":37,"integrity":"sha512-GGekZYslN3KWIpEZXvV+BPJYiYavRxc86CquTql3aVqR81oyHtA0YDPXdWnKQulKhOHoRxdXvn7/Ee+ctDbQ4w==","signatures":[{"sig":"MEQCIDlv2XVN45TaU0ceYv1fptJZS8PtRYg2Ckf4myUCap89AiAutIYRCFXwuwtwUAcnS1BG8JLd8zhOQ7GIPH84sQFouQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bBXCRA9TVsSAnZWagAAf6EP/R4cBPfzUgB9zI65waz9\n1UpibKdJsVouZ59YH5WXe9gflXe+CwYOpFKTkShAbazKXeIcvvscpfYDGvU8\nPLqdNHage9jFpeGEMzyvXvGHXgB5/SK5vW1fxHJJzQsw1aPKlGePYSegTWtF\n8xiCltphBwio/eAoBp8Ps5yqmAJrSqh+x+FexvoXieO/o0y/BihesX7coA77\nuW7EEtaY8hu67nB8NrtVPQJl1G62TMNCXxrfVm5fPuCZ+89g2sUyaJMz3SBj\njf3HgyKXKtLYEiv65FItPLLlwieo24ama340Narz+6yfILuvlMehqUY0lg+u\nEFJScdAC8sF0fRzJ1eEcK52bmdcCjRtyK4L1HILLiNzZAtjSfGbVxisyHI5i\nD4QI8vVwf7PP6wtFdHqX9cKgE2i+gf7NOS4j9J+BISI9dJT+eapYZzfwCZ0+\nNUiZ9PZ4oz5FlEoD6WzCZPR2mPLLad5GIMVBOgeWY3pFWorKsLM6X/pUqQbx\nFH5kZvRo3p29pLRGOo/0p+2CaG5WS6SuT3KgDA0ybh/e5p0QXEZ0U6NoAvWd\n4G6Fh3rWEwjiKCG8xTjgc2EN06lOS78paFXwf150N5aR83vpC5TYplcr5akI\ne07SG5o/fqjzgVYIdQRmdPw4FyU2r0kUNRc4Nsv/GPpqguZEqS3VCpuYVVId\nDEFm\r\n=Us9b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/density":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/tab-scroller":"14.0.0-canary.0379179c4.0","@material/tab-indicator":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.0379179c4.0_1642704982922_0.971825908629635","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e62f3dabf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea365a4c79297d2e9c1d32abb48a41a42dde885","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e62f3dabf.0.tgz","fileCount":37,"integrity":"sha512-0uIsFBrLcL4NrwZiIdfMDa2FjHcNUrgqv8uYU7RJVkitZmHtbdkRNNj/9DRKVv1L6XRDYIBu6sLbRuHgwlcMpw==","signatures":[{"sig":"MEQCIBhxk6f6AdTM4fL/DvFdvDJFTPGNVN9piwDYcfBqzb6KAiBTRolWwAFXNK7zfqt3s+j9pjBcuQFeWYHrH7ip6vR1YA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwwCRA9TVsSAnZWagAAZpsP/j7/S1sIAyex9jQIOVdg\nVo2k0coSK8A6EmFTtOVFum/UQrGo0u/yP0ToPvQXmT52VKU9rvPQ+lepenIx\nkQL+EddK1ggUXub12eIuXXJnZlt/VXKKAIedIJoGE8GwFUMRVgryiz3489zr\ndJScSUdizqg/SNJfRfm421uvuvEd1EN8dQs0xouOKDtjwuBby8vEWhGbsP26\ndshVCCKCDLmXcdy1wJ6FMJFnLFvrXwUFNqYjVkhaBSBfm1s3xZ/pQGUO6llR\nJyXm3LAV7mQo6schpaZIP8/7m08Q8gqd2tNxMucxe08f2bhNNaXhD/mcnM2y\nalR/XB2mHK2nMwDXpPMzJpFGy5C4dHHjeRqSmM4cA4FbmpAOtF4k7qn+Q7rK\nYAOSpSZs0ygT4ijdqFTrjZwd77RfUOh0jWRbQZXuO8tmHB3/Nw9rhvBjaJ9i\nLgpSjhaNyfdyhFKI3iqqiVGDtC+CBGsj2yEPuu4X3kRzkHqmSWYKWPksM+u8\n//T7odojhwDrDSqoHWe/lXJBd26lj07h7j6ofFWMbX/5l278NaqDMEETZwzR\nkN9+uIm4N+QuK13EnR7TUqV2JfxXih9i6jAqojnpghBYwh+0pfMIuXbujqVW\nkAZBy2qns1lwUxbaaTbOl2HTjtsvsfAxBGynrsMsKexPnn4L4sBs6DxKliKP\nPIIE\r\n=q2J5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/density":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/tab-scroller":"14.0.0-canary.e62f3dabf.0","@material/tab-indicator":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e62f3dabf.0_1642806320401_0.42584025501353095","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3e20c1de8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da15ccd590a9f3939f0a7467cc1f7fcf7bd58e83","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3e20c1de8.0.tgz","fileCount":37,"integrity":"sha512-A2ZSAn6gqKhhjLx2YT2qLwrmhtvXw2c8fRIMEBCuMQ7ID7PORfe+a5OlKASNbSfEEVpnWdmNcMXdG/DO44t+LQ==","signatures":[{"sig":"MEUCIEdeqxCQK5ro1YkiSrfHexGcl0au5m9I6n/H7lAYBMOcAiEApsAZSlRXoD8gTs9s+S8jPFTdWhl3ci6xppCErbZYjIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BhoCRA9TVsSAnZWagAAHO0P/i9lpUBhGjoPVHBHM/yB\ndY4UxxpyGvfZ80q2W2Yo4CyqOJESpiubnNHfg5qgPKhWqZuEAJ/FG8cMky5m\nzKZjv0r8m+LHY5ViY7Mfa8rjo4QdKplaNRgUG4hSjMY4A3PF1y0hLHFpkmtV\ngWMSIGkEUa6yuf2qZcPPNNLI+JS0ridVe31Odb5dNGS6Ereha8m7825tDSKP\nCaA6TkcU01N9R8GwD67sr6CfqMgN0kBdqUtLjljvFUFdtZoxuFjjC+u/a40/\nnHr41p/TimVpkWvJsVRzGKeFYkcvyzeb4R4EGOfe/81ukoQJUx871EUmTRbX\nK/CR8Q7DG/t7l2AocyJCGjxvdRFywNWbdE9TApE4NgKDuSg4zTc8dPMXDsS0\nvbnvWdMwGVkcHnMewO//+6WrK8VyJQiLR4HhXfj8Mmgm3Lj0WSWllsCLzpZE\n9ETOFYNXhmraHvL51xYn40rSJsGe1QwitRSQfiuJqLcYx7F687E89/FmjofL\nW9x2ppockWy8i6+5aChNBWZyLPfTffxrlriSte0Z3MHlOM5HR8EzKiw8c6Ni\ndHDOC7LGcSnt7I/xFj0sL499uoKbGShtHJ8o00ubAYK291+TwERnxQrZlGXG\nxGyl6r5ILu6Zm9lLpgB/tRPy11bPI4WBGxMuWFGma+VunaI3XCapcrKKFti3\n7w2b\r\n=zAxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/density":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/tab-scroller":"14.0.0-canary.3e20c1de8.0","@material/tab-indicator":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3e20c1de8.0_1643124840554_0.5709065240036928","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/tab-bar","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.9f9d928b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afd23b7524110229b1a0410b44cd546fe0582862","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.9f9d928b2.0.tgz","fileCount":37,"integrity":"sha512-mZWlPqXxiDKuuLxkZQW9J98P+rwvfl/WHFQ7hUkwbF5WcpgB4C9ecCkHoPwZn78Grstw7CkQfaHGDOq1p9t0Vw==","signatures":[{"sig":"MEUCIBY00+44xgY9Fy4wJ2gPyvcNYAwWH4jRvqvAwb34Xqt2AiEAhw6S/cVJtybJqWeOy+JzGcAkg6eDjJVBHCTyYIcvoTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uErCRA9TVsSAnZWagAAddMP/j7tSG6OXRx6QBgf+xVG\nGfk2QB0dbsebhm04tyTp0mrox8fgNg/iSVhcPY6Lo+01anOTJdyAcd0cTJms\nQ484i/amcF7apHtyYKKgly1eUyouZRTjBjo2n+CVkEl7sCCPrmoPciL/zYp/\nn1Y3T4tFxgy0anSRbizxTRLb05CkOEcV9lH+UMEyMLhsnVtoG/XZ1DfzWRqn\ngIH36Hwmfnw+JtiORsCpL3X6KCTaTmRaPFocnQftXiy6pcvhs612fQHapEba\nUVV+y+/osHmLoDv4hlT6Q1mD2tTRcEilxFbTnGI9+rGb14RoOPkYiJ16Ku5m\nESu1227ctLGecg2BmapQI77+NqrGGVCJGxswkNUBkh7pdB+RRiC96nPDtm3s\nbpv4cbTWjDLyOU8rbdkB1Zh1wqrHYYXxPySlEfip6HS9HL3BgnLXBt1pTMNw\n8l2p1xXl6vl1MEHtYoZJTLsPBBuu5JAxkNP4yAuFId93ox2mdb5sba3H6AY0\nDBjaaumQPpSNit7xbc2bNczrpBGA/bgWWkYXHy+UClvqJm5FHp0jSxHHm3Ol\nvuXqoeJhcZM71MEs+t+xV9cveprE7oMGtd1is6RX28XLiXEqY88foeTYmL51\n/RY+NpzNnxBeTIpDC4fLAXUQ1o3Sa3/K74ZTILJMLs5wPHkbxLYx7X3LlkyR\nB3oT\r\n=HjFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/density":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/tab-scroller":"14.0.0-canary.9f9d928b2.0","@material/tab-indicator":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.9f9d928b2.0_1643307307781_0.4775467947341452","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/tab-bar","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.a2bcb065c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe255b92cb4498f136872b7cdf13e4da4bf34458","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.a2bcb065c.0.tgz","fileCount":37,"integrity":"sha512-X+z3MnpB2HNZ0FP9x5aORnNe9FPqlfrw91Y/p0xzfSNHr/uTb/OFNiOfLG3i3X9eQ1QHJNurOXNRC7Q2yUlVkQ==","signatures":[{"sig":"MEUCIEwHWR/jmCrr1B3jfkPLvGwrFPuTIIWBrn+HLGHagtsMAiEAjGi5MtFihYdu8qvM438kXXjLnhvmxoruGQftoPVlFf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EZgCRA9TVsSAnZWagAAyacP/0NBvokAuJiupinhppVl\nOxnBDCYwEIFMI5DLk5k99FkC4h5ZTxxb0sUwrw4e4Tph8aPXojLI/ddYE2m+\nCX8b7X2PlEK6D7ge0Ji2zuxgGjUPihJG0F8xg3Sqohjz/Lf0R8MuFPc9bw+a\nNzRRSy0nPwhQ1NWc/VlNIb2pkTlWygZN/Vbc4KC/v6aGhKBOblGJ8DK6OqIY\nXPRPxiq+y0xsw+cHgC39nQKjnDISR9THxgJMkuquRql5AmK9hBdn2OTv5iZN\nisSjpiCJrE3A8tp9MMK5wIW3E8cXPT0aEEMLywMC8fIhhzAYY0lUes6m/uL6\nuTWxRQwtKb6kRZGh+WmrdKE6v4kWtcAPn3iyFbDz4QvTUWaBFl8ammW468vP\nS8V8YYJZZKmT6PhsScKCYjjI2bU7rBkbPka3D8hF0q5Va/O1ANXHq92qDmpI\nD0yGIVCrsCJoqeUpcnrITncwduQJMEOooLPsZujJUz5p1OixHboDcg8XXPbA\nTOeq7lpzF6CnEjf4fTbACwleSalveGI++KuKegGYQKivl+nqpce7k9F7tcTK\ni7R/b8hwSvetkGn9CMLYW+e9evcMhvQZaizGlaIlOqqb1b25rJQDbqFVWN7u\nrB1Bk6kqATQKOCr5bYOVEqvrv6Rxkzzd3e80YPYv6cdBc7sa2DcKRoLVcWu+\ntmqP\r\n=O5Yi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/density":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/tab-scroller":"14.0.0-canary.a2bcb065c.0","@material/tab-indicator":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.a2bcb065c.0_1643398752202_0.7953479499794804","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/tab-bar","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.4e66fb2e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"408ab9b0bcc0c60b4a2c1174987f5e327d2034cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":37,"integrity":"sha512-xf9BoOTJO01s1m6STTzIzwW5P1q2XEqUh43S/wT9wZc4PzvBF/54vDroKtcfmDjTQRfUbirXCJ+bGugcBhRRPA==","signatures":[{"sig":"MEQCIEZfGiLtgWP4utRIkMKezRCjEohQtkz2wQpZeQuncMSJAiA24XnYGF0eJwSJEJ67JHYNftUsqsZiLbSSqKGr+bfANg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EdYCRA9TVsSAnZWagAAT3gP/0n3jZkJOPYIKCTftaTB\n2CJh9h2Gre29F5MrQLABc6BtEl6kcVTV6/5cYg+9sb45+iGaFVzc4Oj96pzV\n75cVP95fznoIeBxw0rOL5KtswfB9dWZfqTTkAZRxRRnvxMUewnyRTm4cLHa9\nGV2r+qnXsFxg6FWhtrfBF88JZdEurtukqQ7fJafrglmZOG324TLEHghzHHgK\nlO2+xTbuzZGSaFO+dX8N15UVm4fR5YWeCSoaGurbEHMVbMxR4cprv92t93z7\n8rcw1F1rB6Zv/zmh29wndzG2wXjpBzu24Ggi9pbqOlzQ007Q1XatSC+32XJQ\nCtNKfdAPTDAl7rcwcONEmrfle5PBUsBG6OAOTz+MzUt6NAl1zDWJhqyPvOU0\nlzuRVScklFALDbe1izEIYDQfHw0Cw+vj16xwvq3ArZawoExEkHVZPh4Vylmb\no8yGnL5vQRf6+65EJgIp3IvyaLunflxyDqEB5m0WrdDd2sRHYiE8AJew2YlY\nxwrRAbFqbT1VchaTYLIVPlOJGuO6K/j0mbEABgyCfk9PcXtDy/sUjrW3VTf8\nL6QEmmq4hMQDhQosiqTkY92MwwYt1ATIbaPnzJxuvBL5bejLCPGyaSHAzu9w\nAKOQkbJ6J7NMb9rsZM7/CHGauLscwma2pizFRZydwSaEm05VqYAi1lYL/Sth\nvRKp\r\n=jDFw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/density":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/tab-scroller":"14.0.0-canary.4e66fb2e1.0","@material/tab-indicator":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.4e66fb2e1.0_1643399000617_0.3475954138086652","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/tab-bar","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.9736ddce9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"864863174a62ff8ee6ddf927026a76bf55a0311b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.9736ddce9.0.tgz","fileCount":37,"integrity":"sha512-InBSLmcp2k0iqzSZ3Uo4AMSEmZicGKTg19AZ05QHhWV3IKpZIAKaxNG1LW+VEs1/a+WVMHaWdeey7XV8u36YLg==","signatures":[{"sig":"MEQCIHee/hBwT5E1TDXTkfMCq5ZTlJ5fVW9b0ullRDo4XUjlAiAE/50mL45jvopsXmRrbBaYRISOogWTbszr6kxCZZKwtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4uCRA9TVsSAnZWagAAWhYQAIv1NC4mDkHQuyo17xE5\nraqLDOFqM6sACJiJnVpe1eVISmUdPQFOcLZFy3ECQV/g9bLcnlMwyO4M6pwh\n1Aoi5+Swk3xA5UqmBHOCa8+HNCVdFUbusqyJwd3dpg79OrPCnkFxlHxHTwEU\nuWd1xOyRXqahLz0a2mqtgJZPZgqBqQAbXIHd4pfckbhJzlgSRO8vBAnLLPfA\njvOwhwaNl2OQzcHCLUH8/eOyawIJZZSvQabdxP2g8J4dZgwN1Kewsjox8V2j\nhy70Wb66mrzJqD41WSe+8587vVVAQhifSRH8HPIRMeTPGKThhXYMTVRfFIui\nVTkLRZmnNOjRBf/gl0gpHPZGouSZ/Tk1ycf3twiGDZjWU791rvAiMURIYIL5\nKrZk8X1PDsYT9v5nJBi+zIlw2wWOM1tNPwoG1eF/sV+L8U/h6r88227/AWpP\neoVWPSaUayutlxZ3DSDVK1wdwqLUghIfC+3Z3ytNjkn+Qm1FMcPAtR47skqJ\nYyP/Rl6fjIRSF0+x63PKt9FhLl4k6onnnBdIIFyMioYHRMu+iYEi+xNSVy3p\nzrQNFmDmcSettdI5x4JyQSpP3e3/QwCIGfcBHhafFoXxLQc6os+WSmj2qzFN\n+bC3nf4/uOIn5ElYS8eWBCfPNDJDrQ61JtHiuybpAUG8KamHaz0cgNIHWATL\n5oQ8\r\n=ZnBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/density":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/tab-scroller":"14.0.0-canary.9736ddce9.0","@material/tab-indicator":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.9736ddce9.0_1643449902366_0.988795003323583","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/tab-bar","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.cc4ed13cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e2acfa2c4f09eaf762bd4c544208847a09fc49b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":37,"integrity":"sha512-n8KkjBwzE91ohTZSdEXbGYlludvEEbDHIiuQNx+DtioljLR/Ko2xntp9loGMMCWehwkc5G39fLLtNZmT4e+nmQ==","signatures":[{"sig":"MEUCIQD8TqZnYm55iJueY3q/rOxkxYHRXeMpEDcp8F8qxlNgYAIgVl8LJ642L67xMMRGEZng/2fzAJhNw9U42js8Runr7JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9xCRA9TVsSAnZWagAAl0oQAJL6fS/jHXd25wrXBqYX\nYiC++ge17PpM2wq48NcHjinG4o7XqkPoWFFIye4HzjFDDmaQ12YkfXJQEL8x\nYjrZ1FRZuKx6iMah0+T0F9thGzwwLxqipA/K6zlPMmmSrfSwnj0f9kZV5RgY\nDXG5yIFYZjOES8QF137Vb7S9jN8v83ex2iL8Ne1lO+eDcWJPnR69zNbEMa17\n59t0Q5Ew6f5HwXW9PYrJI7a8mHRrXc/94+I0mmzQiGqune6ycnCSV0naNBhL\nDDfsDaAPX8Khx6zCVmG95nkfP7PXdg3DRbasx6EyXzSz1fZNYEdaCcz2kGAz\nmP+QmlpnsKCqY7I0UUbMNVDh6pEDbnvwTTIhq7uKE/JqBVDvBnRp3uv5DeLX\nIrs18GJW8Nvl/0HdCddw/TdRiOrWAlLWo0lzunrB+BsWKYjp01Y6AF6MnsQ/\no5a1NvUwuDn0CI/RRrL57hqHeQ2GR5mP8a8Ba8zwOxvn4uAVRbRwOkT+q8/8\n7kSrZkaJQzbpunjgDsrtwvDM16m8MtAmD5DAmuF/xFoCSXOiiTsc/QtHbnAM\nPMgvtI5Po3bBCrICTqy70hrzF23iaSSha2TxO7YhcsE7ApdEV3uDXRaz/niT\nKlN5UzH7v/X5aIFhg/y+h+6axrYxz1q3Js7mWvrHhPsOMn9ENkVW3NdiTFet\n1p49\r\n=TG0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/density":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/tab-scroller":"14.0.0-canary.cc4ed13cc.0","@material/tab-indicator":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.cc4ed13cc.0_1643999089684_0.5351729432039207","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/tab-bar","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.dcba26fe1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b4f125d49b3cc0d19746236a7002f1f01ba0b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.dcba26fe1.0.tgz","fileCount":37,"integrity":"sha512-n08OK3ZRmMvExHyTchkXXDrBej6UMhCiJuHUzs4SdvsJJSieK4LZFD8V0Bg1RGa91b+yzzxQJp2bJR7BpHAp2A==","signatures":[{"sig":"MEUCIQCm8KGLAwciG+DQtLJKMy6oQ0oFg7okf32//Mhcq9tpNAIgJjrVzcHf1564dbG+PESgI4qDPy2vzBzEHTaf4T5klYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGpCRA9TVsSAnZWagAA/yAP/3ISeXc+0PV5RYzjYohP\n44HuZDGMCb9EEIQnashVoxL11h2gw3h7y/snxrP4go9Sl/ISgyXaGAInjtaw\no5I+VFjodU1ZbmCmRXa52SQx+PN2C3ybaiXQsQmFzhOQ1EAuW12v2RTJmGw0\n+m5+wjAUx2g0PxgB3lKQuP7dZt/trq7Gq2jwuVtRS7PaJn50wzPAiFlis36y\n8Hy1wUuZEWMXlMFLQaP8bx1YJ3Juy1Ymv4A3ivIA/+DmgdeanNK4qxb/8gXq\n2ArXn8sAm4YWhcP36Mkhtnlse5vZniZRO3912WRlep9w+WzvA4nWdpriAm+Y\ncBdmsrqTBE5448Dc82FVO6xM1zS5OrCK+Djq36hzM3+yhvGaHM/CrFyceWKF\nAjO9BIr2Ljlu1884qTjlYTuEXB7Sv8eo3b9Hw2ciR4rms3iBvrjmIA+l+Li6\nSDn5g0s0dIeBKyJtRHwX5g1AekNYZCnjECzNXB9uMeVbjcLma05Dt3vyJGyO\nIdBupIV0Ehf7AIQOSh1dFPcWb6dB1HaPBQmy5TYuCuONOr72MMeZdjqGy/RL\ngZ2un6RJGArmaa/cQ/6qyTRVkfxwBeiXZMVF9BFj6a8KOrlKRZW3m06S9Z7J\nLtBNlPIcRxoh3Y09UrOJUj1u1o9QMjeI094ajv95Z4+H4CGwfq5mPkrjxp6p\n5qiz\r\n=C0G8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/density":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/tab-scroller":"14.0.0-canary.dcba26fe1.0","@material/tab-indicator":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.dcba26fe1.0_1644011944847_0.6009710138520181","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/tab-bar","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.ec54d9046.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64a3afc7f6fb254e939f391ff1a62d39e1ef446","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.ec54d9046.0.tgz","fileCount":37,"integrity":"sha512-hKzRAj5n3V3kagSXRhDa/l11ugHHTFWHnZvsmaquTKVNZpHUN69xl49Vlr4ikkiNDxoAE9CwEbE+jP42UDqKFw==","signatures":[{"sig":"MEYCIQC0l9/eMZITNNQra/kg0gqIi/HH5CgoTE1wLWeGZL5N7QIhAOTGzxgaHSB235VDRPVaWyrj/bpGVldMSXbMDM4D57OJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT9cCRA9TVsSAnZWagAAMuwQAKDblu5m/sPFsAapfatD\nrlc/u34sLfHMhLM4ZuvsxjDmGRqnBdYo/LrvNXp7YidqX4+38Frl2PsCxE1H\nWW1yThf9BRf21ccPtKVKdZQK2Sx8OG/KQv+wzBCkZOuxetoFTqQOQjqsR7Ex\ntJDZwEgn0AuYdvzv2rjn3VCbbSt9xgIWCZQfdrIqIJh5CGIHtNjA9u2dUS1x\nG/xofJptlYTWYfNqqHmEna7wB0sNgcd51Iu4Ytj+ycxy+GHAZMS6eI+tiXmu\nN5FXzC5/yOmqU+/JePUt0/v6j+KPEicSZgK0DUgDxQBVgWJWfLmQ8ngWaVfi\nkdt/yu8Nxr6kHFgWd5DHBdi4/eaeLbMShitub+0nYaozW0T8IrJmOD+RDjk1\nTMP8D/VnUDOfVs1eya0egzAx1EZyxFn/oboshQG8/Wm3y73vGWzeaXNU3AnO\ngsnjTL35vNkaKW7fDdIZh+Vdio5A4SnZPkQee1XrxWxqa9TgwHt2jQpJ/va2\nHK6v0u5R0svOJqP0SmAh3VHW/N1FSck1/xv+FS8RMi5UiYiGbwDYx1NupSm8\n/uCYhQ/52YTV62Oq90eU2tFageQ0JFHdGwldlE9D3yTIv9u273/QpaFJhtt6\nwgbph41637VC/CAP712pAjHGQPa4ZsXm1sQy7eEpheoEVK/YOnNLdi/Dn4PC\nfouw\r\n=Uyzu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/density":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/tab-scroller":"14.0.0-canary.ec54d9046.0","@material/tab-indicator":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.ec54d9046.0_1644248924595_0.9860985137833289","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/tab-bar","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.ea9b5b463.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a61f397f15b4e70c5707e03d5b8249669f943b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.ea9b5b463.0.tgz","fileCount":37,"integrity":"sha512-hm7Y0znLzD6idQVrw1B4xcZdBYwsfKmcXXppGqUbBNO6SKTII0GGPKpglyBwOdKosAYgE2PSR35koHj/JKWBHw==","signatures":[{"sig":"MEQCIHOKNIKlJmhgII1IiPV1iZqs6C6DmN/YZVTHYyBc9ImXAiBal+ZzrEKVndJ0PSM4jCYp1F4z9s4EF5nXJB/sPGLFpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBAAaCRA9TVsSAnZWagAAmDMP/jrGWdApTh5S3qENXpay\ngDT2edntn14al5F8riBdq0Y2bM5ahxUtN+GWjeWAwzsiONzI4PZdVsVhXium\nr96hllX6RWwwQ2+LY3O8vaxPgpLSQw2M6DLyi9K/wWzNpOhKEnTLPjgk9LEh\nWfSjkn2xEXicnpGKAN/q3Q0oU1Ji0IFDGgq0VnSK/mSSknmG7k7kCYtAimGS\n8lbrpJx4mI90m01G30yn98D3XcRHtxL3DHAc/ojJ/ji2ldAgQJOJLndOHicb\nw0IYfYA2Yv+igNiT0cCy4Wq8Ycsv6yhp9tZTKQNtf2JqmPlTI7IlHl11EJFi\no9l88Duz/X1On+3if8f0AhGuH47804mxV8lsMJRP8qUSgCSTs7nhSlwaIdiA\nq7bk5Seu/qr2rrO6/0+pFTUQf3RzmCODF4o6rmLo23iyuK8arpEwtEMcMv1M\nNJZi8+s7uO3FVkaJADOcDNNufusI23lD5pgcnX5IVJRFcLZjSwDQnBpWR34p\nf6rZ4JFmAkXSqV3uJlPmNRpHOg3nKVi8l7pK/98noNXWxcCePcITD4aLbdxO\n155EzJGJtLL6rDFUd2tHYr/8j1VDt8Gkhlc/gwDfRWtM+5qX44MaZOGCYPvi\njjA/RoW1UmYr9yfLd9CLgP8vyMlSnolXv1V/HAaUzdGl9tIlYIXCk2kwbrnM\nGPDD\r\n=XFM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/density":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/tab-scroller":"14.0.0-canary.ea9b5b463.0","@material/tab-indicator":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.ea9b5b463.0_1644429338013_0.002223254610317582","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/tab-bar","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.96ea061c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7add4f8364bddea9b932e6daad68deff7f8ebfc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.96ea061c1.0.tgz","fileCount":37,"integrity":"sha512-doZ+2AEhQxsKuxzZ+WCX/RXiVxjHhhKrnjqFVfRoCUWpjispuBeUGHU/jwqPd4nTayoI8XrecuL+v54dZ0mT2w==","signatures":[{"sig":"MEUCIQCxNJD0X5DvkH7UxnRu0cOayg5qszy4BY/ZB6wrajziAwIgeA9pDocLMnmMd3+umIwzduSO+Kv26kTKI+mkCYb3D+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA+DCRA9TVsSAnZWagAA7zkP/2jZdXx2RmN7ZbKaHICb\nWkzOBs1YrVjBCPW5HGuSvb6EzVewANwOFJL07YiFajnpMP3eXpLEvrWAFFtd\nwN3ujB23FZnb4S12H0egiA2YEe273g1NxNeCYYo9FobVwsIrafVQxQxMQDCt\nSRbxWt/TAiVod4x8F2QWaQDwWwolJt3Xx30IfJx3QmQ7jbve+UnZj7CHSFhw\nGejW/53nEKdDiZSDbrD91eFZ/TeWVFKKPn0vyDhe88yuDcfJ4GiP4crrd/7v\n2LfSrnMObml/c+jzBy6CUNqf0NU757/OFv9xgBbSTSiLdLOXVJ7LmnDVTXa3\nWGZ+ybs90npRmKe2VUci2oI5U+rRZ+z4uAzlmd8x2P/duCrd9FHGcmRWg0n6\n65ZSkJNjkIFl1IZI+u9zsDRo2oHIgKw4vFmJJvlpIYkri+Zq9Eu0tzg7r4M8\nnPx+P9kVkTZiQF8782lXfHORz2pXyVq7ELVQYMkS2yLVg3imx1ocjivZeV3K\nrOiFl3gq2SD753rDQQKt+K0+A+VCVcUtFdApHWdquzX+w21vtfwc+75+N9iV\nPrshSNDLG0yhUbZR3XjQGDeQF0hBgYBEo9FtFBCL8n2gG+UkQvgjOtwKN9uX\nFNEEr3PHk4J2zmzO8oaSl6O0XKpraLXakyoJg/kAlarX4REtsYQrMTYhNQHQ\n897m\r\n=4ZSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/density":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/tab-scroller":"14.0.0-canary.96ea061c1.0","@material/tab-indicator":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.96ea061c1.0_1644433283405_0.3975905006714675","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e00181e59.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5427b153ae8284d27d0cea4dcb959873d5dd7e36","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e00181e59.0.tgz","fileCount":37,"integrity":"sha512-qaJTnqj/TS8XoQ8Q25D/5mIlT7R7NuajcdBqrSk+GicJ/aEghy3lBkz31qUEUxYaIsooSxrKGY4Y7lynZPJX0A==","signatures":[{"sig":"MEUCIQC5zXc1/ruIAoCZq4ANwjJ2yUrlb8x1p41LkYgvV8vpowIgHJVfpd+v8pQ6IVegtidYtLJ6am5x7QnPsfRRvDmfXcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXDACRA9TVsSAnZWagAAgswP/R1432ZSwF3SliQAE4oD\nqUs5pYvArN4ea18UC3SdJDRPbS5rY6gtnUvihIPygeunCsmamEEZBnuqL56v\n9CF//WOnttmy3bjuuv3m3wrratF3zeG7L8N3bBHw8JszX9jpHCL6/UOud4jF\nbMhDZgoQZdzh2T+yVQoSIUhPVK9FR0TIkVN6um+INGAbZw9oFCxwL+7mERt1\nwn/V805Yh8atG4P0hVdgPtp/OtD7s5aSt5YCeqoy0Kw4d/GWsbDvwSEy9yJf\nYMKCIMHOME+KND+Vfl/vNjpjjb1IJx3U6tiXCFKIVXTq6CF94bIX14eH0XEk\nup9590BNJQ8EJfYALykNrwJ+fuvfAZXlS/sO3ZmvlsMgJDmRwvj6bkXG9EUH\neAdqvI6GAmSnI3C6J/YE/6zBypI/zuasTmxfIfvevarqon7tXL2eOy0Qcn2R\nktc/6x+pAUKQQqOTKeIhxK4AatxtM2mp+3MEfCgKkSFdOLT/J3PH8hJ9qqX9\nlhPOBnsqJGqtUqUHcjxDJiXqlX+4aKkgvyxS18gWHwA3SnWlGdxR59790mZG\nuIf9p15t2Jt0svwq23EUlQRKqDgb88riu5VuC3Z1dVi2LIdOcXrp9OtYkv8+\n2MkS7WwsWapbu3oLmDbgqJ+Ahwyvhm4GsGfK+d1u1hPQYcvPz3GhYWdNhit6\n4Fhg\r\n=M7iL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/density":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/tab-scroller":"14.0.0-canary.e00181e59.0","@material/tab-indicator":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e00181e59.0_1644523711933_0.5767270350892315","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/tab-bar","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.037285f9b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f1707b9b57a37a4232812bf742f9839c93a222c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.037285f9b.0.tgz","fileCount":37,"integrity":"sha512-tKGTc19TZYoWIXmyB1XUKi4ylJZrqgt8va8Mi7fzf+XCChNZ7ScI2JlCEujM/fkjzeySpm3SMzSVtsbSI4RuIA==","signatures":[{"sig":"MEUCIEvWXwtE5rZRsHFFfqKmY8KRIpZ51YjI48MMhKZr6pYCAiEAxIaOQXOOY4I2nQuYCxhHvcvX2fNsmzweTb+Dn2sOHjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqt6CRA9TVsSAnZWagAAl2EQAIwpfvF5NsbA3OcAozQV\nkZD+vtuAMvXm6kcwHrIXnKsmD7lodaM6FM1rMmv11dSc/tORWIdSCc7Mb52Q\nq1Q0D+BVf/Qv3L7bQOWacNSP8NREXmwuIeOdYhmH3Rw5F69ws28AE1W0A3z6\ndYkwIMsjgduQ6cDKyrDkZ5/eEVX2bKuSlywEi0qHISgKkHU/6fM9nb1OAnLZ\n8Xnt5Ub7ibWzmyEID7Fh7IgoYtEPjfUa9WtiOd5TE56gKjBVDKfm4QAX9qoe\ni2NR76du+EJjKasEt5VnM69bxPLutbXnyy513EV5WIPLmSPc5OY15nNVIFtF\nKvyBYpg71qoIas1rze3OmOE+GIWWNb3QYqb2axRuT7NjznL1RZU+jb78ClMH\nkuQ/R5ww9bsuKeHTSaFfDuajs5r0m/4L3TnRZ+XURJkp7fDTqToFE2zrXIWo\nDM0kwGQibeEoUgH9I5r+a6LR9H/BwWsQIpcBxxI1wVY2zBObYdvV492C9vuU\nu5OqO9fJzQAM5mvWimelQ4CEf17Oc2off6mlhxLg9XiE+VTA8AG7Jvb5EMsa\nwV9JsS4K1rb+Uuep410VxhOaRjKOUzmWnVCNR5Nr6MvKs9WkU559L6Py1YYG\nG/ugtkmQ6FS/3dq+JjqD5Wc9QgGYJWvXj+ECBuaJMwcdstA9tgCyTHC4Gkg9\nJdio\r\n=piGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/density":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/tab-scroller":"14.0.0-canary.037285f9b.0","@material/tab-indicator":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.037285f9b.0_1644604282002_0.5976475883304286","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/tab-bar","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.1aaa68dda.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdc2d3e61bb966fb2a85214302e94dfdff8538e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.1aaa68dda.0.tgz","fileCount":37,"integrity":"sha512-J1bMilTzcqYpMW+YB+WM2FZPA5/1KbhGNrToLM5vamz+05lmO9UbuCRUpJXY/i5RI3V8TrAZbkJ0PaQnaIce+w==","signatures":[{"sig":"MEYCIQD7IpmOMWwv6KHtn1v1MdTYcoK4xbQVPLvozjkhyAT4LAIhALfmM2pNvI8C+IMTTUmjs2lAIvxC6XnATzwNguEYL7TS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVWeCRA9TVsSAnZWagAARAMP/3L76ezpHfydpvOyOCBi\nBz2con2fD0IXadU+m9jePbkZ9Og9SNEG/6D2lVJFGnVqAQ5SxuETG30QkUG/\nEVDpcX9z4KjSY8m65xTGCZvb108Rj6N+LDXgWLzL3GL3eR4ZdrVYKrGhbk5B\naHlUX4+oiGY5DPnon1Q5issWy1+xmymHkyM5Ty16JMq/AO2U9wIKE4xr3LYB\nFH4QHtWKysmnehJMcqsb7WRf1LODfLA5/uBBvPiqgEJZg7ujjIWxG9F3dWb6\nHExbVwFusprdUQF8Xp5H9Uj33BXIOv0scrYeNGrQ4bhXmZufe4a4YYXJAbyX\n8BCS5katml6P1JLuflCXQyFhAX8yS7rsf6aHxvCdpXxC3NnsGS7QvURrXCBL\nTwMv/BK4fI1aeDniVOH+baZWMlZejGKfG8j5G4FlKMGsCUQ/hq67BwxyrC2F\nRbHLrYzT7/nDo4BwI7LU1IbD6+t3yjGuFNyMwISdn0nfnPxVyDQ3+lHl+gW2\nL9fwzz0xLhzfCBJwGaWPdwODoILrcnn6x/AF42c94C1VLFWob2rkD4xAR6ZN\nQb9xycImq9hPrBlFQ2Gcqk0H3H+Y1YHGgokWxOfFYS0ya1mr/pJmpWlfvwNE\nMdVfsoFvFNevbicKhw76OoZCvlBwAiP9OSkakNOlHqGynTghp91YZarlCjPS\nwqEU\r\n=AwM6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/density":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/tab-scroller":"14.0.0-canary.1aaa68dda.0","@material/tab-indicator":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.1aaa68dda.0_1645041054182_0.7376270407561174","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/tab-bar","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.ab4aba1af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e167d2475bbb79a5d5325f5bba62d349b94fc946","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.ab4aba1af.0.tgz","fileCount":37,"integrity":"sha512-26Rj0oqonF8yAQJiWQbija1yd6zgFBJwWcE9gYIyxa9LNBF3kV3vz4iyaoYjhtkBKHkjO8ETkgVLlsEpB7FKbg==","signatures":[{"sig":"MEYCIQDPd5gpiNZXm+JK+qMtCoo9WxL/A3sEYZb3qmhj7g9C2wIhAM6ZdIoLxqz6xIiJSdSYyQFP4glyijD9YT8n309PxSAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpFRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFBw/+P0uccnOean1eGBeARau4p/toC8lK5L0vulzjFkKLaxgD+6uE\r\nYGw0/G41OdYRah7b6ApO3rA6Bsla/cpqIwF0Zf1ET/1rgeubzHuT4DaDlR24\r\nQSJkdXZJ3heiljNW0GVlpWwHokTGGadJOHHPI5+wm7O+IDPufJxy0ShXvD+A\r\nXq9Lat8T8BjvCDWDAKEUjhzlcAPBE2CcUjH/Jx1HvgySJQcs9EDwvDGgStjZ\r\nkk1RApBNTWm973C2dcGYyJOLN5fFtxoC9ym6adKxuOj61ezQw+miVP5WLuKH\r\nGKInIB31CORfsXLj0P+cy4MivhGotls5KLfNe1lZiWYAM0la3RGfHvGrOhHu\r\nVq/99MVz6lwPpKtrO3WyMwIcDP4Z4bXhQPnMr6y79HeWr6Eo8N5y8wMWn04p\r\nRL2/u1aC18wJylDz4d4atwiF9o37yq0mleniCg3rV9moRdzU3MNcdlig37vj\r\nOKMX99b/pB4YmcEHRaVqDX7bqhxUXiubQ7dfZ/q+4RW1xuA2/zDvOciQ9Am4\r\nQyDxLHmxUq32DvEhgUgpLcqPP8wtgO8GHp+PH7Ur/QDPfllA3SBTXYFWE80X\r\nJRGR3NdGxbvVV/DHpg2XFYBBQnCfgw6eeSAiDcB0dm+7woExYhSi4XNN1Kxu\r\n1TBMo9KwCHbpyLhMKWQMbeggorv8BrVvk8k=\r\n=0bMo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/density":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/tab-scroller":"14.0.0-canary.ab4aba1af.0","@material/tab-indicator":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.ab4aba1af.0_1645121873557_0.5327795925215695","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e58552c6e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6e7804b16efbcdf738cc076f2da0cd99af9b836","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e58552c6e.0.tgz","fileCount":37,"integrity":"sha512-pGnWHNEFLXLE9DBqt42C+tPxcbX1mnFcoGEo38Oh306VGZ9NyTHaUOVglzukr18tUapcg3x1xTfGxEH5YdAF1A==","signatures":[{"sig":"MEUCIQCGyafQxzaIo0lDSM/zWFloPu6Ckl7/fClYWJL2UUuLCgIgTE+68DiF34YTtiZ+eoISTVrw6t9JEHcZJQ6snZ2twe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQdBAAgcYZ0JJeApILZC3M+BeH8FoPiibafFUVtXpgygoEaVd5HhhY\r\nPdlwi5qSQYxGxv3WRBSOyg7jVkrdmlCRXzHnuaVgKU9rwcutgBzzfBRk+psQ\r\n/BGYawmcy2gSihxPjzrVFLf+ixLFTqv2jdj57EdgW5lrprCfY+ZW8Eeb658m\r\ncgDtvZxpIpNAU4av6dbIcLqOONHEYsIkAXn6WZm1tVsmypleyhU3SknVfyYB\r\ngqYinFOQjTksnQexPz2KNzI/3/V2V8442Vc1koFJ8FlaYTc0CiRE1moI66Y8\r\nn3g5tvAHP5YpYXh9nIwx40C1pEStG8TNh9JVfIcZj091HZYJGaqKI4v92q3+\r\ndfB/NaEGyAi+32rWyrQ8RMSSKthxpeJbsiRRcUNowmojttH0XlO18+uhxSJD\r\nFiAG+QKfa6/VpkSSfhqEdFoetxQMq6IGq8CxB1twsMM2JOEBJ44eF5RnqBAh\r\nzIbHpVoVNb4uDllo13eDTcBATzeo9WLrlzbSL4f96qQzDUdINzQapd5IUv7v\r\ndmrwHEWg/7W/4orKyiUCKft2Mz8Jit4bxq1Ji+3ogAK5aZawWV6RF6aCdTCp\r\nD/KxzgO1JVaQVpL9nTa42oHFcKxcNBAVX+YJAxlT2+LhIorLCNIYyL9qws7I\r\nVxGAQCIAGUmqiownud1jEvktpEkmrfoQkdo=\r\n=Se4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/density":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/tab-scroller":"14.0.0-canary.e58552c6e.0","@material/tab-indicator":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e58552c6e.0_1645207538736_0.7410176566424778","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/tab-bar","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.868793776.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f35886a808ae9e06e1f60f4b464fc98f79ff7e2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.868793776.0.tgz","fileCount":37,"integrity":"sha512-CsOCaE4h7VZ2o3llTjQvPrHYPWSxEmJXK2sAnDnW20bZi8pLdgOTwZ1Bkj0pOf9dXSY+xhnILuAc6IrJrq/daA==","signatures":[{"sig":"MEYCIQDqBQCJKRhXsjpeMIBaBjN8ywXawZeVBVP8ufDIHDavpwIhAO4kPlgzpg/gABzHIt7JXPpmpiDYTFB9fxQoBZUlVGZO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTu0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxNg//Xx7JwQ8yMdtAIjp4dgKkAjs+XTeXToflp0G3CQYL1ungbb4G\r\nivr9PhZOtdXkbuKTSemf1F//NtqlrD1gs5F6g1IGq5YlA3zW+HvSPzMlQmG3\r\nitpSlnZ0Mx+i1aiPXRBAjXvPm80pTrZ7N8A9WxN1FdVNcxfnv6IM92Dly5Pt\r\n2wZKaFdeM68fACpdx9n7pZDsCnT4v/lnotp1Q4Cylf/blJKLL5sYi9bdUvCE\r\n2/4E4w5lX5OPXa8zyVymVeUnorcMT/DoLuhMFsio2+PCsapbghnS6ic+kcnP\r\nxx8eebiZQzVbpKNpqmNqa9r15ORT1p/xfWolZnhX7JImBjuQ+QRPQGyC67+6\r\nJwEFZsgGVgPsp0GgFXZzVO4okwZm2zB3TA0NNpBN1gRdh3be7pi84zi2N86b\r\nfS2DLq3YuAITdvSa/Y9XrUfIQz3li5dts4C+tUCAW4OT6Qlle8w4ufKvo/Sq\r\nOSC2TaI6jovVlM+zZP8RrPpfg+LDbY16xBix+AkVAJotExa3PQCQaybKgfc1\r\nXC4jZQVxLKhaY5DGyWmMx4BXyeJr3mLqE+w4MhQpCV2dLE8hkJJlNtNxPMZW\r\nQQs5s2LBBy1uW5JSEXntOMCGC6RF3YuunajdDxrgm6H31t7UnHD0QdvOHt+Y\r\nShv/X8uTLDzPIDovzBP4bwE48FxJOLfjhgs=\r\n=qhBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/density":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/tab-scroller":"14.0.0-canary.868793776.0","@material/tab-indicator":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.868793776.0_1645558708760_0.6025246741516734","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/tab-bar","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.fdc37a445.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11874baae2296ee831d644d7fc4f5ed6b2960e59","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.fdc37a445.0.tgz","fileCount":37,"integrity":"sha512-j6J7vzK7h8EtNXyUWU2L4qtNty+PR2O7lRqP6fBnPjYMBzLaKpTksib/HmanAD+4NCuLmkQRkBiengtiWDZhjw==","signatures":[{"sig":"MEUCIQCAcTpSwBbFHvoceC0DbDQ9CDWLkfnP1MB2GaVvOwjviAIgEZDInPCT4zJJQiktSQCV8XWFpEuv392MIvYfCNMSooc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRjJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLHg/9FtTo+sabBEpWjqfZh+YtJCLzXjXIKw1c2DLHp4LJXzkcp3wE\r\nXKP6rIqwnctVoj4gW8frBspPQvz1xWwgEs3fXOkcRt80V4zXWRO1uVTfEkML\r\npUGn0g4y3O1M9Fc8pp7YtrQRPIeCGZhYupK+kLNNuYAkTKi1Twd/tGpiFKGC\r\nsGEuwPC2Un99x0UzLkpJy7KMTy9gKiPuEFPr3gmQXwD6oy9n82sI39kTIab5\r\n/XfX27rEEiFU9POnHN8B7WmGXY/uCSvUzRltENLSemEPS+CkGLiYRsP2Imx0\r\nJ3ayJtQDBQGKnh3oyqrOZl/+wj7DAjisIXwDC5FN9aK0QOo/USXDjLUQMvy2\r\n19BjrAi69PT8DTehCEM/pcXkf5Pm6NAsDWpXs4q19cOoeOtXU3WXjKfvVG4u\r\n+K9x7PClHBwRT19u2II6rQyAYdZ+NqCxTvkqEJG546tYyHKi737Bq5/0jk+u\r\n6JNy1lrAsFD0joUVpsHUYDBumFXKR77jOSv5y1pJX/LXt6CS+FQVTx/xqu/D\r\nsnPdofhvRGTl1qOcGgiHi5Y/4qS6d/fqKe6xgj15vmZ6F/YsO5mcWBObbtAv\r\nEIpj9/Ky7Cg5lygpstrDWYs8UK2woS0WTxgjpVN4AnvAOD4sIHudQH40u/E0\r\n16KtTUhLPQc1yn1zmcIRLAKmUSQct8LagJ0=\r\n=mr/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/density":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/tab-scroller":"14.0.0-canary.fdc37a445.0","@material/tab-indicator":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.fdc37a445.0_1646074057043_0.2847717626519748","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/tab-bar","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.43c7d87dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1487972d000416dfaddf8c92eb979c1899e4284","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.43c7d87dc.0.tgz","fileCount":37,"integrity":"sha512-0l4u4EH8AhYxgdAUuBaJ98S65VcXyKNF7AAdXL3d1wbKrYnTTutXJtfQgZbwukeEYzFHx/13A75XpUa+zwR2iQ==","signatures":[{"sig":"MEQCIBVWuJNEZzF1Wig5AjxI8XeZmPcmXEPj+8qGJvcjfnlTAiBhLPE39k5Rtgv6f9+GW5SupROZ6jNWgNXBNWmmbaMDVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHj0UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqddg/9FcWAB5Ir9L1u4AhMcjwnTqVFUERiJwOTecI9VpPyicjzRSom\r\ntIrasG3ImuAkUb3D796nYAjm7HlI2QpAGqqTq/SvrgVf9LiprkitNxqEpEBE\r\ntdccWjvo2En3sBIMKnoqS5l9ZCNzhywqkzGVvpC6iR1ZRMfRiog9n9i0e2Mj\r\nZ/sHIdh3QtDF6sbvUUmCqZWj2NEHpxYkiWGL1rkmuDRKPLpsFdMu4kYHVdbf\r\npl0EKfN/QGAWCERObo/Ntu489DVm/fM4yqB+VIm5sP6gDO2ov/t8OrHMp3Hg\r\na/ua/9rwh3EVC5lxPBbB3q6OjjtUXTPNfP6Bz5x9WoRtbYNJ+WtZc7pZ2llh\r\nqS+2xARgCvNdjegciEhvKSXW6bSMQ90RYfLAOLtiehBkjXzZnAggXYAYzWEb\r\n4O6+noBMWOzpsJc266lSUabxI+1eeGs1u/CKweHw0QLqRgS6ONaCMSrnTD0G\r\nxUK3ZERgMZ7WZIHdyID424lFoeE9YaMft6RSknzxVlceH3EiywSwhUHiTmLP\r\nj736jIoOUKifQhxLdckFFszeJWOLULuDNYfCUGiawIgRmsPBsFxzwWo+rAFc\r\nmxw0XUOTGiMxjP9k6EvrhU6UGHjNDXZKY5dnBAIZI+ziVutbOOS0jMrFt/pa\r\nhdEsioMmJZqx8FdOvQMexuLbV7YB9DPccYo=\r\n=h8nb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/density":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/tab-scroller":"14.0.0-canary.43c7d87dc.0","@material/tab-indicator":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.43c7d87dc.0_1646148883854_0.5917940532324628","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/tab-bar","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.23043acd0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63e598fbf27a192ad75cf036de9cea2c02f5fb25","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.23043acd0.0.tgz","fileCount":37,"integrity":"sha512-QJzks1dCDsJdc4VsFnF2rpw+3DRgNNNEE85fc9y6erOPA/a/poQbVtp5QSChCZ0p98CW93mPAiReFaUnPWxiwA==","signatures":[{"sig":"MEQCIBkyWPxr5cZ3hX8R12fdaf+n8XoxTt44mT0lFzKR7Z6DAiAVSFOodG5Bug9g2N+dc/7WvElho1FWOW+NGBG/H0gv5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9ODACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFxQ/5AMiBF/OWeVeWU17wtEIZB5hzqEVXccFAwTsPDWgJj3OKWw9X\r\nme/ZFa+/Sce8MF/u/2DVfoc/PLnOjICJuQcYG0pFpK/g7sk9kznNtEFBLmng\r\nhgAESZtv68XoPMTEpLZqLG9kWKigfEL43R33V2eAi+wqgMUk7oUaSis9Ycr3\r\n+gCg+vhruIL4K96aZ7fR+7rH2OLrmzI/DldYfcVLB4snRxhfFElvjhTCxE8f\r\nEog9ri5o5CLrZ4pBdjgxqj3CKQD1GhrhoXuJQkHYHBsrD/+OhhfkuKrKfa9E\r\n6Rwv5LII8gQDcsgZF9lYwnvvHDNIUiZUUXHu+AE/SNnYR/PIGMSWQtQmS/Vg\r\nNTEBoviNi8rnkrPdiJWgVnoKGE/AA7TmoeYwBomK4ljel7UH++OKPpE0NAqG\r\n2R1F4ape8n0ccTH/VntYB260A/vtK2nU3lZW/ust6dfRkVQw9VbGN8YXP9AX\r\ntDPs4ouw9gPhQHDdEuo9U2bJ8AytGujryIj5LgGdhDZtVOSD8NX2ULi0ZcKL\r\ni9QQGqkCHoJVv9jzq4Kshe2JykNLfyuE6zqP+pKJF0VuD2VpTht7xOkhlQXU\r\nrIeOP/ogrrpqmFPhz6kdy80zK8TWx3enT9F/2KYe2bX+LtfnrxnP3UI5T24s\r\ntUss6R9C4o9RTR6L1cJKxBOUTKKRaR4YL9w=\r\n=DwLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/density":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/tab-scroller":"14.0.0-canary.23043acd0.0","@material/tab-indicator":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.23043acd0.0_1646252930953_0.35274675084560614","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/tab-bar","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.6505e61c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9c47d6ce117bcf250f2a0eef8dad5ea40bdb2c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.6505e61c5.0.tgz","fileCount":37,"integrity":"sha512-Tcyk2xPjgsoHArdOUvs/+wzkdVJjsaacaHdf/x640MAQezbGwZnwpbKEUTU877DOKU3IW2BjN7qNGQb3Nx8ccA==","signatures":[{"sig":"MEUCIFNv3WmXIvhXsAEcSLhm3Nj79JLaSSDXmoFFvVohbMBhAiEAnYZhzrxY/75ZMqFyBXtDpDNox59tj/GfI1bhin6mUHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozAQ//Z1jHraeFGfqx1EOzS1A9gVdY16YT2gW91yhl5fRYdufdFH4E\r\nWlJVTFgT7uPHJXTi4GTuXAJX5xi6K4u0O7QFTKLVGczLKfJSwDovH1tFaBkF\r\n/5TaTnBAkAHrcBf8iVyoKzBP6aZsSX/qbOKrGaIUI62An5UQQhK/SMUS7B0/\r\ny+O33J7ynzKlcv12j7aN1+o6+ybRNrqHfeSqhEYU5pBlUIAZ6iP9fQKfwMoy\r\nhiuc8F7DYLkOzbGOxn1+cwVdLi4zLqHNGENLpBX588q1G/HtGKCPKWLB82LR\r\nNwztHOABGT/9/5WLNut42xNTYzZGYKp9PT/4k3A9Hv50qmLwq1CmbAZm9AFG\r\nNn2Gvk3jbZHcQF29wN1LaVqUGb+/IQ5rIagWZK0Dc+yFUiMWP+/miY2VxxT6\r\nXvZyI69UebBTTCQgEk42kkuJf/FOy0J2btITOb0SD2UFRvxgQn1wPFaOU2lK\r\nB9o2PdQEyxV4iZuw8xJFafyqj/OxuwOKy7zTXIKE51+ECq+RdmyIYlhIi+8e\r\nhD4qswrbdQqwXY2ulvcrfDl7z5bkJFvgyXQbFHBcOAoUktYu7OUUkyD0KLdP\r\nVG91Q/a/dnF0MXSOmo5zy+KHF8k+e0ZCu0k9/8iJ5GooNNTGFX19a7/0jCd2\r\nWT0HwbYNaIEBEYPJ41SL/C27k5fhJe5QHLM=\r\n=B4d1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/density":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/tab-scroller":"14.0.0-canary.6505e61c5.0","@material/tab-indicator":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.6505e61c5.0_1646337739564_0.4633109673733873","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/tab-bar","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.16c166154.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63977383d406392e31f4ddd7bb709b16daab5880","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.16c166154.0.tgz","fileCount":37,"integrity":"sha512-1Xa2V1nAFP1J6TghdbpgcE0Yytoby60CWYpMy1de8PKS1dQTYLtqWCq3JUiYG8t52Tiw4yP1pzx4ejRsMpg4rg==","signatures":[{"sig":"MEUCIG2OmSMrVDmAqo07LnudSni7XQaH6L9SBTT3tR9FjZG6AiEAtIpzEGtjeHGqovC5TzLbPxWw0Lc6cg9FhKIafytszYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+WEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzWw//adSI7st9PE09U+7MkGozwtMSl6aYigE8blakG7mQFYIBjex/\r\nbyDpfFO3v0H54I/moVdJYVcm0hBINJ1GmWf+rIRMu9VsUMadzyJgBsD1jzAh\r\n9PaXs9m08IPYAMevm2cHGfelcbHHE0l6UUGti6OZ18iShFuI9sGdvpJmY1w0\r\nUhe93bK+bJ40mjE5MdvIsZ6su6b3xjgjBQen2szup7+LIOE3RiTbUePMyoI/\r\nJiJcW/gJGN/oFadNJeq+lTVLP8au6Sz0nqVloeGv6RBJFuFvYfk9EiZehU9p\r\nBCdeoRgV5PCObZPi5L1FgpBX9FGwVDaIVqJzetPl6ABl3NCS3nPdNoOt1/Gx\r\nmPxKzkI7F/fo+0jxifMfQZ06rsVU83JOZhLYQtAi1fpVZFgXnC9u2SxQYlVt\r\nYLGq55cIbpn5GHN+o1aglUb58GYShJ0KbMUK9hDHopcDZ8KJvEAiXV5sn9T2\r\nixhXYtHwyaMaYhCsbYGoWmZ3fbgmmPHSv8iN94CUEhec3pfs8ezCaGfpFd8d\r\nkNXiwsxMZ/AstNAJ93ptmi+RRx1YohG20VcTqqCkCVyupxeMJZpmTgTffuAM\r\nqEf0gFbjVGLpVdjO9Ktq9oW2ffRCbNJaB2SRa8SCbm26o+RlyKfoqYiMzfEM\r\nGO4+dxMSJY8eb1idlg6+4CKT3JJocOlNyPw=\r\n=otjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/density":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/tab-scroller":"14.0.0-canary.16c166154.0","@material/tab-indicator":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.16c166154.0_1646781828091_0.7244188578500512","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/tab-bar","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.bdf1d3771.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d13165ed920e915670a05551a63996db5598235a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.bdf1d3771.0.tgz","fileCount":37,"integrity":"sha512-2NLpgpBkj2jWNbubUlJ1F65T6pc0ppEOoAFnCKeX/yN43hu9qnrzsVAmQgRc0ovXT/nV8uxQuPL0I7mFojIBSA==","signatures":[{"sig":"MEQCIBXh0G95yafqnHSNll9FUwOSBXJMHh0qYva++vRFvkHxAiALS7GKTOSNJPJt9JVCseL1znRY6sTA7tDPSvdSr7FP/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqENBAAhz6yd8dvjk5NoXJZv2exXIVT9Q9O4gNRpH6yT+E7+hee2R/8\r\nflzojybNQjvcYkyuLhG68J0gofs9WHweQjda2V7dmUEl9eom/LSlgezmHEVc\r\n8+mV32wRPjXwF7YLfC9QDS2ROoJgdWHFTquRVYSEVm4wu9IESpWt3m3CEC85\r\nieYe8TGpFaXSTrte+implvG/EVmIUP04hZlvYyLcUm74mI64Pr/2ha1ZND9D\r\neCoxW8M1jTnxfklcobcOIir8zDaAFpA4AAF1sZZ/qAieEtTu5BREoJeEE+Go\r\nhBEOOSw1raj61/daTsJ8GkV876GYW+Mrfop6sueNpquDM8qBmCCoIVapFdsf\r\npoCJAGBqQLiZkzW3dMToTce7MwMyYVJA68ptLxoFFHtkgij5Ax5n3pzIPwSD\r\nGjaNlaPpOC2xhLpsHVMYV/zBAO9J1Y0mc4gru4fg5ujSyertpy6xCVW30LaI\r\nhZP7EaS0lTYLUW8vIyoIaipxr1YwwgLsESG4dbWPcbrZ0J7nv0u5jJIitZ3d\r\n2tWO5VqqdDKOODjYVgpFq4rK/pi4aOplAHsKnKQwRCUDzlg4SBVLWLA4oEaz\r\nNKeqedlNwrvxEUmyS2n3Di8OkfMbFFqX3BF4Ib+om6SyV1hOZk+ZzRJtpcWW\r\nlPirHgYafavj7FTtNYSHQzDHRXyJ/32yIkg=\r\n=oBvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/density":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/tab-scroller":"14.0.0-canary.bdf1d3771.0","@material/tab-indicator":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.bdf1d3771.0_1647268210770_0.8708817131954822","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/tab-bar","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.cf4292778.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e2484b0e32ab79ce4abe55a99c0dddb1eaa1cab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.cf4292778.0.tgz","fileCount":37,"integrity":"sha512-S07hmJSb0DCzv862DSW4UjOFBuE4eYfaAKvXqElP+viKcJ+RWE4H2Xi2t96EUrep5h4OHD8KXQea1b/VbB09ZA==","signatures":[{"sig":"MEYCIQCdNK+JMulKadPif8cMWF4zWoHKhI5++qycQZ+5r650XQIhAMHMVXn1qORK37P+sWRyariESGpXy+4rvl0XIOlbK5o2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL95OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLPQ/8DjyOV9vL/dmVYpcVaMtJKqkibIfog9qBhn2bqlpa2FFe5/Sp\r\nIuimuJ7e2yhv4CmlSSAXhmam/GpTqWnCfdSxB1eaBaRV5RYCutAUnQAQ4hLU\r\nz19ITDe3WCqtPd39HY09WC8gZ/R/hLyOTj3sRB1PFUZp4snt8lSrO0wPHalr\r\n4FvuhyxYrME9gviaWwcn2QusJfkucMS5TriLRWlC4gDA+omchSFo45gRuU8C\r\nAZHeT2NJnkG1vOpkj9UUxwJITmuBuQuUPKpEZB2lYhQyJHNqgEahPN0PEGQ4\r\nXtizbdSJPvOx0+XBfFGKkMmV578zqnrzUASfEt72XU/2MR0rdSzFpnRTE4Zw\r\nSEAJdGNkQbsNdGb2y05LIFM9mocORVg1L66SzXI5PdsCDAXLVP4ngBzN0YZF\r\nJgxBeu3xAoKF+lW28LoLAFniUA07QgpcbZ3eOLqGVn+vXsRx2hBnQe6pmYHF\r\n2IOdTCNgevnQjGkCW7NTHIy5n+w9ausl9qED0hb/4WgUYJSWR34RZcaODC/v\r\nYSetiZceyfniolDp3eeqXT6C3W6ZGAtylynP/3l3Yd8OTLBlkWGZA/K1fPzs\r\nHE59X/YBY29ZL1qo2/yGnPrdPMIgwZqRsUMwLQs5XYMXATHkEhwvVC41f2is\r\nDydFqo5AHhaPqlsdaAd/GD9pTyWhmtd7SRQ=\r\n=Mij2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/density":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/tab-scroller":"14.0.0-canary.cf4292778.0","@material/tab-indicator":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.cf4292778.0_1647304270364_0.23323760823870598","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/tab-bar","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.bbd43e0e0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36a6c91c9d2cc42adee3c53b082a5ad52c3cd6c6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":37,"integrity":"sha512-96khj6qMXC5GBzplHFkW6w33mllEnE1ST5xa1MhyMFmhc10/JPdtgDqx2Fq3vAKApYmS1YgrGTrBMgHn2XnGxQ==","signatures":[{"sig":"MEYCIQDmpVMAUSUUIFkHZXI0RINYxQMTAc+IkUBKzV6epAuZOgIhAMWIzrQvR/65nAMc/pzKtiNPZst1vXRHzxlqE1+aiOxi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk3UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr02g//b9gU9NxnVSs2XMemPSn9QUSp+B1/0VyuVmPirsfrA0O/KDvF\r\nhZLuvZm25KrRwnSuco8YYpYlAb7KhKs+6yq38WNf7SU1hajxhS0UT0pH2s58\r\nCz1f/OfIXw8Ir9ChLVjE3i4MUF/T+VGtWuGfNvFlUznGLZnAdkVqd3OcEvzG\r\nTSmvEmaUjF2KHJld6ynpirt/w1ky1uySUOhwRKr7atoZ3+oyTvOvMDgXiWpx\r\nX1uHo8d0ZVfzCNoHvSDB4e6AjQbJqs0ghK9j+FDDRGmXlhy5jDUbqLYh0JKH\r\nv8NiXrQ0Xy90DbFjwSdGBihpnBT1VaJ+xdQ56BaS3InA/n0K7ZDU0yMQKqGP\r\nfzwt1srIjXgqdP/Uhk9UEaDm+9H+uN8gyfXzU5R2F7YQnYqQ6fEzb0tKl8UX\r\nqtqYUuA5F/V55XeZ3a42gqpxl7a8BWLUGkrjzizkgEXXZXCthezquB4B4/Z6\r\n/ncT9lf0n/xOh80OTv6Epsn52+X3bj+rQB1UVSl28TbmwxOIGpcPtSehsxWC\r\nNASbfjq9ALjzMO6G5SNIXLw4d+unh91XgRY8My7U6/9nYOsu44AGh0P/pRO0\r\n22UeE2R1WVvxrB29US8IImZxYSru48VP7r6RQUvE7NB1WM6EQbtWCVwQ4px3\r\n4Y+cxrXLt6M94NQpl6krqC7gXVXFCgSJJFg=\r\n=Nbv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/density":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/tab-scroller":"14.0.0-canary.bbd43e0e0.0","@material/tab-indicator":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.bbd43e0e0.0_1647463892245_0.2572660246121896","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/tab-bar","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.1b6afad86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afb0fd7a480ff7fdda19ee3de0e7338575aab287","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.1b6afad86.0.tgz","fileCount":37,"integrity":"sha512-0niVvhXhuv7WuiV0nlztYOciMbgeMTuruEF2zciuDbhEGo7q3ha5oKNB1amU90zlCSgKY8Z2bzLA7PjaNXA4wQ==","signatures":[{"sig":"MEQCIC0RhmvAqZkCoucsB4uyT+BbhojKBSlLPQeHTvIjLtgcAiA7xUaewNuVNzFvqAoVUrj7Qhrapc1jUuLH/pZiWnJwLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlEAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJFg//WskTG0Ay1ZeEvjL63tdvT1hrgKREtEE+Fj0U6oLK3yITNJYf\r\nSDvMVPyq3NAccHpFtk9vQMmRXtduk/6CnOFFCMwo45X8aD1XjFRujYKEh/1i\r\n/uEobWdZCthy9x9WkyrVE9h3dXc1ugBO0A2kFGSghMBRfdwdG9lGaOnLp3NA\r\nDUXeQzI6cwjF4LHSiaFzmuFTWqMbbGP6sb0jE0rpgWEvd8kNvWZO84EyJrR/\r\n7JCf6D9nocxWyXEmUAPWZFWdF03324UYf01v8k68g48kQ9HHORz4EY2BQmez\r\nt8rbTRLAj10s0EX1tZeIU7MQSRxsJCSNhKxVbGrFvfcphOMz9bgaj9OAcbBR\r\nI+Ofx0YkdZ46BoJMfDqwfRkbunJVhk2drMNsPaRuv6CYfkxnByTWkk0iHpsa\r\nQGsS98BLknykTIK/3xmGekkESgYlqyrrKHYq2VLng+cFQfede2phLrtyA5Wt\r\nmExOUAD0cIp8rT8L7Vjt+o+GTlsKlGuH8chJnBYmJZRcM1Ne4rpahIfdWmSi\r\nBigmVmTeGvU7zeUeocgwUellv1hPLkhtgPSRYIX2U31J/QzqJD6TPC2uELfh\r\nbg9Xl/pE217bc6ChX3xC7+s8yfDo11icPG6mTXrKpoIH++0X7nprCfZMByB8\r\ng2J/X8Gn+Y4WElGWaosooJQhdiTvA7Mg9Z0=\r\n=4M0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/density":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/tab-scroller":"14.0.0-canary.1b6afad86.0","@material/tab-indicator":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.1b6afad86.0_1647464703890_0.976874472670906","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/tab-bar","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.bdf9d4af9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8492ab949699a295729a780cf590abdc05850c10","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":37,"integrity":"sha512-brCcS/Okal6E1/mFHtujfvOKHW9tJ5H+NjJF3erR9iHMlS4Y7TNosipB4oXIwAnpOCHa9BiaI4/I8IDAiQOhOw==","signatures":[{"sig":"MEUCIQCsI9AC2RKsuK1oFklhFvkdtIbOm/KdQ3Ek4R9b8A37cwIgMp97xwN7pvaHXyri762xahitVb/t+YOdaa3slVIr2PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlRYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd1w//UBIVY1oHIA2wFs3ryVmzqSItaY3gy78HrgcM00tvxiZ/h3uD\r\nHExQSzPse5i1g+gtDXct2D5d/IRa1VUMyUGCIqQ40drav4UzCG+vxjKdj4X+\r\n1rxPvF8cdL0qDi8Mz9Lpj+AlHCqfY4OxV1gBAPasxhP1mGSkTfAnNMj5/OFj\r\nP+WcYJq2bWW9fWpka7D/JDLZi9Ks3nY8Gu2KzeCdPRxFLpVo+cBLDgmdFkto\r\nDFv2SYmqoz5Gh4cQpiJHX22HIH9VlJziIVGzWFTXAL0tBXV+RFisDaxY66vk\r\nAzhK+Sm4MoyPX5LsH+KEKGF2/Wf/h9lrCxPNBiHRD8tWUs+uNX8FfHE30Esc\r\np1pqN1ODqRrSxOOCFvUlv5Tnr+pJast3ZK/7I5TFw7K8tK19Fq+lnVRFutHW\r\nXXCvUJ56P/te3tuicQDcNY0WfvqFda+xEfI9vUbQIll2rNSMj4S2ZSTxJReC\r\nWvywYVRYSnLFIulvAeVOME3eHevkwAfYC7kBnIrDjNzWjPG/T5JThjy39XUT\r\nJP5Zr0XSTY3f3UufsShLiaNwIY3wSt2DgAgxJTjxzOs3zTTJ2ixrg3Sqex/U\r\nwdZbZE0M0dxUDfPG+7zcIwGqQOWLOHqqEISMh4M0kYW2FGccBKs2JbYUhbqy\r\nN4Pitg14M3DHqupQH9ewT+x8JaBsfJ4X660=\r\n=3sVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/density":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/tab-scroller":"14.0.0-canary.bdf9d4af9.0","@material/tab-indicator":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.bdf9d4af9.0_1647465560838_0.8015070283377448","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/tab-bar","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.32b391398.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e46fdc61144e557f1bc7cebd39c0ef5a24083dcd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.32b391398.0.tgz","fileCount":37,"integrity":"sha512-HBcTMjI37cOpi4h4B3oeBJmWI1ELUMIovwBMUr3hwCcBGoawAyBJ/1Wf9n6Cdt5HQuzP/h0IwngT5HmEQcg1BQ==","signatures":[{"sig":"MEUCIQCprS4pABseMzM1+7Sh4gUctq5ziZgQu9TMV6nILwaI5QIgeIK4sxK3jFjBldFabZXxY+pIlnaa1ocNjROBC0O4yjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3dZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDbA/8D6xkZirxwEq7r2Kt7CWJKJTs/FVtuArbDHPx7mxBfj/Slhk0\r\njPEIt4jaALmx22FlLWexozH8Oi9ZdiQGAF9GXzf/xa1pA9lNY57fpUl4GTJE\r\nnVhMHaODbF43AvpNF7sZ84THrMqj6+oWcGJEBB5T7+TeAQ1pgSzX1xbpO9LN\r\nCdIWiosHdcliNk5tieuIGxJ1TdYqDAEueWQRxzEZZobGw4J6M5WzU+YX7GJe\r\nWH5Fm/Pmq29XOx171HR+fxanb7TYDKEGrNpry9bKbWNH6KKYlyFcnxtXL0Xm\r\n+KqUmOPzKV4jbwNpRnqZ2fn3teqzVsA2Fw4pARk8uPeN7RJWjzQcU64E3eiZ\r\n743VBc+iwFS6tnfuV+0FqVxc+RJUbookKz2zbawLrR7h53N/YgQoXx+mWH/N\r\nuE2sImEpDXieFYEyCtBKi68N6h/LNQ5yRaP3Q0MRmI6qU5IVcErn/atvzlqO\r\npQEVl8t1mToKL9H/SgUZY5+Yag6h4w0GRvwGiCWp5g6k3ibCiVqrDhAI8e9L\r\ndtZ0HmHblwRrZ8AfeR5r74xf5DJhIfnTBVza8sd57gzWULu2eZpP5sO12dm+\r\nSRWg0FuIdRZ+lQHH6AaDOfQKJ9jyipQeI4xltoziezr4W4Zr42k6LuL02RXZ\r\ntVWv3nEFZvCzbGdMHUr0JveaN6I6AQf8Df0=\r\n=XsFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/density":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/tab-scroller":"14.0.0-canary.32b391398.0","@material/tab-indicator":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.32b391398.0_1647540056742_0.6323146085155289","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/tab-bar","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.ae8a6a3a3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f845d4ce3fece4e3b5da2668d857c6b3b8f7917f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":37,"integrity":"sha512-nDSEI7E3KLUmUSCoHCjqdDO4WWr0dTRqMDth3W3q5sRP5qoUQ8APRXEUBxekis5KVqcPXRuOg7X+3ufgG+pGUQ==","signatures":[{"sig":"MEYCIQCB2m+ZtOEJe80wXqRkJTSgTZTO1rHlIPiv8fzjq7I6HAIhAORVdWO+KYA2caB2n83D9o5WDbXy/o5i84wF6UOrRUST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLYMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruLRAAotNSzOD2wluq4OiFLsh2PJnhntFdk5wjSwKXQVolEOpgOjAw\r\n+SFFcdxzotHLf6ywe2s8ZMQEY3F58Tag9bY4JysA2IcrBM2TEB3IXgF5gMoX\r\nCJ3YhI2fT+uEF/jleHdY+Mv6eNQc6uHY+AHiPibNMSaJLXE7HnI1W5RcakaQ\r\nTjpgjz1qxGxosz19ekn8Ln/QctRqFbC/N+ibaqUoQFtkqJl13a/QmrPNM2Qc\r\n8u78v9anbzq91aP5ztNdrok9VFfKgt3HLflC99l6fu0OI2piTLZoUyfNYl2h\r\nDR5BsOp/lPXQq+8UiSPjl1pPq3yE9FecygH5iwG3cgwTzSHue8XkQikTStwJ\r\nTfSqdtdfeEJWt473TvT1XI8j8qypBq2wNl0MAy6CGkgkx6GZDiopFzjXSHWq\r\nUsAbjNjG1KCeUOxhUo7rFFvIMeo1l5QuwwV/eUjaVGmpV3jcwjbiMYe16kG2\r\nTA8ywyu272gVEO7j2ef1WPyWyZBDK/sDeBz/uBN0cUlEqJKmqfkQ/7FnsaTY\r\nQvPm2KbvfHabro6TjuN20EoJpi5nVRq3VB/fWmddBVeHtmmU+prUjfnoPuCT\r\nv8WK5889PjrNWJdFQEqnQWpT1D63vFlsFQ678fwVC269V/+cBySH9sawE8b8\r\n9RHof0mpE42Dc7w7XVWD+NmXEX5NKgQ1neg=\r\n=VmNW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/density":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/tab-scroller":"14.0.0-canary.ae8a6a3a3.0","@material/tab-indicator":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.ae8a6a3a3.0_1647621643993_0.008421247030094614","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/tab-bar","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.cbd9358a6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c21b449f7122fdd5ea66b550e2d3b2f5af5881f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.cbd9358a6.0.tgz","fileCount":37,"integrity":"sha512-JxniRTQDctj0Fdw6tS+2evtL8sexIF1JqUuKnsItO5tZczP5WvFgIZ3I1oTdaZ5y+HAQgyZnm/lAs8JqCMDuMQ==","signatures":[{"sig":"MEUCIQCHGkeG23yW/YSe2NL4aSwKdvskSDhU7pmL7mSv2dhMWAIgIoxiDd9ZwJebgL7RpWyl7adZ29XUv9LhP8gXxcljBck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa7Q/+PzKywryMBGa9UtUtMjJv4kU1F6iMbjaBb3lh4nnEejojwOEa\r\nesKj8PqxzeFgIGacaJDmnkYilPfeg+YUpUuxmw4KpI+aiDm40bdlp+1zvy05\r\n0AK9WI3AtAOIDQsEJjXoXX1cGrdKvenxxZ8C6cE07pwPTCZtv9cGvuZekqP3\r\nACAjXy42kKqoqPzRmL5S715kkSovO79I0MsG0dxIYhC0VmIcyoe9flqoT26D\r\nac8to5VCKabRTBS/3Lie6crDSH/fDo1vgpujOxOm/uhRIsExNk2xl1rI2t9v\r\norIx+HRCZ8dDJKdqSjgenrAPRf53Nn3fsNXylicopGtYtMzxbr1iXWAszmDZ\r\nXc9vFbTz3z4EzDo+eXjxMFuo31L8335D7n9Md5ehTrZRVYYeZrVDBbC/8ECq\r\n/V9a6h6tDgM+msSo1DXTFnXXW6UUfEVQjDWhM0sj1p07V5dOJ2WQhdJeWm/V\r\ngx1HNgpgULz2qysjkRn5tP84EYPCpIwds+qA2vtltax9LgAqd7E5GzdbzVeD\r\naf7ghSFuCcwW0wqa0zelMuXnAGMFuq8r3yhNiIwBBG6hLlY0DTfQWbcvdF4f\r\nuUK2nooDJR0xgTbMhUmBdyBWv1yGzGSq3zLU+Cy2LvE0qySTrfOhxwoHk8gr\r\ne5n45Bp+9GAdFKoGQ+MwRki7qAReWgtUEfQ=\r\n=tUL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/density":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/tab-scroller":"14.0.0-canary.cbd9358a6.0","@material/tab-indicator":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.cbd9358a6.0_1647644017082_0.33355958548710163","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/tab-bar","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.dcfe49c98.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b643613d2f6e771cfcd2fa15f2e499c0b9e35d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.dcfe49c98.0.tgz","fileCount":37,"integrity":"sha512-l96pJU5WaHB5v/szd2YdJWm+uNOgJuUp9esSlgMTs/H0Eriocg264y8JuIrnPBEcrqHpUazrX8OlKbcRpINRxQ==","signatures":[{"sig":"MEUCIQDX4mAvUZ0Hgc9HXWBzBknvFFJbzXiFYFYo9y+HmRJMUAIgHQUkZtAw+Tv2Wp/VKrIEOyOKScOBEfTn/A4Tnx9r4RA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMfMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6yw//W2orNnapk3vC+sJLDSlKas8JOWHK/AoxqfquW5BzdCTF7QHx\r\nadQY9jIgV5YTosG3QJZI16IhVlDd+BypiuUrhVk+nsOB9mUEmX7nWwMe6V8e\r\n4/VDLDBx8JP0cMCoTVRuxWDmUyFNdPG7PyNG2LmGdn9R3juV/dSI3GxHNiol\r\n2W2oDyET9r3C9uvNBo98IqiV421vheVfeGKcLGMcLqylYCYUlZe+E3sSo8/+\r\nFy3oKewW+8jRp9se7NWkFKz+0kTRWYTFt6q6UkUeVvvXuN/v47CPVxVnEU9f\r\nSmikBXZk858GxBl8agrmpLHcDs0kYbdTBg5bBtwo2e9mndVtC6+K/QaLwnB4\r\nbiczeDUz2TDaPjwNZMt8uw5y+6Zxybu1RjBrRTrvpMpbLxJ0p9m/Smbf/J3f\r\nXgK0y16AXKBI8N4bO6RN9olA0Pxxp7UB5mr0FCL1CWS71nfVHiUErtE85e46\r\nvXAHO+wQBhLHMu6FPx/EOY6NpKT065e0nXqlweynqcmjeWSDBcpG1Vr195id\r\n57ToiM+R+qW/CI2Dn17xyNhMpPtfuq8Be2as0Hm2q0oLgL2J9Y/1GlJVpKzB\r\nq8Rt1hAE6ZE+Xfu/z6E7COVDgWyno1hQh6zsRozXCcdWVK4mDoh8zB816SQY\r\nw93SF5K6VbwENucYprhc+MsayirTZHZyeSI=\r\n=QEgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/density":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/tab-scroller":"14.0.0-canary.dcfe49c98.0","@material/tab-indicator":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.dcfe49c98.0_1647888332721_0.12075979138637294","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/tab-bar","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.f31a833fa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da8777a60f821783a2951a39006bc34fe1087d5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.f31a833fa.0.tgz","fileCount":37,"integrity":"sha512-/1JoELSziWUXz+kWhoZCMhKzZd65gTO+AWHT06I5LeSEJ/M+O+iKk4SAWRuzC4YCjZ50CA0jXUNhgZDXxoIz0g==","signatures":[{"sig":"MEUCIHC0aXYk9QRIvhHku1rA2TY93AT5kRfhoDXVfwRAk4LmAiEA3oXxip4mh+JWNrPYUgisTaO/pdiAPdWi2P3FfdPV6ZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfiw//TgtkVHd1BwOeGTsLw3NQA0zmiiQ3GqvHr9KeZhRPVhvaiRMz\r\nPSxPUUujSBlMrDv/zVy/+akw16sDoizeY/M4mh8KHGbivRm3Q3nI3QM3ggyO\r\nPQQXrX93PCGuC7v2VQjEFnqLDcZkcjS7/oH8aioXBOPl0jLOFYEAvhmos61z\r\nWkdmtJ/e86+gzNE3Bl0HWp0iTuxVhzhQh8kl3nRf/mvQsZfKBopkIFY3mcmU\r\nBb8MX0i5b2zu8mxd8mGzgSmo7YCM3NLOxNq77+XtNYidnc3eOPoysyy5Md5X\r\n+gEUdXkPn96jSks3GFCLNxwRZy6RYsZf6aP0W8VHp8AArc0YX6E5/QP+sSqI\r\nXfm6u3QHOTbooCVSsIstF8EeMIrI9fc0bqq09IJcLgzPabwhq7NFOzBCXp3Y\r\neH6GLvu7yz7ZsTgxw7sVDkJa0RmTQAYdliP5EF1nEkobV72D+EjYzd2RVtDw\r\n5RoMy+YHu7yU7uW3PA5cviNZS3nUMyDj8Ug+gu3zchkCDK4wD03GF1pYYFrv\r\ncOvPxzAnJ3TBBI31bcLRa/GyrHku+pjOJBI3gWB4xTFDLFkx9LcJngF0Irtv\r\nNk9KAQPRqXzb350Yz3TNXQT/7V1Tly2UK8psr+nD8etPyK1reVoZq9U0A/Va\r\ncj3IEK+zJmXuM0cBcFFNcyDXwOChnjb0YOA=\r\n=bbY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/density":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/tab-scroller":"14.0.0-canary.f31a833fa.0","@material/tab-indicator":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.f31a833fa.0_1647996733845_0.9902299558178977","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.4b92e210a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2e47dc8fd3a626877d45792beef7452a21493fb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.4b92e210a.0.tgz","fileCount":37,"integrity":"sha512-KkWZewY1QwAytcZOfprGFDLIQ/iv7hcJD4uprjffLXMYnJ7BcScmDsbJl/h2f6K7/WmrKyRpEPst58z2GcBVDA==","signatures":[{"sig":"MEUCIQD1geKTsTPpXY06zn6E+koCc+fH0JymseLQZl7aUjrTUwIge3UIU++NpabIgp5CwdnmYC301QzBJlGtQpHKwE38qXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcKxAAkPRLeuSP/3L/sW8oti1gH/L8IdsWRTrNzs10KrK31L50wMNH\r\n3/U4jdLWkSwDBfabpG5m9c8QzIw6Orr20r5pX7PgrafwVODfTj27byO5luBV\r\nzYw8yLWw1OewdG8/lUrfKUsE7R1Gll4/+CIkMj0LUa1x0PoAKDyvhEaBD0ew\r\nYBELTq7oKsED6f4T70QiSpsmUbT3ejsnBX7tdD1spj1TNG26zyVQPsNd4gzd\r\nC+NTfyppJs+vFr7FGM0L5ELrif8XTf/CQ/qyIqeVJm7krDXSMIuaG4Ggrlfs\r\nTIDKeVwp42SCR9GCDHnJeqyqYFvXpEB30P4y8PLVUi+9TeIQCgo9VC6rBO7Z\r\nnNWdmtxy4R7ibB5ugNG1P0B9arb5Rpusq9UHZAZi+rSXq1WKkmD3WilI62XR\r\nc0bqEf3RyNBF6TvpJJ8Uguqq65u/L0FpIPGw9X4NA6YTIVusAf9TSoJaPoUh\r\nj/SlA4jeEV47jmc9m0+U1cqqpfjFbHguP0H425LnaVTwww2ZUELgkzbLgNB6\r\nv43cmPlfwkY6IOYNjkVJxzUQiMjS+E42aw6nE+dkVOLXWMNDZW4yh8cglETO\r\nvL8y3CdiUn7cBNmlGkIGAXIVstRd65KCSC0iqWVH9Ta2N0sP5B680HsvkaNP\r\nKOmGh1p6OBUNN5bNLJpB3cWCXFBM0sTCBus=\r\n=Zhbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/density":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/tab-scroller":"14.0.0-canary.4b92e210a.0","@material/tab-indicator":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.4b92e210a.0_1648153200946_0.531032389437851","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/tab-bar","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.a657abb61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcfd5ea8f538db2766bc126be73da71170d5df80","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.a657abb61.0.tgz","fileCount":37,"integrity":"sha512-iL8gqHZkIZKqTUNXETborQtZYtV+aDKBPEcmIABAZGPFIePnDxXbl2e2gRdQD6DJoY1cuPr5Xwtasl7SmRvk+A==","signatures":[{"sig":"MEQCIF4nkI23NyOdJXai+VgepshUoq+p056ZMkleCeb6HhkeAiAnUzU1Hh8IWp4By2ON56POOhbiE+k1VCGnwrzNrdJ9mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNd8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0VA//ZV0qCcSnvcsZ9aHpDI+oHbvxLWNFq7eK/yF+r/43yS1pR/b/\r\ncpaKxOZj0SfC0NgbrJoN5dlaqlmozq/XHDUw1Hul8NqSwdHOkrSHALVIY589\r\nJ3aY0DTbu8Iifeeo2czX9kwR9i8P9VMTyo6XDCj5ylTTbpl56PbSvKzisq7V\r\ntxC8e6OLnEfBO5koMNJC1ai3VNx9xAAcOUUmGLUjaGzqK+m/r/Q4cJgBjMtd\r\nB+cKeqnm8JK/Mg0izbc3/tXnRPwxcbdR8dWwgKsmcWkmL7bNje65sB65N7R+\r\nRtj0vx/sm4oGHBncUCwyvIQNGb796B+Xz2GOAuNQ0xmARy4VEHeZbyItv1dy\r\nR4WyhqXMwDjKtRRA3IAqRUjrOrVrVyE97qXEu90bJFS/j0TKvoMmbNrgPSeU\r\nCGKaQ8rSYQUh6qW/HKt1Q/MscKvWspyqfJiZCfPeb2nTZTl5O22ycEw7fRl2\r\n91zgXeUmrCfsp1N36ETlvKyudlW5rJdpmLv4Mxbb62MlY1cYqkQmKNYdoDrB\r\nQFYm1Gvfnz/L9rvDJ4PuYT6MxScHaIOFGttjQKjxoiQ2U8U3h08RSJPSJpcv\r\nuKb6ClphJPW6oUymPkVUydk8iWPqbJ/V5MlCcFfMWfPOSUkpa04/f9Pb2abE\r\niZ8HA0UFztRSH0AQVa/EpKev+kvNAakcU3s=\r\n=zI2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/density":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/tab-scroller":"14.0.0-canary.a657abb61.0","@material/tab-indicator":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.a657abb61.0_1648154492680_0.23358106554251834","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/tab-bar","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.443f63f50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a27dd097b303ee561b2c90b2d6a23c7bba83dc6c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.443f63f50.0.tgz","fileCount":37,"integrity":"sha512-Nuye9bClnM8v7K0FL6qa1nZGTWRoJfD1daFE7yGcQHgfBJ99JP8CAhArlLJAkTBdO8WHGdZTSAU5sB8JUpSIog==","signatures":[{"sig":"MEQCICW7Vok+18v1ujpJqe5e4NdzqQZNfrFRJBKlEobX+S1SAiAEkccOdkNPzjeLZtlWdSTQGAePWZrC8EAZLQSYFg9TLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkraACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBlw//T21Leqzwy53GSOavgg1aZQ9dTiYC/UIujtYTL2dJXT4nFypL\r\nUtJhrZHUeObKH4ji6mZleRyEdEB6BKPXmi4fmy4Kdd4StsT1Hr3wwGXudQHe\r\nk64M1H+e5pm8T25SnvL2vki7NlT4S8iCrINytjZGUslOQeqe7NV2ZahOm+T3\r\nrcj0BrGKxia0gIGVc95Sf4CVfWNg+ifu3ewUzMVKir2doUTreTNG8FYLarHg\r\niQPIKT398IgwJbmNrlknKM5zT4cJmg0/b/3YlimvNRKWhRfWhedeNzblK2WB\r\nVJkZ/Y5ba8c+mNd0BpC8dYcRn4bTqxB0znxBdSjxFa7tM3kQh5/mUxb+ajfo\r\n0vHEZEolQoQZc4/PK0tJuyeow6XTZH+kRC4M/rTrSZ+F7/8bK60RUpGIWC8j\r\nAUeB2JEJjb0RQhdKIz8no7cYKLB9UL1lYS3wbseIZYz+NJC7rvtaW9xH35u4\r\nQh7L330CXf1zOjOXiwqC77kUWMKcxL2VAMxZuDfbitQ3H4rqmeWfaNfpWFhb\r\n4COPpaKL/5CtiOOcd80wqZbvfLP13izhpudlAoG4vZiVYkAJCm38uKjKrIjk\r\nMYyR8DQqwMlFx473CwEpm0Lhe/WxeENz8nku33h7A52vhMwCrgcMVR6Rz+cB\r\nOzIv/c+RQzl+on+TPGw2fVq+fkfpKG/bhrg=\r\n=5Za3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/density":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/tab-scroller":"14.0.0-canary.443f63f50.0","@material/tab-indicator":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.443f63f50.0_1648249562700_0.5780264606895327","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/tab-bar","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.eb382f318.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751e4f8fe300c6b967f81f3825dabdf59f4a958f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.eb382f318.0.tgz","fileCount":37,"integrity":"sha512-vpvdPSUspTyUW2jniEaKdbaut6t0M/aXgARFFwMqJ2bgLdlHM1xvjyFLAqwPp9aimo6n+KXKdiyOWarcQwxwpw==","signatures":[{"sig":"MEYCIQD6I/aZtPctnUmdnQD1KjNVpyuswKJKt0OyU0UKNdCftwIhAP4SHxfG7UP9VfrHveJPVqGaHJ7jKH05vj4beI6yC7J7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0ObACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuRg/+PmUWEFbFB4t//ZwA+SN8qnynYyl695Tz04SM/WBTpT2A3tOa\r\ni+A3bJA04RcnViSTuLpLMuGWfEmUN3jf2UnNZyNoAfd3y11bDkNRpsco8T6X\r\nkkfPZXRL+y/CiyIqLQu2/JyX2q9PVau6G/6ClRviFOlP8WBjq0agCGw8Jb+U\r\ndIGOQ2NUA+rSvguKKqdKuoX2T/DcUbUmwY0YIXkCypwrOQyENj29yoWYupfZ\r\n8lsIoCZt9TxM453UqzIBBKQfxXXt94vrlmXyLoU9JNPGYMHt4eG8AS/dV7AV\r\nK6a/07uCTTxvC7JIL7JlnWmQg47A0Wr0tEHdGcmlkhZwQxpgm9k8ljYhoHlB\r\nMQH0iGpbhOXN/FyN0VfmYRZKj5tmHgztLuWf5lV41tDRFNQinWusN8P80Dy4\r\nhhJBjRE256ZbZjLRbHwVMXjR6Pd22F3m5VvXD1woKLZVRYrh+RdDUQyHYkGX\r\niX4Z/RNQxwtTts8KoRJtGKoLsa3Ey8V/IOye2ryUA/DrsuPXO4ufgIBoiYb+\r\nNxseDilQKqxfUtmyIQTGC3+KStDE9O7eNjuBQ+IWoILXv3zGP0SKDAkeQgU5\r\nmM8Qd2QidFqqMCVFr0kktjUvlbjcgDSPKazSLUnCUkWvI6s3qGUvusgt99y9\r\nzD/JT36o/YRemXwUOHr3v6fYgcdLvdKaN2E=\r\n=cOxc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/density":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/tab-scroller":"14.0.0-canary.eb382f318.0","@material/tab-indicator":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.eb382f318.0_1648575387355_0.5669202830288147","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/tab-bar","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.344d52823.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27a6da75130eb9d528506194d02df65db446fb33","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.344d52823.0.tgz","fileCount":37,"integrity":"sha512-2H1CTNxM6wMIL/rd1RHJ673N1XVrCstfGPJjwekj+edZ3zijHW0nGu+jDCGB2dveAL7oTgdlhEvMh/VfJZTIYA==","signatures":[{"sig":"MEUCIDHKXeS79hM4NVTs2/kW6HP1EI9wtxPEY3WVSecjLyLGAiEAn5fouEHGZ7F+4HticIOrhKsKXvDoU43LKkDhA/sk0qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1OeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpesBAAnAw33OGjy4wojY8Gwbz1NQJGCRZMjmaq2krw5lAlfCEz8MKv\r\nmfJ0lYkbSqIma2bFMRahLcCVTARt2IBF3I0FV3IQn2Via+GxcCW0g5CoAQMJ\r\n7ZRwBpLARFhavHsH1p9sbiVMo2Tb5xiNow0RSBRgE2GSe4/lN19BBw1lmPMj\r\nGnaelbcJq4eWg9ywjXHRjqbxSdBmA64J3Jgxa/ZETM0CZpz8Zu+VP8aRTUOL\r\naakc2Z8i0OB1KRo81etwZhzPLASiVt16RSWComWw8dhnmHc1iab56yv8m+qa\r\nJJfKhJjMPdxSqCfDKzkcqZjg97sEPGPLr4aFB0xbLhDsHs3xTtYQbz+zZtJf\r\nJoaODXXPP+0oswNtdsfFbviueJonCxIpDZ7ktZclZOEmP0qbaGis26EttyJ7\r\nVcqwdFw1l9U4AstvajW2Voi+Fr4SZHPz97HSTSId6n6cFB9kDL2vUWawtSVo\r\nMUNoPIfUniLLbSoxwJ8wKUlN0K5rIHs8VSvBTa2q1xqc4bFfZeSMaUF42I/+\r\nfKDPQFINxJMk5MLfR/gZMabtZj0LDE/D6Q4GS0fhnQYBJqc6T441kXc9TiBZ\r\nYfHen64TJqP9ra6zcaibzN/MaY9gDfqcYPmBBS/Hgtqap1HfJHY854KbUteW\r\nYFhoe4O2wnAS/SJR5XUXPTFHRaJlw+xRP+0=\r\n=Axww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/density":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/tab-scroller":"14.0.0-canary.344d52823.0","@material/tab-indicator":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.344d52823.0_1648579486767_0.5907401372226351","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/tab-bar","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.4e372fb49.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae3c301c60d43ed983e6b72601c8c1c96389bfc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.4e372fb49.0.tgz","fileCount":37,"integrity":"sha512-K8nCJqvOJ349Tv2uF2poYemTSaAwhrEaVEE6gIayiBa4kKM6In3EQ5HuplosupfH9/l71SsFHqrCx0YxUG6AVw==","signatures":[{"sig":"MEQCIH4R9rS/6mjs6boNCGYFzTY2OrOg3Gf4RDpwDdTRNoWbAiBf+pzzxlbOERmer5H+B2EVd20AeymmLIBH0hxOQ/gQIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0rTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0JA/+Pb9ptacM5reZI9xkEqBscOOklSvIOMqxoR2cT/fr9CqK7/GN\r\nH0w+hYhhvMGDP0J7b0JDtM2dYjgiN0q/guOcCG/BX9xqYF1FA184cIHLfZmH\r\nCBoPDwa9sokMgpQF7tcLiqcFVCP5nGI8FamALKR5OkUi8bIabx0Tu9R9ZPrp\r\nn0XQpr1OrhJAXXseo0L/PkkqaG3tiC3acbWGIwLOUD+3yX150pDqgcs6B3yp\r\nCvxcHR+MsbgqBhNRMBw5g6qLKGTT7Xsyvoes6dxhN4UoRwjWHYVVhphaoKk4\r\nL4agaEXgcEKBK/DmzCWuLXAogJhn2rExtKUiymaBGqEv6jMY/fZxpovgcSvW\r\n/OFRS5qHocnpf3ahhTcKCPQ8lcHNYx6CvbaBvl7w9K9cNSTBLpz8wYkBfE5w\r\nNJaSfwaAMi0AGc1g9Ol56XYD+JRRAPSC4kAtXX/QOxST3PuPTQJS2gYoY0RX\r\naR8SljyPL0AimyhbKRMex4fkPg/GRPAcn4Kkh11LaEXrJubJYutKC/Rux6fo\r\nIgNTcyPE8ZjgPzul/InyT/95SaVWaA5TmUGIFj6AXA7zvnBUn8ZyXbqte3c8\r\nkBLGIgo3aqqsSFQutV6NqtVc9kXAVzt7expkQC2FrCfj2Xf5tw+mTYS/haxh\r\njTIH1zoRIaACG7hFTNh7j65gEcCrzwr7eFo=\r\n=WWsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/density":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/tab-scroller":"14.0.0-canary.4e372fb49.0","@material/tab-indicator":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.4e372fb49.0_1649363666889_0.9508790244105927","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3e30054fb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccac11c52acab1182c61ec174370d8ee9890e8ff","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3e30054fb.0.tgz","fileCount":37,"integrity":"sha512-vOr4wfI9vUvZhXo/93ZmdPCoOwZNtmS2K9EJy8D5zSTdA6koNxxx5Lb0LAhjGfmr3O0uTYlc9Bj6TDLKMh5LcQ==","signatures":[{"sig":"MEUCIQDfJ2ifrBt1GZo+SpccVowzMTF6m5rNu0wVUSj9D3kzigIgCp9UiqcOuZyIri+z+Ps4da3Zddp1+TqDWmjSV9/k92M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0uTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpabg/+LxH2QBHxmtYR3fP5fFvRT0yRps4MUnRz4SQS4RaTt1aVEBka\r\nZ3wBlUVwwY4AjcHp/BN5PENwGt+qYDkHmjWvaytPbj+hs/T/EGqsFKQ1cxAO\r\nLtVYfJnfcLv4eqhEwWucwRB6dFXbzUxvPwkMJUwNGzgH8zqf0sXmjUMYSems\r\n3jARMrRKjFBpseli7C13Ipl/ur42sj0NPTsLhbXVuWds5X7e13YLatH49CoX\r\nKRVY+W/9jHxKuxAb3hUw9Pww+hTfAsPupZEGFda0cLGYkL5LKFvqlxFNtGhI\r\nRQqOQyPEAxTj6vydLX4RmSzwQOfkoDj0vqBwfnKnXPUBZCUxyaZTn//oWxs7\r\n78sAn/wSA75AvakmDJJltLmwW86Y1gh8j8hp/k20UitioN8OsGuOwahTKF1i\r\n0aFD7Gxh+QxkYJ3HHhHaBd7JklPHAyAq77HSglTopbuQh+s95c5c1ozOUl8u\r\n2eWGZ2ePsFZmCy+OaShxIee1MTV1/tdSf1sAb6QOfqf3MpFH0FFEpzadSmPs\r\nvNTVNyKrpJTvNBOcHEdMl287lAI8YFsXEEO89TzNFKvYiF1kpVTBkww7LEFq\r\nLxB8gVY9Mkg0rSWGsxO09DQ/wlKlaHtKt8b8ytjTdD3enTIAjUqnp9vPaw/g\r\nSMGBeGirMnEzWfBpmCuYRXNeqCsK7L9CGsM=\r\n=6Q5V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/density":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/tab-scroller":"14.0.0-canary.3e30054fb.0","@material/tab-indicator":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3e30054fb.0_1649888147340_0.42618167947763985","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/tab-bar","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.8c4da223a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a4142b256dc46192ae3d75408634786dc18704f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.8c4da223a.0.tgz","fileCount":37,"integrity":"sha512-f7zPnJgWxHkifmPVMZg9p0k7j6V7KBrzl3Xw2PI/W1N1ox68/GSY1VuTjIf8NOpo0aEh48kYbHc0D3PaBcsLcQ==","signatures":[{"sig":"MEYCIQCw55FqYbbsHtSWGLuAPNLct+0bjREsyF9kdAB9sl901gIhAN5y/0a23Bbs4Mf7aU8vjl4b0kNQVHDh5dW2VqKdv0Wi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtR2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8VBAAlCpIDtZQal8lqmAh42wvj8/k3yVjC6M+BGS976k9+8E2MW6Y\r\nzQRws1boyKJ1lBFHSteSdHCfi3byz/sYbNp0OdaQmb05XrTSXdnvt99VHH+v\r\nEpSy7eS/ATtksDnnuGpPYymQhGOw7Iv1rzQp015SgXFTAei/ZWaOKTWbpu08\r\nvGN0jdJ5w29n12Gu2BpHtNUtHq1v2+qfX5nLyrazTQ/08rhHEG/ndShZHhRT\r\nUcVXcFB8bG7Ze+Pl/WupqfwtTfL6+YfqJkF8Zqixc7+jt0GY2WAO+/K8I7Xf\r\n+ZLYPpt1rVkgw2zZmCIq96TKHpiXf/jYnSWIU7cwz3+Wj1FSA6X4y39cbmmT\r\nqrpPcf9rI0/m/K1HWNS9wUvl10jUrVopqhuYUZs7xtduND6/4c6rY2PIGK7U\r\noxJByzw/XsKGcxvNYhlOBPw7lDWKGbK/EnvnBKY+Myo6l0l39LwuMj0XkNCs\r\nxh7ClNONgO7rtxOOLTG9KVs9z6hA07mOooo7jWGYuatpaxvTKUhJXZLGomUQ\r\n9d+erAHEjTBT0RjalbQLMqdRiHZ6yE6uGxlMt6fBJPUzJH4W/AqbyMgQuxY5\r\n+zOY4UQ1F+VIM+HBCXcSp6tVFs4xbshKoe06N/yZV8tlds/xTBGyZdcxO7Ea\r\nO+WbeOVqaNtdUILmxgiuY4qy9ZYMQQbp80c=\r\n=2Hkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/density":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/tab-scroller":"14.0.0-canary.8c4da223a.0","@material/tab-indicator":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.8c4da223a.0_1650381942124_0.19767669526038922","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/tab-bar","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.7de8965cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6abcefbcc2437fe7fb355ce55cf1c9ddce18d3d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.7de8965cc.0.tgz","fileCount":37,"integrity":"sha512-WujMZASimVLWiCImYZDQGZRBO7UmCGpOpMe74G6+zlq1tBXz6ReoJrcOdFrDB+SduCZj6Q6vp9t5r1cdx4YKIA==","signatures":[{"sig":"MEUCICkX9AKCyT8aFhJaW3lmmyw0ufHhr1fv2ODtagEWCeZpAiEAmgBoNa1C7Wf536QHk7cJvUiKGYxAT07Wx0lMsXF+ZV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxqZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGAg/9HhTYjP3ColvWY2M2WZqmSX93YbDHoGuC2zteD22MjuTb59gM\r\nqpq4b/QJ109ucEmr11FoFCJSKBU8FgwnqnuitmV7PNc/qrHRQ6mdEjIw0jcJ\r\n5NY50tiN+hfxpoGmc42ZS83w94hOUVii1j/5Divef/mgEnA3rS9jBWMFsDOQ\r\nUBueo3D3ZzE1sVGnuRfnxxYX74LHuNi/d0NWp6zekcCHXTEowzdE/kPJl/BO\r\nEYozNtY9KP6wzKlnSBxLC+uRVpMDJlSboM3oMmmjK20GT9C7NufpmvTo6Cl/\r\nGcpqje5WU41vw/QS0NnNjOQVVj94+ZzzC0l4W5gfcRdjsd1GUJvSsZYa2UZu\r\n3IGGCtprrMWdnnRNzsKSWk5latSsYMFDeBGQJ8c3Xu/aysdl2+wEu2zsVWli\r\nCcJrb1jlDS8u9kPu65BrFujjofQEOkv+PAX2AiN80cLm2lM61ux+tDufWKO8\r\nHr5QqXHSHzDSG8UEThpwfmQCJKI4fK4K4ouBpSDO3/iSW7UFReTev202QWNQ\r\naDqAmbR/d5VmNN9XW4o5kkxfFpWEzEBfMDKwWgB/z0uRTGoXjvZESxiL1bU8\r\nxM5eNBgyzLM3WKp6n5Iow+iivXfARIYaXEvfuSvBvMBJpVgG6RTWzk32p4U8\r\njB8ITdrdHnVjQEaMYnXzX+0ePy/W1FKdO74=\r\n=GXqz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/density":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/tab-scroller":"14.0.0-canary.7de8965cc.0","@material/tab-indicator":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.7de8965cc.0_1650399897058_0.25448956814469303","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/tab-bar","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.641ed0851.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e9f8bb4b206d58c82b307af758be1a7444ae988","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.641ed0851.0.tgz","fileCount":37,"integrity":"sha512-TSMT7IRqaTqIzurPUX7QRoG2iWWQxvSXJCQDMAcs5e30T3tHVuU/WXzmfZzljc8yq2qPIwNzobmzVuhdFG4ItQ==","signatures":[{"sig":"MEUCICviagC1/iGTjth3zlXYxTjrSXkNjBgS+cBntP7DHro2AiEAogjI498d3mTL3FJ8oYi0ovdiR25bnR9KbyO7pL1hgAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPrg/+PdPNAghAXWm8a6jUi7wNZMGx6sQNjulTb9KiYZLlPVIonV9U\r\nsL4PI3z1R18qT3SwQif/e6nrLPr/zln0pQ7qVTor3/NSt3CVEG22PW1fcVeV\r\nYW1/jVFWJFB8OVJCKioYpB29jRuGXNdU/gLyQiwAzX5x9iJjEX2ixXJ3YcFn\r\nu+8KXdtOyL1DmzsnTg3Kqz+nMK9TVFUS/f6GySQVfVBcdHXE+KtCFi6f4Mlx\r\nc0edA7+F8Ku4A/SPqropZLC2EZ5U7I+EbxwBUYaFIsxrV9IWjfsze6Q0FKm4\r\nChaW4xjA1F2hNYOucVIaTEKTbsnqN8Ws82aj8JUDHPKz3Z0iI+XfnnEG+GM3\r\nQbCVxNp3oRFcIX+rVJZl6Zyt12G9wp+mWV7XoOjMQsBd0CBh7ML1ul76h0hx\r\nFVMaOG+2IsmqFuNDqMZ+Aw6X5qZhy0vCD9rYTjcF76sVo950sWc5IBG2EzRy\r\nqH3tL3wbd921BXK0DS/Oxzo+jh0fCUd+aV2cdlIkDYZJYezKlAqF6cmzeZKG\r\n8ZR7nw6QaJKjnEkSC9CpwDeWfWk4EjRLuAayyOwYpfEIpv4lfejKYkfe/UvA\r\nd28GJqQc7wi4Xy0uTN4q5dFoMBvpHDW+d6IeH0KaZ/eb1HxccBh9X+Y7niXs\r\nN6QEvb2bk+5jBLmXw8kdnEiWwdhW+iSNVck=\r\n=J0rr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/density":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/tab-scroller":"14.0.0-canary.641ed0851.0","@material/tab-indicator":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.641ed0851.0_1650470834720_0.8575991504050908","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/tab-bar","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.e88f83024.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3d73514f29df9b71d4cf9ca969393c18d07ac17","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.e88f83024.0.tgz","fileCount":37,"integrity":"sha512-gsTjEQ+Ag3o0DvZmUXZv+DWgrYDBIkRk7jlTrtdbL6u/Uf6rRufFb7YwPFimc7n9nRU72ZD9Vr2dk7fLkuDUsQ==","signatures":[{"sig":"MEUCIQCVuOImXSgz2GpcO0PjpFXIfCALvSKyURTjaH7HuQpM9AIgK62EDyeDWrrK0g2hcl7BkAftCPuW+ZFjGIno2ysWzVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEecACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmonrg/8D6z+/vOVsgVTRfSx0Ilvu5x42k0J5LFL3EMgHhNvR6OAqEox\r\n/16NQsyzQ41wyPvWZtAXZcjcqP8GSXbE8eqiP6AZjG9VJRzZX9CNjCvbu/5k\r\nEfYk/XgI0oeLO9/d0YqHLd140qPmhUtWFgF/qEcnQv9vDtqfFyc4Ja9g39pI\r\nPlBplX3YKv9F31jtcg34U86iNVyysfmjf2ULFvFBPzB0tnb6ZRIPmEBsyJo0\r\nVxCDsA63RFO2bc4MTGpzQVZr2Fc7PxcQr7/Ga8qPOixsFi4XCfwo+wrarzZw\r\nrc1elf5JCHQ24BPwF/fNRUMS1iaVcTkh1G++wl6d2QlJ4982Kc9p8yWtdvAM\r\nXP0hhBJ8dpjbRiiMj1g9gS67o68gD6lh4TM+8wqkUY/pL8Vv7XKn4XJpARVD\r\npLB8tWmDgFiBXHxJr83plls6QrKorxq6V7UQX3moXWqKIdaRHiSOOYkGnj8l\r\nI48dzyIJpMrF3lc0zj8C8C3q5YxlevM7rLcw9XOVmP2zUEHqgR/hWzVNQyqG\r\n9tLm/huZ8vKYwIYnhZQIjOJmFxjHYwu5rykqnxy0Kmo5E9LMrOZmIqxQuhzN\r\nf3Hm/lAKVroyA0htH4PsiaeOVx6fkH2jdkBQ05HOcHcWLnTbXS9mSj/nsN06\r\nisuyW/cC2vHVoo13X8Xme80Gk9bOAaDrv9Q=\r\n=QjoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/density":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/tab-scroller":"14.0.0-canary.e88f83024.0","@material/tab-indicator":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.e88f83024.0_1650476956396_0.2887704851214423","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/tab-bar","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.7321d6254.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f866f84f952b715b972c91806a88ffdcb8454c57","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.7321d6254.0.tgz","fileCount":37,"integrity":"sha512-Wkn0J1Wwd9ufqZIjmWOhzS39i6ZVhbCauy3quQ+ndz+2+fgKhzZi7FzefhtHTqvq5RuJqyiNGriX3pUmRd8EvA==","signatures":[{"sig":"MEUCIAsPYKYD7pdE6+PHnGZLwgQlqkdobLzxJ1CTFRc8tmN8AiEArm4her4HSzKqyW5jaT6ULJeYOgfYwjo2fP2fDWawK0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGlDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7JQ/+OVesTOQCQLHgNam5pIHwNYSih5MUcFgDKx0jITeP6Mxllfdk\r\nrLbCHupJu01v+hDghg9J+LSn5b+a+nFd8Hi44MukR2GTEK6Xmiym4YnQ2a14\r\nADdGFa5W4BsmgfuhQqgKkxNLQXUjq8UO7piazcP8Mc0wPswgDJl7AcWciTx6\r\n99H14dGm6HjmjEYmthXCZ/xRF1loYQtEBXQNkqP9Fpz5r5wl/wFeSWtFcT2p\r\nBMm2JInjdmmzhUOLdkfNy1xk6j6FJE5jir5Dxoyk1sNFHwtapyg+TtZd9PUj\r\nljZ8+xnCKdZxtXTju4PzC1o28FSvvCq4kVwV+g/1SqH2a6EatBJeL0n4g1NL\r\ngXBZNT7CoNthNOwReen3X9rfBUBcpdDOmu4wf7aVhcdv2JiEYMOVi+a8zQsv\r\nvlegyRvQc1TVzmwIJCXsr/BWogAywLpQqKCBuV3sh5hhbGy5oM8MtLxbqZIP\r\n0z7P58OhMcPbOoUaB2gX5rpEDmkJbmSwxktlMZjZwxcSCEYZ0U5wvaKwOX2M\r\nuHZEbd763N2tCjSSwWzJTJVh92z6iR7VQLDSkmJKjsKbJBQmzmKUMYaUTx3n\r\ny7FSf40cyf19T1yG39GOppsFvyI7JCitahytMPYQ6sECnO+1ROSn+QqqqGxm\r\nTEdi83t1JRbpixtwSZ9EQonQzR+0OkFSkqU=\r\n=m9co\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/density":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/tab-scroller":"14.0.0-canary.7321d6254.0","@material/tab-indicator":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.7321d6254.0_1650485571122_0.8640522095437542","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/tab-bar","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.3ab956515.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fabbd99438722dd086aa344b0e0a920f33b2f1e7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.3ab956515.0.tgz","fileCount":37,"integrity":"sha512-UTqR6guanxxcr1dfdR3iX9i3fNCqgH0tesoYAAsYat/XXIo2REnWpAW7/2FNi7VvhR2D43yAOxt2CokmoWR+EA==","signatures":[{"sig":"MEQCIHa9toIC8w8LV25OhddXkJDtTiROZI+a4N+h5EHCDpqKAiB+qw7E8esMbhExZMueBPayJc9Qby9USa2NkHZ2oEih4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrg/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm9w//W92s3fu7ygAWlcMWLkkxHiahrEYEzPEe7f0crwV/VmYyFchZ\r\nAZqpT3a7Yu5/5G97WLbtMn2GfD2umT8RDs1TVFy8cfcFdvqEUFG+b1ip6b5r\r\nJlxn+CoC2ipkI/2zfs1pVkUu5O9hsD/oh9sf8EcGzzBzwmtZ29/4y6x6V8oD\r\njJutDMPP74ve9aGn0blXMs4ZmfYatghJ4Dx+razlXGbTwqI9FDAvg0VxWYf2\r\nxJ5pqckkM/hxV5zhuvXHx/jXPi3sdD4bO4gfDVIoUYL05EkZHbVyPJALIFtd\r\nqH6NvtW1hVecznVoVnO2H7wYxlWCAKGIwV5vf0tS0XRj0o/R6azLzTg6qTf9\r\nH76s2g4a6TTGMe/eu2KUVdgG2+ntk4qfRCKwZ3duVGymcKuYNHvGrFrZJXQt\r\nCP5ct6jndKsY71TsgRp1yoZnPrQDbnBQTsIpgmSCE/eu8paCE4s3K854aHpY\r\nlJGzEkBBBDY8zSKGKr4OOeCBFvhtIEMY5b8Um6kp4BjFBGnwVYtUF3yKPW6x\r\ndWBoz5+mQKt3HzE3YGztEofTtJe0I0IhlhhtUEgiblb76faE8yZGUdb7mm9h\r\nea5+8TNjs9sOuVAq5onqhgSt69+nLXD9i3c5WV51XdJTAaGxpK3vAL1KlDBT\r\nB/U0zUudmnwwPPxDC3qneK1zx11t5nWEnes=\r\n=RAqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/density":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/tab-scroller":"14.0.0-canary.3ab956515.0","@material/tab-indicator":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.3ab956515.0_1650899007169_0.7614686622375437","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/tab-bar","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0-canary.53b3cad2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b20d27829f90dd3cbfd0a5434013f28a8299c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0-canary.53b3cad2f.0.tgz","fileCount":37,"integrity":"sha512-qLTxl0SWwSpsWBV5o7fMO4HaA3NSCTroM+qkUJYNq7lumMXxax8XP6+GvgbXXfsF1K6VqwSPJHnFt5g1kvtBOA==","signatures":[{"sig":"MEUCIQCasA+4cNc2AJsasFsKbtHljqNNl9wTo9XEQrCcPBWqPQIgbXz06+36NDCvBAbOBU2h1N9xxP5EcD2vqRf5uzF3x/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTtCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjTQ//XwupJ2k2z8jEfM0HLXT31fFrypQiztgsmBlutuBPikGiXy2M\r\n1Sv24AQRA7k4C4G1XhQl5aKwVSSsN/jRjgYGCgAXf21iloJ+SxeyuvITQ1/k\r\nwfPBPnezJknnLCT1MYU3ESs2bvovXhAhSPbeRerMmqE6+8A3NODhfVgwQT97\r\nbBjq9DB31DXyxocgnuwa0H5YCPpG60KIdrqZnXAE4D/Lvn9AGrjRnP80q8yJ\r\nEjq1J/7YgbJfkADv4nTZGRcPrta+D344PZnA4a2m9GCPQVtglEpPYEojgzb3\r\nhd9mAQ9DPgkzwN0srZNDaX+E9DZHJg5A7B7Gvhu9+gKzC2Q1YlMJau1ip3QR\r\nyofcCdltzBaTKWbtlXuGRuKFUHQAE2kD1YcPAa+406qsUvuY97/GR8A9jKpl\r\nCMnTkjqIwdDz/vIc+rTRMVTUhodF8pjHnxkjSdhJMVoNPCYX/O0+1Y2Imb0d\r\nB+/c/MxwEST4fXG/dCwQUcFRYAEbiGS4tWz3QxDs5Y9HY6x3qY6cQEonOv7W\r\nmEukz5JN+Udg0dK0Fkf/iAHf4dBT/9T4x4OsKWJO/IfrefYXZo/PQwTAXxB0\r\n9Sn0iHIdoWKU3IRAcZhcU0/uR9NVtVjCatIubwAgNknSHSZse7eK1DeUS9kx\r\ntQoI9wCnt/h3Ph6ST7b4v+grxXW2y7U3VtA=\r\n=HDkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/density":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/tab-scroller":"14.0.0-canary.53b3cad2f.0","@material/tab-indicator":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0-canary.53b3cad2f.0_1651063618357_0.8903874806226189","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/tab-bar","version":"14.0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@14.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2030bb19962669eebbe74b3ad3ea996d1cc53175","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-14.0.0.tgz","fileCount":36,"integrity":"sha512-G/UYEOIcljCHlkj3iCRGIz4zE9RVcsdC9wuOR6LE2rla6EGyT0x2psNlL0pIMROjXoB0HGda/gB90ovzKcbURA==","signatures":[{"sig":"MEQCIFikuKwef9khhNc3/af3/gWNBQWwvJ4mWtfBufiVHe9/AiBMghn5Yx6BZzoRzsxPTfhJAiWKhFiYyCNZ/FxoEYQDtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasd9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu5w//aKzY2MI1z0cvOB8b6gWlnUnsdxh3JPyhC9ijmmGvP8rfy/A0\r\nZDDvtk47JWNaHpoHujiEDXmc7En2xBtu+nSwcnTWxzdR1u0JbiP0dhHQ1l05\r\nd8f6oajIWVfQqvpSqgl6lMNvF4ktOE/qcy+CbBjfqtdjw1h1aostnNfDL0OL\r\nYNCJkTWjoTdanf9UlHLykg7ikYaOeFmNcKL+XbmeYNdrtKzpt5lPiH/cYpPa\r\n7torkxAqLsyPu/2UVcdJk1ikWBP+rLZoyD7varHt0KBbf9waHeWrciqNHEj3\r\nWxlKCMO29yBpF0BUDH+wa2n/ZJg60etDUFlINrnIzOW49OamdqPaIVA+dxUV\r\nlTrRNdwVpPsekx9KrsATaqvgJDBlLWZpIwHMQNaR8noiTvJvtvJ4MYMzRSUM\r\nFa+nhenXCirkUHJ+uQQYNYYjOqd17NQoXTEptlu6DnoRZ9eNVQu2Ce+rNLRU\r\nYIUDx8wpw7e78pV3v+nvJ07xWZOTgG4M24P6ZK2K7DKIavy4eK9QtACe88Kh\r\nvPV/k5LIcKFaVi1d7HeLQTYPOrobXoLC1YR1ukeOJcNlRscb/Hy1U8gxOLQg\r\nCS64aFOY5eRu+pqnc5BDo8Le3+Xs47/wiW5CNZym52m1aHhamhfr0h9bV0iJ\r\n2RKyqnrfhcFa0/Y6QZFbA0gq6TyU/Cd8r5I=\r\n=TTCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"^14.0.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/density":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/typography":"^14.0.0","@material/tab-scroller":"^14.0.0","@material/tab-indicator":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-bar_14.0.0_1651165053755_0.5994236966443043","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.432c815e5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d647af9ee966226ec3a392dfec725fc7481c89","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.432c815e5.0.tgz","fileCount":37,"integrity":"sha512-hLNCl1E3fgZItrs4ZsNw4VM1fSzKAAPGfE9s/tYW1/pe8lJP16iirfAuRr21J6LxFv73eFX5S3kQQf+8KGWdWQ==","signatures":[{"sig":"MEQCICn+fzK8hYsPUvypFIM2ZMa6iysbPG/SDeibawn7Jf+VAiBivl8WhIoKy/0NB38vd8j9AghXu826dfObxOlA14cD3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiase6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/QQ//VszQ0VCwwLoxyFvbIcFILLYTDLHKfaWOfgVprLsp4HMDGuNt\r\nQQSEl4vbK7dKob9s/DMOwgcQzi+3beq6XdIT4xYK8aMC+b8Qz/npor+ftNuB\r\nZgYvwFQEMhRAFmabF/uMKgMHzkaqmX3UaXOOFpdZjXB02wWI4WrTJ7k3f9fs\r\ndyawVpNwSEs67rxqBiwawtHx0VjY3WNcnmlDGN8lXZuLligTueNAsgsChRe1\r\nDPLVLz7czXxG0gHiRjHAzt9ykVe+z2ScE4Pnu+0OvjdWJsNepHPvCBqU6ubp\r\nL/msk9AymUFWEAxnDAKueOC1cE5NIxww+aALa2ICLe04/kqy56pH5Qpe5qDO\r\nzqVSeguhg/7MqM7XDzAii0hBpxA3znfIE3BeEywkqneT0He1FHvQDC1eIubV\r\nMLvuaYvEvoPFv2uqcKUbzmZ14uBNQ9OohkcjWZtDBAXef6wTKTHergu6ZXkY\r\ns6DB0+shXXgy+c/B0rQOEMmwpDGzxjZgOKTOZGQ9eoMMZQdMY4BXFyCr2Bdb\r\neejlSIG+MfoWVbrHed1qfYutbVubsugbX0JJhVVuBzLvOq31sgNByaAb4Kjz\r\nAj6UY8NEhJiTGIt2H6fYy/+2/dr3kmvFDxQXl+KMUJF7L3boqSMg+t1pSLnd\r\nZqmLIH4WQqFlZHYMLdarwpNVhKVY+NkdYZw=\r\n=OrXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/density":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/tab-scroller":"15.0.0-canary.432c815e5.0","@material/tab-indicator":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.432c815e5.0_1651165113915_0.6512045600898335","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a0f01f669.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd81b0cc65890b187135a27db110aa3e360a252","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a0f01f669.0.tgz","fileCount":37,"integrity":"sha512-XArdiiwd6trkC9KVAs73TxhBGuJkk26z/2iW7m8VgQnbki3a+Q2zIviipGDVYsspCbAjsEulxGTNBi+JWYC0Dw==","signatures":[{"sig":"MEUCIQD1aDk5PX1T5y8i4Ks7kNytr6+WrisASycUsLSmNO6/zAIgKook1qBqaLulRrUawJFAfaOLOfNqjrjupby8FEh1UgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYIOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkNg//blomTe7LfuKXWQgdO9flSrA7ZOtOmiHzzE7T6ek4XyFy/8dA\r\nwjELhpZ4yKF5vl2OMlvQh+8mVtp3YzWDK7HtVc2t1yyGtPCcIBUcPqZoNdu2\r\nOmP4bo+hdGjkFogzpAouu7c2eVaxHiZ0K5fnywRRY0in8GhNAp/yApGAvQvb\r\nKKyowTX1NR/R7kTbJSCbjRbVW8q6nWNC8QXaibBXc9hXUj0o3cnTItqZTJT6\r\n8ptIV1HCSovNhbMAq9frunpbaUWZ7Y3PytWe+L6Nkp6JPbUTub7GI0d8lfd5\r\nvTQ08mCNTcX9/8gzml+DMSX1Lb/Fmeg07fmmgUHD+3CoSB0leRj137BchzpL\r\nQXj/pqYDn93CeO6OarETdBFaMkfySS7qyYAZOtYMy/J32+mmbmwMRlY8QAdD\r\nFmiZXq5WqDh6+JxPa0h26ke4lUc/00/ZQkCBkhosnNjNqWoB4SviSYFrS1A9\r\nl1NmmYtFpnR+NfgU5MwVE3vMkLTPacDr8n+5J5WThtjcP8ZQsRX3TrO6T2Np\r\nsCSm4HwTaXLVhb6YanFCprwLc/lyQs6pVo677U4Z/rMeclPM0I1+aNKpVxZ2\r\nmvgcJ9R02YFOQw1FPr52Jjy+pHD0r08+ZwrDDjMhAk0XqkGDShWzkq/Xe8Ee\r\nKq9QdMYiNbCkCYJvb4Nzm+avr4IXHVn/5Qo=\r\n=KXms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/density":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/tab-scroller":"15.0.0-canary.a0f01f669.0","@material/tab-indicator":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a0f01f669.0_1651868174065_0.0012566238717219846","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.276cb39a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de026d15b36ba31c6784df0544f65c7d1cd15bee","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.276cb39a4.0.tgz","fileCount":37,"integrity":"sha512-5mBfXyg2tlA7wGDx/eAENzvjPqigd2YLEsmYQ1EQpP4p4bLahF32UfzbhtIl5nY9r0JP1yE9QopQjZjdIT4yxg==","signatures":[{"sig":"MEUCIQCkEcP3TSCpP8TB5MBEOufm7Jj1ceVRYIJHSQGc/OZ/qQIgUVpXMoXzZwymuKNFbuyV5c6cHm6MveduLj4RFgADS00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZQQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3ew/9EqciG3BtJWMpM6niTEPGMQCCHPiXgSHB9TMis5df4Tv15bbJ\r\ns7wv2aN3NorBX75LjkNTY1H98U/Ime2c7pLqSiapzbgizzeyUazrR+Bhsq32\r\n+mn2dYVLNR/H5qXpK6lAWC6uR8Xtodhy8Dpn99NTHuDif35omXQ0/K//IjQq\r\ne+rMW+caRK6bO+IvLG/J0RkQ1Y2BpcYTRht7ycjzJ1ueS4rFE/hH9UrOJmTM\r\nTyW8/gEQE98RhfvWYGuNUYJVYjI5t7bBnjH8tO0YVlFWe0On3DkZChBhBMk9\r\nnZPMAPsvVNZERmKOz3Dm+5oAuIuzC3VWSuwcuvMn8GKXjhr4gjZtZY9UQZ/b\r\n86z1QVnCL9v5K0oZKSXSWb3V/T8gqY6Ckn/d+kXPDieDaynMuhi2ujm8BLYa\r\nfikyYOZQKid2tb9VhUrAJGRPF11sUgG27aYxjnrsJxiLb/8po3MSqvbxY2ez\r\nGMl2wzqYBCBMiSsKV4f3ArWwRu2RWMcRLfBnbOGv/SxhBZ6hLpO2544bZ17A\r\ndaFxWmxMOJ/YxzgKN6Shksl6mw5MjTlqYNxFhyNm+b1WCcbFe6rswHaFP5JF\r\nIXpqvtrXk3cMPehAfCOZGgnutu05XH1I9FPxydnRg+lh+OfbGSkv4aSflt+Z\r\ns5Hsedzhz/qGI6z5/n3mE1G51gFXzwqlmmM=\r\n=L7Rh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/density":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/tab-scroller":"15.0.0-canary.276cb39a4.0","@material/tab-indicator":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.276cb39a4.0_1651872784377_0.6270646398469006","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4fe98ed70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e2209866a3d23d125c44be3312a56a35d68f71","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4fe98ed70.0.tgz","fileCount":37,"integrity":"sha512-3werCu+5pEe0ug0Wys/qU3LyYke191vVz2U72Wjpou+Z5Q0Q0AASRy0BRb06cweHhRn8tP7bRhS/PlzYXk20Hw==","signatures":[{"sig":"MEYCIQDv/XcwEkLNsZoigRAJzB4wkbaW3vQnmjkqN5KFsjs1fgIhAJJ2dX0jDjEFnM8cwqfdsujnL/LDE+gGczHkwDNO0plH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+AA/+IQDlWbWfqJ0RhsaydDKGgvdSkF7CSJlyA57ts78HTKxRwC64\r\nQCmMiH6peQJnlRjZiAWoegkqDDW40w5QgEr2xIs7yZrn23fcds4OpmZOLnJ7\r\nh/GPLh4nP/PvFfQFzoruElt2Ws39oUWthm6ZIr5uPiYp62gi3CyuFx1GQz5L\r\nbzceNP4F61UPOqBAA3RtaLtVfbYniL+ROdoKeMN7L0C3Vt6BVhE2bmeO+rjU\r\nedZrU0/GELvQRZtMpgzSxWWJDBxrXrhcBCVHWl3t0HLNJ5KF6sMWwJL4TB4v\r\nQFBxuXV1mBfbqY2Ie2NXCVAqco0w1PKal2efD6ZtDaRufoIpTIiryeQwP7eZ\r\n/F90nfNKLqWxCZnHp5StxHh/qvwtdFEwdaji7vqEXkGAFsz2Vjggvk9eqLIk\r\nldPu0Q3I6+u0Pc0yBHE4dvugDsJocIY0eJbMxFDJg0Ck4JGHcJ3r30VAsdee\r\nzDza0NbqKnhA7F97ZIp0ex9khcgWyzDZ4UZw4+NNV4wfiI6lfXkQDBsgs2DT\r\n07m3q60icdhKvvWsegiRai9cfKjQl9vHGgZrOaapQhQVVXFgQ2plCnWBjIzM\r\nZFAbR2RHleV1t77jQZEv+bzP3y5x8u0XuMKtMao8CPS9ev4XpUqUUH/wSARw\r\njc2vFlUVWxqX4t5snLcr1C03SBMJKO9Q8js=\r\n=JL/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/density":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/tab-scroller":"15.0.0-canary.4fe98ed70.0","@material/tab-indicator":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4fe98ed70.0_1651874252247_0.8585561774687616","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.58b130a3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afad48e0a75ce82ba98438921f6ae26f139acb38","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.58b130a3d.0.tgz","fileCount":37,"integrity":"sha512-7s4jCI0oxIlGvO8i70mAYPRGwjy9QmXfUk1cCUim8bdxwvkvzJynfmTepYy8+u+ebtSh5fe8DRpejScSp+xfEQ==","signatures":[{"sig":"MEUCIQCJz/wsaPzGEoTq2XfKaoZRnzbnwPdQbUecBtKIObvX5wIgfxzHL8bpjSZN82kwfbbL1yQlvHgN4zTzzCZld3QUMzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZpXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN8A//cwzGj1tEKoLV7V24cz38Pjwf92zIeyp6e/Bt9QdHi/14x3WW\r\nFcvgrF3UaT+LiW6E0gjfHBO6z6uM+tR4r4KSteA0UMrqvmH26XWmkxjNkmP+\r\n3rhnx4jewcIzK6HXGVAi8BOplXrReZSwzVbJi01j+OgvCZ91JYtd1PJy2U7v\r\nE26N00lRVRPU4xe+jV3vvkyGWM0ZOOojK8AH8xelMWPfLKgq9D6VU+pJuef5\r\nEC6oN2ah8fPDl9Bbdyv+ur7DH2uZReLXIcVWJ6u/HEL3F5hQxv6xvy+L33eW\r\nzpxolUHEbKorh1ytYsXKA/E8FQozEhvBnEUf2/2a+Pxh/VS5+yOtMAh/344F\r\ngT8otYgy8Tz6Fqgx4Dq3bjCVXMBkXGSU908AVNsVjZ+4eBmusVSeO5Ko5xp7\r\n3wq9CL/fYhxaU4KiXMg6e6nYhSFYBTZUjgV7iALR0zHSvqZ8/CcNsYatPL5F\r\nWrjd31VlJoRdYZVAXhz9+Q3LeaMYc6gtnjQjOAodXkEbkHz6ybgm8Ba51TFR\r\nYPT9pnIq+GnGTU+VZlltFVGXTXBMeQjLxqsYwOcqSpovFaQBYY6fk2PTmA1n\r\neEKJy3KVWWlE67KKJ6GcZLqCl0h3vOz3od/MW6N5Ds3+g0XGF970D/S6OiNX\r\nr5E0q7QN0EbGarKQCwtOClEJbuedrwl/XiQ=\r\n=D7S8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/density":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/tab-scroller":"15.0.0-canary.58b130a3d.0","@material/tab-indicator":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.58b130a3d.0_1651874391526_0.2634740127457291","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ae278a2fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e394c8d9a45b49239d19659200d94dcd47c0a00d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ae278a2fe.0.tgz","fileCount":37,"integrity":"sha512-+G9FM7JBbfRSc9Y+dTbGJ+YjIp4D0BUB9NZyKyZ9ARwI6Dz5tXW5TQ4oOnFxD+rw0fW2PTpso03rKJ+LpXGdlQ==","signatures":[{"sig":"MEUCIQCzihjCKYg9RiTmbg0Cn5p6qBqQi9PYJRVXj/QJQSgJ7AIgWl8qZPIU8w1hUrA86x3B1GwgCWu74ydm7g04Caj1qAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTK5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/ug//RAgpupWdaonQV4Ad+R8QqwEW7ObHMpOR7Ws/z3sEwx2UWAmb\r\nYGNL1uRyySYevCvKH3jJlvEFtiMX/3I/DXNwJTcZKUEOuBNA9BMPYKDM/cjz\r\nWU7lxBpsmdNkwf+A989f4k9pNh/AsBhuUL/MFtlSi4saLaJlz/uT5cikDyy+\r\nPc72aY9ckywSPycLT91juH/V1G1ww9NYdvCuG+7ZXLvck7ztrFm9nrc7+oD7\r\nAoev9jKmVqAvIXi7JQyNaHZMWpVkUe4oDk9oR+IouvCmAypYlaizF57CSkPP\r\n4l2WHmd3K3Ic7+YrB2gA0beehmgpDSbvGYF9XfPbNPhNCv8T1mPlM382xSwB\r\nv7JEyMREXh257EQFkNhXWmdLNog1swU0KU5a8YMuaEKQ1KhW1fI8meC/Vt/W\r\n2DYf6fVjBzG6jTiaRY6/b5ZWcaN9STy56u+JH6z62mLPu2jWwvhXty+H5JJI\r\n5nKbp8sHqmeGBVFWSgXUZ71pl6wnsxzJvmMQL705NlY7zufOHnGzzrDtgRTd\r\nnHzd+IvQ6aoH+TlZFG3rUX7NvK9LRDPEt1xvG/3foj/hs/ygFkkjBQiQtxii\r\nxBeYsHNaV70HoAP2Sb+yaouGhJKZtROUa6pkqCyv0auCf97SHKdD7yGkbIsy\r\ncffeYh2Wh8W+Nc+p1fn9YZlCnxdXCnD7cq8=\r\n=nZ6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/density":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/tab-scroller":"15.0.0-canary.ae278a2fe.0","@material/tab-indicator":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ae278a2fe.0_1652110008976_0.319231659488457","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bebf5bfdf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39c4634b520ab79af86464f4ecae4447c11af486","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":37,"integrity":"sha512-rHPkaDvmHHV9GNtA3GZWVBaNkV3M0Eepkf0+1G3mqsqcOIjrSF9rp2TSdsp3D7tZxvMMs3yRzfRgrixQybULJA==","signatures":[{"sig":"MEYCIQCCwAFY7kEcYzz4nXZXOd16EertGLu2DUWV52kVru+8mwIhAMnBDbIE2CP6TkkIa9B6wn0nYnv4ccLVxm2Pa3Ab26LB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnjQ//XhPyWFI/1As5EZQ61a98dXJ3ispA9qFfr3P3v4vn30Lo9+1/\r\ni3LFpb76BY+kxKnWVWkHo0My6ryLJ4vO5nZ7W5CFyz/G5D70PVVj4XpPPlj4\r\nrtwNSp9Ihf/g9Ugncre6cXdjqIJVKHqTSqUg3b477Nk04kezAbhGqUKSTLPK\r\n6CRyb/0XX08H6SnvVoZqNprPLGjMr4VUtSGajTn719HuGYJV0m4liUcqvc6I\r\n4GauUQU1J3bZf2cJ40UJFclgTi5bK2W55QXgUDr9vOfdA9VQm2MROYIT+kO1\r\nIp4WtMm2fXtiByE4//xK4oqNj9eyz6zZ5aPYsPiyCzaHP4XxS5LV+NkQj/tY\r\nAB0C1Cbd+VbdQEld9EyCIDqOhLNBx79RVoX978mZ+H8IetlxXZkVyGo6EV5F\r\nFYg7s85mon4jB8tWVv5ZnEoUDhaLw3waNS+B8Lu/qjjfXL1NQ/FazoH8xePy\r\nLKSGcUZAjPR4dY3OiSRw22+wowgTbdBVH/RIrjPgdDHOcNCUK3W8aZ+NsL9y\r\nW8h7RsmWWXi31bK5mgDJmYu7C/CGobKKViraTMT0E5LnWHZj64pLkAigLEzY\r\nQ3z86thFRIh9MBUP8RqVAV/xuivH2rr9K0ftdAOxvxiyv3dyB9X4yYhIGBQL\r\neBgxGrsCufVzUayO7eESDi0ojitHMyVtA2g=\r\n=syAB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/density":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/tab-scroller":"15.0.0-canary.bebf5bfdf.0","@material/tab-indicator":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bebf5bfdf.0_1652236914022_0.7909887485174081","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e6072cd6a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ed144f0fdc6b496efc9abc274c13583d31d3046","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e6072cd6a.0.tgz","fileCount":37,"integrity":"sha512-UPMRvut1YC+J+T9BbeT5T4PwLeU4X6icYFs8pC7P7UG7Hck9KLPhAbYAeGQO/p0pvm7iaSUrSezkAkYhorskKQ==","signatures":[{"sig":"MEUCIQC3xnctNsB+DnwqL/fXt7xlQtQCldcqgkLnXxn0oeFWeAIgOEVmlabPDNLJLR9lJbJIX4BRWsmRkuU1eX45wSD4jjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBp2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodxBAAm20bJeVFJ712jzdEakx9mgCJyixKACE6P7ypTKmiwU4caFod\r\nSOZ45gUZNch7r+b7XaWNbsX7Attj6qjzVeHvMEaIcC+sLT0qEziBOmm1Zbdg\r\nUrWHc2B9DBPL4W12rGYdgducGhZ4okZDknXgv3qVJprWHxVXjHiaiEpSo/JZ\r\nuygI8/mYb4jSHkC/SdP3UmE50zr8FpKxG+sNU3pDnvvPuSH/5efZzK54/3wm\r\nlqVLQrvMnGk0c5vBG+69FfBb/Xcg1GU0WPn9zxtfbQFCNRCTkZDwDG6gFyRu\r\nYfFRxHViwhDBtjt2ZJbQlHg7nCj1gq8DOWDySMh2GjOfAymK956GYEBdlNSe\r\nmVvFTM2bwz9GmPUA87azJf+TT9bmhLEQPLW5hUuqVQa4j6W8pN9R5BrIj6A1\r\nmjxMfmVSQBqZPZt2W3wumK8OdueGeiPSFtkwTD3pWTqjwP6/fFwPybugpyYX\r\n+QJAyN1gxMgGJeLKq2m6VRC9PlAMhZn1Ot8DU3uXDtB3X61fXe+/wJ7GJR5d\r\nYF4eNnZhc7UyUqMEMXkykiEE1w5htDq6xWNfVzsRmfZU+QtJy0to9qDgS/HT\r\nQ/4fO42DPq71sVMyMWQaZCYn1CSEZAqzdmafdV/tegOmU+f5GtAYCdhJ7XL3\r\nqkTgT9AmDGIooAoZKyRs5nPCoerI7rqr730=\r\n=1U1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/density":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/tab-scroller":"15.0.0-canary.e6072cd6a.0","@material/tab-indicator":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e6072cd6a.0_1652300406330_0.05427749933666526","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5b40eb988.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c9d605f58ed883c16cd632369c4aae12246408","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5b40eb988.0.tgz","fileCount":37,"integrity":"sha512-D0sxt1mg+tkDElV/FcmI5M5Zi5oF4B7dzcstPcjRLmOR/NLbv+T0Glimde0W8Z7MxixEbMyKpgJU5lR8vXKhew==","signatures":[{"sig":"MEUCIEMem5XFQVACj9E6AjIqghdJQNH/GW6b/y84IQhfP47VAiEAxLPJCf8VDlJMufWjjSLXxhUdR6BmkAZE712VetL4ITQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHTfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8gBAAl7iEqNTgeTTHLXpWIB1RRduuG6zUNfCaUiXXf3wTFpK6XDp6\r\nIcYIf3pd0WmgJjPm73KWkYebNIK1J6fxunjTFK81xqrGu6wel4oJRTYfCcds\r\nLJ9sXjpvzfgIIOQGkRUqMozhzx73kzdajKLOB7CMf1MOQ3TjO15tesgM9N+z\r\n5aiUQgUw00/sueTibk/e+Iqmg9q29MtJAU8NjOBMrnMsWJBai4ZyqcPvZzLV\r\nZPME7v1RnJ4BSKWlpvmre32fAp1f7O6w3trgVewYf0CUQHjN6qB0xfW8QSP/\r\nlVH6pioEMFQ1VWdvHRmbkhfY22pse3GpSnZyERV7CsZEL1kpaLqFvVjaSDCT\r\n0UtMAr1KpGcP4JAsbzYhuuv3fIZyV0BDqKHJNLY84YEmaWsAJ3BmhoS+/+Uo\r\nxAuO5ob46u0/mBAtkkvvNjO+FAYg350GVR0SwMi+DECvZ5SMB+9SMdTcOLQk\r\nsJol5HYkH/TZIvfWA1YbP2vj8gRmpTOcJneH4eRvyB5iUIFMu1RwDYNNhgbo\r\nMf9N5tCqKmdjofhACkFRMD7168kf7h58dfYjGnDrCbXwMx3HkDnth+LyR6rD\r\nw0FPEnCkt354ru79nbJhN8umfMJiiiFCkLrUkv60Zp2o6z2PJgssT3AlwsJz\r\nGwaWLkc2td1ISe2VoPruCDLysAyVv3NXhH4=\r\n=rWyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/density":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/tab-scroller":"15.0.0-canary.5b40eb988.0","@material/tab-indicator":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5b40eb988.0_1652323551457_0.3481159906324143","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6a61d62f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf8e77547153b51d084a016e6255527c51690634","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6a61d62f6.0.tgz","fileCount":37,"integrity":"sha512-xJ6vEeXG/QK94gF+CeWK8HZaZeYOFVRbo/08uQuCVeoJnVsDgjLRgh6apUv4KKv0sUK3q8Xm03TWQfM4p8gXlg==","signatures":[{"sig":"MEUCIQCbhFa9tfn0XcXObKOTFeRoURQB0HH+N66AFcTJTc4LKgIgFGAWVmw+Z6yiAO0ngSbqX9Kn1wI/8YOPaonS92JQuZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5hQ//Tw4pvM29KgDYEQMWahBgJMqkj/SJbWN3Sn/qqI8OnpzT4WU1\r\n7WZf2gA1LoO6r9tRP9r70TArPiAqudKZUfmZB1SVeoTLtIhbIJ/VzR3dDobR\r\nNeevmQPh3GyORDvxo95UtF5Ki/zzBFwZJtNG3IyHkgRm/nCBrH8kiobH28up\r\nUT0E20OuqCtmaIwB5KpButphWfMrmJ5xgBg0Or633OXhp9i/hpvhbJmHcM9C\r\nCtCUkJbxybe/B1b/6jFjn9bKN+efP+/VV9BeAxghcn+H2LGMoYVf3nbpmrYA\r\nDKZTKtqB/b0JTNXjm1/BcJtjv/pB0jnTA6AP13Ggrsud9iIrdqyD3luz1jE6\r\nToKj7/mOBpBa893TJMvvUbJefSbsB+fm+LejmFAHuUqY04Prii2vGKVAC2/O\r\nGzX/L0McKXWyQPRLiSGynlllRJdhT+LM5QnbvARHvnewMV8DGZDh5CPQlsWN\r\ngQTkDQ3OMrPWXP9vVVfnq3Z0F0NKdPsVGfDrdRDtcfFw8z/kM6FIdhNrzDEn\r\ngqfQRRM0npP7NTsChIff3Unu/Z/m55LN3MgVveZ5I4O41vOO5wQIBLU83ZTB\r\nDllLh4cB45d7cbTZXp1sZCAzMFW3OESSco6JpExElkAZJ3TSVfT1ULC84a/8\r\n1Waj27aPi0XrIkOSUVkpEszIbedOgUFOa8Y=\r\n=S95z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/density":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/tab-scroller":"15.0.0-canary.6a61d62f6.0","@material/tab-indicator":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6a61d62f6.0_1652387314441_0.9194219118787299","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/tab-bar","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.05930a453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f7e26901f0176aa3b19e16e1bf6ef8de4c41d0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.05930a453.0.tgz","fileCount":37,"integrity":"sha512-8ahVrYOavF2f24v4A+yHyzfjGE2OXH/JIe//H+nfqrcH37OYR4xunqTsYOffE5PBqudiAscbUY4o8KFApATbTQ==","signatures":[{"sig":"MEUCIERNHR9z8NraUCQtfBsMspEr9fiOsbysGgKRXMdLsXC7AiEAgEMVakdlTNGNFJZDuW+CQQlSZjZOw5jJ8j8gEfD4iaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqgcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogUA//Zj67+zdkErKjKvjyccV3DHsy5opobBM0IdKk9ZnOHxplybG/\r\nLbMLLyB9R1wSQuoAlQMtLK8criPbFFA5NzSKtSwXhrlHhlMhWeTD4gsn/CEm\r\ncdR8D3n+h6DRo5CStuKQsFqZN5BmVDP+InNSS2NIVh0/xosxal2hT7deDz+H\r\nchtDNJrl8xC/RXBHUFb2cZU7kH79hSvc/1OZhOXXs3jgVJzoxREKSfIUHYo4\r\nvphZRg9OBfYKZy9Kra+ELpRaL0P8EBf5qKyPQvLx843sT/J+O6+1VE5u2Yq5\r\nuoYJ9mZvlVo4caCboxZPZFsZj8vYjinE+ekkMP1AUYxltW5zEfa58i22tzm8\r\nspN3pOGC5ljfvZ7W5r/0XSTcAuO5JDCfyMQ4Pfe1HUxXCDLWKlfvT1pwMAst\r\niVU2VK4NXmCkVJrtTMIatxlK8lHElo5FgO0RZWjjnH2z7yKBohX2VFBZQXlG\r\nnmXQaQK+zgk9XPExiu4KcG69JnJf/ix3lBhDSTOdrk88Psri56A89P7CA30m\r\nzi4XemNpntO+PYx742oLQJmZq7q6KbncpezdzglbNC75/gUXJuavQkAwTM8s\r\nIYkKOlRw4Fi3oUtt0tSfcORdl2e9W/jnlV3sWDRUE8ojGTjIGLJm9iv5pG5O\r\n0Hq5U1merMSXO2qKx4id7/zUdvgUp+8VVSg=\r\n=j6Wg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/density":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/tab-scroller":"15.0.0-canary.05930a453.0","@material/tab-indicator":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.05930a453.0_1652467740365_0.2320727266169107","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c0a11ef0d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cad7854cc462efd19dec4d3d324d598f4bdc669a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":37,"integrity":"sha512-p/I582sVckycM6szVDhVeKizYPDl90Jn8zdW1xUQkcMAeyjCLzQ6n+OYNKt2YeiJi0KbZwDOrl0PaYHDo8dpYQ==","signatures":[{"sig":"MEQCIFsIG1Dlr1usrGpxP24PJSdRKAHXEKBUuD83mQ/c9xSUAiBfrYU34Y7NJpwao4q6bYqlPqpHE9F0mGYzAoWr6bfyGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWz5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrasg//TY0EFPK3jlTFwPV6jd4vcB2vHrWGET+vVS3zOtUSfGPrsoub\r\nGDE7mLA7FC/sVX5kCTeMzUp16obRzGy3qey4++dhfkLdm12ARWLDD8NbnEM0\r\nXL3ikPVguhkkqe9Fdm7hgsDnEdB7a54BXnR4Tu1h6g6dYDz1C8p8g+TMoc2x\r\nTzfwCSKlOyCXYwvdb347GuJOdRUG8VCPFapRf9g5+1dBwx9QX4WaHjWomLSG\r\nIIJvYyW5Fh98KokJXvwChcAurApkFCw1a8lnYldFcW8OJKoVh5xNjyZNwzVt\r\nn0Pesp6GFNOh8D/kj4xfYxHI8uB1ldRGse+YuszTM9XN+NAjTb31NN2whgJM\r\nuXLMJPIRd2Q0NCrcLdA/Na2JwIc5AJc9TF1YpZOo5OW+y9TX3qsKcaocBixP\r\n6spVR728lH4cC9x5fU4zxOwDrqcZ99yIMHzV+gvXC6e2khWBJ/Oh9chvXWEl\r\nqsoMj3E9Ldj8lz0cRCS3o/DlBdJGdmlOJeHc1qqotbLFVu7cabd5jjLY8wiv\r\nNwmZUqKi/PAR+yeK8Ry4qd9XciF45lQ4D9a/QIw2DVOf7adZUpPvC1gpiXO/\r\nXqSA0Qfoo72SMTHdB0ba5rWtwvk8qODZgRwjj1bfzNV7KqpqgOFo1HtcJTj3\r\nqYoQgvuADbogTT+dhu1IVJZ68Qm2YA3QAoY=\r\n=1klp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/density":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/tab-scroller":"15.0.0-canary.c0a11ef0d.0","@material/tab-indicator":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c0a11ef0d.0_1652911352638_0.7113364508892621","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2f9b268c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2496cdde56653c8bad4aa13962df30d66f8362b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2f9b268c0.0.tgz","fileCount":37,"integrity":"sha512-+GKOuZgbCJwr7JZEUfJdl5nB7dGJzdtruOEBepz01uUcjm4Bbn4ZIoRUNWZcQrFtwOUocXDoBmjO1L0BpBE6fQ==","signatures":[{"sig":"MEYCIQDVWQEqvnkHTP49fD+6eB8WhT8rjMq2Qx99lkXLD4QNyQIhAK3jqpaXKw/6w4uwUe4wAxslyfecC/dH1KrOMMPNngig","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+00ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH+hAApKa4x31/vyslRPcjzK5+co0RizHCeTnGTZOlp82q6K1usCTk\r\nZvCnGaemdRo06upUcogwpatlupJqIXKoFagW2K+kptJXo8tD10scMdqlN5ro\r\nSX9DSAw3ojhi+XzGe7sHew9ZyaBUmXqs1jfpKnI4Jy7TJ7+P2h96xLn4oxQk\r\nfi6iFSPjuhIQ/ckvApOslaZD2gWLug6m78IYb0x3LwZS4SA3WdnXtjHtW20E\r\nfklRDVI7nvym1hJ/li4Hk5zC8dZiJn6Md9jcXrRlg2EK7mWCa1axzaw4v4dp\r\nTTKbwqtvlADPirIoWDkgqKNBy3y7+FcEVr9chbxrFcLTosXC2HFekxw7Nm0G\r\nQYfxanLrdBAbJaJI74HHHqIyWB1XleaIXl0QvAXLaVoAvgM23bx/mKM0Jbgq\r\nJdNi1yD6YL9uArcRv2Oh2U7M7Xe1cNvl0YReuO+l34scEtPSLxHlyi6OXiVm\r\n8Mjic3pTuJcCawzp3hsbZXFCw8RNphb+dvK1v5RF/t/Kvr69Ms6lfJjo6c98\r\nn5X+ySh7VjkEHHN3udEnm6J5NyJpnNNlQZnG9RhzzVz6w7YPh24a+rO3KmrE\r\nURNgqYGnQyrTgwj5hH53uwUAOBou3M3Ko3WLp9/AbHFUBcMcyBsI/qnbLp17\r\n4VLasFtWlLAWkzdUS6Bw+JSaBINYN/n7IMM=\r\n=3H5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/density":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/tab-scroller":"15.0.0-canary.2f9b268c0.0","@material/tab-indicator":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2f9b268c0.0_1653075251864_0.8950221219322694","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7741345b8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c03c8fe2e4cd046234aa551edc3a00a9e9667a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7741345b8.0.tgz","fileCount":37,"integrity":"sha512-4jn3KyQXrr8o81bPfEsDaFFM08aTrmKlFfNeEiUImE9gX3usXTpYwPIKNauZOwsNWzDyb3RDNp9V0tbORDKh7w==","signatures":[{"sig":"MEYCIQCV2GixTLmRnj4bl9vkA/oYr+9tlw744RTAC9Ee8ZeFVQIhAIDqRwud2TrHOkfzOjhYPze8TZ1HOzJbxlerxU/q6Rhh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/RCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4xg/+M6EwtdxXQbXztIb+NQWg8c/BHqCDVz9GxXw7B/H6kyatUTG4\r\nk641sQjRo+JMUGmQVlV9e5+weWAn1yNr5bBuKdNdvmOsyVHKNYMJQfErw9Gz\r\nXLNSgOYJryRcTzqwBSolwo+1G+7LORdbBnBuOrUJFFwWdlDY2p68edKLywTt\r\np/KrDRtE+9FZhiVZS1PgcSDwoTyOtmU83mf0Ifyn+JaPXeJi1USCXbmgSCna\r\nW1Y8UTmuMwpItxUC3rnt2IQngAk8WUx6Xe1vLmMiUFkzgG3PZWXzs4U19Zbx\r\nmsUUeXKxC4kCi7NK9MwOtzt4fxo01GPISF9x+jcj1Bl9q2HuWlH32VOTNRLf\r\nANW5bVilmbkVxlG0enC4U1qEtiwAOEUbVHAm9zAg+Ii1PpIzIVtuTQW9uaMt\r\n1dcl3Jr1NHqaBjf1fX3Je+p3HlfYK4+vDSnpgPreJLcb0Uj0YNi7FqAyt32e\r\nVyLZDpLdw9S59EPY5aRjwWGBmwp/0EVhUZKmAq4rTfrQMUD0YtFbnkZK7mC4\r\ndyaKBKNsggYuWfskOQS/e3py5Z1GfzBY9Wr+FAmSlwMR8gbNUQVtXKmVRuwu\r\nvVlcyRN7SmhQRDpta3brgMoB45D06czSHU7JfelF5ZPG5F0FjkxWpeGZnKFK\r\nkQoq+OkW6L9TvpewZusk9VxEF2kxVTdvU8U=\r\n=mXfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/density":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/tab-scroller":"15.0.0-canary.7741345b8.0","@material/tab-indicator":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7741345b8.0_1653077058670_0.43561894693134695","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f807e793f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc4dbde06efb912d5ae5cd05845d2bd96cabbd82","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f807e793f.0.tgz","fileCount":37,"integrity":"sha512-KSNn2DPKCv6mGvPRbabAPp8rMIWsiusxeAA5ItqYlgZtkOAPMcK13u5g9YNoZXIvg0xXNzIyZZhhbSDQ/pwWxA==","signatures":[{"sig":"MEQCIERWEtabwng2aAEl+PN9ONo4SJ+aj6sIlBnojnwYe+sIAiAqlJJut6XM6x+V/oyzUCEjcR8GZu6qY+n8DRc/H1J8Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBTuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDNA/6AlQf0oIU5ThOMvIsBp+A2+/xjRSlAuS2MBUSMBBCFx0lcUCc\r\nJCjcXyP30Rcjy0BNEKJTuCFXq8fBk6RwCCel8RpibfZhwTeE3ewYRETWWbZN\r\nJ9622N8/4p3+LkQf4rmzINso7HMVh7MJnRhPR2NhsEoZgUBo11QAKjr1aIhh\r\nXloeNhoBpUN7/ji3W1UL52QN3upx8Sr2wvhbVZiNdHFXAau714MftVJnr3oO\r\noL7QaYMZqLdSfW5sK5rJQq6OxOZAna0e8U6hEGoHLe79rrlKBwM8AwO/Yy56\r\nKIov3ly+YX6uvMaX6tAdW07DcHrS8oI4sfDNULvp05ALNyNemSFv3x8Qg9/Z\r\nnRh4KkilPYyTIJ+0N8fl/PXn5JHQbLSHq++OiM0u3RuFBC8O3V1yf/KqUG6X\r\npfrTZDT3ALRs+UQjMUGHiDSLfFS03Ke1fLRDbOsWZrMlWM7ltJlt7qsR3aD7\r\nA8krXaT2fqbKDglaR5cksruZlpmQt/I+EYaEyy6kmTZDVB/OOIESPHhz8HKa\r\nAi2VG3hPZSYN7koNWl0ikmMkqQc44e1xENnJzizH/I0pSxFQv5alGuLKvi+Q\r\nt7U21+9OoYGfNIno0/EEuexEIPNj+mBTBNpy0ZDvnxZEOeOVTVHAPFHDEyqW\r\nfYz17Njr9W8B1d2icbHs6bCz3VpdSPa2esE=\r\n=Ua5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/density":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/tab-scroller":"15.0.0-canary.f807e793f.0","@material/tab-indicator":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f807e793f.0_1653085422582_0.1489129634221691","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9f53d4a8a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"609633dec23e91d7db92ac9a36971549257402ed","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":37,"integrity":"sha512-GSehrUy+n5lTJX3Xtj6Y+Oeobasylzsv2lXyjFmOp2zD49rJ8Xlxuww1PgB1GmguwMhVrkI5qCrgn6xYRVwijg==","signatures":[{"sig":"MEUCIQC0ZDiXpK8R7XC4leUU+U6KR7XoGwehbPgI/MN8dQ97FwIgZKxMp0wge3PRYxyUY71KcIqzJAK3Pbi5F8vhNMjvvpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6FNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/Mg//YGZCEogbUeYw2MZo20I5opn+AwX2/Z/PhUnBMNnSpih0GWA0\r\nMQ4pSuZUMNF67YDZae2OLxLMHKz7Ck+b72Aio+oQLGgqn9wptxSWQtCmNtBB\r\nADFTtnQSvHRqQY7s2KXO8qPV1X1UwthI8lh+0gE2M57lTICp2+2BzfUr0HoL\r\np+89zBHDVVfY07yO1j+ZPlNihbJqtjjQ0Z/MCeUcXLXsQuTc+gzjatzKZobd\r\nqmULpsZgc3fVpvY24CGwwL1xODgPLBGFa3QnmSe8k2419OWipq7RDa5siGYm\r\nYhV340epph+804ZexUQ7YY+AtMCTBSdnxvjZI5DbtOWsyEnHdaXzVYVxn1G5\r\nqO3XOY2lAWwdZ4Pfe0LuU8gaI0Qzi6xSIG0sWxSl1UaDJh8xefW2bvqLC0wp\r\n9YKSH/ezdBZjZLjkE5fA4naSach9WixFAQfc74xDaLq6eTijs1E/tK75Bskl\r\n1HYEJS4nFmrumPh1Q8zu67NRenD6UOmC8C3CQ3rueptSsZyqHla6jYMoy5w6\r\nOPSZsuX35CzeuB/+XRqIOa2HPZJHJ8Er5v1Uj5M2fsWeSEESNnfeesMMFc21\r\nBF6Nv/M77xPAKRaz3KGuCpRtUFNkQZbIBVnPqiLzk3HvnP61ofP6Al3pV3II\r\nCaaFAS5kZY90zl4ZtwYO6gzj0IoTXjgZW3c=\r\n=PoBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/density":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/tab-scroller":"15.0.0-canary.9f53d4a8a.0","@material/tab-indicator":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9f53d4a8a.0_1653317965196_0.72958616284114","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/tab-bar","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.77cf00e37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f011ec6dcde8405c948ec58f68d10258573ce47","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.77cf00e37.0.tgz","fileCount":37,"integrity":"sha512-pX/oKya7Y+tOjfdQ4CMD6E0xgV/P+XLN7/LqR8pKwofQt4wfC+g2sHX0BUU7ESBIlRqxPlbT3yjvojpTRWuuDw==","signatures":[{"sig":"MEQCIFdaA6sO1LhtnjMmDBuMOf4u4vXOg/C5sWgc9atN/3xUAiB9Cpjk2E8AjvMDkjotCQy+PINIRMMpGk05FMBdzj/N6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillNbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfEA//Vvmy6DMm3lgJf5PMuvLmXKJ5V3He0O5E/hSpD/O7Sf5FIWcz\r\n8yFJcEGFYtKKdv+dC+0QFkOAKewkkYtzmODDP3I2mkKVa2At+pJ/ktW6/A+6\r\nSbg4VH+mG1Cf7nWQy3zWgtil9MNxO4u6zR8NbYxDMxkmh2sBeAuw6V2dq/Mg\r\nobfH8OSGbhq3q6HImUQAQ6Do4njifuGGsRwNq/rQRL9Pt9M6ynueOyrl3mBY\r\n7a5mHF8k/Zse4x3f7kKbU9nNMA5pk0KaMQn2nvn/BbOOwiw0qbnjyh6oBoaY\r\ngxpg+wj0u0Af0C29pbWtnFlVzPtAJs7afub056rJ0bdR6xFHYEE+70l6leZb\r\nR0agJFaQdwQ79I9UszTdHmPiGfHsbsqZZgwqZTggovRLSTwk/ApF8fDh3uBp\r\n9VfCu8eQQVQu2cKzGisWoT0o3S/jKOsTecuh9y0lMKQxRIkwUC2N9dLgYp94\r\n2IvGkRefrEjQ40Vgt+kH0Xegtm3+ya/dlM03kdldFCcGubEfbQEuR8kRG+ah\r\nBjLW1HAkJiKROsFuFc7lzzsJqgP8iv93Hvsac10gVCh847N2Z4MtLxcGxynS\r\n4oclrRyRr8dVnyNLXz27d2KIfKX9V6tgQqFrDMt8bCuinHEZY334xyxieOTI\r\ncUvfXdAeCWJOBEM1DBzcOlBxzJNyq3ZRFHI=\r\n=jjMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/density":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/tab-scroller":"15.0.0-canary.77cf00e37.0","@material/tab-indicator":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.77cf00e37.0_1654018907428_0.04518932883983018","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3c7b844c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24636fbc6658110f08580f16b2b90dc9a1fb59ac","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3c7b844c2.0.tgz","fileCount":37,"integrity":"sha512-gPJZkZbCCGHWivLoKRpCKu6QgbSJegPTM4LRlRE4GVqg/IAdU8EGQKJo38FImzqelB3PMeBkpqeiKsEzmiq1Lw==","signatures":[{"sig":"MEYCIQChiX2NmDZnxtiKE4SVCrE60aJ7EWc13rH+vTszglK39AIhAK5BWqPqFSGmhnj3Rs4Um1Hu+8eKH6wYvG6zkTh594ce","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8/BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPpw//UgE6qjdPcA3XHFSGexjvsyY06GcRhRm1yMRGvw0jF8WYPlEc\r\n5b/EMfoULc1sAJOxecuKVihscLvYDcjbccsxOyiB+jSWkSdeNXtz/92C9SAi\r\nqSFkDY+mkZfyEf/jr+yIyjB77qmPtO+utR/915hmJfDPIBMZqWMLaQi9H9Bl\r\nxzjDIL6kJY6MR984gNP66E++pSgmOsXC8ceQvA5RpoPVjh/z1agnc9Bd6ILa\r\nk6T5xVjPHLsTFCV+xHaVMou9LphJ1CA5EdWoXst/LLi5G4SI0CwVFZ6Fy6PB\r\nN8rjDaUIA85gC8ycAECWjN3jakFKXQwRxTwLdzUDXVWUnZJu7hympRvZcBvJ\r\nAdQe2P3na6Tz+cVkrYh1dMe8JmO7b8MT0/b/cVaSAta2FbMiFHNXaaO3LrAw\r\nWLB8o8ucS94zviof6mv4mASlStuQR7O8vWrmo8hMpvZL6Ztnx65XoWx3VNJR\r\nQqDnIbLW0t2CXE8Rm7KcIsS7EG9DtmWgU1Qxcc2cdq++gBY9ZqhxqXYIyAZA\r\nJxDsMVD/KeoO9wFbvTWAshUBc04fQ5Nmk7gYJYzgOweBnrT2jA6Od8aBvfij\r\nmoVroS8XE88UtMulJVyIn7C3xQgiSdOz/2XtBhzAkZ9UQbRRUDIGqmG8gthN\r\nwmPazA7iMcngTHtOHZpBWdflfqx74dBPXDA=\r\n=WRBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/density":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/tab-scroller":"15.0.0-canary.3c7b844c2.0","@material/tab-indicator":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3c7b844c2.0_1654640577384_0.209908223999836","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/tab-bar","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.df47894db.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470ec9081325c3f997ded3b019ddfc89948a8998","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.df47894db.0.tgz","fileCount":37,"integrity":"sha512-V6H1WWDYh0glJPO4xDc1xX4rfsLDeS3JR/LiAj7piP5wz+ASYzfFbIVEzEO4SFOXgLmNk3asGlT8pwBZVeZZJg==","signatures":[{"sig":"MEYCIQDWUP6gk6I4YDy1ghIpVqO5w5q75rGNjiuORsLI5CDEzwIhAJBhf/koKKZnG0Tvr7Lt+9TrAGzXXhljnJE2kGlnvPP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmNw/+JdtWK/Dip0B9wA2o84TVUeyDE47sJhM8iEQNl329P7oMW7bl\r\n8NgrX92lTEpCBAD7g7lL8SWD+PLXWN0jQy1Nez1zf1ynbju7uWCA6Mbg4FNW\r\n6PR5FakSDgntkVUr0+PZQrF2tNe3GzyAthv9CYPihQvXhwjdAWXZzmcy/oUW\r\nOqBQWkGPPwEHUf9ljk64tBjVUD6GHojUlPnqyejhnt7dUDyZOmNDqYCRlRju\r\n4vxml0InycPTjgLY/T7rWmphbjejHRFaVkLq1nqCyrNdeNYsGnMxDTdRHSSm\r\nZEN1eOR3mp2ziQ+I1fXlkgBHz+ksdAauUrD3O1VArFkbWaxJ1GNPV1oa+SE7\r\nS8FutRDvdHLVrrdOpmSU4HYnZ+Pj65C2GSz01B6Y9L0zS5UO3Q56eQFoUa33\r\n5xcUShpnEPTBw5l01WqcG0rfKG/aA4vgG/Ec185wnG9o0/+yLy7b4wY9oAuV\r\nIwxrI60TEKmA+yrECUJaEXBcyjvUxJoBS7AcmD6xJ9+3gbkVLDuckNNQJ4Ka\r\nPc6mgzQsmDWmQZmuC4zjUkpIxmIKt6hGOCh11sODNuFdWqSkfX+E8GU21qga\r\nnN8+puv67eWTeJ7wg3AE9i57Q5KceW18zXLbTKlchJQXgysPn3XlTdF2ExIh\r\nj6ZnZTrBcF4hzUQLafEzqjbJh5q7IWPfksA=\r\n=4rXB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/density":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/tab-scroller":"15.0.0-canary.df47894db.0","@material/tab-indicator":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.df47894db.0_1655140209665_0.4574477914445023","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b18a873dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84ea87b55c6d00e487355be3a843d3d899ae787","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b18a873dc.0.tgz","fileCount":37,"integrity":"sha512-IQ13wyiBp//KRP6bh10U3axN6SlQzR4cVLTyzrcu5PDYGBX4v2G2A36VbYObZzra9ZB1yBgwGoDms1xRWCjmZA==","signatures":[{"sig":"MEUCIQCv895BhIQNZT5GIb5Ma1Wna4r1t4tqwonGt+f/9xaEjwIgDDTUe3A8D9V/0ZmUGcBzPGqpsUMIYqLDeSx5il119tE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCtFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEcBAApBluu0Em+iztBOOF7Fp662vLMTZgcgCHkjW4Dwp92o7H9JVO\r\nTc2yshS3Z1n8/93HjbSThuwJ3XVNCw5kXJB5XwrfbWkCNY34zdbwHjtaRz8Z\r\nG8iXTDH7/Ga9SqWMzXrUU9WVaxHwNRY/dfTu8rMgGJHP2pm4TqfO0KS9sir8\r\n2AfYtp3/NMiry+W/aQdtEP1DQUv++U6dLg/eWWD5P2sCB84V99bpxO4JK/wZ\r\n51nO8W4exGlU9iiBEjOduPZOXEn4wPrl0aHOEIpYgXJ0w0MQjUXQ62trBkAf\r\nsisN5Bvv3z53cpgga9dSo+virTynU8Q+E8AUQOf92hHb50/8dkMd6zqdploI\r\nzRxQejA6bQ099iIRYkdI5FRJNEyF+HzgZJvD7Rmy7aT0/h/j/rmSJswofodU\r\nQ/yT/hPUt5MwLK2Nf9kwBMa/LNLB+ANRpVjmDmajZI0BeIWJlDTd4pJniXvw\r\nmyvxxV6EfhE+VgjKut1BL5VUx3aB0cMGiE1ZF2GHqQoEhFx+VK+jmBnQgcm0\r\nRDtKl1KRp2KkCm4aBsrCVmANO6NzCCF3XVD32NxMpLYHdwnKRw4ewCpvnLwI\r\nU8w4FTfHDEkztHsGnAtg5duxJAY89K6mToPOpRceHxIyJQRimS93fxYYKB5T\r\n6Ton+NHI2OznDJWVqKMPxoenxNkmDdjtHnI=\r\n=PDpa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/density":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/tab-scroller":"15.0.0-canary.b18a873dc.0","@material/tab-indicator":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b18a873dc.0_1655188293408_0.6938517458258866","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ba9c29637.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af25451ad78a9057ba03ce0ac895d82ffe24b751","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ba9c29637.0.tgz","fileCount":37,"integrity":"sha512-DSN89OKCNbIifPTCGKMLIt8mO9N8HTHilDPlIJzPhyuSPdGU0L9EyBUmc/NFi4zTc2gW+Kp0ETVLp2HXWaRGGA==","signatures":[{"sig":"MEQCID6GrJ9XfMnywWaRZ6rcEgYtMDJPVO47/gtZWIjnLnQwAiBJT0M9XwrQ34JZPXWvNdcXhSjajvqUE7YtxNipRTU30w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNp5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKtw//SfRCqlu4vDr4ySDNziyroGOqEZBUY3RslqjkQ/CVf3xxQyfj\r\nFq0HXkgrGKNgeo2HKaPm83XbHPnA+jWL8EiSVq8iG4o4ukFXwfBB8Gc+yNnU\r\nsbDIdxtnB8WdYAvBQhmTs55ZoEbWla3qu+jhlYpavj1NPWcIckFct5/fSApE\r\nSbr+59q1V86uloVm8hI8o33OTs/63M9HM8GBtrcFrJk5CAsRrryEHbngVOYD\r\nQ5ZBLaTMvtlFURfKCWw5ntxt4lnq6YpDXmmdAlcObt/BY9hr1yfx+iq6YYQ1\r\nSiahdn69GnybNtshqJXk5fdLpVMkm35aOAx2h1/ZRyibzAJ7CYLf9zwc2WcH\r\n587Fya6bb5FmDX21jFs8o9/LiFHUk15CeiXolVAfzgE0xxStWd+Wrb9TJ5UH\r\naiyZWWTiCUCdtcotBULfzVs0/xdEnES1TL9IEIz0gBDeqzyL5/vUH+hnwiRS\r\noMjj8t25ZUgosCRK89NE21USHPgbO7NQBJZyjcu6YNdK2C/xp1al6A0tmeWb\r\nW3S+23o12KUZ7i3a/nyHJfTx3a7LOFXwQO3Za8L/BOSlLGbDc+6m3Pm+GXiP\r\nfBqWo/cNQLwXIxhUV2HlSf91aRGzhwHj9XENm6yQTY5YrdItypG4Mu6aYbcE\r\nYGG0Ntfpu0a1HEl4YFpxZ+N3avMVpGKaFKE=\r\n=Nyfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/density":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/tab-scroller":"15.0.0-canary.ba9c29637.0","@material/tab-indicator":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ba9c29637.0_1655233144783_0.41119032159886015","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9bfd12f01.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b903b103c1246c3d507285635c837a4b4646f38","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9bfd12f01.0.tgz","fileCount":37,"integrity":"sha512-606rkMfyKNSRSHldsgHqz7pyE95NQMy+0ayBW4I+Zc179fTYjQTw/FGmozRRQYteaDq48FnHP6CbjStgPhNs/g==","signatures":[{"sig":"MEUCICkyb7KicmdVSF1FAUV9uQyqT3uZBFCR/xtMsqdcL+EmAiEAptYQ9TWzdsfFahEEXxq16xjNSXhXGsTvs6vFXtI8dbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2xgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT9g/+Oyj+f1Efdioo1P/37RX9WA1ThDirPHTOZ+2SlddhlmRb1Iet\r\n857gBiyw/xYEljPZmXroDc8Kq6T2pJAdkhjmc3B+wDAdiZYIp0SbyLhBo8KS\r\nyAy4F7ZJK52YdklOH1rV9bu8RAYGIYszc8s+sCqVMqb3zsP3/a7xVsk7YYaj\r\naW1jXRSJcOlzCTeUi720f0OkNtHoSxuAmfnInKNhbOKuawW3V4nyBZH6kzRu\r\nw0M+jjEjvGSTsonPS5Ii/RNt6evgFpuH1C28D+JRrFymc7Fubi550ONfehX1\r\n+mjA86u4RpbMvq8V3MpDDM7YUN7dNfuwfe/bSBpDQP3ygfED7baiQrt4V7gt\r\ni0xzb3dGzNQKc9Xl/G+LRpyNhZZ2lICr9i5KxP59n9neL4Pqxn0UzyGctGZ/\r\n7DCpi3PMi54pqkztpy9iFYou4D5yPPLi3MU3+/lqlk9d76OeThIaC75nWBNW\r\nQFQezqqS8xtdIAgQFHPVB5X43RBi7t1bGnmr9wytYbYus6SwZAsFBuE5sojv\r\nS3W2bgcITxDC37zK6Yd3B9Ob2ksXWVdRCz6bMvg8u1XRVbntNPuba+fibvM2\r\n2Uhjz3n5OiEdBnhsPSRteztHwqBQX4eOO144uHP2xlvtQaFQck6DWn54vLUd\r\n/fJL0FlB5Mmn3PEDEmDJyIpB8ZfKPUPO8yg=\r\n=zwNA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/density":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/tab-scroller":"15.0.0-canary.9bfd12f01.0","@material/tab-indicator":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9bfd12f01.0_1655925856722_0.6560442009034229","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.764de225d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"257382c6ea1a2f432326bd5181ff9b7dda671416","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.764de225d.0.tgz","fileCount":37,"integrity":"sha512-M7C9SO6qPxZMJoJDMXFA2UuX8V4gMBFWXnFlCkGtkVx85hcWyqRIDChLrV3RHq5XmPcSeAikgCtf22PdPSPeNA==","signatures":[{"sig":"MEQCIDMHTq65yXYERRGZuVE0NGbA+sB+RB6qgkyBui8smjQhAiAMN/r3T3vEtOadzoV1X8q4RrY0k/pnhoGpjHqYil9IVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH29ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP4Q//et/LU2lXrtIt7oB13Ez0H0gDgjH3MpizMwseM9ocbqVJBMBe\r\nGCe9M+zFuDQZTe6ulDd0Fso/fbmkkdiQ8HNiaNjAL6e2Yc82kmthOrPs2WA3\r\nYITlwFiIKkPmv4FAVgAzZMYNo7dcfU4slpQgy0FJf52qsXptH466Zm9EutNW\r\nWzUNDCkaI7uMrO3Q5hEgazF+bZ965RfG6xgmqFvsM5slVjWzePfsXUOLBjC7\r\nUgZ5GEhAFK4BZANOr5ReXR0YkwiVX7UgE5xmyeFljKoWt0SYHVR/RfqJvloH\r\n7MnPPmYR2Pqhgih9mz8tREd+qikJ8xjFOvCF1b2TN+p/giDoVrbBJsvEEbh/\r\nl46AfEYB1wkPEfZTL62f/+XnLYBFC/nfOiwjjx1q7AWkxAfWpG1+bW3wpWT5\r\n7NJehOb4aqDsQQOFdEJg9aXp66u0pz+rmpiJrhhHwr1PceTrK1SOwrtzSnqE\r\nKxkGhZz0uMmoTkTzvJN8zYjilpfv53w5E7lHy+zdr9vKcgXwxUvZs08tZQkj\r\nVAurmdfQdw9WIWIbSbUBvnNWc4mp8qlvweqlSfnNvLWcP0TGERfxZLex13tY\r\n/PWxp7/3ZuVyaNrfwYoHFsazV8nPt6oGqNJ1iH+wqrfGPslY+hRbZehqXLMN\r\n6m1V/Ukx5QVoC41pvBt+bId/s5abqgXO8f0=\r\n=wCsO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/density":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/tab-scroller":"15.0.0-canary.764de225d.0","@material/tab-indicator":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.764de225d.0_1656520125732_0.16834432449077008","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/tab-bar","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.31e517cea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b847642b1dfc9372a85dbdbad831c5df5b6e844d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.31e517cea.0.tgz","fileCount":37,"integrity":"sha512-dME6qr58TyGF1ztAy21k6slmqTDaafXWgGxrLq7Eo33UBqoIEmLfOFaIxl/In0KiSGV83HsCgplY5gSo0/zDSQ==","signatures":[{"sig":"MEYCIQD6I+aUJmhRB7QJKGLiURkbeoKqmiY1/NdK0ET8yunhbQIhANDGWAYZ+WHPVMQtp4qjv7xJb4Hpd7Z+Is1Tcg1nb+e1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtHhAAk5ZngXtHraW5NBta2rr935f8OjaW6NbsPwCygJ9jR/wQoV0a\r\nqcZewJTpHiOk+AErH05VWuD57T7LAEzuZt2O84b16uzPkoOlRwPGu+VQLGLJ\r\no32qCwrC6gZxeCLIIiaoGWfgLWepqLHObcpqMgL8FnABYAme/3b9wp59TpZk\r\n9ISnP676ApefNJmBDveWu+DqXlmgRl7t8BjTDrtfR3OHjtYcOHWcxIGlxgeh\r\nHNWuIizA4hUhzOtKjZNMa21VKr3gMGMgzZD05wlQ4kAcfLMoLjqiPLG28cI9\r\n6EP9VVkHAyjS+lEGMg1FpZUOkeUyrZLIKGfJi7fOq+FvPTNGhVpi4PmLBHfA\r\nZeVqXuPmNr74gSMyD9AoDac8yAEjOw85kpZzrOIQDBc6NowQlqLIUJz94rfQ\r\nqpY86G5xVfHilDEyGvx6o4h7RQceDYakDm9pcfSHOQ/eBnzgofhwt/AvPTYQ\r\nFmk9EHyyut5emKmUy78aJHzJ3OA6fm+rT14OMOh+F2EI5A7reHv1CgtGBpEI\r\nUeB4Rbb4k/kpQSj+cWr9cO/ObW376e7m2TgV0lQYFipr2YpYvnTFFoV2uySI\r\n4xfi4JGEXmt7hgW45thVdpKBO9cWEcm7WpRbzRZga9xJS3QJ1Gi2jZS+TqCI\r\nM9lPPe9xOXFmCuzTqr1RBVy+vikPwoX7uRs=\r\n=iFXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/density":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/tab-scroller":"15.0.0-canary.31e517cea.0","@material/tab-indicator":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.31e517cea.0_1656700204470_0.27377862970519984","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9ea4e8e9c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac1d252c3df1adab40298712fb5091226061d76","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":37,"integrity":"sha512-xPVnGRdlpZLuShBt/eMNzHdB4B5sArUTrosPp2rPJyVQ0lFUEUN3eBdXHzEGInNMASX0pR2z6wqVBJGMscVc8A==","signatures":[{"sig":"MEUCIGZMDhQWsxwkvz2GtpHLEAtHPqS50nyloEenQhvIKpG3AiEA/U9n8XiCAlWzLL+sJ4n9sGCvFADjQzMC40DhGtT84p8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3udACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfEg//V9iwSO1j3htvMzJ0u1HGEj6/hSSDX/yHbMqCQQM3kj5qIbrl\r\n7ZuRE8FexMDxp9vuglyC8BKG2TyiVwoL1pToAindR+YLVcT7ReFz/BOxzoD/\r\nsEoefNQx8vbG8PxHEu+v/G7SuuXMBkeSTN0BPAfEcFy4b74NTC6FP3ygzgnW\r\ncTPmZ5LLNF5Tqr5LSdn9r13TZCsmhqOu3Z/UPe8MWH/QFk/OQFS+lB7c/hTg\r\nQBGkAAwZtHfRL0dA0A6T12NO9j4rzNWve9sUbVu7GTVbHdOYGqLogIvMm1fD\r\nEOPzLLMH2pBn+6I/jsxgNL7XWCAkPJuxA5WDQ2+URohWrmKtlNqTOteQW0xj\r\nTOmU+JAHrlJHY1If3WiU4WyOYy9evn0+caKlvtSvSwRVIIzE8nBm8TqfuZ3y\r\ntnUtLsNfxISKaudiaCxoM8B7HzcLN76gfhheyn1nX9LFKu1+XH7YMNgfd5Md\r\nJJ4z29VX8S6G9LQbXTR5mQ1H/hz1ySRGiurBz0NN4gu+zeDwobiyXOE0oURr\r\nFSyFRyqx+qKFI2O3ZB/ixeJCMFbHmkGf2xxKpqJufmyZvmfZ8p81Opn00I90\r\nnVniILBJeGVm0nJYmk4O0bvEYJTm4qISKjzZ8mGGwDfC/5LYwZ0LGq8a/m4D\r\nFAcjGqj7vgwy1gfJ2pDffXRXTc/Vtt5LQT8=\r\n=qftY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/density":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/tab-scroller":"15.0.0-canary.9ea4e8e9c.0","@material/tab-indicator":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9ea4e8e9c.0_1656716189001_0.6973072353821852","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cd5bafabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d53ff18922ab3a9cbcc5b2e4ad4ae5494b56ddf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cd5bafabb.0.tgz","fileCount":37,"integrity":"sha512-bHJCJczDIYV+l4dwjdZl6TYvwULmuluuCFZK6uHFmErnRRl4iWpPBlOOPRNEgd6hJZuhVeEoUbJWYXeE/Ma9fA==","signatures":[{"sig":"MEQCIBAmjGfaq7vh5xUwnBqbxyvuIEgQiGRC4xsSigYsq4abAiBz9cSt/BpDtFPtiOWxvVRIIKqy+JUNo+KvY9wLFPB9FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDjA/+IsZnDkjzqCuGRc1sflalrCGbenpN1Yf7e6+DCUXyy6JrHwVg\r\nBvY7KKVwW5tmgfsS7UlchU9MRvulzPqq140NH0P5jLijX/tMeKRAxa6Z2n6A\r\nxkU+7AUo4//oyMsh40fci43nW0MScKWKhAcyFXa4S8ScqMC7tYJgcF2fZkej\r\nJ9eYM+cGO1ZM9vL7+FzX4sDuzna2EmYKremFCnBEwOLlIyN/h3Vriwchu8Qd\r\nBmjyncJvwymGc2UJj6em+2uipIOxmQmz7d45X4K0z6o5ZuKdeb5AVI5DrpMr\r\nlS0fYkvP9Sj7Fy+ahBSH2vT8FCq+SinnH9tem+cK8Eb6UI8Db9I3SyZyNpjC\r\ntPnPbaMWsf+9/pvnWRMqsS4HeZ07oTDz9GjgoVhjg9fZUYsmdWhmCI80N0Tm\r\nO6yB05Dt5hcQlKkxnsBIOsBs8dNYqUDolcEq0egGHIxQkbMPTdRM4FRZdiNx\r\niOd3Q2ieYbcLLLxiDddNDik6kaowpd8/A/BCdanQJ5zPaxHzZgObfwA+8Yhc\r\nLN4/1E54ZCK4PtOwZy0Erguf1xf3TWFnfa03ZHMBegbDJGAEOJuncma0HVav\r\ntpgjBaUrkYR5C8S17Wqqy5W1nsblbBjtyL7mMF+Sdle1PSb5/rYVIDqfsuPp\r\n7C+8xjxBMHlWj1V7/CVsUECE6CSNiQ7T43Q=\r\n=EKYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/density":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/tab-scroller":"15.0.0-canary.cd5bafabb.0","@material/tab-indicator":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cd5bafabb.0_1657130162110_0.3237641972574983","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a02fe49d3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0581a849aaa07c6b7a96d38b5fc5dcc24a3fc0c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a02fe49d3.0.tgz","fileCount":37,"integrity":"sha512-WkWZAoT4w9AlxW5COfxnJ+7yl8D1JCuiEJVkQlJMY4t9RJwjkgBHWoDP/f2Yj6XFN/4yNCcS4so+4y7aShR2ow==","signatures":[{"sig":"MEUCIA3FcJxE+eENxa3ONb6HGUWXEc6hpL7x/4Gd+xwiB1lgAiEAkNH4xUnA5FNhflc4CvxYam0KEaNBJd20fLoE6NKsolM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdoAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH9A/+OY4ASs3Sh6WAov/28qUxPwrDhtHzNoUJBOyeSvuA+80puXtg\r\nSrlUk1UO7mf5D2gGVuiiaeSqVmvGw+sNgd+YUbVSr0IRVnjp8hGSA+JmZxh4\r\n3OrSnhKKYnIVtEBIQEhFvh8zyOR6imZmIt+0XEYpKQAKtGtA8UIfiLTCFWhw\r\nSIJBi6vCSCTVPDwP4BGXBM0OzRA8AbTZyYnbXC8dTakGEhkfhPOOMpsttXF0\r\n970nGIKZgxot7NVi+BSqeXB7RdENo0w4dKs2seGW7Ka5czqNI3hqWTZ8Jp+K\r\nMSedVMgfxcp1KNwrpZCjsjXZ4Bzlkf1zJfR1GjDXZes2zNGLcQ0XjoQEeQZA\r\nLq52enmIkcNyeDVOzyXUwqDdwDhv3dvbt3U4fq3RwWkiLOwPSmMBuUiJP9WO\r\nHDZJzMPW+HzMrYKkC4ewdHLnE1qmPU0uVDX9YK1GuN46mVN4mjSpAQt28zqj\r\nO4dkLMSiymNeZUZ8Puzqn1et15bg59v8Tv/WwXP1/oKoxs+ni0oKmDeoQkOO\r\nDRv0LRqk11oPEgIirqN9AxL7imdAl1+P81ZS4W8yoEOsnQW09BJNgZUgN0hW\r\nsYsnpnJPsDp+93pKGAPXRVQY+pQFsXmm8UiBTLIBX2SSurUwDZbGiN8pxA7a\r\n+bFinLz5U/8TiqMajLpbsIKo5Y2XwyAKq6I=\r\n=MEiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/density":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/tab-scroller":"15.0.0-canary.a02fe49d3.0","@material/tab-indicator":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a02fe49d3.0_1657133568016_0.7835968379545093","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/tab-bar","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.826a3d8be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9c2a6e0335ab211f68ff1029829895caaae59b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.826a3d8be.0.tgz","fileCount":37,"integrity":"sha512-MVZnlROR2K+HcG4KjORGZ9PsUMc/c/PF8fm9xosgQd4T5pcNKeoYF/boZeMdqbKRlLCLiU3jEfMDY62eiFSegw==","signatures":[{"sig":"MEUCIDOoCc2mWcJJwenhKwoVjcWu1Wg/MU5PJ/7Woev8WqDlAiEAhK+XhdonMIhFVeH1BC2lZSlLJ8fjDBJxYiOhIKi3QMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeNbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvCg//QBJBIJzvP1aNhXPPNS3Bec5pvPDq+HRbsnHxy9H5pMOzqWGd\r\nzTEUWmL3nWzZEFzIZHVehao6bdUdHCjzDv+IoZOeiLNXpG1VczvL4m62p4DM\r\ncD0zgZnmtPPFVYMp9XxKWtck75rJWDLRXajvJyypgjSXn/m3tNSZghb1/5Xv\r\nphbk1wbNM+nK2RHCdaUd6Giv0BTh1u0pxWKoYjVL01d5RT2tMbdgiFEfEgDe\r\nSsd8sUsvJFduilBAXW1zMuSvimC96vmFFqwi2vpJ6BteXKTKGD3JjT8VWh6z\r\n5Q5q83piiGT9ucYPPfzxy1z4CPIHIxgwcxCUmClrME0eXWAYHMMsPtcq/qZP\r\njcF7QKVtD//0ITqDERScmlaJRFKfUXPMm9fUQxpV9NhB1P/JpG0F6ttMzukv\r\nuriT6VBJgFQmDo9FlvggpU+E0FfzaMLV4jRwPI9vcfssumHlfH6G0rXtMB4o\r\nU82K0yYLy54ODPUEc0Loxm4AdRA2rQBGwFSe3H8oel2EE1Nl199a5ks/M4hz\r\nIA8ELkDyaMijjWRhWMcgdDqkXBjWrh5pTmYoKIMnKn1ouJwQNQRsav4OT6ze\r\nl8IZ4np/mxwKTp2fp0YGDviS6Oi+iXh+CHa0rIZ97vhiCdgHl5mSJv3uEval\r\nek+YnxpHtg8iYIqQNELqReZuoJCDI2L5FzY=\r\n=yTGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/density":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/tab-scroller":"15.0.0-canary.826a3d8be.0","@material/tab-indicator":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.826a3d8be.0_1657135963546_0.41212160133827336","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ef276aa93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c01c2ef0809899b649697ba4cba8cb291fed67ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ef276aa93.0.tgz","fileCount":37,"integrity":"sha512-NhDcXwT8vm1Uu4NuZzfHXMVyCHTqtfQLd9DM8VmWXjwzzqBF16Kdk6yrOD88x38cv6QhZ/iMDi1zQ22HxexDwA==","signatures":[{"sig":"MEYCIQD8CzoQ0lHqx8NTN//N3mTjIZvg5eTeP+Sl6P+PIFdAyAIhALt+P1a5vdH28Gpn0VgNBZdy9hooddYEukSLaIva6RSW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxIhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm2RAAjMKM0UdViv0vACwIYF1nEjPeW6uDNunepXM9pMRHBR4nuU65\r\n+AejaXXfQFUi6Zl8Tw/vkXUk2S0FJiKX7L0PIU7gm7cR+q/P+1YwC7a6OQwL\r\nBcudjCnDt27PkNfJPTPUHQ1F2XNrPvJtIR09IVDzWPJseBNaE/Vn5hnJu4Jm\r\n2qSqUuVqiwPAIamMAcn4rHw++iXzb8KFGhnBCHzot+rOViQaaWlyUK8sRBve\r\nXoouJR9SIyC9KWQGCGR8hyWy6mzn5jzroONp2IjAHJgUUbMLz+Lf0y9VSYBu\r\nEX1ScXyUNF2bRc9za7vvQoHIsneZQgT8eMYX/Cz8Aq7Uy4XNi7KIw0EDLDmO\r\nXPvOADVC4F7WG6tdQDgSKPKyuEVBycVyHokmoCb0+RB6koKQKI2cSMcWc6yj\r\n3Zphl0Mxf+oWmsR9POHgRRZLrBpCGeazvB3YsWP8ohMj9BPo2Rq2gwfldIIe\r\nm1gH1qa2tUsBVMlc99KkkcisT4MhlgJufZwfI01tV6aEm3ZEES6sOtGw86/3\r\n3RDpm2fHXiqwNO32i6bUjhlBJlbLyFTaER0RwhXTPeZm2VA6yCUACK4/xKnU\r\nh54cmFMsJOs6au+n0N7V/dczq11mJh9GEXZiM3cnFVP0Ham+TrceJGfLbZP3\r\ny8av7L3VXGTDbZ68Vw2FgiWYAnFG6qHCXYQ=\r\n=4DP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/density":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/tab-scroller":"15.0.0-canary.ef276aa93.0","@material/tab-indicator":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ef276aa93.0_1657213472851_0.5794701601756223","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.59cf61d6b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88e82be97cbd549ec6c962eb218d09c429917030","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.59cf61d6b.0.tgz","fileCount":37,"integrity":"sha512-bkeDFUpo4ENS+I94KBUW6hvYTNSiJpIn06Py30VER/AcMBuZKsNn605bv/328GqiwV2aGXTaT2W01Uf2JrRQPA==","signatures":[{"sig":"MEUCIQCDBiK/iOiuhhEjXpjTe3jy68aiMyYooNq0NoR0a5cVTgIgdeaLp/ppSyNalP0fSCz7cHNOtl+EvonNKgiCgLPBJmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxjWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJqhAAowq0yvm6Oi7Ylid0uZTxSiacmwFnwGVKSXSmjV2U6Kdceyf/\r\nc6TWB1zaKtKA6eGjunb4cyZGuor8vvZ0ofCb4tm0QJGL4bV6l0nfgQcYoq9N\r\niam3JyPGmoe+k6pRe/DsAoQXhmacmBf44KWFA6DDV612hkXES703p7X2Qr61\r\ndgduxJhpLxhMytShzL9NNH4OwsQ9TbNtnuzFsTVXEWNDBDm9+WRYY025sSWV\r\naPVELoKFk1tuwExEBWoEyP+Oupqm/ZPRn0Vy02E+hGdjBzuQXtViLdatqBl0\r\nrgQdij4+z5Hjbq7ukSkhcUwUN8vuuFIBDCp0myYG3XvZtv7MSxg9vVBDf6p+\r\nUL9NihZgltVdLnS/p9FuC9IpN6tjhPjxMXLLuBKZVocQt0U4pHJcJbkKmlI5\r\nBQE0CLeb+a/zgBcmWwPwKNVyUdsRU5HAn0R2aK63iFKHBcnnbHSVtGyOAgyD\r\nT/hTWneBcS0sUfv/eoh4rduNVwYLHC49MQiyOO8cHzfIl4WxCMXY97ixuAW3\r\nC0HKMD8DwTnEezKbC7nU8sk8Bk2NPVJ0s0Z8h07dSDslglnHQgo9LiIC2TEv\r\nKsjY1vgQjnS1FYH4hx9nVCgk43Y71aF3paCfPn2zN+VhfRB22oJquKuGOj7N\r\nY5DyWfFQ+rqE5Tkce3LjhleeMUAbXSz8LH8=\r\n=ktpS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/density":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/tab-scroller":"15.0.0-canary.59cf61d6b.0","@material/tab-indicator":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.59cf61d6b.0_1657215190529_0.43679985448484704","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8647092f7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ab026bef8d1c85e18ede7299437e8c83320c924","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8647092f7.0.tgz","fileCount":37,"integrity":"sha512-w4VE+VoJMKut0VB5aQMO+AjDR9ttA6XS/yTp1V6/aEdyHhM4lcFOYfndvwtK5xgPC6dtFipViH7yj4Uk0iLfAw==","signatures":[{"sig":"MEUCIHOV8WY3dmX5BrKy/M7JGX4V/JU+X7VarqL1JU9JmD4kAiEAk5c24Msuh84DCHztsUe42pz1GZHLdQPg5rpxPCJN7jA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0S0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Bw/9HeHYGiQd9NgrEHXHxQX7FY2A2rgaM08ziPV3EvZs1JBTLyTg\r\nLvQEEESuREZ23fNxB+ZEKa3fI7YycJHCOnkuDrd7edx0ETgRiS3pCBG0rUw/\r\ndd5S6KXHJfKGPZ7TI4tzUWUIGQ3OAkvAN6AS55225EOkvmJTv6YI0JPf09Pf\r\neP7xaubt18ZfoRAKZUCqH+LxWlz/rwbvqQ0WYcCEPYUDvw+tP7bSiubLvqHY\r\nclJcdO1y+2A43iJm6+ktjec+QPBu+1DwJW2L+QE2zf090Mc5dh6pQRuBu65J\r\nD5WlA5+ov5Hep75iGyyzAEC1TnxDsgBwwNqe9PdL5j68RzwMhO5x9IURdJ4+\r\n73XaAyYVJzTtcJuWwpy5q9DZV4IrjnM6aN8LOUyaUwEN4tSjOlY2hjzKuLtB\r\nwea3xxJ7XOTfKi1jJ8P4mP+soQ8Lz3k/Wff495tVA0xRFVl1DF0ekwSE+nGs\r\nNfop4Q/stH3s1RgB4MjLG+5vGjwPYE3rM+1RRqujv0zDHhp2vqYD233w1wWV\r\ntw63rR1cXE+a2QINyoEnjmlifgV0Kh1/CzDa5Lo4s9rlApi5WnmaHqYEklb3\r\nyTOpZyr8n2CHWSqfOZbSanPdM8lz5bjD8YVBw6tqnTs7n6+0JVhNFIGGdK0c\r\nqvK54bPKdCdnvR9mSvgooqrCbKqV6fdFqaA=\r\n=nJhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/density":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/tab-scroller":"15.0.0-canary.8647092f7.0","@material/tab-indicator":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8647092f7.0_1657226420523_0.2503124408889268","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/tab-bar","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.02ecd4d85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f6db7765d8dbfcb0e58c3bee1a6b5a45c505108","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.02ecd4d85.0.tgz","fileCount":37,"integrity":"sha512-nwmvdYdO2dXHINbWvsagu44OrwHRLrpEKBgbszoV6wV6V0lL/J/g40AsVNiKcx2CRz4rPrUxO2z2xDA+tYZmTQ==","signatures":[{"sig":"MEUCIB6tlqqeRGg4GRvYDzJVaj0vIEv4/6gOjNCBJcGuBiX1AiEAov8SN3Xv9i+RCPjMsVbfqMMJHMZfu95cQgD4+cU4IkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFKeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW3hAAgeWYXgrIKrZKBQf1qRuhFgOHZzY0uHuQ9z7qcCF2M+p2aUpU\r\nNegIxUgzvJyeNqS+H8u/KNqxAIGloZDp6uUeaacRbbgTeUJugxvCvV1yVHA2\r\nQxLcyH6RjzTUfMqN0ziuRSC6FbMn15JgKihRRBCS+I38iCTukGD5H1VBiCwJ\r\nRFpkmz+xk4hprNWCNpqBlQBkH07KCRCioy6+QdOUtLRT0DPKD07dXSjWCADf\r\nvQRyMjQMC5kXxhMrSjVHnJyfpvmueRNNKyUQy/JlGZMM6kpeTxtt40gtX3IS\r\nX3Rfp4Wtix3IWsg4+ZD4WFT9DbxJma4snU8T0pgUMqu7WXGz1n4boQvW2BX2\r\nSX4kl0H/cOZk8CWSGtIk/16wrn4NBAIY1uCBA+voWepADpbYUm6hA+A6y8nK\r\n1xlLDxEVIKNYq6D77CQ+V9R5Vwindp3fib+f6xAEE2ku/dbR58N/XeNLVbgL\r\nj5Kjmce1aqKgDxexkWCbMKH9RlQat9onqJhEDdVEJpL70b7uwlxuE0K2TT3a\r\nYKiWQFE1BcqiUWn/DoBVH+B/SEeSeNkzs2hT7rTmT99st/y88HEfNS9do7fV\r\n1vJ0OHqO4m1RXid/fSTpMSH02N1CROvxRNgZkeBNzufURZaIeOvef2GvG6xi\r\ni0mR9vggT2TqCZ+UJKYIP68w9gVwzJb/dbk=\r\n=Fj9c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/density":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/tab-scroller":"15.0.0-canary.02ecd4d85.0","@material/tab-indicator":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.02ecd4d85.0_1657557662054_0.8220034572021846","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.63d3a146e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"005cc11a02447e6e06cf42ffef442b1380dca584","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.63d3a146e.0.tgz","fileCount":37,"integrity":"sha512-b0jdl/n8hGhq+3qwh2EyXqXPZiffVpOd7AFsT6z+6Nbcj9G0XIqvW43iwHkrv5t56VtjD8f1oXAk7Um06jc9jA==","signatures":[{"sig":"MEQCIH6PD10F0H1yB4Bs8wEmg8YhFBNwe0l+krzQ2DaBk7NBAiBrOVCTCLD/WTxZ1qB8texYy9xsWb3BOVs+TRbDfOXNNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGVg//UT0cf8oqhfE2c8a6DPnmpF1aHsupBJkCCZsQxuuPYE1Tv5fS\r\nBPC2AV9t6NixwuQ/cpdNCKvs1kVsZ+6Xi63TudLRssVoW4z0XG6cLs0ff/BM\r\nf16rI/IRKmdpPfm/+4aYibVPmpmgSPEUK0/iC8Xyw+urCFqqhXEO+fh4y73S\r\nMal2FUy0ZYmXeAwijUKDqT7dpqGPDWtgTTVKg+b2/2O1nL5Ns/vCVbwk87IW\r\nxHyLft2pWfyKyIfUnvOfcc5uI+ADAJCd37GpSYQUaSzG2SbyR9F7an+y6xNy\r\nO/CpOtiGUAGkCahHbH+NFiAOGgEWSCrGA0Xv63Xs7DozTqvtFbhkym54Ua26\r\nJesY56CEH7afvbpNi6jmoyOPRo2CeObn85aJXwLGbaAIDSgRJu9rPxXY04OE\r\nOPbQY0q04G5FZJ9WZ9USl6PC7fHvFLJTrkMptZ8vRcqz6UQFSWKjrrVl5MQk\r\nQe6LidmdD+rlsfkHvzqXvlSSQdpmNJoh77luzBOM6flNQXNX+jEoDZkcqASf\r\nUdCrKOXoRj+b5F+5eZ8Jd+W9IkxsZCGFL7YoiDvv+VI8XwsqbY4QQ97VuNUM\r\nn+sXJXVX+UG3o9GHFbL2GM6wplM0nGayYUwaJOzSSr2uhuYpcL6VQe80qBzo\r\nPPP6PBglqsl0c+PiOnNYK/p8fFXHDSvJSPo=\r\n=4HoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/density":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/tab-scroller":"15.0.0-canary.63d3a146e.0","@material/tab-indicator":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.63d3a146e.0_1657625917189_0.5394101393488169","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/tab-bar","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.88db01990.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480e64c76ab53330a0b1ad741c58fed86a78a90c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.88db01990.0.tgz","fileCount":37,"integrity":"sha512-Cc490aOUyPm8st4Hkie2R8in3AYJ4F63PV4Tt9SsWlQpdYgC2M8XprGK7PGoUb2WWnSbH1KJdW7vigd2cOI6yw==","signatures":[{"sig":"MEYCIQCdFtk1y7YE5TuszmEesz4zTG4TZ41OylD8FpwEhgIlUwIhAJjT/AnT1/va90aITNNeDa9GcrgPg0O/Rw9UpjAwLGXK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT5Q//URREWVOsf5rAVB43ZbMNvU4SczhU4Ri5rHU0Ta0f4ZYk07OD\r\nBGs0otVPTLiVIf0Td9NuyRNusADLY3HMy20tDu+WbT8ls6n3WIgwjOqAOPpG\r\nGGbFuQsiLEwBLPEo9h1dXrssDGQqoFGx6JShzfK9bjYo1EtII0GznO0lvl7l\r\ny4h7oCGFEsyXL5YSjJkq9HHoEoyUVRWFyDzsYdZeUVUth143xPk05Xo3RmGY\r\n70zT5mukGZ4vikMRqDVKcLsScIJy/u5Vi9VgEgJrnQAigX4EyeJLGGzxdAj/\r\n3D/4Ds81gnn8y9OukMcexlTqA5shKTUELdzCovd74cLiCRcqIsSYLc27uFZm\r\n8ngqfws1LxHhcdBbkZfVflble+eenBp1z2Pih1zf84CqB8wD7VRaNvuQcEWN\r\n3S4TAABsbbFReigurcKZxiJ8gH1Lk1NrOyXK4hC9wve2wlegeR/feC84mWiG\r\nDA1lHRJBvTHQn+qlLWGz4jud8LR9SX0wME7zi4OlePg8hAWaCZW4gD3ceCNF\r\nHd6/Xm1NrbqcoJ5RHfmBNDnSTXRTlD+apo8CSQt9MFMOlGz+kBvC675C2NkP\r\nByzfAQt7ZW3ZYp/kKWRnF1Jltqq0K7h14h8g+IkAeGBF283sCDNIfGuV2GoQ\r\nbA+UBTiaTL2MyqHk01LKkoxrM1Fd1pGCvew=\r\n=nSpc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/density":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/tab-scroller":"15.0.0-canary.88db01990.0","@material/tab-indicator":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.88db01990.0_1657626099351_0.4704260593563421","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6432d8fd7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c5d2bf95ecc96d239667fcd9dae731930a0373","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6432d8fd7.0.tgz","fileCount":37,"integrity":"sha512-gRlNffSYwzjpsstDcFO+xe1sKczZSl3W5IGlq3kKPeq6myB7XjtL9qCABffFQHcog2KOGG65XiCrbIlYxCObvA==","signatures":[{"sig":"MEYCIQCDpwKT8YhIQxCkvw77y+GLAhN/JbaGoe6PWUhzVdTG0AIhANg6Z46ISSiSq5s9NcmYIUAH5Oq2nWacWAdeoznHK6YT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8YfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof7w/9GMdC+JkOO8cQ+9CY2CPUIonhp4KatklCfWyj0PARpG9fzFWI\r\nUWNL/LEq+WFfPrvVTDsyXvXAv4aHcITAx1Pn0u2oeh6WVLgJTfKwLa4Obahl\r\n0JsN+4DwkbfHbB+3GPJSW3lm6vvGrKfERNPJe2aoqbOJ3iy2BviDGvmGTEIG\r\nHy7kPvhAFY6q5+yHeu2XbgWijxplonVM3YGhBYqb6U9T/8J4jSZ0VT0rMtIw\r\n92YdGLgzwvFOoq7D+CZsFpfMXkq3m3AmjJ83O2cWksW5yq6E9x1raZo3SKSY\r\n1SdweVhkwiuHiS1FVenCPFG5IGYrmAX6Bmjxd/hUEPpr2gws5QSYnXG+cJBW\r\nQX03Xt7wej9GvtfzCcGXi4MjbLcTIAp09hzeSLL+EgljY4mOstly7hSyjZ0Q\r\nguYzeUsi4YKza5ikL/lh2hpS1dDYxmpmM56Pyno51LoAOaI7bCpn7el5D8AO\r\nq9jUXiGan5kv93OfsDbSWZF65hR/8pFPOgo1KMuCyaHiWHLokRI7OB1RVJ24\r\nbR2t6QzDi1CsGqam7m1oJDoSckB0G0WUWiDe1FG2Rp1R0wzUcytbEZDUXUfa\r\nmZGtA8erwxfZJHGWmNqZKK9cFYrMgK9bbebHPBxTuomdcdBoA2gnrpfhGRXp\r\nMI4TDu68epeVR+laqFLqHpbsl0NrIdtJgyo=\r\n=/++j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/density":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/tab-scroller":"15.0.0-canary.6432d8fd7.0","@material/tab-indicator":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6432d8fd7.0_1657783839450_0.03350054655947998","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.085f9b25c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e00aa412a49ce221cfb527917978ecc5f93b269b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.085f9b25c.0.tgz","fileCount":37,"integrity":"sha512-TZNOqGFpBPPf4pJvdCttufJ+y17vlNiFJkyJuD2xghI6H+D38jNCivSIvMrDYnhhRpoTir9148LnJBbfxuVAqw==","signatures":[{"sig":"MEUCIE2n/MOT4oUxA3hLVSwRAiV+n1Q0aM5Md5Qj/qVey4aSAiEA4Mc6WVM7Fi1Yvy/iKiqMpk6lzsRdf7pQ3tAh9H0PFlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EYZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjgg//X2rw6wmGoTHfQOAwfXYdFATfP8cZc3IuPFqoC9cn30hlszI0\r\nVSkEfKIQbnGHFO8rAxFG3NvFDREhQl+8p8B8byQ7P1P7pdtXrYMV8zMI2ZXR\r\niqTlw9TCq+sbaai4SSrmXa+qLIjzndBOowj2YpnRi6drqs2z5hpyj9T95Sey\r\n9+cdjntb9v3d3MiRHg9Konc5s70edSt9E6QZ431+BljetTx0NSLHPZPFFMM6\r\nV0q/6oPFcJ1fgZbVAg7tfXpl3iRcBveTcli1uIWBy9A51gLfF70gfrA+0KTJ\r\nst9ruapn5yO14vwcOPT9DCiR7mCBH8pmA9KYruw2AZi8SFjyC9rvQvsVPchY\r\nNpNZczSO06iBjq0Tjs//jGJw+PdbRwtbfcL8XAyLetZKimRivSt+6uDfN/zN\r\npxlJoqwR4pP70xiSFtXhBiKyhriOXGkCU4fod3SlZzym67J7g0uhw4GgrdPj\r\nJR3kXnT+FcEqvoBXcwHMXdOhcb0uigESLoxiMIpdQ363zrWfFJVmU0M+OHy5\r\n4DOy08NzxotI6nxBlsRBadoFc+y2FNvjO8r3F7556DGhA0F5uiIeHYx6AqSr\r\nclvz2/8z+YdebJ1gGseAv3CMFQZrXbTh1Euliq5p42whLPHsQN51+2pH9yV5\r\n0y45nIh/p4A9GlixHJH1lQa6jnX9h2QB2bw=\r\n=5Y/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/density":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/tab-scroller":"15.0.0-canary.085f9b25c.0","@material/tab-indicator":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.085f9b25c.0_1657816601655_0.8391696374713291","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.39f9424b3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4d14ecfc37628752ef8ba8200dd154e218778cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.39f9424b3.0.tgz","fileCount":37,"integrity":"sha512-GuD+Q9MmUi1ZwAx2l8fu0mFC4aD73PT5Xm5IgxWuNJFNfBSqa6vQfT+kZs366HqoGRndOuvcSrerCFbyMayylA==","signatures":[{"sig":"MEUCIQDyGzzCQqFSfv0up8zqqgpmkKwtVkBQ2JbhrZfVqcdSTQIgVYcysxRL0MRPAMzwrtH08wB/8h1kmDRiEHvCP+qD9MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E06ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb8w/9Eg6JWIquz7X7Np4JivfOpPqOjQbsBJO6WIxqlKXS2Rq+G8AL\r\nHh/ufHSHUY5YYZDAH59jtpkMnbQUzxOsaHOseBIIrek6UJoDxxEBXnnV9fKi\r\no6ZiHyiJKyz2/NemZ9MyW4U9u11BWV3Up65VXXkIfeSK4hIbJcQ+ucO7PwH7\r\nvnYFkLiC7/SPzpz42hNAVz5pq3nIBzBlaoxWaxc1K1q20+nhTfnfNhDtvUMr\r\nsDvSzgN83l/LW1CYuaZpu1+I+5KiiMqRog/WoeKMJt8t/Q6Sz3CgOlm1favj\r\noVVUTs0hG6DwgRnfFWzXCuLiPN7qFX7k3/hvyZuiL+m63btSZzOMlfjbH/LP\r\nH6yHExE7NMxXTGwBdndU4s1WF+lMvKrIRONZfw8/QUoQx3zoZvHC85PM28yi\r\nhEmrUJ/aLmX0nf1E3LR8H9JQJ/0rTR7dpIxgv4jV7j/Gv41BhmO80J041Jz3\r\nd1ta/E5zgBBCNnc9f8twKO52SfHnkb67kyHEsq8ldrlLF1kuEzJLKmoFJpuB\r\nw59oeMDdGvieIF7KX0ER4cjt+nEf5tbUebBaElnLkb2icK+ooiQ2QU0Oaiyv\r\nwM4dTMZPUy4iY7uFSJ5TuGg/vxAw3h2UwhKo+EcS0UrRRAnCmgkGkALaQZZq\r\nAetOVbwrkViiaG8Np5I3K7Vxsl/emOq28FY=\r\n=9LbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/density":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/tab-scroller":"15.0.0-canary.39f9424b3.0","@material/tab-indicator":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.39f9424b3.0_1657818426722_0.8372935466596723","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ae9fce587.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7639c5d5b3f13475bc10bec5688e19d1a848453d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ae9fce587.0.tgz","fileCount":37,"integrity":"sha512-ixcQXLx/DKCizoszVkpwXf4iKQtk3dSVSqvzmoCANWE20+kqp6Q+4+EegLChMUs5mWH60UE4djlN5f3aNBieWQ==","signatures":[{"sig":"MEYCIQCQ/j3FTSYhmSO3HS5vZkO5mk1nbepd+F2SZ5pdwCGeGQIhAOOizTrM7af0XL9ARakHkMNgAHrwYMgKnjhlbnRFr2PD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNvhAAoYr2g+8wMnR5Qu8DmOB9sIFLjZwgu8b1o3DzkDtASo/Wi592\r\nY21C3KB0dPP/TnRKN4NX+s9gfCJDjbYOR2cElCV7pKrQtVRPK1dDQB4n7vVL\r\nr4jbWnztD/GC4Jbu9PhKOoQ4M4NckiyTSTcp3DVI1MgaYTBJ4EIdGj8r4222\r\nNlwDlvkbnx10UbxlslHSIueR13dc68I1N5vueHI18qbtYvj6mzDVCYLFXeIK\r\n8Xj7Wss8sOOFVvdkuMvnD9M0DxbVOGYL0VYtu34K9AxKOpvnWKU6yg22LuvT\r\n8QiDZXwz4iTFDt8rNXz1Hj6kHlQxmhchJMC0eAr4Vyxgs+hRaJcN7MJfsMVv\r\n9Y15b0nr9e19q21MWbQCvEj9JIeyD6jn0wwk5EUok3pfhN64U0huwLYyBVHX\r\nO3ZhjA4fxCFA0ZEcMHaR0bUE3vjIYYG8wbRsjhGWntVK6v4N0k+fbJDVXAhU\r\nxqDeVrkBGU8fOFf97oD4ZmsKrbysMMcPe7daZ+toC1Flz5uR/9LIzOh651Ku\r\n0kpHW1i/TSC9gnyxuk9wBlrOqZrbol+Qz8E4ZwX0k3Xm3+pNbraHCwrjrhvE\r\nQdd52+aE3dV96h0bUPxPdHjGOdqbIs6jdX6/RQHhLzyMRGTPM1QnelmME0h0\r\np/XGiD6eGc8wSnKlBLq25GtWH55mx37IEG8=\r\n=8zJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/density":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/tab-scroller":"15.0.0-canary.ae9fce587.0","@material/tab-indicator":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ae9fce587.0_1657822194044_0.7765150428882255","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1ebddc343.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c8c81cf388a6bae2f362fc648b5e2b96357fad","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1ebddc343.0.tgz","fileCount":37,"integrity":"sha512-8q9hD8jSXBbyhxZxVYpiXPNh74hEVwyXRd0W0XIk51LOdW2K5w8DPN5D5uOhN+5t+upSmslpygMo/S79VByv5A==","signatures":[{"sig":"MEQCIBzlXchTMxjfBQVRKSCA1v5xZU2ItJlN5PVgFoOcbNC6AiAepTfYDmIMtDkTlqPepgi4sJytPbHibpK1qujEEgf/mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sp8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJBA//YajE+/lWEXb6bx4ewBtqgYYfTgYpDXbgjS7rLtC8v1Wx1Ce+\r\nOFkePMpfN0PYDzlD//xqXxyhhlBWXomIgkY+nHUafSjQlQU9lDXScxN9/+KH\r\n1I4C8rvF9F5dkWMHs9kF0gcEBZs9zgzkGKDEPFQPI9152Im4kxKAKcOpu4w4\r\nSyY65xcOgvtNzjrQ7n6IR+xk46x7rn4ge2yo89rOk01Q4BQxP9z7yydVdISy\r\nCpHudbQvUWT8IgkfnRU/TAjoB6VWEuPlL578FEkC8zivCUSlvioXI4bfFR+F\r\n4DvUfjf9tt/sKrnZwgAzoHKlGx4zH+WGbeKAT76G2WDt9q+5AQz0L+r72zNf\r\nj4Bhvif50rwRsKuLqpOXw/HzVLwLKiHs0TxbVO5x0KgRapVaKwp8S3VQSDgQ\r\n5JpVj3TyE6MVm67QWd0MFuWYE6SDPvBp4zM5TlMyw+7D5pHY5W0ZHn0sp6pu\r\niDbgYrLts1JUqMj9SpobtIIQGeUXmWk5G35b8ReDHwqhgk9viCw75QpTpLD8\r\n5IItlxYUDC18YyALZc4Sm1Y4fFaGV1yaNIX9ZVdzsX7RNuqmbXTLRvZ53Lua\r\nFdG9uQ9M9FxkWJ0FdRTigDwaLQrhrOkS09ID0jsqf1FNw9CXzbQ0tueKZTW+\r\nuHRLBbrD7O8fb7ESZZGOvSO16mz2k83RWY8=\r\n=uxII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/density":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/tab-scroller":"15.0.0-canary.1ebddc343.0","@material/tab-indicator":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1ebddc343.0_1657875068699_0.04621477136772967","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c5018840c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b88cd63e7cbf6ffe721c87853df6eddca85d862","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c5018840c.0.tgz","fileCount":37,"integrity":"sha512-7T80s+PFlTAMTbSMtydfPpycxpfXkfjdnHbKTvPd3KDZXWZa2yCQA8zGjg40GkOtFt/z1KNoXTeBkyoG601TQA==","signatures":[{"sig":"MEYCIQCL5dq8G/C3bZveWEMpe4aO9wwjhMH2r19osc3uL+EHowIhAJ+Zh27lJ593DBlIVnY2Vj61fr5FeKdotRGxpCCpevdb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SubACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Fw/+LXyvCeK4IX2M57+XE49chsMSK0N5mwo7Egip0AEZazcZ4Xhn\r\nvRCs6nOywQjIAo+/6fM8+ClIRLXNoMP2WscRXtOerK37EGQTPhVcBsH7DCIA\r\nemXlWy2GVwOEutKjfqSFbaWE8Hnc7eRUtFvVsh9NRrhLuB6CXE5y5/C4UJum\r\nCMdp+utGaFtGBI3zQ8evbXD3NpIjSWyImEGNdOF5Wrl8SbrVHc+xw0zN0bG4\r\ndKcVnIMnmRuLHQ+M9C9eq6Dl7xlXLRgLqYkFKIUEpC3foPjguE9TLeLxSRdY\r\nd9EdVnti7AEJU5YBuwLLETFIBn4PgkPz98dGdJnwDsyxYTc51inlkeWCaK2e\r\nQ7IunJris+yI4HiQJPp+ExXvtIaCwkLFHMeMMwwFNllI4hWDClXg8vS/OPKn\r\npaSNPsryA0D8HxoPjfUsJqrFqXhQGEUtY5X6EwpAVDAQJTE/sj+8+AsPSBbR\r\nItf6AxeG3f1YTwZQbPLztVHfXmVqVsOkzkt1fWqFhTgQA/IV4aDRVXsVzlie\r\nmpcwiG9eiOxWAovCj2S3qY+0NmdZ8nrbGDBZuL3+LvRuwUcZHKBqGVoTcAp0\r\nGabdZxUxr0gX8BIqCvx7lhK/ROZJdEWP0C1TUSf+iSA1Vahbf/rFCb3AZokH\r\ndS9+kjYxEdM1AtCAox+dhqTi9Nf6DPq+R0E=\r\n=LPg4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/density":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/tab-scroller":"15.0.0-canary.c5018840c.0","@material/tab-indicator":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c5018840c.0_1658137499343_0.4130374235794887","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/tab-bar","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.551b40d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed3d039faca77ad3cb6ea882514c39c695af7b90","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.551b40d18.0.tgz","fileCount":37,"integrity":"sha512-FWMAJ52vyBQgpd/cau6U5jR1QR6GrZa9DrJ/RiJb05tyuGk7V1zsrFwywWwM00qroYLhD9rfPipQFbrFH9IH7Q==","signatures":[{"sig":"MEYCIQChUg/VzzTZwhfsm+Mi+7RmHzhKaolZI/HYtkF+k/hF1QIhAMhlUAs+F3TO2tSjckjdIFP+mVObMrKNwd35XXL+NBnE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S/QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvRQ//eXjgiSPD6Kmc1b7TX1HHht8sM4BvELi2jC5Q8+pXEVzMry5i\r\nEGcwdKbs/cSpoBsLzVlDgwlUaebxkycX6ATpayB2HRpk8qoJUShloRfBiUze\r\nYjzGCC9u62BgqusNyKaPwAOPhkDRKdN+gjAVorODqJutn3z37I/2UaA7QY8q\r\n7mst2oCMAuN+DAv7iAQao1eUFDcrgFRKAnF3YaQeYka/plRf2ldltJrflQS4\r\nkvUfXb4jLbMr2LtGxnM42jYXCtAMEVE0dzR6ovuZR4TnFxi9TYKhM2y7MLru\r\nzTGeSPbpJMhTAprsi5ZVmnzFYtbHHi/uE1b5xQEduUDB2paaCP62bAmVKWM5\r\nl8HW27CCA5nCVz4+3COpufI0tkBwQEX12WhLlbBXvQMv/FBVKy7o6sogMJrk\r\njwROFplXPKbq8NnYpGTV/YxHNwgGuklyCgQH3mp0oZD87taNrBq48mDoGHVb\r\ncVFS9R/Fzw1LrG/vRTckgD2pSdRzPFynN/PVOWf2uWqwwnZtCYWEHDKQQl9Y\r\nqOIUjgR6hcrWNAp7Jrx2em28K+you3f1lLcZSnaKBAUV1KucXV9b6EVG52Vn\r\nHc544hEDlN/7iOx7pLMeD67j8+cfiDp99rCvPQvB+KoIXlh7Zgs3KS2LEFBS\r\nCQ+pOBW1fPbksUtzQ+EHbgdf19QWq8r1wDw=\r\n=dliL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/density":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/tab-scroller":"15.0.0-canary.551b40d18.0","@material/tab-indicator":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.551b40d18.0_1658138575920_0.8967083496072998","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cf9f12371.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfa77b1f104fe7372b45972ac4ea7fbffa5cdef3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cf9f12371.0.tgz","fileCount":37,"integrity":"sha512-ZklKVEGrjHZZO2lINuFquSt7sZ39fFBriyUrKmW/E8TZcQIOx9jCInFpYp0eAauO7rBXFSVyNJq9rt7dmacXdw==","signatures":[{"sig":"MEUCIQDHyudFdW2bL5P5nDKkCAZoCe/k1hfZgIo+ebNt/c32cAIgG1hh4IxibHQhVfS8g7ar3eco2twHYTkqLcJmyQozCbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNjA/6Aql6TLhN6qsijj0XCmSipsHtmbcNAJ8vjN02xxwh8X2zECe3\r\nDmzHZkmqJAO6ePM/dzLII4pZXfEuK6/azO+XiHeKuNxJIXQczmWdmB8ku/vz\r\naTOuX2ZQx3xuImuQ59mLS0WDuiC+/e54F+8bHr+8EXwUSmmcvItOC8KYJ1BP\r\niyGZmMjwzSu3R/OjcGV8/A/5ns1PL6RK5BgD3JnN+I4HnF+aakyaMZXEY3lo\r\nxVfUPpTvLKeMHJU3bFwp7UOxi4tCZlDKKHS7vADF2zxsg5Ur3fLif61PsXQY\r\nVzPczps4m/AVmL9pcjJwGNxah0XRff3resPZEgiec4M9knQ/R/bjHFshwx50\r\nuZTlet1oa0BAeHQuyU5xqxpnDGTFn3jplmx7VWJPn/4NMXN1He3h1CDvCJuK\r\nbpeQKoe3j+51ONFzFDqRbBVVzLbEzYzbi6Il3BRW4jXiHwW0NwB2991NQaXr\r\nPR0/LdQJYTkgbMm6mxZ/lo0LCLiFEo/gqGKwbpRXXhZJRcBhRnMq3/74KYEB\r\nB1qf6WvEqPFqx4SClYmb8PSJjtarmUgjQKP4rdA3njZcj6gtfSP4GK/NeOHA\r\nQNlcFmJuF6oxtsL7t1wMXeReZgSwuDHzgrKjjDsb0w7MGrR3iQK1VV7VxIwL\r\nHu+b2IBC7S1QZ6wotNVNM0ErDJpBYAf6BOs=\r\n=PtC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/density":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/tab-scroller":"15.0.0-canary.cf9f12371.0","@material/tab-indicator":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cf9f12371.0_1658138820570_0.7423242573960303","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2797ff8b6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed67b3e83f562a537842c60b8daf9d9c1f021681","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2797ff8b6.0.tgz","fileCount":37,"integrity":"sha512-xnO6/CcaOiU1T8/9Wo+mlIj3A2Z/njARFzJeIuAlmOa3UNwQbafey9J2gQ95ICVHoeXXv8fb+ZkQtbL7Ae891A==","signatures":[{"sig":"MEYCIQCk4qOJAN9bn1TkIXcayoQ3/IlVfkB2Q+J1iQsPkxiBigIhALvtKfB6HHPNOvAdESe/b+1Umlbj19oFfUXGjdZKgXMQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1foaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6xxAAgOhBsXgPk3q45dn0ZsGuxm4bsVZKY45e2p6NYFbMrfEKKsNk\r\nrhG0AWdKrzfCL1q0tD3MKrF8UT/BcLcgwo0T1kdaMQSColki3B+tT7Y7Svo5\r\nw4Kckp6/X7OvQSVAM4/wdaser5owcojZCy9anszZDCx13CDihLrAFrq7Czam\r\n61G5F+vP436P5s4H2K0BceJfrHiATMLLYaCHo4E9dyyGWFE2GnlAY9XD0H2U\r\nHEEGuZg4uGao53SeNXBJwaAbu2BOiAMpgSYpepqTDttj85ZtS6DsBYSUOsey\r\nk0yA+LixeLw7hOcjGu1XHmoOMaaOpgoApTTsXw8wFgaOB4veENETaDuuVmpN\r\n+hYHt8aO7yaxmX79ux5hCOtDBNft3DzjZzRWtWBEHM1vCjocdYsRwivxfTcT\r\nney0dJGCQf7DBzxRPjm5msrRCfNUZHMUclyW6Us2ynueKhw1e/xTK5SpHwdN\r\nwm4erRuJy4VooUQ5ep/sGubnEepjejfFXkEqgOe6y47pNJf8LwtGr7WWJyK4\r\nI1URGn5sX+CuCAP143rqibiQl7iDMqwlQlvt43RBJZUfoB9nza6UPZX1GeaW\r\nb/DdHUW2PgWcl4Uub3deRRFjpXBl9szeBooqYeDzM9v5e98gQLg+6AvpKDiF\r\nXEoAJKTGNaGYHCQJNIZHuEbzAKAIoJKQp54=\r\n=70HQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/density":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/tab-scroller":"15.0.0-canary.2797ff8b6.0","@material/tab-indicator":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2797ff8b6.0_1658190362138_0.6719657953458669","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/tab-bar","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.110fafa17.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e66d7532f87e39a33fe3ec6a833c3abbe1a1752","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.110fafa17.0.tgz","fileCount":37,"integrity":"sha512-eX9JDplVvmXl9BoNe5liKRvDnub3nR6YE7DTovjPmbiy0ex7i6ZJVAN9Ukx3nv4wzlJlOBWsGUW3TX6JMiWg6Q==","signatures":[{"sig":"MEUCIQD+zLn3VMPs0qPI1Tzc/QmmSKiFoyvGWMRThgJxdjjQDAIgL4l2RQmyNVOUefBVL6kv3Igl1UgexbEoIPooSheGCJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17NQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/lA/9Ht7MKSjE6j/g+OtK/yKqlCOdg2t4dEs2M/V7MIQspK5ak+5E\r\noQwMBrUzWHHa0OIabJ43RV5in7WdFo12iCVkBgOugncGaovx9AGp6bzREZh/\r\ngosStIQep2e1hwtqoRiIEGeIgjxqBtwFx/IQ2bseTOIyIVQi09Id8QPq6bgY\r\nrhJEOFs3zbROZklAUDh0DDMrOvUAS6RsL8QOp1RotIOIAHlfYcYGgpq32VJI\r\nlqTboK3vplE4a4uW+5VLmLkhO6FogbAECme8jXf6tYpGy4QvrTFQiAopQ9F1\r\n4/pHp2y8Es2EDSOvhK/GnyXWFRBv8uLNHUu4WLwxxkekjsoqI6zb/pJTbgD5\r\nrqq8nUd1c15ijTwUzt7WXf+nEzRCzLEm5vdCn3UASY0suO2S9bsuQ9+qG2NA\r\nDiqq/ieBEFNWgUHD2Y3Ly0BXpZYYuxNfEkCOQskHPTkw/ur+ikVHdo38tJgM\r\nyXOklm9gMSbrB2NpcjrKpPMz+PhDc3VrkCOD+ALiUc/nGaxvo1IjNsCpfpt1\r\ncyNpNaeaqfRSf2Msqo14mEjl+5w4TPDOBh5+SdXzJ2cLbWHEO7oCDf4cDZ7r\r\nJ+E2KyNbVcoYH/uActcvlzJueE96geXB/HVs2xklbwdf3CZ8fyjQJyeJp7D0\r\nnamN64rK2dNyw9mSALjBGkgz5HbeMApPvQc=\r\n=g8zb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/density":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/tab-scroller":"15.0.0-canary.110fafa17.0","@material/tab-indicator":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.110fafa17.0_1658303312233_0.9353974639158518","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.386ef1d2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b17611da0518e36a885e62f7504e076ef5f151ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.386ef1d2f.0.tgz","fileCount":37,"integrity":"sha512-Hq0L0zeUL+/+7Z4EO2baWiwuOKsC9cZJRm0rZK/3lwrscej9GE5ZsruQBZoK4nH6lZsjeU08D+JxksDTtPHOTA==","signatures":[{"sig":"MEQCIGsrWATSOMLwhvdTtEcIeF5JbhP+BuUTkvcF46g1FfsXAiBzdHxqBWklyoaFaWxiu8VvSInGtzyMAFf4ANzyYu/kLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Ee9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd0Q/+JLOT04005QnyHToFHobJwuY6Y+Yy2ybfRhzCO3+SbHsRJs6l\r\niRFSZhkRDGKcUYPyUiyBy3H3s7aRn6tNRMShRbH1eozmAzVdYioGRgtWeo5n\r\nWqFdy8wvp8RWmRyKhG+S/ZfzqLt5q1KTC2sdDN1RwIRM0MRYaSDza6dQ/FUv\r\noOXZ58esmbsC4nJndCOo2A4ItKHgGhBKU0CDSliGi8EyoqvWb5AuR7cRXJS1\r\n6UZ052txAcIL056KZCpZI0D6HSbQPnK16oymgKu8qRVkbWdYMQnjESFNxrQo\r\n+TULRFHSc53szc9BzfRRecS4aOeQWru3UU6rQiT6hZJxW/YBc6f2jpaZDtYi\r\nhp9ZJyubtSsyZXc+UVehH3VIGMQrdU51iRtQHQKVmDBs+6ezfrWJRlKo/HR0\r\nZfz0H4dhCuXmNAK4p4otua/8No16ispx3726GHi4TV8VyalorY/qx3+yaSBa\r\nKE6y7J7I66AO8s+jxBj1egJ17eQ4OgBUvMEwHo2ECLh0RkbprRwUtvoDD1f2\r\n/cyWmASxjVaoh75RXkpaBx8qzX7PXbXmMBgWiePzWIGBfrFrctEhJqXGMQwy\r\nCpi0BZngpWiojNf9FONY8AKulD6htttdAP6Sn6UKUulj2YlafQFfPdWfc/L/\r\n3h+NMs1XYojowPblB0MIh8dvhPyx8BpHgxs=\r\n=pqsC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/density":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/tab-scroller":"15.0.0-canary.386ef1d2f.0","@material/tab-indicator":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.386ef1d2f.0_1658341308845_0.6805151200883883","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c3924efef.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9380c6cae88588bcde42e5a0e7d96ebc9041fb51","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c3924efef.0.tgz","fileCount":37,"integrity":"sha512-Uj4+91HGC/BkqTZ5U0uApsUSWN8tlN6Os/5+QzM+2EvNUFuu7Vk02wbw6LMBLQHDJbr7wixGNEddDpBiyeiEWw==","signatures":[{"sig":"MEUCIQDeP2P+5cnpeR5Bip8ATssY4NB52ZkOrlU6mXiUmTXiSwIgIozj5P3ZfKMkv2tE4Pub4F5I9VPFUaoqefvmEbg35Iw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EoEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxIQ//VI88q72O6WLaoXfJRmai8mho4XfAz8ono1rpJuj/CiL7BYTl\r\nMFis8YJObdelZasf/Y7XxliKwmXEORDs0BJPvU5HViM2DHQPAw6/NOZXDIWS\r\nNwYAXJ7QXuuts8k7i1cXRqpIy63BZgzdtYHCCepRt2dwr7rwENDPPVX4qFOG\r\ncj9S641ebe54Bgc41ULemazHi/Y45woLobRzZKwch1q8JmC9c8zijCfqmE05\r\nVoFIEkeuNQrXIlTV+cg6D0JkfvlDJ6rVVc06uBAkp8YFRDkkeL/B+uLFFnwR\r\n4ed14gbTrFHXwyagTQ1RL7HEM2SSWrnoJhMtKJFk8o0z3qvHBCdhsCQfvQ/5\r\nrTCFH9J22AUla9O/q8Hh5cb1pgqdxlyF76JPcpraQ4lBn6Sk/171gat32r/L\r\nbrgWL+7T90l9zjU7SDXwStidJTBIC692EZOb/AUV5sdktpQAGC/RFpdMYrc0\r\nYejuQy7c3/uL/qZRLjZQEzK5sjgJeYbgrpbWltwPWbbjmF7Yc9QxhBDsKQrW\r\nGW21Cx4Z1lC+u0yFvJvXuPgmemgyYGXDPNXJ2SRp5trA5A1Jon+/pwH6tE/2\r\noSt4FBljfKBDf6DCi47Dcx6G1Uscj4w1Uu65yvTi6mcRLc6a0D874gAnZtjx\r\nILQUjMkVYzzmmSuDujnqxQNKJP1ll4uHdTI=\r\n=oIbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/density":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/tab-scroller":"15.0.0-canary.c3924efef.0","@material/tab-indicator":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c3924efef.0_1658341892491_0.006411560742293876","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cf5c5907c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f7114a91bc6edbd84906b352bfe460069ca401c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cf5c5907c.0.tgz","fileCount":37,"integrity":"sha512-4R1UselWSh53B2CGw4M68cD2uBvpUAEqKBsGDWBXqgrz3VJJfDQT1HrEdUDzAPKMkTrjSS81w5dyQCTcye1ggw==","signatures":[{"sig":"MEYCIQC3F5Swf69ZMaBVk6T3Zkt5Jf+b5Z8kfC6AWRgq7TY+pQIhAMFT5CumPyxUV522tmnEUP2/xWdTWzXkEL1W0oXbjfpq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HJbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojkhAAhNc94DLLlHKDR3mu75SiEB8YiWZJWAN5njQqe4act4b4cQiy\r\nRk14KndBp+YfIrnSreNtIsZwnSjUCM+yuhYbL+OrTt1aNoGPm+qPa0zh11K5\r\nzwKIM4TCed5HAUYcfyNlmsLNdpinNmGy9woiQ5T0lYGwOXHqDXkX4E4vtTe+\r\nCwAsGNgqCKM+INeuC41ALOXDe9wq4yqIFnzJDP9xAKjsgR1nUFyt5sifUHtd\r\n2ilqFyQ1TFuI7xSLWStFwVHi1z2V/tUm8XOPB/XLISH15+GintYyJahR8Ubz\r\nXexHZCa7gdSAyRHqDOznX4HMen0FWeKaQZHmf3qdUAkjsMvHR5C/eudm8hFA\r\nRtkVKJTkzrylU+mzkZe3INmGn/Utm7kFedlszaTKdpG8mDBA0jdu5+bLbRRo\r\nL28+1YXionJIDwJ5Or29IwVQ+vtcDV61klY9H51kZ4JgJnSR2KQ+9uhVd+ql\r\nvbR6KVAIDR1KKpnBqYCjcS4B06okLCDT7AQ3qCUjip6yPLKhMHLfOuP/gW1w\r\nUjrj2KhdWsH8fa1zcfEs7qtWep7oclRu7fHMyF7JRlAAmAGSLYH5w4WtuSbt\r\nTAa8Hvax04cL4TmK2yXNwZZfAxD1ni5ynbriJj5YOV2loOtyXKmvflwIYYMd\r\n1WvGiJZTXBpIUCyUmtGhi7Y/R8AZXU1BpYc=\r\n=fV+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/density":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/tab-scroller":"15.0.0-canary.cf5c5907c.0","@material/tab-indicator":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cf5c5907c.0_1658352219500_0.7439961871193963","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0617e2319.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313037e9f54617d5e13203435fe03e1c2c7f4d93","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0617e2319.0.tgz","fileCount":37,"integrity":"sha512-Ndrk7zXQKb1jC0SQqZWkTTm8fs7Kw7y0jYZLEzuQcm4kv5uLIRzmiDY6hUxy0LJAg/uoDtNfJG27b2pOWGBHdA==","signatures":[{"sig":"MEUCIQCxD2pSVo2QjOkr8MpghPwtXZ3SDyMfnuefAQ1uQrT7gQIgfMcIeaxrFalIR0PqDuCzVqIRGEWChIRVkMLz4XalPPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HalACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE3Q//QL1s29qt5wJ4DzbNXEJfLlshOl8FopqmVwg7ra06SxISnUwU\r\ncBFbDirUR0e1hj7QxpFxtgNe8Ptu5QKs8Mk+OrPHg1quxN9kgwC/jTXyK51z\r\nuK70Y4IxC4vg7FHb/AtOBQhN2e7/w8UvD6J4ZB2+mGKufFrkUB6x446yZ778\r\nQnaHII3BsY2wLdXn4+TFUK9rms6flcd1Goitc/rF3JelFB0N33L4P+VRT+QO\r\nuGMCNPlKKtECcuzpmKIIzONtBUfE9Xs5TiAUo3CPG+/jwS4yMdnYA7gdKSmY\r\n7kLusWAAUXZ6ntpcCyh9ATH45cjqDyssCGpAv6sKRF0VOhXYPkX5xVcvjkEl\r\nmlPv3b5y6Gydc6FQFTi393F2V8iasMKRuKytyT+kB4pxPwETKhow/b3R386R\r\ndJxwphuh6LB7CrrW4R7weM7bSSlBDYjPyV2PbJ/99/5RHtLlzq5bSsCWYk11\r\nnn6cOv8lTQreASNtyoPmG1yo1n2ELXV0ZaqfmHNCQfDyMP3ARM1+sYkfBeEu\r\nfe11+B9HF5XdScgAH9ViItogi6etUhlM3l4gGxekS09ddZQMvDWXxyWivj2X\r\nCLPoCOm57ilDygZln66+NHun69EkAUEX3hVoetfKQk5ZERfVhnA2IN1K8P77\r\n+APaBbcIqKYfKlgiWlXpAOHX2VJLsbpp7j8=\r\n=1N1D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/density":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/tab-scroller":"15.0.0-canary.0617e2319.0","@material/tab-indicator":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0617e2319.0_1658353317560_0.7212011609933338","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a743b7967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e32e8ac0253a56f28a7d3a98f8228524fe0f820a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a743b7967.0.tgz","fileCount":37,"integrity":"sha512-LNi6zkrKZQYA3DuD1EjWCqVjzBZJaRFwsj2yPBTdgPVK4vPnjWZistE33NbiClR9j5KQK9T5hRGEii8kyY1Adg==","signatures":[{"sig":"MEQCIHo1ZrNyxxTC6P7LmYB7C784+ikvI7b7EKHfG5d6OfAAAiAqnRVprVZvfVvbxcsL/q9oohBmjfWY8Dy2jZfdzBauxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HqcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokvw//cNCtQbeLxzJnn8St8x2otdIQpyokTOX/Elpro5CXhXlwXxF7\r\nhyWYotJY29Kv/rZdXduLz6xOBiUbJ2UETN+E4SFDJ+RV7NbWBJ225GUcpvJS\r\nfbqtKsmzzC/hsX8MmM09WfKqpyADYISjIYn+iG+VUStqADx1TijPoL8xMCU1\r\nR1A48/xXEvcAZyWrAjinM2f4whTz8Yj9jTIj/I3OvBEF1TG95fvvCN6g2Zhe\r\nUPMGWYlpla3aOZnBcpttx7j4fY7HIapPjM9w1pNLfmsezjZkXdazAP0Ny4zy\r\n8khdt1JUD+9O/TCCXgupC5zOvfMZ9w3aoJ/v+pOdZ8wedb5Ce5BY17yQX6vG\r\nWBFsdY/kliHweEzEsAJQqtE/jeLxY2d3ZvxgE/M9ewD6p7A0t7rQnA2NmO0P\r\nOKf9M9Fjt0EJtfEiANQjvzxHekHLEt7gQPBW1lUm3wQeKjF+o/7+JHohrBWU\r\nbw/Ewmeq284XmRzLyVfcYlsYySaMvv9n00w8Srtm6/UsD9ijO1ALh8UTMDo2\r\nd7ezqKUwTxEG7LcW+xkvjDKaOZOHq7r9KVnJVxJO3y5YWcQdJyKsmphbMVE2\r\nXVNJOgtYtC61kho9v5gifcdRKHGc44IteefW/1WVqopLmj2p+BWPKd4G7fRw\r\ne+W0t5zpIziHky3s8ywG85/18eZQhdKrK6A=\r\n=H68g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/density":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/tab-scroller":"15.0.0-canary.a743b7967.0","@material/tab-indicator":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a743b7967.0_1658354331988_0.522840272359266","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.69fd619d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4392b5c87011f86c8f8eed8c68c74ff37859b98f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.69fd619d0.0.tgz","fileCount":37,"integrity":"sha512-o8jUdmYqJVDvTgbmgNN0U2EdNEzwZojY5BC2Ys8r01DliGJ76AU6b3hWmefXchbVInc/+v+nDEtxFzK+8l9SKA==","signatures":[{"sig":"MEQCICFNE43AJlXLJSiv2hB396Zed/jK+QddB5uafmOvrVZeAiBvc9jcyH1dEo4zEEunhDoDLldYp5YyLlWCfpnn/4NfrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H14ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8og//Y9vu8zKxN08J3O5G8BOERfTiD/kFvrRZvAX77jFvQ3mcldlY\r\nVyiNv4EoLPDXs4Aqh/RC3+s705x55UboeCoIXiXAzqguc+EuNGAZUcVa89uS\r\n6ziJAowM1GU3PYf2h+bmG7cmacvcS4ik44zxdf9h5PGBuq5mZNtOCq6sQhCT\r\n/+YZcNyvx1NiBQmTK88PVzWLFw+V/eDg3IpbfH4mkVU3sRetMxXa4ENCIoPq\r\nzagWB1SI0yB3sWrIkWSQNEYqTydTPCvendkd1kaXXJeT16vbCW1IICptsbDO\r\n3spoyWPVROknUlAR6VLwK+pMAqpjwL5kRqW726HUx/KbLaP0E9LmNxRdUWjq\r\nmjkvE7WR7QjKzF/UTKVeQvb1wKRhdLEBD/n2VCuZUOzibjNBgTWwxAohKXGO\r\nGBt7JbjnuJ5zSZ8qoeU3Jk8mTbHKjUnGcW3/FZLLLCmjaIzU/8xkwBlsZpVT\r\nqFzFsXq+Ixm547cFESE6XnH+avv6kIxPt4kUKTc/0xO5Jrnx0M37Su9mluVP\r\nYF4KsfB7/gpcKabABLHEOxwpxvBtDuAlaReSyVPN/oMtOklDejMu24xt09Ec\r\nFImDf+Qk6P9s8uORj7RYQqZ90qB6HupYozbD6FP0KBJDdlNdttxJQi4jxyxP\r\nOWCI6KEYRnNqDPGe0Ic5RM4tnlaYYhOW/Cw=\r\n=3NbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/density":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/tab-scroller":"15.0.0-canary.69fd619d0.0","@material/tab-indicator":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.69fd619d0.0_1658355064038_0.13268606932685234","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2a6ddc1cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8025db4c802098cb9087e3d16eff3b504c2a82c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":37,"integrity":"sha512-A4nkiYndgF7WcK+paz7rJ4KGRdmA9kM03jg1UIykoSpdsm8fMUcuKkWqNl8NhSs8OjgHn1nx4cOM2sgAF0sTew==","signatures":[{"sig":"MEUCIFkWCdp7YE0tVHiQ4z4jn5Va+fbpqD5Hphduw6oRd7YfAiEAy6zXGT5gzN83yVlJJDEUEH0Cx2/P7DhvxylzFp9F220=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AWIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMqw/+K8jjqIgMhQO8GXzWB/lenLbzheEPVT6qpL1dbnLR1Wsq21gu\r\n/ZNIbnnPFvIgqKKQz2aEhFK826eaplODeyeYPreBT+tRa9mDjK59UBJQMMrb\r\n0dx2s2un/AF/xjtwVwLWaUkuapZU/BtZ6JuTO6W7WQ5fGo6N26MH0nX8n1ou\r\nIOXIccT0+/6YC1A/gOVWe4fbYtgnfVbBjdiVcYZKlW2Zv1Bd9MJjUz09HU2w\r\nhGsfUCoWXU7iADuVoYOfhyY5/hXsj6QNkvDI/WF0l9ukVZUrbr7KK7M1Jqtz\r\nmHO/4cLRGLcNf5961x+ZI8Tl4lxIQlA3WiPHlglq4s2p53E7q+is4GibinEx\r\nepC/MgmtXewEI3xS5/hQiJ1aJD4Jd/JK/JPinFNfYCtZIDt78tyFRZUmBZND\r\npVJgZT+LRJdBI3+OpxaOueEq5m8w0q92zIsIohnNKGD12MKm6y2LdzdpArWU\r\nt/LfGTgJDlbScYlZBVBcvKcGqbgk+qp/MXpGjdUnSfT/TlqNhPUOv/4eEE6m\r\n1Lm83YV/dYMI6Ggg+a72rYWk2WYWhZ3GMIueYGkjr+y62sQOuVebenaUpiAg\r\nxso3ckX1eX74Pm+T5cFJ5oVMZfK0qymfsV71KXnwIdMSPn4vl6M6s2kpv2H9\r\njUg/fh9CmaQmK1su+KMJ6mDXb5CFPCW/efI=\r\n=HN6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/density":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/tab-scroller":"15.0.0-canary.2a6ddc1cf.0","@material/tab-indicator":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2a6ddc1cf.0_1659110791912_0.7225565308450228","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.86efd56f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15d56eb55066e7fe956a275526aa811c671102de","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.86efd56f6.0.tgz","fileCount":37,"integrity":"sha512-LxxwMr2eBfEysiJs9dLTQ0nRvAYvX6M1Rpv0iuvlfI8fkAqKSKx5LJJokqUQcGNTCaS1VTIQvDq1LcA8QHVD1Q==","signatures":[{"sig":"MEUCIDB6+1N+5HcaIfLWWl/1CYByB7dQdMV0jKzmeHTqlsSBAiEAvRzrDgxdQVXShsReKTJ8BpRfdzo2iDQYHYB3J5SMVuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TkJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkdxAAjEZ0w1dWp2jI+PC8/L30Id3VkZ0A5luz2ZuioeNxFvSqx9zf\r\nGbr1AH+o78Lmu5O3Td6Ry6B19KDWsbZtYZJxPZLD8mDzlGseYjfy8booD7cA\r\nCguOPzIPdv/PhdCauHuBfwYvNtnfRdUWsWmhmnmGb82whNWgnIUMfN3pd/S/\r\n+zLP4fOrQup0ntZlnACe0owtfWwPooTzuLVhhQrg7klx2o3gR2qHslYSuG11\r\nu/tvGqHYrXpYTnmfSTtmvzmxUipTKVLtMh/a2LpwBtaQEWfJ+KIXnt+WTV1L\r\nkmWkrOYdoD9xiA3EPaJ97p0uf3XERgaymGLb6hsj1/w4kYrbpkg4Ou+a9Dy7\r\nq8xXTkoBxTszEUhyJIHRtvFt0eW9G+B+q+UaEMjaxgM0vEBRkHZIXTkIf/by\r\nZO0gZ2Z6Q3bY30o1lR9VSqUPEf7bRFDs/ACf16DU9yDwcqdV/1zn6fyaQcEk\r\nWbS2QCGPRUDH0p72NzjYhOtmfu+qFXWxe65noLNDhwltnAgoQQ3hi3GnQmTY\r\nCIPa2EC94IycEyiTZ8XjsmlEqZKyZrWBOfaDIT3aEq81FN/v4f8+hjrB6Zva\r\nN6rKMQCxgWk3nSrwinJ9ROAiOoi4LnISPQsOlmVdEnUXXh/tRaNF02XF3RCh\r\nKynnxEo1pT7a70uAptnT6glEbNXLATbiUhI=\r\n=P65C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/density":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/tab-scroller":"15.0.0-canary.86efd56f6.0","@material/tab-indicator":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.86efd56f6.0_1659451657579_0.3110289034059788","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ccfc24d19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f4c7c599c19f47f8f4d25a4b810cb15b35c4fc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ccfc24d19.0.tgz","fileCount":37,"integrity":"sha512-ebWtPEYDWw2UHiuZvNG6fHt9rvniXsS3cOcPPPYO14xytfxWKMQdKBzyvCZHR7j87IPNVCWkCZNKccTr8XM+7w==","signatures":[{"sig":"MEUCIQD6H2IO3pMRikxqnmSHVlhV5uecmYDVUY5JIByFmA7SmQIgduQ7cJfVfhNcqmOIaXrIMSegWBrmUso7w2Q82Mma2Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rtBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRWQ/+NsVwsBRNJUIMTmE9vo5z+5AN1FRERIBZLbu+7AwQDZHk9LT0\r\nmS8Y7qfvNVLTaoqzb2yLwHpEtpRZw03fX8M4Eci3M2cGVEU0ApaDG3MkltSk\r\nXGq5pRcARLF5LP/ZTvjCM/R0W1sukDzd2wY95iHxSpVoOVmulPcozdWo9dw6\r\nkooNw4A9YbRHvTtpgYBU/z4ogtKAE8x6HSyQh3mz6RB+q1VaYhRVCWUOTPgw\r\n+0nIbHS8zqNuF8pkQHpIp0OSOLQw0ub0OXtyU5V0GvoMTmXLMh0LdZV5/Tpz\r\nYnBuj09/gqSUwDBpmHkDtx6fzQ8e0TQJclFr/fohGmm4bdQAjt6qfWBx2LMT\r\nfmfUbs4v2Gn1tZc9I4pXJxl2A+LS9iJ4orWtqL0tJjtcRrXTA3gTuRST5A7z\r\neSX3HiWV28aDSF+rxAXoqNVzMyx0O/m5E4mMBhMw5DR/QTP6fm2b6nkk8DmU\r\nDFk8Kdz4o1kugbYDarhN4isxkKzxfuSXyEqcOs25o4ci+vJKAsqI697LMtIm\r\n/ksjFVdfXTP4tloHAPXm2E0DkJxUDJCLaudsP6gsPPcO7l1qRavZNu1WhwiV\r\n4i4rzCozaS/Vce7lMGD4TZvdW4WLUywLSjznoPDk+gMUDdbLvpPRkfhky00B\r\nRfQf95Jhy3Tq+Du9d7pxB/rQkxWZz4HDjf8=\r\n=nsya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/density":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/tab-scroller":"15.0.0-canary.ccfc24d19.0","@material/tab-indicator":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ccfc24d19.0_1659550528819_0.48431412417182695","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e4570146f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d55eafc249cc4baf29a45690d8df9e96ee8bf441","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e4570146f.0.tgz","fileCount":37,"integrity":"sha512-O81U40Ev6RtCh+aktj/vtPoslFU1hKjY2ifSVdngq9X5mg9nhCSi18GdUGM3oJbNuYcP1lXOpZtZ2brE1cMoYg==","signatures":[{"sig":"MEYCIQDk3uPUtqsE1hSoO9lDm1vuAIPXY42289OUvNUW653LTAIhAPQZZji+MDqHZbBfVLfnj5G3myYDi8feAPOAKHr9W7uN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzRw/7B4/e3NAMPyaeORFyKAZHN53hsYXYoyQOWI2gKBkVwte9ok28\r\nrtgqmMWEbLfvTYm1EvPo1bRV6hJoR5gXz1+hv/KSkPfFFYW9W9/cMNZ+RtRB\r\nIy7t5bb6UV90CQH9y87dv8q/yHsvKnp+BNZ5ptGj14boczEMbA42O1Vk0ExY\r\nJQQ6W6xWLrM2hhIDT0yFd45aGJILoz92NVhzQe8pc1mB6gv47Tnw1hszbrrJ\r\nkmcp0iCOymQYW27URXBPRVgsGhL7aFkeEMTrU3C09oETCL0UQXISJqVTpgAa\r\nSzLfB0qDT7tM5AnQBBwxL1bnLhuf5H6FOW4tuugTb2FhYzrrYdmjVHkoTy94\r\nbR96As3tmBh/tJ5q4MbGMkAAeFSf795n2Aczn17Bn9Yzkr01mUt4AyTuLe50\r\nscL5xV02GcXdCuj6s+sr4Qm8I3cBnEW40ibLNFMrw8+BK9YWyRmr+PYvKLvJ\r\nbXkTgiaWf4lv8ivWIF/dgjcchxJ7EzDoqBprNgH5wA0/j5Da+x4c90bsKKSJ\r\nQT687e3k/C4ugIaWmnClwiCOFTkcHDRD2ORg4LyKHSUXD5BiHngRETLHpxOh\r\n08E/i0y8aSXoU+QxcWj9qtcNg846iydSpvDxZytRlMMnKt41+e5PdDXHEKbI\r\n5JhPorDsdyMT+tS333oy7TB5HIidZMGPCI4=\r\n=ov5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/density":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/tab-scroller":"15.0.0-canary.e4570146f.0","@material/tab-indicator":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e4570146f.0_1659552159038_0.016940476412295347","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6683a36cb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e50801520bcf5e77528ffffee6d4a11660d4351","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6683a36cb.0.tgz","fileCount":37,"integrity":"sha512-Lh7VzMd/lZ7lja+raODJN75uJZapHo8ZYLnRE2kqWBwVtnBTAQullLjqVg5wMzhPmFe9vu2jNQeSlsL7GXKxWQ==","signatures":[{"sig":"MEQCIEklbUB8BAFZCeoLWy0WW2z6oDWQx9Kv2hOKfJcNz/g7AiADuvGmivtMwFvi+yUaP4244SA7DTPBxL3wc0JKebgZrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ssBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwEg//QP1HE3h6x+7wTpACUnKqMUufSBKy0BfRGaAcrQw9WT4Z25h0\r\nHkIZWZFAlcyTrjWfj+Qb0wFMq9cXcVll+/AbDD2J13Lspe3JJxQ50oPowLvf\r\nSdeRPnK9iV4EhefELgpljC2MR3T5khuB0B+rjN3L84ZoJRKc/xk82G5TsukH\r\nBR6RgrZWwX6lbn2kzPhDwtyJ9E3qV+wwjsheEaaNjkMRm1BR0d3VXL1nWTBR\r\n82hjgtNemJvQOJ9ndWh8QuqSbkLXBm429vBIpYoMDolXRa9Ze5KygTUs3+Hg\r\nna+v5+qoXianjk1bEIXa0f1/rG0wQlEY+t6vRYBTnikepFwBK6cJp/v0tQsE\r\nrnXWUzuON7eTWXnCYUNEKxdS5yNwEpxU0RjUXV2tQ2Meg3YdLqqwzZ7OjTvO\r\nY0GmCz6BQsSGG+JanDV20iKd9y+T0r+oJI8cn0iVOYZPKagw4g3Cvf4RgA/d\r\nsGJYBGN3/OeG0hvr0mnsCWdGQXPH/Oeu/30feZ2stXRArJl4yWZ+Vfc5nY0l\r\nM4RR411FRWTdQR5ixT8540sgigbalfA/pWmck6tGm29FOIxDedZD5+ye2JaV\r\n8AZcu1R3SO0M0xEznZIcE9izC/YPYG0Vq+dzb8Zn8wmmZzZVl/I5dUCTtpex\r\nQczbvFUzt1HvqyjlkcM3iBAEPREpxbXTfG4=\r\n=gy3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/density":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/tab-scroller":"15.0.0-canary.6683a36cb.0","@material/tab-indicator":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6683a36cb.0_1659554561401_0.11217108881889892","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.10196647d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6452f8f4123c4fa0d9fb7ebb480197958a52a0aa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.10196647d.0.tgz","fileCount":37,"integrity":"sha512-xjWQ5IR7vEBT3C0yLbsL2AjmbQ7LvqBAJJChCLINNspb2wNayKM+dQuqBttcnhjLic2+fJ1OQpOJZKHf7r5jKA==","signatures":[{"sig":"MEUCIEJ+qKMvHOCn44YgAoU0Xj83uDYy70G7Di//dFWVfctPAiEAviFCnfNaMQ35kJsDIRsm1SHzZcUv6re+p1nV9tPqCNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u7TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7NxAAmOd7OrtluDsC7zSzsI0A6e/nWDPiolBYmeBfb6OWcR36zlsu\r\nJ2ViRRkMim96t30oRVlFU5IWHvyPfHGu+0wRcweHy/EAfAgvnSNwJeie3H97\r\nNvRRGwEVqiyEKH7xzeTDV2EKZzhqaRHIabarqRUNU/5Etxlxmm3xe5QvGnuq\r\n6xHyehejB+aGhq6cZ84vlPdXZ5u9626AQh7yXVOhL9QLQUPNkdLsYXQxsUZ9\r\n8iLFbUKPqh5XRbGuzhEEeWVcuHRZDNMo2xQYaJq1UQRR0zhUq/7VOdCPB6ik\r\nmI0fJ2m7cNkSCpVb8+mVdi55JlBX5P291Yxsx2GScfM/po5ct22aWLHnkDCW\r\nVNWoqqU3slO7bRrN4eabFIobhZ+afafBQlsKNHL0mTHHs3ndDJzoz05kPzAf\r\npW+mMUOGUsyHveNZ4whceuq1yUQuTKVtusIHIOyFBCIkb4q0OE7v4AYfKFHH\r\nLoMA+fxiVJ4PHBXlHfauK8a8JPHj2p5le862h/ayxnB2g37cud9HUhogDb3y\r\nYMHckhSkVn+Ktt2R9+DOYvTCPLDKsRjzNk5u1LXg9PcM4jQj+C1SwvYn9DY0\r\neRXmDT9tUdJNPENsfWCQ1ZqlInZRW4wqgsbcsJy37ld8E6b3HGiy/AvgplW1\r\ntH9JAWqQWuhZVMOe7r0NXCfk/931juyPg6M=\r\n=2vGP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/density":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/tab-scroller":"15.0.0-canary.10196647d.0","@material/tab-indicator":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.10196647d.0_1659563730754_0.7423172369793329","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b20d3d73c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec53706000b237e634b7a28a424fb7f2d13c377c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b20d3d73c.0.tgz","fileCount":37,"integrity":"sha512-qzu19e/GFufzrVDFaIe0VCnDCWHGey0PG8X30D69+ssKl1FnpSgUov3u0xfOjKFyWzwDR97oo7u6qx9qVMeDnQ==","signatures":[{"sig":"MEUCIG7vKFE3rTgpAT5+3mtpb2L6qCSH43EONsXnVoA+RtjLAiEA5tXS6lb+M47fJfcr11B8V2/L/Wa12+mi7hc6tlsAZ4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuuRAAnA9Vvm6UHaAY7fQRdi91bWs0EWj4/uV0MZlvxo8aP8hLoxxe\r\nfUHswIqdjaECmF1a5JftPJJz91IH5opZbn7JGYlnhnnoiXA1BKRUlDrosEUR\r\n4D021O7Mra/6th4zVeRpbdgr4oUMPzMUgkB8MwLxA4Lm4fnx7v8qKF2YPnXg\r\nqvlb7AJLiLIYK0vc3WiGgWORjPDXHyIcjKB5oMfEo60RjtEkh7r2ukyGoJ8D\r\nJybjkI78whyefuQpRfop3DAQiEAc9uGz5mEOQKdBIEL/dVrsIJsBT0zyoE8p\r\naCFJ6YCNkZCGwRk1x3S3Zg/lvnUhxg9oTUSGreNrDVP1m+iw6wtkA8WN5rkt\r\nR7Ekhy7sxxGlDYbzQYEgf0DM+7H5JVx5KUktSVPZ6jdkVmeGp0K8jc5GpElk\r\nOjrRNgua47QzzmB+8i8gC/xtB21H7pHJJmYwHme3XC0pJLEQRFthW+ohRVkV\r\nqWkDOG06FGbCJFDJoH1xTHwC/01cDtWJoK9aNzoeq4jp277vtxbjdFMXrm1b\r\nhQxTb9Kg0xuHMgpzuHPVOp+8JO+XYkR7KS0c/qBc/gcSVc+BOLTTSakXkyOD\r\nQILPd5oZoID3es5+KfhXPRu7v/X4Fo899pIeMWFluqx9raU839MFt1P9ICHJ\r\nVT+++tz7f5LMH0au4fz1P5YJtVbT9WQTiAI=\r\n=1CX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/density":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/tab-scroller":"15.0.0-canary.b20d3d73c.0","@material/tab-indicator":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b20d3d73c.0_1659653082580_0.12163019534308028","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.47c0c6b1e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d0316a44f6b8f2929ed43243f16449af89323f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":37,"integrity":"sha512-itSkDxvpudB4RtBBs76fiYTc0c+hMhzqtISWwjEazqG2lHuIfLW/0NMX4nvjiO6T87HAQWFO3pgn0hcdbD8rcw==","signatures":[{"sig":"MEUCIQChBrbJSnYkcexYuL4X0vH5WE9lyGEZdf4JSv7OntQMCQIgRp7ZR61SSwAlpJbgdbBimRIYs9boqFm99hrpwu//yJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nvGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+1w//UduUpvpdU9yIvuWA7t/jRdRa2b+ZMq1r865i/wswv7KkjRmY\r\nCmlLLm+9sFJaYSSkC1jzPyTs0180r2a5imsobzTNEa8YmUlS4E5TILSQbvsT\r\n0MRyBnoCLynPXOxKuwSxU8BJ13TS4DRNLKrw8/b/7uODbHEctm/cADh08E+v\r\n9PF/OacfZ3ibguz4VU43ip6LI93ih0J3DEdxGQjC/8zAEdTupBJtrE6UAZtS\r\nFfY49bhrY0UpZ+hmgqAEnQjBli0FvrlNHAZ6Oqn26vK29I20dLVVQqyoGk0F\r\nc9ky094AYnlZomo5QiQBz67W+90IEA5c15Gc/t4Mx6X96O0Rs8KLzQ/sSL5j\r\ndy3B1N1+6DgkxWuMYpmZRuEuClBKmOLkS01kmW3vq7HcPzPfGmnllcgXOOYg\r\ngwMks7nHpTLKwwrPLiJyCxV4GjlxijxlVj2Bs7TVNhur1rcThj12DKJ105OE\r\nBH0T9mVtAliCn/vjvB/mJjr0+kyjU847xYIL+CDLuVkPDhJhQ+ZGYNG7HC1J\r\nATWT4EaJir+8/aUmEHZ1XW+8ack9GBqIQo6He0+CvSp3qrcNuC9wAHzmQL1O\r\nW+d6cdx4bBByGgEcNI5WIvJYTBdxyaS/VenPkCuXJ2dVzWzPmwcfazLc5m/2\r\nq4TIJwoGf98hE1qxxUPt4Hlxj9sTg6NKBUI=\r\n=8ycB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/density":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/tab-scroller":"15.0.0-canary.47c0c6b1e.0","@material/tab-indicator":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.47c0c6b1e.0_1660058566433_0.5618867919162602","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0e3dc8e38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72532eeb307292da6db40cf4e7d43a6edd3618b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":37,"integrity":"sha512-oEMAnioWmLCaYuXSo2T195145QLACa5cX5I41tdd/XkOSoS6+G1NusBEY7QTPdNkzs9b0YpKaDueQP6A77ETYg==","signatures":[{"sig":"MEYCIQCO5fjMGbs5Omn4ECtxFpsRyihMd6EjmrpKnMiwf5cU9QIhAI6IsBiSHPK5Ogs3VGPXPjrygai7u73kqKxE98P/R1YU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKVA//Ql9lChij8NCtdHOPYvYIptG3DblYI/gF93mPaPq6TU7o88X/\r\n/BCcJQMLlnUEi8Urj3Doqknyq1GNnL2rKbvVgf0kUlBIlYaMGwkO2hMqa9EA\r\n2JZhlqbEjT2yigUP2VcM5pKWf44MXp4ofLsIOodlt64fRDEAD7vBWFUCPBxR\r\nvNJql9xBOMwbFNfXfR0AL/9ZMPOLmjFDFhbtFfqGtj0ZCl95K+czvCS7lvg0\r\n1Ni3RhIjsTBKEFWM2oj9yeJ4XP91uaj53axOnL2Kxghs8lqaFJ3pLiHg8lxH\r\n9NowyvPQVEs2YubnMK66t+Ls0yecevpl2fCD8yHJ9ZCY9pZeyhnjZQgyG76I\r\nltpqktBuVaihNBZ3nGfLFyao614Z1WKKI1iRVbAprccnefe9HUijuDqGdy8U\r\nHOQrKgRFWQ91fiTk0qilLqnboYf7hHrKcOQEXpMx52XOOKWFfd7OKq8x+45O\r\nOEYMFRyeFxwQUtMFqd6no+VwnALiYRA8Tff8K9IEaEg5aG5uMis0QsYJ1y43\r\naiqUWQNSbFOZPwYILgTg+4Wv55AX4zk6OqPpUHE6lLEmOjJE/w5QfJIY1Tsq\r\n/jMFoAUCCXw4Nnh9mwZETFWxfBxB3HeIYzpTb9KM8M01gdGBpwCRtYQVRIIF\r\nHSlUiCPfUqDMsyDyq8DhWOnDG2QWaL2Db48=\r\n=30Uf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/density":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/tab-scroller":"15.0.0-canary.0e3dc8e38.0","@material/tab-indicator":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0e3dc8e38.0_1660243663654_0.1915462164693822","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d5a11f1c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55011b1f98c29f76968a74cf224240247d4c84db","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":37,"integrity":"sha512-Sf0b9kbI1VBwpm1qS7hs7C1uNZIc1FudrCymlfFQZdW7wkNJy04/jVhK2EwKxSxQdZgNyDuF4tHDiz1LERx2xA==","signatures":[{"sig":"MEYCIQDsdUq68XJsp5GRNtEIDQB+1WssGVJEpqivDEenXpMGbgIhAMcyuOIfbKDFoi0/gCVkmpAbCuwZVmqQV7zdrtoNQGro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTJxAAglc/hznZbXmUQjU8R2R/IMagRW1f1U/9lT58lqAkhXnl2rR2\r\nU05EEkoxSajiya6AHr9PKcnLujMuJ++kd9+9yGbwR9VttWvfxvEi51vDZbCI\r\nBFMk9erkYiXNEcfvU9MDEz39Ue67a/s0bVt3MD03nxs9YdvBs+muKDZsKfOc\r\n9dH/Wm4fM6O6ElC/DpJICjGBiVOe5m/NCWCo4I7Hle0uwCL+p/7A4E1v8Deh\r\nDg2dxk9dxpirpIMnArSkjw36m69Tyz2S4Mg4FKneGOqwFfmZ/GgDQP14zFDr\r\n5Gmj12+gpG2JRFBbRGGs2CyPTRLR4KYrUQdxQo0XC5emwu2BaacyoA9CvM+l\r\nFZ2F7rS13C0U7gHySkOUNAZ2wBYrkLISiRhTRXQKGObFHUOCeCOVsW2J7Khy\r\nSAaLyiJAU5YN3k9MdVrYO+2YEaW7GA4eIY/c6lg33B7vNoy7wAnQEI9I0Zql\r\nK86SYCQZLiipx8xUrbf1t6+JvS4mtzx7vKkTqf2knyxjkzuXwOJw4KxbLoPF\r\noEOf4jQ2IY3I7wYbzxk2/zclhl8tHBWj7g08WImgm3wuFskdawF2+couGcoc\r\nvC1dMFmgxULNjDmynvmGDde6A19qlpS1GEKw4khel6HGc32zqvWuqxCyaQPm\r\nYIqldlAxixpgcqlPn//sDQ2+TawQOk+U0Wo=\r\n=l7A6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/density":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/tab-scroller":"15.0.0-canary.d5a11f1c8.0","@material/tab-indicator":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d5a11f1c8.0_1661900586144_0.3622241201158336","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bac992a95.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e43f2de5c5296412440a17e9be152650aefd4a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bac992a95.0.tgz","fileCount":37,"integrity":"sha512-7dSm1RUkNlXXgLccOIfVxh3VmQfzd9xwpaXXHv1brhn5kRuXrNF03843H97kL1qNd8jXW0qEeeFaP0k8EeSMhA==","signatures":[{"sig":"MEQCIFEu0le503Gm/2i/+lXIt7SVaKDnbDP6d4stDwRxhxeKAiAxr9oq5laiAZIzKcVsuBDpRyfiSmmdSq+jmZAcCeFtPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFo+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMKRAAoz5I3R/LFAYoyuTPQdjvmu5Xvo4Z3A6zMQPIsOOpp2xdg2X6\r\nde76kjcOklYVU9JV59qCeXw4Y2IBGQflwz+rFnBqOQ6Eue3Vxo17Pv1yCgev\r\nLcZbNAdytKu5+z5NsPWTeJ0nKw2Drb39g51h0xwyCkUg0RfFO7hOezJIw++W\r\nfCFbF9X/JAlEmhkSwY0kC3KD2bMJT77oMNSZF2CbjV/PRxpenMaYBYOE5itC\r\n34aahrNQZ+MTxPqif9Iibr4mP4K//0o36/8F7yNCQH1034DgDhb9VIPO290k\r\nGefekwpFOf4a+ks1MOXjO12Ixnl1n0vJzudu3U4caYaZfR5xxs7KcYWKsF34\r\nhKBqQiE0t2RknIJBYaaKjf3qGTC+1EbD1lyu4ygI3xZ1zebObT4qK2TCQ3ol\r\nAqv5vlHr7g2YXz+zhaCYkgKr+3WZCEgxYRsqK1V3lLTHRTpd7R4xRZxIu0hC\r\n9FLNJNxU+kJnXSHxx4rwSabaY2QcoovMVqtMX4gPWGgr1H/SHJhNqM2eDld7\r\ngDkMmZqivaHJlbG5/+h6zBzlbVM8SZw2oT5jII1WJpXGBzJEcK91PwdQpXdE\r\nEdm4pNxaQZFbbLVT7mV8yux7dbMT6Tk9xrJXSTgXg7ZOw8NN7Haeg0HkLwi1\r\nYj3bYhEPODx/7CtWfjjVLFRYMtN3mFr0Lhc=\r\n=xU8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/density":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/tab-scroller":"15.0.0-canary.bac992a95.0","@material/tab-indicator":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bac992a95.0_1662016062205_0.9632989968981365","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.920d8a79e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d55a7ea28eb3050310788476b3d6a737f925a39","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.920d8a79e.0.tgz","fileCount":37,"integrity":"sha512-Es7G3pBPVeflr1vq1V8t/177LB/VvA2jaihnoCEbNsY1FY+XFfr3XQC8wB9peONlaTwDAhA+Rh7hfyagfg3x3w==","signatures":[{"sig":"MEUCIQD7/TQYCsu5WHqn6b14JoWgl1cHy42a1NgouvKU0k+E5AIgCpk9t4TSrdDF8qubkkgJzdE22Exizoz0OrzrDSog+Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERSZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpuQ/9EgacheD+MK4z83V50oCRRqo5z9JKTQInFASLJJuAMuJxhVNT\r\nIvHhhhUWfiTKjQeeOAFl/SZoEokyY4GdLUmj9K04xLKJT5uN5ztooJ0grC5q\r\n9ee4GS8ks0UV0um20PVIkd28QDgYfFJO20o7TULmj9XL1nA+XSJXEjY1ZMYU\r\nvqArdoA0Fh5Fa2QLCE9vEIQ+BglsO/+X0DEEMWYui+hJMpk4jrpU1GHMsCWb\r\nLEIYirMINdLgziFFONsOUwsT2jc+5Kzqj+6aftSQfKyo9lDNmsaUG+bP5vy+\r\nh3Qt1MB1GW39SlLy5oQOY8MxB/mjKVPV7Fmrj4oqmjc9JZSPfevdSxNuxXwZ\r\nYYxS5QwiZqULLVYPq5iPLTz84V1oEPDKKFnaVrCi4gfz1nAlprXCAF6rASPS\r\nO2/CEEHajUZu7mmxFQhDAdSYIQbZlaYAyXo78WdLAZU6mkvB4n/QAZ9/lFE0\r\nzE2dkdOCfo4/eQO2NEcMFYXoCjfYf/9IkAWvrhUcKqgCOwUvGXFhLib/S/Ka\r\nhD0aexEwWxqn2wN+gQLFszDiqToH9/I3mA0Kke9dvQJorCbp8NW40jXKc5VT\r\nnwGvHAXjfskttp5suSlNSm3viwmRCzrMXa/xpuKLcycLeg1BuQyHMdmod4lP\r\nqo1nX/N5Ny7QdiiKQLa07X0XjLXyiQM5cGc=\r\n=iB2/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/density":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/tab-scroller":"15.0.0-canary.920d8a79e.0","@material/tab-indicator":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.920d8a79e.0_1662063769351_0.9490340184081738","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c363f267b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3307bfab52659984e438223d99f6c618afd0c5ad","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c363f267b.0.tgz","fileCount":37,"integrity":"sha512-BF/K6iifD1bv4FVuDRQqTruu6Y7UpQak9XMzrzOqrdkEOwe88Q3/4Hbu2wR9sCwroOM2+Imd14qgrnH/nxhT4w==","signatures":[{"sig":"MEYCIQCurp6h2SOHfTNoGHHP5PhqcqnDUGIIC/6EmR7P8fBeNAIhAJQEZAoEsc08KXVUewclT1vUnTtjPRPW5oLLjYES120O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESIIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Jw/9FL1rpeYBEg4xGb3LLBbNLuw4jsE47f09kjFVwoa5wGiBxWzR\r\nVdj6MrpoFkOurPMNYFj3EDjjqj9OASmgkrb+UQp95s83cRzyC35LlKptKhwV\r\nesizZb9UMalzJ5cuI5huZ+0ieFJn6VvQ8+Xe8JDU7Te8xvR44TM8YLeL5o2F\r\nbIO1dX+gVu8Ktg4IOL7vHPyC+fdkSaPflv9jnryUQF5RXggBHO8FiwQ42pgd\r\nM++ciR82pLe1ZyOu54ICyC21cSNpD3o/OVbq0NJN2GIcQF9dse+dtrHRoJZr\r\noK/tGNoyQp5SJLHyVXj73ubm9cyIFNjk5ojEhEE/SHidGeCx7DnaKjD7UKcU\r\nzbQdoDzcXuvTn32HMFm/qohqK7ZuAszfIf5hJdkelOnTWGIac8QXOYUSzkBB\r\nGfv7EMNGKPVl4z6eEUNjeNwAmIw4W/XFgaAnuxWkFE04+TO59eGGdl2zhi78\r\nF9npWSJMfgKQih0abi569mU+VjNCW96OapJZ4unhJ7LJuQg3LU1S9Jl94QtG\r\nSteucie/MN2wdy1+0iZ7N2/G7R/8agOMPB31cF9BRfAcp6pjrhXZ1EwuEd/t\r\nTzM/rjMnKGQ4bhJk1gnV+kxa/FNuzf1QGUJZg+KdRd3bQ013uBsGSWTAaxA+\r\nrdDsgWFdeD0NSn31EyxVugNbIeb7/FXQzeo=\r\n=TkY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/density":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/tab-scroller":"15.0.0-canary.c363f267b.0","@material/tab-indicator":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c363f267b.0_1662067208204_0.5846722648610805","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a4eb4937a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce48e1c3b47165fd2eb8ade988bcbbf586912ec","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a4eb4937a.0.tgz","fileCount":37,"integrity":"sha512-gvng2TMgV+z0/kG86/ggEdlbJYfghXkmMzTmSNgU/THB7UPktmW6Q1g6bJMIks8ZlLbMz91Mnr909HlouTHSqw==","signatures":[{"sig":"MEQCIAawsp3uokss7SETLjcKOlTZccBY3SdQfmSEzx46m/PcAiBDe+bFFSa77bEqb2SVwGeM8Fzi1hFAKnTlQ5p8no5KzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1Nw//YDc5pklFowBLZ7H3fdEEOCh+C55pz2oH0KTmXHTQa/d+VofY\r\nR8e2ISqDb7cj4dQQEQ8f7EJK24n9CQboeYUv5exThU+jMRW0OEkTTpLh0pZw\r\nxHmONVw/rzHV91WsQB/aOUdfSWfTygvxEBiOoGYyzpYTCtlzkl2czPWQqhoA\r\nugEP1SOcHp+dT8/3LCccwFJ2XAsqHciRC22xFtBtm87q29TZ0L62GU8lHTvr\r\nJOO3hjJtlY6jckK/jHK8OaC9FOiNRIIDA7U29EUXqkARTfC67ubPUsnStR1Z\r\nq1cvcjK/CMCf1eEktFXN34ymmWSPrt6MDwxJm94POpSeDWJ8VoSahrWqo6Lw\r\n4KNJIINucOjWQSGKmXjeHvCp+qRutXPMZRVk6VfxuZqbR+/3Irh9mr96c3U7\r\ntLeoiD1ugFan0Py4QQe65tD3mD9KhDYubQhYShSXO18Wv168HTJGwVU+lLDe\r\nMVI5zo2zH/NgG/62rn/oJdZacK7bM773poD7nIxx+Yr7sgO7uyEdPqk7IX8t\r\nn3XrkAPXiWGCuFJ56EgdLW9lm6FWLnUjcxvCLZoxC7coRdGdeM0118JnG/Uy\r\n3NN7A9YlonPdToBLJ/N+JuoSZdU6Cr5S+p6EChIzCu0wdYKqjQksPYtgY2DV\r\nPWp+acu0cagyGAo16djGzx/9PD/EIPhk5YU=\r\n=06AU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/density":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/tab-scroller":"15.0.0-canary.a4eb4937a.0","@material/tab-indicator":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a4eb4937a.0_1662488496693_0.10278335335465583","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4299717da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eb39dcd67ebfaf9b07b02a649f48c44d1451078","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4299717da.0.tgz","fileCount":37,"integrity":"sha512-qFUFfoJJhzuQASihLwER2nn70UOEIe9MGH+xnraGwc1yYsD+RzOkz+AvIdTS4PECR7/knWmirBZzmmvbiUs2Ug==","signatures":[{"sig":"MEUCIQDl8GEB3iEe3aCK7A/g23dpwN5AzEwuUTlG6jQ+1XT3igIgJPSb9nN9j6gfxEWPK3eMUHO8XAlYBTHD0puTJr4KMNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+/w/9GGfOv/ALHdE4v+ZhewMDOKnNRyYnVkfqVGidNQaWVRI1yNMm\r\nzqS0LqZWnceRUy/6v4bJWGm0AW3rDixfotTI0ssXVq0BNRrQePgnQYAFRHem\r\nc3nPTYXewPNeTocvOAPxAJ2fo3YWLpzp648wEHN8Pps+2eXYRN71JjiPYEWq\r\nOhO5vTW+ahvK/nYhJlN1t+rP7vr4Hgulf+fU0UH/vrXL4Z/0lDd3iYf0n5Qc\r\ntvpgd+8eaI1XbUQNVBOdNEMLbVBTkyC7zFkcTn/P8AtG2VH9oY71JML6KBl8\r\nxG3ze027mziF1VxsiJmTFW2jnnDZG2Rc1Tv2XEVFpQOyoMiVXWo4GVMq7JkX\r\nCa2aG4mktb7H92no8XKNYpQVlGl6me1+hrsmKtIh8yeVfb+JPcnH75BWduii\r\nVxcqevFMreswZ19Ai+tns3n38eNl2g9r3Xc17J48wOTyEqARrkTAQYFQzuFY\r\nwr9F3kn4afHNQ6PDKPiFA8eVjE1Dtxbz4/jFcw6CEeoyZV9DOh8s5Umk8oDt\r\nuJQm0cC4O6F0d9xuNPH6LDetJuBMAZe30atbaC9mUSTrtD8N7tWUB8giSAGM\r\ndccQ1zAZLHxxS+ayUhIJfnrwRt46lpW4pVXQ0p/Gy1cKv9sJbLJw0Mrnv+aR\r\nUvSsD1GCSV89gm/tZauCVDxbuK8v6T7PVx4=\r\n=G+mS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/density":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/tab-scroller":"15.0.0-canary.4299717da.0","@material/tab-indicator":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4299717da.0_1662567452438_0.393058626335957","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fa7d8d44b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6414d9aa8e22686d1e3cdfc606d9e287503c5b4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":37,"integrity":"sha512-T/H87cl8i40rEUTA5O8Kgc5HDr6NulmYCw21ap72KpVIzGqWoWR7czZ8udXk2T5SlOC/Z6/401cBEDDSUjHMXQ==","signatures":[{"sig":"MEQCIBmlyMVpcuHlBzKyxFOABUKeh2f4MsR3yQrvKy31ceThAiAFnmjjDZgidAc1plqEvqL4Gaemly4IzNKkQ3hAQyhdHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO8aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOiBAAiltikOY3G6Sb+PcdaYbTpxXFKBofGciUgieRd81bKTST67FC\r\nFAoImnQI5wpxc9Xn9K7b1lT3xTHa5Ox7TyMg/O97bhi7I5Ofn+7knBhSXaNW\r\nKv+SOs06FZl96t1YhQrPnEmx7P31176ZGK3LHGk92YDRp3iWEy0uQHoxIkzb\r\naqE27s0pS0R9Ve7TeHQIMXvTYBxLdji2A5Dhyr2ZMLbnxBBXYLfBDWyqsADU\r\ncSPPa7xwmrRhMw/YPmAR5TN1NUWWB7N/lJVHc5gyeLwMjcGc8+Z78sobILZp\r\n9cW97BkgDDNtwBoVgmwyfJYfKoeOLwe00lWT1D2+oBwg64TmociQ842gXWvi\r\nc3nBpDNG0vUhzuo2Q5uQXK/QMx8Fu9kuv04k+sBYdbbMoTANqbQH4holniad\r\nNaCA0fdWRSzYass8WqNsLPFq+LOJDNACr+atcqYufbnk7asHKpc/W60cl18B\r\nqXfJSME3w3Ne4mUu++wUl9FRHiV3eUnWW3l7FgAfmGcj4Cb76EOyNXwGqcfw\r\nCGBqq+opSjwPAi5Q4OhtrcUEYDyV+ymKIEQtlAvLkh2d4VFVjKYYn8Is/Myi\r\nxoHlku00loFaf7h74n4fJWrn97KMkAyoQUW3JxB48wkEWnhZU4coaT0d+196\r\nVH4HXFkUjVR7IswGihg4gsv5MupWD6HL/DM=\r\n=yc99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/density":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/tab-scroller":"15.0.0-canary.fa7d8d44b.0","@material/tab-indicator":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fa7d8d44b.0_1662578458347_0.36427548886618166","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a40e3c768.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927176a251e95a5e12f588b8b8d90a103ba0c7ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a40e3c768.0.tgz","fileCount":37,"integrity":"sha512-9SlVtKPIApNGoptSv7x80hc7BKvJ2aQmGz79dHuSo+ppDOM/Oct00lqczwZ4KDJDincJWrAe7AM9G3yFfJBJDg==","signatures":[{"sig":"MEUCIH7iVKje1LIXqB5mVdIiiMjXy4tjmNoP+O8qJ9vmb4pVAiEA0T/uYhtmu8FHocAfymU88RL219IFGF2J+OkPoMEvR4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5yYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQNw//c7BHtr1y/wp9jCnDg2ffsEj1IR+DNjxPlpFXAlBj359jx2PE\r\n++8Z5fTKmNI5e+dtpxWebW58WulsLcoq7S7vJ17RoCxtJPayebkRN4a0c/T1\r\nlqxyqaoMOG+Vzt2kYed8aWPti6RRpwCB0djBzvQvqyKITxRxesDSl+RcJsYD\r\nmYVzjr0G8N4Cz/32uwiZjOutLUASM2SSGdF4SAbDEAYAPBdC9fTA4iABPNAC\r\nRrsCKj6+kbiwV+NsTVHCQXPCvfv2ixRQevxm+unZ060x2os3YtNn3M6ykP1C\r\nVt8SFWdOmWQLcQLry8kX+UC8z3yM/g/Ctvww/xZEj9NM/f+tu6AtW77WrAVg\r\nvlT+t/n52T/2yVuORYVekFQCfwSvI4p+ol/1cOsEXhRcgFUdWOxMHUxBtIEd\r\nIyhnZz7JmMSgGU6up3ceIEn73d1KpbNjjg9SFtlvqD7xxDVXIv9vWrgl4ivi\r\nuHLWN/GxewzQ22gbsp82FBCieAmD05l314t+Q3wlE+nnPjrTE9jYEaZrANwH\r\niSb6iOYJ1WjP+1ulpyJqymURrLuxvbqJ9qXLd5xYQQPNJajE5rf+uvva1gq1\r\nj6dYG3se4H9Xoxnay4fuIFCFbkMbjPesZ94tUX4vyS5/MOWcgNJehe91UKj1\r\nQ142uUBjDhwLSN7tSNKzwNlWJww9bls31pg=\r\n=EnkC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/density":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/tab-scroller":"15.0.0-canary.a40e3c768.0","@material/tab-indicator":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a40e3c768.0_1662753944610_0.2823894335458168","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7ab3cd3c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86362af8cc0eb5a34927709809089383828f7acb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":37,"integrity":"sha512-NZ5gipfcwxao+9LNMEd1cy1N2eHIZToUptLcm63r9MXjEQARZvpNK2Yep6LGJJscQnIXnnR4TWOSJjaz90HR4g==","signatures":[{"sig":"MEUCIQCnSPI0hawHx/Sl4mPVM2Qgt87e7QyOIEuV0SfNXscikAIgcu2ChkbDrZVzVYsu+v8uKbzHrH64CgpLq3fdJjcbPp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQb7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolKRAAnxaimKVlUafRO6SwjqLzx+ohi9HhAgyO6wEpKzO9c9IlvSza\r\n66vGNrFOk3M9qr/eunXeYWKBR9Gbp4pF2XiFaAG4RYC8FohNVaBR5nML61hY\r\nufhy5l2rNiGHEPzWZTegW9duKMJ9DiGjlj6w2vLOsM4+G6etXr/B1Qu0VKEy\r\n+3BS8ZawCZA3PX3E/dUURg0l6J0tfahnrkvTWJ3oHYo4RQvcu5htynDMARZx\r\nY44mqnXU0Ah/rftA22VqruN208EVPPH6Ib07zcwJupb+FGT1dGAk5Kn9Wm20\r\nbBVioG56B401rrFWVhx9kvdR/KoZ0qwuhV6RZ0yHu770ZQvAhf5HQQ864LgB\r\nV6udFzupvpnUQYh7PHGZO3cmmH0/+3U+772nmjt+eVs9jkQhuRCdNXBykW+l\r\n/YDkCQenTq6U0I+og0DjXXpEhmau4Sfouv+xVFi4sndNkSPJ7VuJIccXQXzR\r\nwoxpqFepPCVJR8hQEihOg4aK0UsUkiL6lK+qkMOYUJdTIb9NrEMZsextLX97\r\n98zi5j4WteS6vMpfdEnmrYjf5+jmPZWNqog7LGsY6hu0lj3UXKLIvMAQtjK+\r\n5NWTI6F1hmS3kDpOOx8pBvcdXJ1fJtVDIx7A6Zc1tDHr9MmKmpsKb2Ul+K83\r\nKf+Mdgm4+ndglT59/GgfbSjvfFLOXJhnwvQ=\r\n=HEE9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/density":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/tab-scroller":"15.0.0-canary.7ab3cd3c8.0","@material/tab-indicator":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7ab3cd3c8.0_1663108859156_0.9953043026686446","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2860d244d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aefb04ca8c26de149d628c0e14510d7ae2b811e7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2860d244d.0.tgz","fileCount":37,"integrity":"sha512-LUwyc/F85ZF4vCdk7WdUH4UG4bfibvcnEjPoSz3sT/C0P5JO0fpgxi8tFcfrbSYMLEP6kE5dnFhP0J5z6D0IsA==","signatures":[{"sig":"MEUCIC1iuhrychFAegHHy4DPwfPDX8duVcewhlVS9lCb3PG4AiEAhEmQdoVHkEIbC39aFyq2xeeklLZNwvIlSXKfIP48Lvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP8nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLlQ//WdMB498zazUhPMo/Dr/vLvNcAM7SmwnkxJo80a5+CYLmyzTk\r\n+po55Ow0MQqBvOSLly3fk7tJPdjupqezNOoP1yC0fINTj1IB29RP2rGnIGK1\r\nhBzgPHy76JKPyeTpeBfxt2Ni2q6ObfXLL8M2eDaKV8op0/tiKSvY76+KyMIo\r\nxpSWXUfID2Zz1zFpSOXLrx89bgTIV1UUvneu78Ew6aecJ8uVXDP8zKqylNXH\r\nXweFFBVxdTAyrGgYsrlkTIuGQjk0bq4BtyUYDv8QP8C2f8TRns4WMO+Tmz6W\r\n8dr6MuvlbUwD2pXKndu3XBE32mdT1Y8pWlylIbwn25yxLBW4F1VAKZSj1BdN\r\nYimgPWs3YR3E6fouqp0FvknzA6rCCrFxDN+OrfNzO3h7tj7tekArMAORoDs7\r\nuy0/hplUgu0PDChdaPwQ6ieYJ/GMWYudU+M8P8Vm+v49iJ7qqc1JiZzHDYC2\r\nledPXjM1mfE0IqlFnSXt9/brcBUFpnJZ7UvIqlZpqswZZ7fwPTaorOGEBNtC\r\nJHCmsqd5ciGMDfG2sludLquV6+Ku7hMV4oSvv4IoCpR5ue/9FLiKSCNIqvXl\r\n7bUKQMXDlbvd00Yy/QX9BroSOtxEAPPGYYr7TlNV8eCO/xNQobM7iV/kJs+G\r\ngvfpPDdw4xscKv+3CLZU9/Q+gGRGbYTcoW0=\r\n=7C6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/density":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/tab-scroller":"15.0.0-canary.2860d244d.0","@material/tab-indicator":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2860d244d.0_1663368998879_0.8516105382412489","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e8726533c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5061d8bea2c7356d0f2b4ec591a8cb13c19f6481","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e8726533c.0.tgz","fileCount":37,"integrity":"sha512-i85O1Iy7HgyQYR50hzgmylqjtGiY7EznaPWO+N5hHe70YIaOt0hVFQPGJlDr6JlZnzaiwXEQfloF2BiEsFs95Q==","signatures":[{"sig":"MEUCIHhqAuGSMmIrqwHwQFeOGi+9zq+X1thKPXApmdupVQ7LAiEAirt+FHx4CchhH1px4vRZvHzHuXM/nZYWFm8Tw+rbM+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiBPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKfQ/+MIiLex5KZeKF3NpUjDsckA/uZ1AQVA0U5zKZdhnDLL+wf2Aj\r\ncp9WPVdvV+GByW1uaEM7q11uzNXS9GuNHyAhEu77hz0cDubeHuNweOlz4jti\r\nQp3T0/ViFzKS6JYGLIOsRS9NMpywb1RqIE6aMfvg7Y7I25l41f65CQ/3olX8\r\n2TiVGUxb6QCRS+Xc3xnce+FfZoxzZaIjx+HEi6m0yUV/HGXwcCVbGTqf2LUg\r\nivWLwfyRk7C1IYsfcEEmKITDK4Pdd/OXy1jR2CkvqYWAqDXn3lezuZg9EvnE\r\nG3MZP8hk8fPVz5Dhk3kbunxMzBBoYLcBcvljvUaVt24NnSj9Z1wgEjW2xSLz\r\nPoAA/HIa+9V5Taa4KP9joQYgRwifkBvmjMo72/3YamQ6Xw6X06rTJ4tkTHW6\r\nks9liy9d2rkRm6F0S0xXBU3ZbAk890EhXKAzMa8z4kfFP6WxNy4lxMmdJ8nR\r\nlKmKXb+Xt8SrkvJ6n7sqeX2UcKhVDlWVrprMYmgYLXlRXKVngJ9i1lJnPBeO\r\n8HlhJqbO0hx/gOEPcYkLn6PUoJZiJO7oiYln8FM7p/1eb889fINosZGiq8Ai\r\nSJi97nL01/pAhRb5w7CAIUwf0aSetlRE3lztxpZlh+OSnkKWWQJdLdiRgMhp\r\nuhrh6zM2usTqDbQZXvIltpiuss0sdAmzr4I=\r\n=2jc5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/density":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/tab-scroller":"15.0.0-canary.e8726533c.0","@material/tab-indicator":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e8726533c.0_1663705167235_0.6188032457886026","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/tab-bar","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.00d8de0aa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96818ebbeca81d321a0e0723765e4aadb58cc363","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.00d8de0aa.0.tgz","fileCount":37,"integrity":"sha512-4AtAkY9jjAaUxbZWrLaXgIEc7H3I/zbh/oBpu2A70v2bA1ZWzNckz8Gfehsc+HXQa4U8knITfzxuardl8iAGAQ==","signatures":[{"sig":"MEUCIQDT0hTqFxuFuHGLFtZmbgiipUn3XUVVMxvjCb3BeKHKpQIgcjhipu7/Fu0HWLd2O/F3ndF5EaJf3H2mhQPHUYcsIlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsnQ//cJtgLT21yW9BpIbLup1jlFUgrEZvJA9ncMiL9O8babV+RCZt\r\nT9mzRlNilS6Ea9E5izjBwG4ez78PaLsqK2nYSLFc2ZeDHQlhjAexcIC3S9Pt\r\neOQ2zWtGCncstGLkwnV+slD+7rSeV6clBuu5PCO6ZMWdP53ugcj4n9L1/vSg\r\n8Epy4Rqtj4aey+0Pd1c17X2nWDs4fctonTFbbjgUJZbtbN6vl0R98O676AyL\r\nEjDM/cDohj3+0blUnL4ZWquLYSM6jfVVWE+xxJuIC+FqKnK62/OH/yGRZPSc\r\nf55FQva6bH1eAnI96pytmnNMwKpLv09rRTKEeg2yMJb49zgDKRqoO24ZTkJ5\r\nBOlOtEPrqZAEghMKH1vAQ09py+ORxXxf43N0NMQJP334ltd9G74KV3ZzzmLt\r\n2J8d3YX+T/JGyyqCmF1inzBZMfEnVWaHv/xKej8mDGtfu8kkUAPFsfB7Flls\r\n5YDfZCbodgdaAtnkSFS7zLu0XDVRee4p3pzYhRysuRRSg1DsIwt2MUrkJpMV\r\naw2BtGQsu7YfvgPGUSbBEne00qDeVbWG5h++qRmJaUeH84aXBJ25/ipCLG8Z\r\ny+Kc2u8ObwExJHcZoN+LSNbNgAj12m1k/zkkamRy2z1dcHEbdzz5RTkH+m2K\r\nORAeq/Ru0h2IHSUpPP0K9mAc/9IHuWl5Zpo=\r\n=0rbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/density":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/tab-scroller":"15.0.0-canary.00d8de0aa.0","@material/tab-indicator":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.00d8de0aa.0_1663773736148_0.5543809395484658","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/tab-bar","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.271aedc30.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b2a1be114c1c1e7b54aa468d9cfe5e799feb968","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.271aedc30.0.tgz","fileCount":37,"integrity":"sha512-0oSQyqlA+ac/Bq89oJNdSChBY6XYVD1FbQeJjVbgnvG5pa76S9vYtKbgvP6j3RdkfP2hXJSvmaq/utA8pPPpQQ==","signatures":[{"sig":"MEQCIFAzCl6vaoItl/ci4G3zbR0ulOkzC6KbC3I1QmzPUVOWAiBoG4N/ihyqRND+49HoiSRQHnGVFOSGKPpWemtLg06B7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy/kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUNg//UpCQarW4g76hIYmiTxQRE6bqkC3exu/FzbOM7z7pDMRxnPCm\r\nVRfK/p9qHU2rJllulCwlgZLje7N7Fnm74yY02U7XqaT6I4DfAHMdTe8RHi2z\r\n61nDqBx97nyld7KYi7f+0fSU9BPzYeXW6O5RTMJFtoWy8doQTnXKlxwcrOsl\r\ngROpGfYRHm2MOfcTcOBEOWJC08DgZUq+EtdVWJNFs3XHyRvL4AmyhFFy1aWp\r\nGTpHMRZ1lmzgLrufZZAp3Pd+nTwei/VVovO2xPTJaia1wE7SQWaDD6Pq7zrT\r\n4N9OoDCCJUS8iG3AgnWktCdiRV3wOfPmY+EuLVN8db04szD0tYhj2l5sDpiX\r\nZl1PhJnNrFtrCca7DX9rwWOk+3glxg4BGyjwTk9p+5mS/kIKDPUHVU0op5L1\r\n34IVfiX2Xa5jaERdpaCX7bh2xzTkVsewwU1JBZ6LIeUBqU7p74z1hEVR4/K+\r\nk3EzuQrdolpiexbeLLwN/MaebRCE1Vhj23uvXgoeh/fXkCHiSmDAZVnJF/VP\r\nG0oEcFBXIJgngH/BJUio+27VVwesnt1jqvSNU0j2mTtUlBdT7TGQbfDwvbEn\r\n8ye5yUmZCHdY4RCxDRJP10Bmah+xh8WtIRB457ij376gDhMUcJp+OkzF2/zF\r\nAHWu6AVXG62ke5fZc3usu2za2K9m5IdKMko=\r\n=0dhB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/density":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/tab-scroller":"15.0.0-canary.271aedc30.0","@material/tab-indicator":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.271aedc30.0_1663774692517_0.7552143727100964","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d3344c16f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"befd709375922fdf230f61ca940d18e793e6523c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d3344c16f.0.tgz","fileCount":37,"integrity":"sha512-gmvktOKmiuw1jENt9DxAruDKLmI+f7fw7kwKZXhh+9+8dQ7DNjqo9E5lCfeaoSLraqeQgj3+Zenpq5mucbEtwQ==","signatures":[{"sig":"MEYCIQCz69IfNelj1+F7vo89a+6K21h1aye6cA/3DALQngFeSgIhALeHtXRZ6K1Db3ihUblTs3afcn9KCfmprNGVuM2rvL4z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCozACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooyxAAj9qmcA2oTGFArU/9IT43wkoAEoXUJav4ffJ+u70vYPycfltx\r\naGIR4VpLwx4b3U0EqUcedjp2fGJJV2cASDQs+EHdyxJ3weH0lZ0dUAogAHvW\r\nOrH7MxJ4Lzw7We5cxJcGZl7LKZ1TQSPwQeDp23Jf/JvgH/vez7Ai8AkpiKOw\r\nwMiA9UzegqWo7ky4Gj0U5WZkg5ypAEgqEYav8gV0P4puj+ZpfYmQ7SPEKLad\r\n1XBNARdvVExSI5SRUZVpOo99f3DfUrTwznU6k0weu63KoGQHhAOuemRTJH17\r\nG8x9G7vR02hc6WwL1oUeCm7nsZPrHIjXziFZxHon2fuc6HMbcp9vugixWCLZ\r\n4Et5E02zdHFAp47SNrNgY/KKFqw4K+iv1VvlTT1Nm50Y7PXO/tOcD1qjAddo\r\n9NiOva/NKD6uC+0NV7IgxWTfvc9bMLKbTnPfoqHpk9r1nwOjsqldZmAtBT9Y\r\nzQ2wl6w2Em1mQL/vlffHJ0b6dkjxZoHAJwN9ZnHVen5RyZJPL36WXpJcoNyY\r\nkiwS5hUYDX89BAg95BFjSJp3+D8plsyunUDUJ1sKXHaxP993ndKN/EThwrQT\r\n0Wb1v6CiGSLizigtoU8eUfgZrY313R70KDDLhcMd12FnhT80c1RSZpoDTYAK\r\nncAM+lLZ8v0ypZTt2FgylqK47VSJ1IK1fVU=\r\n=fIUD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/density":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/tab-scroller":"15.0.0-canary.d3344c16f.0","@material/tab-indicator":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d3344c16f.0_1663838771157_0.8048551635274874","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.94f20ccb8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5534e238528812c0a4ff96eca9934deef82579e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.94f20ccb8.0.tgz","fileCount":37,"integrity":"sha512-SqyMI/o0k63T3FCrrFD719LLyq9GMGicTmmrEHZuJwW1XWMd/huKuCUQgFo5vpYkoUAz3t0O+e+dhZkI0Bc04w==","signatures":[{"sig":"MEUCIQCDjOP1R5x8K6/aqjZV/M/kkVmX4TRBhN2p4niwfmGczwIgFt/gwzI35wG5PBXBH5aa7l78RNf4v61ru2A3rMTbYSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUNw/6A0MawzkQkl2DxbBQm8VWY22SITUbXcPCI6sMUSF/qYhoeCR7\r\nIhiM0uF7a1Bwj4RhHQthxzriZoYD2HZXTtDlrMNmvexFKX7CbucYosk8upEu\r\na+CBd6ffzRyNxNrZXv/Vb2KqSS3W7yIBygHWCx0/k1KpfuzNMmZ1jXrKQr4x\r\nZH8zqKRh96XaNDzP8I0AjSAErrlOqSiPpG3aVvTcarzqZ5oLK6WGcxGQkQzz\r\nwwYKRmbhzEt2/gZeOpo0B2Zgc0zBAqEqY+0h9IHu3YY1pDyr7ucKcLruGk96\r\n61yqYNyFUXLhS7ych8o9AsnD893J3Zle1+2xJ51FmQ3mRam2yDkTg/sLnRJD\r\nf/DdTofspOpIPtIQelkJLvxjBSSIJyvrFtFFHabESxaRCArv6JaVoD5iDWxh\r\no0/BL3qNol4G9Y5/Q9xqSTd4OeTn4/MQxEHQSHjnS13gTDKklMAXZ6rE2mrU\r\n0V7iDVBz1lleaj4acR/1uDpyCti1J61+6+2PuUFxN5MKANI3OWc7qriL82Tb\r\nBF8UHhEZHv1ddz+vpxtJKIUSnYt5DPXEpNHAC7PHPDrYoKZ24O55hXflsJ5u\r\n3DsGpkR8DPdask4TNeT9p7TQnRZZbKmc/0q7T8NIVGAQ54l7aJwO5cVVUawt\r\nExkylfpZLARAZDR8Oi0FLLqlIzuf7OgO/n8=\r\n=gJYc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/density":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/tab-scroller":"15.0.0-canary.94f20ccb8.0","@material/tab-indicator":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.94f20ccb8.0_1663879789949_0.5794200753006955","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.81e4cb7b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b6e8c67f6d96abe0882e664c4262782555b6fc9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":37,"integrity":"sha512-8Sl814dinjz+loL+Bd63ceVlqoTDOzZ51a/Y9cppwjF9rLBiPRMAs8LDAeOAd+avqVq4zrfO6dUMmfaSifwm4Q==","signatures":[{"sig":"MEUCICMmjtGalCH5AT3371uiBLiCFDj14/owzKMjIDChaYNBAiEApkFOIMiaYc7wtJBsywe/xpb5imUFZfCyIPoUHm6MK08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcxPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvHRAAg2bXRUso4trBPBgCXhhvrCtdwApVUiuHQ/AzEArYQdcLpbbI\r\n6kKm8Wx0O7AyLEhSWdwo1nTwdRA9wMobhG2jxNT7FUj2bhd9PiQsBiLcQK1j\r\nd1smHJBhnFoKgIwg61sbAmbHRfDju/hQFLULFDW9FW4YGXw7SOor2pgS+JXE\r\nZ5vWURRZbp/EhD4T8R8Cqnvg8jCtJxFC6FC9Xal3cspaeHpfiBHt6M8uVYpj\r\nRZ0QcHGOZOWWZsracp9XjDobm9uzsxIvsS6R18o8nrZHEjLTqBk95A/d30sk\r\n1ocQFb7MyHVahEMXQH+MtDOmNUD6ZqjRSCdrmmOQkCHXOSwbivlOJDQKiJfH\r\ndNFDq6+anoojwOMk0C5EfAtu6PUAIum1G0oQHON0UvAS9/P3fwCO9+QCIk+7\r\nfzUPHkJKcl6FXBKmJo6XHPbuDtPVSlwHrH/gcqSEgFXFmgG1g+pjBjV141rJ\r\nqxeox0oquMqYDjkPf+lX1Cc0RBSAcveD/Md/qUTZ/tAmAfyZ8Inmj5HwAuqx\r\n0PAFMer+Z9EcnL9g4MJJQMx20AeQ+i+P+0KZo0+1hilzK6b6xDG1aU7PKboB\r\neRKx0Gl7WsPWGqZr8+M6iinSt+io8P/Kef+/rPNliRa2JTkZsHnNS8XCCZOV\r\nhysUpSy1pLTMhex3A5cDSTGNX0105GDOAnI=\r\n=7JE9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/density":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/tab-scroller":"15.0.0-canary.81e4cb7b2.0","@material/tab-indicator":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.81e4cb7b2.0_1663945807211_0.9997218458000394","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/tab-bar","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.aa85f9413.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9437c21c496364cf3ea95dd83708f4b22dc06899","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.aa85f9413.0.tgz","fileCount":37,"integrity":"sha512-RiMI+dWoBu68S90JXaPheUh7xvTZfh7DNI5D7CYX4n2RCeInpg/U9Z2UZwUkW/urZHDXBwqRKAhdk+3Feos1OQ==","signatures":[{"sig":"MEUCIQDIekWiTD4hOhdEs9emiEGCPZWTuTkIj4VnIhYrQJL+KgIga00KKlmropdYCSzEqrmc7saD+1GhRw+qliZYSTsH5dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeg1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHJxAAk8sfRYvcXt2zugLeu6oOJPzWIzvpe4zCoWm8ehsmeQ5oMPlV\r\nbjvoxk68nI/Jfp6EqZO3Yy9SufZ3dhajs5WRPEMappsSoyxGCS1Q610GIOU2\r\nR9WQbtXTVC2cTH/+NLAYtWejaFJCvd70I63kB9dtLu0qNsVJ1CRFzYue5ELn\r\nN7auh1QSffcgEBzi24RvQfElk/z283E+t0284bNdQr54EamoTUaRk/VloZ7L\r\nKAV/PLa5I1XJLgwvqu6Y+TPnJBq+77DSlmJf4a3QbKEIQ7c7Zjq++kDE64w4\r\n57Ye9fxc8WyZ/X7nIw2Cu/HJWck1cdBlpezBfdOeXxg/Nb1QQdbDJtlN7oOc\r\nJQid0AG5ZoWt4f9BUsOUUYkm7QQrVikf0jgxhZNe/TlkgiGlycT7xDmOBbFW\r\nv1yZGZyVH0+x6QDyGUhc57PEKhJvhLT8P8TsTe2cqZ+SIRK0ZkuQgShqemdH\r\nuUYd+u1lP73OG7OHfknKXfSjBau9ooFC/2pGaBTqARlaTGWKA0ItQaW9u0cO\r\nEvwA1yIAk2cdYZ/POkstFSbcffnCR8gD7oZtkfYXIXZSIt5ksQxoL2c4Ew1w\r\nd0uSs700IOXg98P4T5pfNp8MVhW1Qg6gviGbQnMywqN25ot0wHt25E6mNfVU\r\nOlCEod7EGUpT/5xgd+z1iud0LLMsziGZDY8=\r\n=ZI7F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/density":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/tab-scroller":"15.0.0-canary.aa85f9413.0","@material/tab-indicator":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.aa85f9413.0_1664215093180_0.4844833092444254","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7134a7752.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaef90f268061bac7d9b0fa05870e20847cf54cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7134a7752.0.tgz","fileCount":37,"integrity":"sha512-hicDupX1TKKxgR1mqvMZ9xcxzCky+XsZDAqq2OEUqGwYWQZ936nYinPZzgdKeJ0zfB+NW9frvsf8HueRtAIuEA==","signatures":[{"sig":"MEYCIQClrTrC75X/fQjLsCL1f0vgfCXfgSgrIUFvvhvnHeeKsgIhAI2D96h4zTFyF//1069yrC8Of/LzlaPBWmDA5t+dy5+/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiC6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3SA//ZD+juvPqtnLD6rMBQaI4YVFJp4QBLrMdssILRS4XQZnpX57B\r\n6939l6C3aRG1/WD1+hFotqJVKrYSAgXnFnot0xH4gTyo+Fhq3w4sIhQy94O1\r\n0U8HpBN7ZFe116cH3dFg45lZTa/q50xcKrexdTEH3B0vFjcFl5TjGct9zLqe\r\nY8Gw2VpeTJuwvoStjqiT3IBNOCw4mPfWBQ7wMWTBp/NRLS2brCh4o/diba8h\r\n3OE6cDGR896nnbikrFcM+48LDlxVnmkadoxzunthT48vqrL4ZMJOHFj8nHc5\r\ngORehW+OpdW2KHi07hoOTjXorH7QeP8xvzI++3xpQldg7jBw3VgvxSNFaZwJ\r\nuDxIZcFELVNfvJvAEwqsZ2J69P+65fHjhs1+Xa30BgAyU/BZc1tRTr2tllz2\r\nrU6/5Drpfc0+Hp20IKjkW0Jn1VrU+xQuJjLDpbW446Abl4HDZg413yw4zf+2\r\nD+tiDAxkhCPBMWdSQFeJNij7EuLioheF3gi6glV+Pq+5P7zWHsRxHH/nzOpp\r\nglmah8D4PoRl7h8Ux5gS6yk3rMMmWPZkaAKTM0/K5FnkU3cgCuFgXfh3hOes\r\nNeTxNemEbqyWp17Q9NarGVEvuLofmdAKanRN7Yokvupqd/DnxYGh6vMB+joE\r\nMvZct7ECmgLzABr2Vuw/KVfDsa/perSVRBM=\r\n=8Rfy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/density":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/tab-scroller":"15.0.0-canary.7134a7752.0","@material/tab-indicator":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7134a7752.0_1664229562563_0.9313397457088461","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.70b8ac16e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b42f5a98dbc3b295136a2d6aa01a5fa9f17c84","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.70b8ac16e.0.tgz","fileCount":37,"integrity":"sha512-zkvqhpg6QFCAnv0NcIvKjU44wzfWS4sxWDb9Qxm2+X7mgVxqU576nmWKygz6Yap++FLNwmA88V3a+oA4kw6S/w==","signatures":[{"sig":"MEQCIBW6pAV6EpcZghNSNDBAeVu5rSUfYmUiWFBfv8D5DA3CAiASL4YAqKEoacRbrSxye+JRmgYgcgODBUW63cwPDyGyWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM31MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOIg//V7HyAhe/cGyMYYDhFQH5PxfRuphNmA8a4gGdg6IqSpqEoasT\r\no9gv0TrN1JXv1rlS1QrloHvJM0rHO9S41C1aOc8umalNQlmDHynpdZX2OXC+\r\nhR4zZBxE+M/M8xX+hBZnyxvd1xBE6I4iEwaj1kkIY4ApLc1rMvYUW3eqXwfX\r\nGHo5mqK+GVmBF+iaCcBCUWSBp9btMWWcjOpdCYqkdPHZ0iLNk55nFT9QtXsw\r\nLP25OGcotV7nY/iF2k1g2Rkq12X6zTCK3G0fxieKnvLFn1PsdUtieynEnoB9\r\nJTvnQUss01Y8EtJ/PS4EYAmytPaI3mVSms3rDVlPhkJKqbEqeIk44AQ5bInd\r\nIwhVw+os4lDH+JJ6R8kmdVWPsnu2+txD3cSBPfA3prj9Ui+vDOXqHJlcXK0L\r\nWXbJjCEWKB1Kq/kz+0Eou0MT0+brFYvWnOTwsnVV81aJn1CsH+HZXhoASveS\r\nOEE1ptC8C6wvSb+dq4rboUOGdMWHQLnFwHmH9dgx17kOQ2hlpPvibZrQ51z6\r\nV1X5Lrg210qcbX46Vb7Me7RACeWW4hORRd3fO1d6ss1xpnQL0VmMucg+3Z0M\r\nJCRlKRF6R2Cz9Os9qgx7U/odVw3GkrkbshP32HpY1TAjjUF8qye2tRnsgch+\r\nZuf7ORZP3LhyD/pWYa4PN5g8XkzAIlLkW/o=\r\n=6I+M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/density":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/tab-scroller":"15.0.0-canary.70b8ac16e.0","@material/tab-indicator":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.70b8ac16e.0_1664318796440_0.9245755660587931","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c20d74405.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0b686015ff70da23496c520b3264583b933a601","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c20d74405.0.tgz","fileCount":37,"integrity":"sha512-8h4SfAIbX1+wabtr7GbTmgGsRrxZf7MNOw5K31ZPYhdOmUwAxqWcVfSzzk/cbQW2Uf0j4gCQfJDDKVeDDWE/2Q==","signatures":[{"sig":"MEQCID10s2m92m4EbPQHx37TiykIfGg2hqLdjmZqVdCuOaRaAiAyVZR+/g8s0j4yxlwhRmAl/Ra85GoMD0ILXPQho7hi4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4grACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1FRAAlM01m+N/cAQjyhfqS/bBiYLagJvs3o5ouxKWAcjRlhXSwgdk\r\nbDIXtDb4ZY3ZklhpMuM3/1yXFATa+U4UYbdViv30yggdFoWrLbXat2yIrGVd\r\n8oBL/Cd4x1wotLPoGUsFWlf0ySa1GxVuDHWIhNDVd7lViqji1G5KwEEKKota\r\nZ8Lulk5XnlK0Ep4k0YoK9BWHItBzpgPLW4twJ18Noh5SDcf8O7snGAqlpp9G\r\nmYzJ4iOgb+28ennlG02AZQSyx5rp4QgX+41l8+tkFAhX7Ub3AdjlVMVxnBUD\r\ntCGKWo9vC86hlFtNAoSIOV4MKw6InPvfdXNUqBGQSAPfgr0Lc1FOaiMluect\r\nmksYD4mL4HmrmUCBDhNp5e4VFYbyZiH/bpIr21xwE3PlyHlUsjaUKZBxlF+0\r\nmYyYuH7T/gJlpe4D8mfJHP2nECedsdTBxpCdDLTQf78DGYPasI3k73rkgVJ4\r\noeSQ4uIlZ6k8ZEVmVNpepek5qVeHUT56wHc3nT6fzw9NQxMraEScm8mL+2ic\r\n71h6Z2vaCrr0ELp7zZlmHPsUEYWU8oJuR0Azj6IXLCeRGopMTnqRmrgATU5G\r\n9iSmYSgDB2D7JCjo/E+IA3NeaEgaE07+1jNhNLvbDM3kmGCXCgkGC4pbk08+\r\nvwf9lkkdJiIAAg9L/5Jpd39nUkK83jNMHRM=\r\n=kX41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/density":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/tab-scroller":"15.0.0-canary.c20d74405.0","@material/tab-indicator":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c20d74405.0_1664321579772_0.10134556054127497","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f033fc8d1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3748e4da61ab75bb08719ab3efa2c804674c19ee","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f033fc8d1.0.tgz","fileCount":37,"integrity":"sha512-sGwYc7IbqH/hR5NahcE6evJLbLBnYoV1aoUCMFcoOf4/R47I/kYl/ri+MBBB57GWDsmIAa9Iqg2wh61gv0DnEw==","signatures":[{"sig":"MEQCIGdcsAQOtc6fBqV9REdaVlf6YRrP9DBSU++4KIZBzEfQAiAFIt9fwrBJ2kjUbMLt4CBIkMt6SFX5LaRlyORsVJPWww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM45OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC7Q//e9WiA64HmHBk4BkZKM5rn3bQ+NaqFzBgASops0GD80GKk3ub\r\ne85DIhpMazJe25Yh85ynckpk6DuZf6OdEnVO6E5N2y+n3OuHrd9VTB1liURI\r\nllSX19lZ/mBRwDnPRTEwAAt/ywc5UkAFkkaWag+aaIWRspuh6WItGhooSFvn\r\nTk2xNjWVHWkWuxewJ8MNPhNNBZpClWCmqgxmpJIbdKlElpxIsLtmCz+mmlvh\r\no7raqIYjriprFN9c32FsBB+GipSbem+CU4nUJC4frWYImoBzw5w/Wj0he5qj\r\nf+sOE5i2eGwIYwLO1PkRxnq5lqDlkMosAr17c7tnMabZvP7C2HrcPgaU0+iQ\r\ntQ3vSTjhIERXyxylsJx1ln2XhuB4NerY9ZGL1t77BYu3bWKXfkaeUWNo1IX3\r\nBd94TrLgwTNlaDzK3gEzo2ANap6maEk59ndwA+pe5oH8VnWyolYC+u8HB7u+\r\nYLmuI+rSs9BSqmVOXKpHM073whrSAlNKgXJR82rlIS6fSuhWqo5QSilO81Db\r\nGweHwi0o+HMBjM/NiWeqcoRfKjv8TzsmJxAvV3XF9b/RsPPwGv+6Jm/eR2CA\r\nSxp5ZLvO4CyC+iDMY2sGMAEFmDU5HSJj5spNkb2QWopKbJHmNfJiwBrP9d3U\r\nzcXcCL2xhHWGfJbLGMDo1g6DcY+5ewa0APk=\r\n=w0Cx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/density":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/tab-scroller":"15.0.0-canary.f033fc8d1.0","@material/tab-indicator":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f033fc8d1.0_1664323150795_0.25757400536328423","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8d7ae912a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ae240fb36834f40ca9ae459c5701b3cb0c1f1e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8d7ae912a.0.tgz","fileCount":37,"integrity":"sha512-irUwqyW8bElJI/Y9wILNZK5R71FsdQ+4FkwF9cJFo8jrlbRTv2MBboA4Gk2F46d5bx7bn5msN11jFd5nY3jA8w==","signatures":[{"sig":"MEUCIQCOuHi2w02jCOtzSd/t1NTGFBxngldFr434T21QSsvlVgIgdngDZcNa1ZVQPxN/IQ+WFxL9ItBIa3oVO6wMsJFpiK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL1xAAittXe0JXadNE5/W7YiMFuuBuQDVV782qE+NCPdShzkUUjHxQ\r\n4uUoxHlBWiKB/RynuNQDcixaCU4jpwzIL/ntI0NXwVBjeY+8DWwrfcjYhSs9\r\nrSETzMAIR/r3MApK5EU6t47cVQ3U50yaRCPfkWu164+r9kDsRLzbuTQCy7DS\r\nbupu1RVrIt1bGJKy7LnSufUZelprt30TJMSbSazJfE3Nb4IB5jySFbGc/xV8\r\narbv233++qdVn7zAy/q1v+WqsHKnVCKVlhgMv9rQu/O95xzaER3mkzB0kO95\r\ncgwd4k+CFwEFlZTmMjIPnO9Bymf34IdtzryzMDn4zH394op+TP5stU5TDmLq\r\nBGjqmYMgUJ306cEGz0vh9nMCnqOsRXRJX1r3UIGa3BURW5pCdu7VY8+2Ba5I\r\nGggPnRMbS8PyUutAMaBb3cLW3XUdAIPLlO3BpKigJYxGiCqUWRAHh542c8WQ\r\nk0X8B+B0F6mGKyesva0lIhBts126lFhfEqNSxctL25ck4Z2SkulM1rc5EDMq\r\n9htb1VBlAxG6cqMuw0ReSlF270VJY1Rfs1HC+QsWZenS4lpOH+AWznAl+1O0\r\n3/q7aJXsI/FLmBMP2P0ZISyvJ2jp1uTORG09Qla5B5N/1xLzdN9cp+PpT0aQ\r\nLOBbUXQDQkWRqrLvLImybliwsDMIIX4IHKA=\r\n=z3kW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/density":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/tab-scroller":"15.0.0-canary.8d7ae912a.0","@material/tab-indicator":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8d7ae912a.0_1664351871591_0.6744181980392134","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/tab-bar","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.db414b864.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a63a472ece965dd2c7a6f729dc87bf7b746cc336","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.db414b864.0.tgz","fileCount":37,"integrity":"sha512-GA950tDHSn/KQVeZ0jcl9t4t8AZM96wSbYTbA+r2UxvD5qL6ZXiEWKjECVcSkANZnGf/ccestBzR+ZcjCmJ06w==","signatures":[{"sig":"MEUCIGpfNk6ToQcXyMTcwK+qTxBdmb7LgZfJwcon3YIZuwQYAiEA45F5dK/GWo+mJvsyNSsX8CHKwJuy/nXmob06qaME6CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNGAmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp11A//Ww0PAKg0Vb4RxeOXEKftlI1AxCzLZ/HuUNGCnHYJO662S45y\r\nDLryViWQVTf/TN1R1rBYABf79TNgsP03UUJgfyfarRo0vJtQ3Zwr5QEOpaQ8\r\nSs01v7UOSIOqMa8ikgksSlI9jemO3WsqWwec3kIxdjIBxiqMjneqk5kQuQrh\r\nkyHfZVKFtAXZ6gQigQHC0gfyfUbInfGkkc1hEBqcNMUAbxSqD89+0vjJlUTN\r\n4Q0WivLg0FzRRwoVYJf6eU/zdLERN3i6PfrL0GHrriOwSZrguHr5t8MXCGCo\r\nspp/VRY8uSZuxqi53oTaA8xWpOCM8L28HrTJ2qj8YAwguEFxhvTDA6aaYRDE\r\n/fOzgy8PJTrjAruqPBpOkvBWhf5cvXwDw10+W+7FVDXpzJ5GNJCirUFhxP6g\r\npQ7pSI+PcxxIAfHGnMglAWbrVME4hsu7CQ8qf2KX7uJvjN3mMK8s2mFmwilX\r\nGOz/yeG2Cj5sdkEdjj7kpUzGZtTS4SSUmk3NpTyteg8zi5v7pXttYnowSC25\r\nJ3qYZuPnCNSOMwUSz14Ii/lzJnfojFGryImzgZXnAiKCmzSD1Kjgk3OFeDfy\r\nofpyjJ8CfTi53Mfivvq8qve+nO1XVY2WvmlXZGKmjN6/a0iKjobHYSX1bWjs\r\ngEDddp0l3nVi7ApxkutiiC6UI3SIl2LIIyI=\r\n=vE2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/density":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/tab-scroller":"15.0.0-canary.db414b864.0","@material/tab-indicator":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.db414b864.0_1664376870703_0.3531887334051911","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.28cc6791f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39fcb0fb767e980ba497315cc82450a55047d36a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.28cc6791f.0.tgz","fileCount":37,"integrity":"sha512-BK7GlRIHBBWQZrbrC1TCuFKRGnIVd6RpbGJ0OWroYjTyYLqAckvo4D1KICEcTxopSa4nZjWpWJh0fMUF48dWMQ==","signatures":[{"sig":"MEQCIH3X150pAkimusGwDuWmN58sSadL26oaEkoK8ezpKme+AiALhYpTdNfcgYb9SkfKEbMxIxTLM6dXf+JumqYVDx07Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO/Q/+ODGIl9/zv8HVG2XdB1qk8Nmp00QBj3Mz8fMy9S2Wyez08x6a\r\nB07EZCqlClaLnpYhGIp89gLKgIew72ZtVIvpyT7JmpmdKkD+qFIfP1FhuBdm\r\nPhqPEVNlSDK4Y85ZLHRdRFY3ERJ6pbL3y5tcrsPiv7/p1YmUmZVQEYODoJS0\r\nDnhbFhYLIgxnx0picT+0XXkHv/kCkCyeQK68iznURv4+dfClLiiR4zIIAI2k\r\nlgcGAMXY8p9brOi/2Kwz7DO5IKHMWiaJzvrgPvytoQX9P2FtKka6FvjauHAn\r\ncbg6yYOi5i9ZaDNKI8iu5BR33erBIA7IDwzoF/FqoVYcp+ThZxpYJaLVf2Wn\r\nlC/IdFYQgTAeGqMwRrxaISt1YNHHXNCeut4EdDufKtOqsrScp+HY2vAG9SQt\r\nHgnjnsHsvnN3If4WJaj8w+TSwD/wfRXxbBxhQS/+bqdkmbCUdLi7ek0urrx9\r\nwangjwK+RL4WBww5IpL3u/Hyuu5B7wh5pZT5Z1Rtwb3Jprs/6Pq26gh0Eoo+\r\nljvHaCS7Jwk5t4F1GSppyONI3aqcsFqjwACDaxSTjCm99Q/1NqAEKUJqK5y3\r\nul7PyiOldXc0cNAracT1Bw4mY/icADS6p+8GaNU6LyZ9lj/i4eVoDbj8tNtR\r\nRdCh6furITeB48ilMkpwGStAvWvF7qZ47qc=\r\n=1PDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/density":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/tab-scroller":"15.0.0-canary.28cc6791f.0","@material/tab-indicator":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.28cc6791f.0_1664388537255_0.8342976890925471","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a515a2d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215d7b262a15fecd7c43bfe95b5cfd02618c8994","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a515a2d18.0.tgz","fileCount":37,"integrity":"sha512-gq/A26h09soGG342l9p6jo84DQE1Q42xv9XqQBwuU4opktbxoQS5bOQ2JkD9OuEak2t/Zuk8dOdbuVZo7BLKiQ==","signatures":[{"sig":"MEQCIFcbgR8b0XLqP+d3GmcuwnlDcsUWqlK+bEWdwZZFfKIyAiA/xriIz6vrzHTQ3y0/zhWVOX4l9e/kDitEwpHtpTy6vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJkeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Ig/8DreHwgzy4gkLghA179GB0PNOnIVqjIEYqvzSLFrSha+1d4C6\r\n8rGWfdSgi70zrWC2iBmDgnBZHz1brclXRrl+PWieYd5WmOdT7ouhhvBOFGj1\r\nGMMPNx/PNYMufBROZKNAlaxQoSWdSmHzpf0zsxFmD40HAxgLtHsnKhrHt+E1\r\nUxwFrBLD8LYyXzy4oa3M1Zsp9JJcNa+XaF24IN0Zw0TQAUgd4Ex9Ps8mGndo\r\nbpOj1cRdnQspz8B7IwFQmZk2nZkVP17GTjVFNXSbwv99vQ67zaWkVtN9xM/J\r\nSvkQd14X3tkSIZ7/RkaMyRlt7BAdMqJNV6Q6/IZi/bFlxjohlAWnzzwBIjLx\r\nHVadrJZusoWZQL2uIDr1779wUXjhX11UpGY+0Q9dsoc+3E2c8cDCJmFeUDSJ\r\nQIA3lBJquHpEmyvlCRW4OqteyJlyZomyeM3oTOQvT0/+AhuNa67ZoI2wfl7s\r\nFJEv4vjy37exdv3swDAUQFF/7uM8XxD7n0cVkCq9pdyZYPanevsnYTJ2+GKW\r\nALVLDMy6BM7o0RPJaW/8BXjvdAlAbkJuIW1zBGeIr1pBtc6SDhjvCPQUKIg2\r\nC9Dnj9sSHpVH9/4VxwLWHRo1TwZQklKuaO7hvTQwhEveT3GdEsXDFRDUUrBn\r\nmKZq21vMFe+uqaj3IRDbf6fl1PQbg5CAlKE=\r\n=D/XB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/density":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/tab-scroller":"15.0.0-canary.a515a2d18.0","@material/tab-indicator":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a515a2d18.0_1664391454579_0.6467998787946636","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ce9523167.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da69594b7f1c73f2989102b99a90c51d6847c5c7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ce9523167.0.tgz","fileCount":37,"integrity":"sha512-yZxCtbOuc99EQoFonIDsxO232gbDgmLux1Zi3qpRmYFl+qrK9QqFyxfOqS4KaXLvJRJFxWnSzu0G5eM3aNsRwQ==","signatures":[{"sig":"MEYCIQDs+mHvJfVTOtjIUy0ZQFPHtVrjgssZqQsurGKxUXd8NgIhANEFM9HRgRyKdpAU2T8l5z4xfjzUuqssBY5kGDJkeGtX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgD7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohvw//eRhYaieziJBKdDjk0WLZdHV3t/d/4RDD534h92b9wGxfHbvw\r\nzOe5WEJg0mNIQqkTNFgMM3x10PSS8Bz342VkyJc2eA55ZM+i9W1k7OuDWSv+\r\nhdY9VnzN74vbBb/DX+Yyh19m/+iPseexaNS6Z+WCuaE5fNSuvCwdqvn4Kna9\r\nU3fhEhZT4Ye35a9vY0j3s8flBVGAzDnCgVWpohT3f1xZJX3PrMvGoAuaFF9k\r\nnCQhQoYcxwCtNUndV+tqYBp81SqcibDarn8BRXecHmxX3pmXC8Q5HN/9fski\r\nWKunfS9L2OrKzJvcX7Z376ZcykP9i6wEsGgsqHeh/7oZEHsFGfcFe5kwVYHK\r\nYxMAZ2RK34rsDVmKorUadsIh0WIla4PjDM4DS4WG2sfiWEB9GPxJe9wFIFH5\r\nlG4EN7SQxaC0+3aSx2WBRBOcpLYFjUVz1rlMxebgnYMUZCDQ+1GooFdoQ8j2\r\nT7u5yo4E3YEcwFdCr7d4UCsUulQcmLKcuGFeuMa62S4JXFHZVkkN/JOPyzr3\r\nxvZa4LxHq0qs1AotVW3otV3XxzkrJ/TTuxNW3733fNzbDZW0+Ftcvv4Bjv43\r\nt59q3SukUTmRueGIdsvohIk/8lL9F6GWRaB+2rSbfJ6fzeoflVBUKYYJgQ7b\r\n0cddiWQACtvr5VYlNilBIbPwJhDCdGPC4f0=\r\n=u65M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/density":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/tab-scroller":"15.0.0-canary.ce9523167.0","@material/tab-indicator":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ce9523167.0_1664483578790_0.15188905383343765","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b2310f7dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a46ce8fed46b4d6c2680dd1446715a6abef045ea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b2310f7dc.0.tgz","fileCount":37,"integrity":"sha512-S4F8I1RHRGSyEk4A2KWoF000LckzNYRunUvkBxptlV68GY25eUDT0lB0GSsDv0zXfGW10d7OSdjmA0saCakw6Q==","signatures":[{"sig":"MEUCIECUscCLgWV9hDLuqJLsUVkJJSX0pDpc8KWKY0ykgElhAiEA7UrVoDzYC2jpunc/WcSxGWEGxRNe5j0D7BnOO6vi/4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjUkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8QRAAnVTPP8DxKh5qiP91JmG1jVbaneNCzscJSH2ZAYA9W7GF5Ko1\r\n+QjU/+NASGl8pn1Qcv3b6l5FAtix4p6D66pZFZVPaR9HrB3NyUBzN9m7SCy0\r\nDr4H2aHOgsYGX44Q44bwLnDN8ruAF3XrrKSK2QzOLxh6G4LSc9HvqQmzphN3\r\n99DkYAwFGR2wqjfZYhdIenSsbRkFwqEGrQJU2vQwzxOeh7SeWzYbV1/go7u+\r\nzsgg2fg98l4NkN5Ppv9jd5j6hr4f6YMov367OfT1OoFpolAlZ54PGbYJwl9j\r\nPgtM8v6VVc3xnTR7OVKdubfhdRvwg825riXkPhkifw8k5UnJ/Di1SWq3dOQf\r\nvfPGkJLJGa5qDlupLsNq1z98gmN7DCFdCVDJGq/bBO/8dFbcfZNBYb2u5RZQ\r\n4W404DhmpeDy0wIYXoU0g+gs4jheKgnTPY/FbMlM8O1rupgNb+a+s00R4nj4\r\nJYFFhHiplInncO0OuBFih9fJUQzH6UhmfaLSYWdUIo8GwzURYvL8mA27QLlv\r\nybGzN0hdUwOng0iZyufCkU4foIZFlldkiWbUzTXKYVqbDrt68dymNHVG4Hqx\r\nR/tCG3dHHuBc/1n0wekVNxyfQo5CTpGJYj7KypFfTdLEpAly+haxHK8+TNND\r\nZb2sHn56EEjVYgGmgu0ofWWAKQVlFmXUZBY=\r\n=Witi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/density":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/tab-scroller":"15.0.0-canary.b2310f7dc.0","@material/tab-indicator":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b2310f7dc.0_1664496932020_0.1739909347885189","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a44241e54.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9051ba59a0e694054f2d80c2597fd90e513610a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a44241e54.0.tgz","fileCount":37,"integrity":"sha512-rNSpPIVQf1e60ulhJzKFAnEfL/K5pa44vOtmezbvjkZqbmi82Ax9D6mFOR1i0RFRYg+7VCpwCKXenG05HZUpgA==","signatures":[{"sig":"MEUCIQCF3x60qt9Ao82TNuJNiSdo8RJIbPtw9AkRCt0fq/mbMAIgEf55h7PbrgS0qpIBtS3ZYpJfOdqEuu7/73ZEGwwQaRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqdbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYQxAAli4RWP7VjTxILXuqxbIMwXStUQT42+31N/k2/u25VU0G34ah\r\nzyTi5fhd5HAhGqSRCBVVqy53Kp9GGT19FkszsNxtz4al5HlJRoWZJA9OKkCL\r\ncgTkIot8rtnLJKAn6Q5b6GtHa3l39u9lp5YAPD61IJmqE9rl47KGk9FykNUh\r\nZ3qygObMhYqso3TXpMkGL/WWeBKLutdzBCFjsktvcJ1WqcojGF84tRBBa2FB\r\nk9bncubNTWMcIkpredL1NAlQt42GkDadKlAqgrdZ1Maxw0J//COx1jzr0USE\r\neJQySXKWIfi28BVRAM4UPbq1fbO7y0oAkFmwmu9mMIieW24fv3KwT3GXoKGR\r\nTErPNHI+JPOY7Fw9sI4R/2cm911kdXLhUky3qLwsInVOIXGTYqWOig/po4G4\r\njmS3aEOwJPA+JvM1znxvj8dM9SQrSMDj6X3fZTGQmmRDOYvEcXDmMgyGmc49\r\nm3+9fcMgmAD9x0RXCMPPRyIHyfbBp9yepeNhkIw/CfdD3eJsjbQxt0j7qyXZ\r\nNXVFoHKXesd+OfaavnNV+Ehx48OYlbsM148rp4WkgZrqaZ5TGVZSH5MySoWL\r\ngfc0YCQkQ70HVkSiV1Ud4VdeOQH3wuPO2t7CvMVpKrh6Eu5TaVn/GTfdGTV8\r\nh6ok2TsQEYB0UgZEROUt0esQP/ZQkvV+Wss=\r\n=9oBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/density":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/tab-scroller":"15.0.0-canary.a44241e54.0","@material/tab-indicator":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a44241e54.0_1664526170968_0.3838694373167477","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0ce81e115.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b64354d0a6971cb796c2d6087dfc8fa428931b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0ce81e115.0.tgz","fileCount":37,"integrity":"sha512-7m5kYleUa6OBmpGbMt0lUA/RDsVzopNOOeodMDe2YhxJ5VLGNqZhZ7Bor+XEQVH6yixVShWzohba1p0Xs6EpDw==","signatures":[{"sig":"MEUCIQCkUzkbjAIK15S9aB6jrSQMg1lMhi1HWo604BmwC/9PRwIgNHIdKSqoArPNkKc/Ql3fd8ASPP3A7fQ3o0AamlbJ1dE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzNRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoczA//Twn4JY05qKLpeYvnOIH1yvMPLMnDjEStzJ7WRKtb1V4mDnXp\r\n18fxu/27rBA5jyId2HgSnI6C+mxl/BIawzjwPzS0xERya3+GHZ0Jg88LWH3K\r\niZQWYiCgMveCeRShEoCWSnFmqtRW6XZAzu++i7GqhOnWJhwTXqoQH9dQYvXD\r\nDGuRdrsheQPi1yGv1g2WGma1HRaDa+Z8FMSFBKvYtKimBtHlHVpWqbFdrZsa\r\nyQC/N1R0OLrivjJmtCQuqNTcj7rZDyV0n2S3RFSYIapgGyDjTCa2vZV54jsl\r\nRvk++fWi0MgI8548J8V3CF5HccYEJyfcomNpqbKNd3oqQF1XxICUA9Pxfmig\r\nRUts1ihDdYZOjA2nl4hfEsHVM7IRdWdoq/VJZ6/5i2Hl6kyvoo19OhrdroaL\r\nTUz1R1yWz3uI1ZJz253xXzdn4Z+kDG4cD1PPb8hmxmNS8eINCO3ma89rM29S\r\nuCwpA64roqB2VyDP6LS/2UHSGY+/1M8LsJjDL1SSO2DuoWj/P094BAMjEDWt\r\n5zaB8vz/RM1SnLWZbRB0yOx/Dj1sUhL2GOUY5nj8xOw4JC7+gEPkjYgaI8bC\r\n53ifw+G2OdEnS0GJqspB7MvcsyIiPh3f4GD7hcYfPiXuJI3VPYMI2ArjqhT/\r\n1Kwn/HbL5xF11HELn3huRa7ueeBPixQhbCw=\r\n=NWVh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/density":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/tab-scroller":"15.0.0-canary.0ce81e115.0","@material/tab-indicator":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0ce81e115.0_1664562001242_0.5891595547168407","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3cc30f6ad.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e04ec5f75a980b3c057bc0125544071e86acca0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":37,"integrity":"sha512-UgWMZjLuCmOVHy2xhLLJHv7xdjI3aLEwQGTS3+lUR+6PoRXzwQfbJAHju3PjM11BaKsqeham/S9OPF8yeTL4uA==","signatures":[{"sig":"MEYCIQDdbXbnQCtkQsb7+yeBOm7fvrvgGbSPRaxzAhE/IuTDowIhAJySSEUNYcR3hkPHn/ltrTp8Bh9Im0g3ZRuxlFmZHlok","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGuOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYgRAAj76e0SY0j9ntAdMIeeEvOWdNp96KhvvtaR23AtwYsmVANhbH\r\n3IORvpDG1At1H0T0YW9mFpu8sPaWJNaYMsxDZMyXqXyE4WK2z/vnmqKdonUS\r\ntE7ApqLQ2cFIAjzyfp23KmaCmw+UKL+XDbj1B2NuAw4JDWSBeh9lxheIpf0O\r\nS+2VsBCTW09vwv0OTHBBVXfgkZe/cqWbVfdX8autSYOQvP5oSPVXUlWTIV1R\r\noj0XTqFOcVFQt8vXEcjRHgIu7zg5AYwLEKX3S3Sml7z4EXSvdCb4uvIuQHz+\r\n7ySf7xzU9M6gVHYqF09HbRoiEDOZ1mcfZZttOrJM8CfWyOmekICv58XwVQeN\r\nsA9jpQqahYV4tBpWht7s1auDdwtQPg6OZEDfDtuf+xYFJwCjyDz6DELyoqL+\r\n3qMPPxBMa098PuSYc1UrGWeRuBXXcplKh9xlOigIAVHL2lmpUNwpF280wVkm\r\nukhHAP7JWNUYrGp8AFta2TG3NQSFtI9Oeh0K96lrcIMu2dOlxCnGFnrzKwW0\r\nar1FfFxmSO9imgHNTOooG2oUG6IyKXMREDLqbR4d+g12eNPv+Pq5wLSQf32b\r\n9VqDTsfrEVvCFDJNOVBPFFDmmsdOBex73RzoQJMg7jtm6rBS+WyEaDDdtZRI\r\npX5qm6P7uXMjuX0BWfZo4o9JaofK/L7C6BY=\r\n=5PSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/density":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/tab-scroller":"15.0.0-canary.3cc30f6ad.0","@material/tab-indicator":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3cc30f6ad.0_1664904078098_0.3202550347139781","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d9cf98e60.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722288b2628f30161eb3f75e5cdd650b2e664ee4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d9cf98e60.0.tgz","fileCount":37,"integrity":"sha512-C6oAxOyBItojsRUrIdVCVX+HA2DTIJVwd8ZOfT2g5w3ijEglAXugCqTV1IT1vKVwsluulhhcKTSmOQCgx3Zlog==","signatures":[{"sig":"MEQCIGfE/jF3Z3UFLdKgME4dckH9aMjEjtzogvtrkQVywLs3AiA8VvM62NU1Tr2cHB6Eib7XXqIhstXriDL6Q4q9luJvKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqDQ//QZbcC5N4dVB4Qad1k6jflp7YGzn+QFt85lRTJIiP7O981EKy\r\nPk48f012mD46u5jkVZYLfsUt4Ivp/myx8VBDi9pNLBOM3pdz0ulHqrnZCUxI\r\n71DDs99V1Gn/kLo+fGO4k0kz+TMSC926rRqoTrZrIM/hT5QLNMXoKlZ9m1qB\r\nGMuAc8nrt+MBKgDsnCFBWlxU+pMEv5xp6ZKMA7CJVVmutES9nsill+05XdjN\r\n23px80mOYVytnDPlkHisEv9zaVDWa6P2vlrF5L18se++1zu1Eco5X3SDjd/W\r\ny9s4rFqLhQg0XZdRhCP3LJAcD+6ODYgwEMUrQq5hFJjbmpjhIyl5/G3tRzQU\r\nK0iGRAuqBxA1ZSNOBIdW2G8ful9KuEptmFKEN1h8L/tYPwHYjuN4d/2rhfrU\r\nr6a/VK4eN+stfUnOA1ho4uojKCyidQbo1tu96SsbS3p0udOUa+iChS8gKWNQ\r\n/VCZ2PmSy8cpJd3c9mUSo7bHq68nNvdub50ylkhmlA9T1WwSIX6sYfh5NX6m\r\nS4vqhA+hUy6dCAosZ4Ki2AOKP7a71YlTr7wA/gsrpr5I+nqli9lvYQLmovkI\r\np5X86mJWvyeZYM5qm/H+FFtnz719yglerLiE733XEnHjY7ZZr/JQyd/+MxXR\r\nR+0AJ4FMyihaMRjH1uxkNphhMbbmE2KMC4k=\r\n=QW2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/density":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/tab-scroller":"15.0.0-canary.d9cf98e60.0","@material/tab-indicator":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d9cf98e60.0_1664910330409_0.3201415602076796","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d71935c8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c33f6df8708a15c02bc0491bc68236c8deab85b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d71935c8b.0.tgz","fileCount":37,"integrity":"sha512-tHNpl1vN1aECb8r87FNyUP2CimI7+jKV32V8i0yj8CACE2VKZJBtC7IiIvJ7Tc6fYY319i08+56M1N7x5KsHOA==","signatures":[{"sig":"MEUCIQDlwap/jkRrL1x+GY9du5NljnSGpkLxApe1C6tF2/ICjAIgPlMXIMGzHmnOC3nMxGhyQQNUqgYmxG9JX8//9M7M+/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmockBAAoFUdTUxcSjg2unbSi/z7y+szh+hOlRLXXSV/WOzgR+fGd0il\r\nwgUPDeC2nYKkPD8GK3WpKufUeGQEk3iDV5lw0TK0V2/31ZYwFck6VzTQuoMD\r\nBs3N6+4R56vd8rAsJeSSTUDqnZ/D4vGKTYKtWen7LwCbGpO3Jg+FuyHewgQk\r\n+k94JWPE2ej+zoIigyCrKrQzAzGFd5TMjdbEQah/OEbuwJtB3N6fcijm+9jZ\r\nlZnm9C75h/iMSFGpxMPyVFDlN57FZRWi0GijhB6oLORXwyxpJs9r/x7ROmv6\r\nPCu8LOQtfMUCeO4yKbjam8RxUM6b8ctd4D1P7ai7RiTjhXMglZbtGvwMl3/R\r\nXBEqe4+qYERel4ZhzeCwwOnOi3pTEfEnxpfkCCAddQkxOWJewnNPxDhT1pm8\r\nsXfhkT6DnyiRylnF7F6iMagxNy71jfx+WoOaB9N7MOhtn/MClq8YKwjDeXMP\r\nv26vvjVdgDiH4qraGPny7aKu2SCrXYbVPxJPPwx968yudYJOfegD1CipAC48\r\nkPBrE+Mp6i9UUybOe4TJdi0C8X8Y4d9uifkSmjxUSbZYSCqgSHmehvqJ5RkD\r\nhMr1cl7q6x2vsx/L+bHX4fgkHcCzMMGEz+KvYauzuFBqOaAeYkHiiWUFwLna\r\nMt2M/KDlOmUcTtf+aHVYyZVYyawoD+A90t4=\r\n=3mW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/density":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/tab-scroller":"15.0.0-canary.d71935c8b.0","@material/tab-indicator":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d71935c8b.0_1665044198318_0.5773919676271995","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.49c56a25d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd8faa974d99802fb437072688408fbee4a24787","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.49c56a25d.0.tgz","fileCount":37,"integrity":"sha512-s1+kcoY1VYiW+yX5iwKMq39djrY5ELfrHYcELai4q3K7NBVWWHJLzkAqZAkqo1yW+rK6HGUpJcIaoGesZPa7WQ==","signatures":[{"sig":"MEUCIQCsCyeJEM9zXg9Ezfnci879Lm6RVkvEfkYkOpT4J5RcPAIgFWM6nD4EzN0q1wUky8FA24P4/3DebqosxgkKz/sAWTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyP2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtDw//VWFsCPqXagMmFYhNHPWgsrysdFhzLiroDNv0bicy5muudnOp\r\nIU/Rr+RV9+6US/1EpnNM47XVBtX7ouSllElcJeEGPSYjb+OyxNEYJBP265L4\r\ncBzjNfMxRazUi4ekiqeJEzEm+Ufcz1pzwq5Fn6PwqqTO1RefBb08nGoSAbXI\r\na/qGNXZXMGTKWEdafimbcriDSQxpsYxqU5PyWK+Vzf1bkqT4vmOslIRJc+rM\r\nAxzrAkbFMUXSgVkdwxgMuXC+BZ2eF+aWR5nbCGYJotnMHqd0DPBFpW5f9vxA\r\nPghU0YYSfo2+m7HzXo+8RSTqdziEeq7jVEw4wddjfs8yeHmP4+EackhqroUM\r\nf1FH9ZeM/Y2tJ7YzQwdEVMCjAmQch4sNF/r7QpGcbnN6GaMsJtXJYigCyt1X\r\np2gNls+B6tWaLh1iuf8n7b/a0/q6Dnz52agAwUm64bVx3g1rtqmauRkrpoW4\r\nfREb3CZ83ukflXtQ0NdCGd75OIk+3x9RmEvVqsBAxZA8WxUvYFGHr4p3YQS1\r\nH/Pze//kZmAaoMJfp1+7hxqaJXsCbXGvWDNeFfHF3WP3JaEXTb7op3wnKhzU\r\nj4TaT+CBilTCJs63aXqU8JkzVomln9Ek0R/JLZja2hPki6+cA4GGRSPm8/Lw\r\nAUykFITeLXtHk6b1P8744sY09QXCA1jNqxc=\r\n=aI3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/density":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/tab-scroller":"15.0.0-canary.49c56a25d.0","@material/tab-indicator":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.49c56a25d.0_1665082358218_0.962114057316034","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.07acddef3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7b7b8114374db57972e9733c74693d75d82cb2d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.07acddef3.0.tgz","fileCount":37,"integrity":"sha512-Idhe0VgOfaAtaYKNv09AK9/DGGsUrYuJ4soN9PaBcbds/SnkaVG+NbHG6ptkK4liMtnCv6y0hvUfuWsUE/Ue7Q==","signatures":[{"sig":"MEUCIBkgwcW7VNanXMwUhEfIqis4LwwNkG3pGlaQy0hXepZZAiEA//Diw250EDAhYQsXW2K1RVyw9Peh5LlQlUntOgzx9eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWKA//cqjCORzhhPzmzj2NZamkQp0g8Bc2ky67FaTtAn31gSdHaCLN\r\nLgmJwAszhoi8QGh8ncZ3LOunVNVJpbngVIEuFeajOX8DUcdweAjUiF+sc8Oh\r\nefP9Jle6Rvt9iKWruYnUgqmoV65D+qdWlDTSCIQdpOoPUQghAwntkeoNgpsY\r\nx7d6tlY/Gt9xOfXPWfmdiHzr2E/Jobk3TR1gWJlCy0zze8n+J0T/i+lpQA/Y\r\nKWTzqoZ+n1NAEZS8J8hQr1mgtjXEEWF85BdjIm32C2rpuCXNwxvYIWuTXtTS\r\nr50R6xRPRInWnVxRleXhh7YzK4umqwO6XxZMA7DbSScvcKb4qSe55dftmMbO\r\n/VI2ZUjFP1/67b1xj0L/B4je/U6DRxsB8iIKpDw0YlYQNZaYFhh0UvyE9Op+\r\nb1oD5K1LvAf02rJYQtlHGkBl5+G1cIgbw1a73RftmNL+e692NHgmZfV+ZQAS\r\ntrDkYdFE1xSWMXm+1spcHZhiGPus/YNFP20vIpCfHTrgx/b1Y5pdm5XFyb19\r\nHo35sUrh4WhFC6GJ7Rs6MvHj17HofUJ4fn9gL/FTcQ57yLM8ZYeQaf8k+ryT\r\nJo6xnpAsztpxQX0ZQ58g2Un/NVfvClOxYYp7DGKkC2G//xJ/E2755XprG9er\r\nv+W7UdAZ6T7H8fPayCQk0g3uIg5heMERoLs=\r\n=Epat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/density":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/tab-scroller":"15.0.0-canary.07acddef3.0","@material/tab-indicator":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.07acddef3.0_1665178770671_0.23551574764414118","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1c74eb2c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c990ba3ef95d4f69f8e0891ecdd1cdaac3d0d87","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":37,"integrity":"sha512-qCBEOR/PA3k8LydQE87hLNSpwY5PrqTl6rLNlpJQ74/5A1quR7sFgY1Wclx0ktq/ii2AOldQNP7lqt8KUratNQ==","signatures":[{"sig":"MEYCIQDMc6NfDAs8gNsER03c+bN/cygbrsDxgOT9AU1Sax2IzQIhANeM2wM6gdiu+SStCjzUhxlIEKP5utlHzToOw1t2JUTu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKC8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGhA//Qz5bMp1eDMUCdLeX65tImmlxpQhJwsmIw+QHTqmvPwE0/v1f\r\n9AkA29sySwTn31iFQZeh7b9/UUgZzUqnaw9kpmqxMqWrMfmJhnigLKLHcvTB\r\n2CRtW4K0lzo7j9YNFqi8XswOouUgPze08ayZNpO4j9yFyaw5wDgKpv1HW1kw\r\nOqSq9YcOf2tIL1aMkqQRKu2Gh2HIuXSV3w3qew8QqD6PHUj+TKJJhr/cimL6\r\nUcXHDY8aBXl8FPlNyY2W6vxw1K3r9zW/GpFl+Fza94MwPtKv7iiZBHIndrrq\r\nsF1ckrL0Y2CsmYSsq70JugPDEpWiW0UaG7s/vK7U1msO/XOw+Z03dQVw01pD\r\nl6AERJVJNnTUT47UYjVc8hD1COH6wsSTDoGPdHt+XWqYmit6tUF2IfX6zHIb\r\ndNrvQVB7wD8u3YtdmHLXm0O4r+y5G78jHpaLZOhYG04JKWNSAsF/ipB/oM/T\r\nwvbKj2P3mQRewgHAES9BZ4jvZi6SYIZXDcVU1kezbJUqVdaEuRO4edAUbv9P\r\nOGu8yb19G/L5/vSh3U4169KarcIus/e4z/SmvUBuCq7ILxUTquwpx4cJMaf0\r\n7vskheWpUnfh2jVNMyP41EmryRczLKyjAAkGkMVjTwv8eI8jxgmeNC0OHVhj\r\njUr20DYwV2bYjYf55NJkQQgefQB/vQbUN+s=\r\n=NP2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/density":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/tab-scroller":"15.0.0-canary.1c74eb2c0.0","@material/tab-indicator":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1c74eb2c0.0_1665179835887_0.7378686898608167","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.dadfb713e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e092fee60f88680bea290b11c9f13b98ae98c77","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.dadfb713e.0.tgz","fileCount":37,"integrity":"sha512-tjeOiV4jDDK/KhNSq6ZKqmuXzNFXHkowzDR9ZWI42sTg6Ve1fO0ANzAw0nTo80Q0WVXTWyl1ez/S3TKkKkX7+Q==","signatures":[{"sig":"MEYCIQCmBkLndhQ5PNn8PdJExXhNmSDtqQg9oBR1VXwaFzueeAIhANyk1nw6DkqrvNsDdwEY6cUsPugmjP6PMtRjZFVPHbM8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSrA//RiR14tUcHlIU9Xmgm5c32kMjyXkrwVMrJwXxBJHu+fT7FZ9I\r\nqCHMB+t32midFIbvVu9xcCQOjPtWjxkpjEgPptoX27Kr6RgIf4ZXzOo5m42s\r\nJN4IyayOUPC1KSNu5CM/TNXxnA9VyBvSneVrF6pa/QkEgo+VPxkRwnc7hPVR\r\nGSzT7mWXFc6+n5PZoFR2YVKwkpZzS/z7yeknt/IQyOrSFPYFFi/vptI+TT+k\r\ndbhk2RA+NOBCQz58u7Rca7IdWlsKrgIw0N/Bg5GrcEYC/KlsHFnDhyZvkNuv\r\nU1UuI7isy3TNWbR3pNw7XHTWbMoPWSD1uC42aJIgQd9MolRzrSbNrJENG708\r\nrk07d1iG8Q3aQJ+ryuNu+oPFYLbwZ14trKYZqNhY6uNGRpjO6bjl250WVXK2\r\nJ0XTAxHrOyoJPe7xxM9omJ892WeZoTPrKwX5UmfqL1lSDMx0pNCSRh4OV5zA\r\n8tdfBl9/+fXEua1eBFPyL6JszfoD+GFc+RHKbaEoau+h/WpXkCU8c7m963LL\r\nZbOVSnObTC/dduvGIXGV+R1a6ESpqCedHP811NUMUN03K6rh+b9VLByzrWaY\r\nrfKVxiGTR5/5sVxRtMXsRoqQYf1GBnKniYaT0oCxb1PXZs9VKEiQTVT+/Te3\r\nrTHJUhhdkYEoC3X2OB+J2j2ZmymU50cLLy8=\r\n=xHIQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/density":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/tab-scroller":"15.0.0-canary.dadfb713e.0","@material/tab-indicator":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.dadfb713e.0_1665205660119_0.010704582069280155","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/tab-bar","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.395f1ce61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0804e072c0a03aa014cc8e148a5de8a13686b24e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.395f1ce61.0.tgz","fileCount":37,"integrity":"sha512-33yR5XA9sDcOx7u+1ChrUW68P8y8RKkC5OIsZ5fzdAFeWCy++Z6PzMxYYEtcCqVaEJaVv0EjRtEjdjU1z5LKKA==","signatures":[{"sig":"MEUCIAJ7V8+B9rzcIIU43Y9Ub6NJFo0F6b+CyvC0NGECIKRUAiEA1MhNCbLgP08/466sphFGympbWQVXFRTG54/nmlSfca0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMHA//Skjlk+okIDB5/uBSaHYQ29SFbY6gG1hUl8s/ihbKGPDDbIFf\r\nebzYbhNymfh6gETwy1TqyoazHeBeHSmORwT3rMQBArhi97BCJO84mI+OHZqX\r\nWOOFaDhDj09EVcasTtZYB3J7KFiuIRCVZDiwzLqzDb9XikcnMogAr25UY3bQ\r\nGfCZukuQMKdlcc+wnlzcBWIK65lEEptzEvPfgS3rU+QEMLwfll39B82mKUyu\r\n/CEbzEoSVYtmP0GWInDiaAJGJNjktW4+NNvUL02xbNEdg85ey8QHwP+Xa9zg\r\nVOLaQ6lfWwA55jBmWj5LLpK1GusHhcsKVaqT1wRrgJIYvQkgbGPd1bUJHnVj\r\nA0gTGOYJYbzF309YIBrUfc1O0jhN69cWv7qLqOrStyBdRi6o1rM/fFfDjEc5\r\nsyY2/GL+L6BjPY4Me5MLJaMoH4R9IAhLfUMJTYQ6IJ0QgN0CshFAFvQVvb40\r\nob1XGQMIWrzpW11O/N39xnBpa3PEwZaAOHY0vT5agjmrmvsQGaTUvkl7nxQP\r\nNvX75OjjpuqD1lX0EE6+hKRCBh+k22ZQZgulD5DZDA6YaOxOUg3XFCzJ7tv9\r\ni9buwEiSxo3gB3vqhnXDCRFKOPAi3NwzkTy9OoSsfKbPiJaeyetvGDZYkGWm\r\nwGqZUlzVQwevsEq0TP4p++YsgkvyUEaaq8k=\r\n=Dczw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/density":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/tab-scroller":"15.0.0-canary.395f1ce61.0","@material/tab-indicator":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.395f1ce61.0_1665205773958_0.08724137092371786","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e741b5c82.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875f92b9180dac579c2739dcd6ea40a027fe1625","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e741b5c82.0.tgz","fileCount":37,"integrity":"sha512-TVjyDYuG0GxxvS37czsnxAPBpM50RN9uDNBOeZb3RAxAYTjBfvtB8r6QfuEXWPHfDTHjfE7KY0yDdHS6SHd+jw==","signatures":[{"sig":"MEYCIQDhOMbCC+xx1Z53XRKdvscBsII1PeohUrRGZKHbGe1DyQIhAJP0FSI8cViYO7gzYzHuPZnuTMYzTkzwZtaCllq4wvtw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFj9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf/A//aZleoJ2XwS1RlkTzw0RErRfoUuuGgN1wsFpTwCBw+BpH4pmn\r\nPhX9nhqebiCS3lvkaGfu3X55e2PxLaeEb2aR7OLhvyCVxdK3KMCA+Jq/KmTf\r\nS7/YfLEtIbmFH826elTJFNbvyO1pRDjtDtU1Re8IumOi8Sto51LS4vrLF0lo\r\nJdqe+6Lo7NXQJHzQaHyQ3ecdCXls26K2798KeH+W1mjG8aqzCqZz+uCCRLC8\r\njUqF3GhzbNvGqZAt7k9BjQzjFPcdZcoMnyig7qwHxEcKczp+PWeO/7gbp9/L\r\naMM0OgPdLgb7peMhZKIeqHqqa/aBKOAr2HGIBCTQdPhYj79ELG7Ca0L4jMPf\r\nvmdnajfQc4rh1JBdnXOmzR+lggiQiX/A4E5qsMACpaxD4IeIbaePRFMHPYNc\r\n/hy2UlAPzl2RbHThal9Ep73lRJLrI6n6hxCG9ShW/79pDmFCgDzHGHjjuJRz\r\nfldZvL/YuCZfrotQzNxYgs9psRDIgQLfPthtepumcJfEddChSMKKLYCaYNrl\r\nk+rvHQxUA0bTpVHeSvpmkdOBzvsXHw8biZXQ0mPfXbibSQxu2QrEUR3GHiJF\r\nKpYzV8Fxta/HOqfPaukDgkeEWCZflkBG2NKDBlERSXDIK6JXvAGdDc9XcMYf\r\n6eYEqB3Hpm7q7vMJjek97gu6OhQ3Z4h24Ls=\r\n=GrCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/density":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/tab-scroller":"15.0.0-canary.e741b5c82.0","@material/tab-indicator":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e741b5c82.0_1665423613726_0.020229838113059007","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.582f3cc1c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ff1bab4bd93fd613ac1345a73888c2576f28c0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.582f3cc1c.0.tgz","fileCount":37,"integrity":"sha512-bVnhl3R3BjHmoyxq68iNPqw3sl7NdQ5zUleoaMiioWKarM+uqLVFlAy0Ge2iodj/Ud1W8K5YzJdvdlbsf51/Tw==","signatures":[{"sig":"MEUCIQCA57LAC4qHk+uM4HLr6AP0B9AABeolZ3vaKc0iDOkiKwIgHgoNv/f3+YKGMhhEaY3LKFUK2tPEcoS+lqTd/bTdsIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2tQ//QMUXnFCWSnGnAmRKrWWofhrJnqY2R49VDAP6OoKxf6VWUkGc\r\nzq8rEJX9ZUHFArZCLaBW6hNIHShiDMZg6be3k8jLndD/qaGKfyml5FJWihQc\r\ndXxOckVajkt5RJYZzcX6ux/TtxsGzqmZaGbdiekULLwMzLFY8yYvxqQyyybb\r\nhW8ZUcJatn0DTcvueObWUfmNGWU8W6LmG9lZdBJebo7wbEbBbRWMkGYLNi4o\r\njpj6wvEUut7wMv4LQLI7305BI5k4g7nWDLpKXOduOypdsvqXK0wHFr8Faqb4\r\nFA2sLoMLW5llgDXO5MnounzwWFIu3Ta+Y961V5yLwaKy18aJsqfRev0itRQO\r\ngAh9xc1DJ/ZeBNsd9KxplTPiSRgc61VlcLYHW806nahwPnl5cSyrXq2rMn5x\r\n+2vv9ausPbY9l8E4vjjTPhmBIrv1+op1LZEXkcZOuce/rltjhxAXghini8lr\r\n8KXpy/FCGx7OpUmj0gBT4Tb6RkzTPimTSVsKEZEOoImnAAsCUjE67Ziapexx\r\nfgcAK31LKuZOyyU946icv8C/vpDZq/IUdvZpT/Vdf4NfFrjNMIcffdXGrTN6\r\nldKuFXJSbuaN/+2KGSj+igxTeD2fJUgq10I60tHTPe43Oev/2r5w5cpyFO5Z\r\nbo9M/bAmckXD+0d9Dwlc7HnULIbewF+k5k8=\r\n=jVvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/density":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/tab-scroller":"15.0.0-canary.582f3cc1c.0","@material/tab-indicator":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.582f3cc1c.0_1665463859426_0.3631305018901043","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b1a6e3e88.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f36d3f3d5ee5d4a63b755c3125c2e44975c75d1d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":37,"integrity":"sha512-r/35VVHVkotv6TIjWF811z+EQBP+UjMXZ0nO+RNa52rIGYGHvwk4DsUjUCnsqfFGRkh9TJEYFePmFwXKhOYCzA==","signatures":[{"sig":"MEUCIGFCAn62yLcZv4HVGNXFM2hq4HNNpuBP2T9MPhBdw574AiEAlVtw6Qrxxxf2rwlULwI5ofSUdq4XlT5BEC9QBwHmIOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq1BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql0w//drOiPCU6iHj7beKnLIAFd7fufSiinsg3jPBqzU/vWZPt4w2W\r\nBg2oc+CUxv6w2yuMiYJBaXOPRcww91m4++Orapnf/+fcQzIqAOMIhS97DY5v\r\nl7oVr3ICh4bZpo+zcC8SjDP79sXwI8RmJY8rDTlQQ4q92Ha95BXvlTFereMF\r\nCqWk1mVSapdI4FrUgEinHDPArmdvKjmMS+UlNxJGmf19oP289JQN779PfOnD\r\n2erQMgTvT6Q5FVx2CxZFLdroHzg2+q4/TwfhZBdQ0KHSvPizIfMnPie4Ua/F\r\nxve8ZsvHpz9Q7jXBHPB3O/MJ4aos8rAUhbNnr63/kRDHUJY5Ei3stF5enU2r\r\n7a81pNrKSbB055pCoTPJMjG5y/3/Ft/rVTfeo0fOfwlK51VF0FZKI8JoRrpC\r\nPW1s5HGsHZfx2kaUd1j81lWaKSOcvyxWG/k5lWkiEHulZR2XKSQynNGH8S9l\r\njEvs2qCmf6fb24lMxApWcSrFQScKiTyQr9HKcH2b7ykBUR+UQt9aKHOJEIH/\r\ntNx+nRSv90h/NeANAxhdIfxEahCTvGNnFYKa3nn6JbbUqqzGvKgsCx3MmyBJ\r\nmyvEqKUtaKk6NRGS2e9dxS63bnopFc1wkohrC9+WsdyXZr/e94pTJK25uedy\r\niMFhx+JnlzvVhHKsP+cJBDwBX0kTNlKFb00=\r\n=+9cY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/density":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/tab-scroller":"15.0.0-canary.b1a6e3e88.0","@material/tab-indicator":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b1a6e3e88.0_1665576257083_0.7095332525368523","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c9b1a31e4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c6f44f78b5be2e9f1981e29cf5c5529376fb995","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":37,"integrity":"sha512-tveErey475KCjzvC4L/OIrFS6cUGPHnzTfOLy6D7CmsnhGxX6nK+/8pnM3dj1ob5xUwBtjVYjDHJQZ5g0gCciA==","signatures":[{"sig":"MEQCIAvXo94sT/ExGR6IWN/eBQ6qZ8a8ZgYsQkmatJ/Egs6EAiAJep9jzpPjuaqkBXFxcVOA4aztywNKXDBf52mx8fHlgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop1A//YTLcqw6SV1pZywL0vCCuR/Qbs+W2vIotKvUDdX3ogPyrUD1D\r\nGe4ptw76ZPAKkzYvPDBdT5os7uIWKIpeIlUlQtHb08Yo8hUR8VGR9xQsXnWA\r\nwdXWn+nBQcEBOppjg9qe0gDSp5vp3HJYfAJOyjx22Sl1jxgXslspFoL/esZA\r\n9D4yxz8Y0HKz7cvh8xAsUhzUT9EJACX3j+XbWIPnvmleOW48ppsttobgozmG\r\nm4KSA2OpKcFoIO3ik3teSAUk80DudQrvQBqO4DWtuRsKDTxvjP92gNM3uM/J\r\nOaD/sTwcgHHhHh0lD3baMyt/gWAHmI9wjvRaj1SoULJje1H/UZJG92UIvnQH\r\nSIrIFyzDs88Xurf9Bxnkhr9rktFkPzQZAfd2GHmSsijy4MRKhRbBfigpv2Oe\r\n9kSEnL3QR+d862QkfJrKWS23d/VLmQMzrWAkMxA29j/DPkm0GZOJd9JZGg6W\r\nvKIosBb0J7KCuqX39Gc2Uuo56yywuWU/p81vV8bbTqTQJoEaua3hMEfa+eOs\r\nAjAwPxlqEStPA3VBSWwD/GDru2pDDUD4M1+okIU8pSZxr1MA30GO2uSjiHgL\r\nskdgMhnRqBJOl1wn+LtpdN7LEunv860+WJW3NiSSL3aRwIHS045fHHJAxfm0\r\n/Prr9VHuAXaO7ExQloJ5cm0Qw2g0VSZP4d8=\r\n=vS6L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/density":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/tab-scroller":"15.0.0-canary.c9b1a31e4.0","@material/tab-indicator":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c9b1a31e4.0_1665594026604_0.9592097445281811","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.13e9b0d1f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a5311233bdcc846e87e0846eb3c763ea7422fbc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":37,"integrity":"sha512-AKWkOEa22xak2ttHsodIyEYLOvr+TA2qIUSxf2HIKpbj+3ms767vIPchXSrFcPwLepuh4DwfdZWOhZfnSerjGg==","signatures":[{"sig":"MEYCIQCMMOr8tVmEWJCUVWRReLEkR1uf5vIIXV+5H9cCV3dURwIhALNHcA8Jg7xfdyNnRxLIVvUTu2OrQHtnSEnxgBGEi02D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOIg//XPF+mvYLExavxq9mr/I1hMcqiXjp0ReZrzTaF+g9ywwDERjX\r\n4h772tRSxzqe/2HgDlGmARjVH4fmbbS3sSPJdH4kHmX3vswjPH9Cj0csZAGQ\r\nEr7cYlTITdl9BV9tJTzD7U/hZoIA24wGRrYp7Jwpxvk9PT9h3koBDNn7GE8j\r\nEZYXKYlgaBtDoTufN+gtyAzhbuwikRiw2t5u1YEy8tTB6DUx2Jpygyc8qnf2\r\nf7j1aDXtj97gOsNBV2KVmt8JrusfziKZJgX9lkW8J2ANaRYT6lHcxM9wlfKW\r\nNcYt9DNbB+QEBtbpxdoJaPfMtBRK39N545+btSEyIEYPBDX42Z+oMkFoimyd\r\nYFaZykePvS7Ctk9ZP+DY4p64rpTYONtFFdkGenjJn2eCrRl97CfSETIEWz+R\r\nl8DWw8sX8l0rQVKzNi7A+uPpRl9L4Ncmu40g/1/jgfgc6Vgh/bxGtDXB1AvR\r\n0hZ52Fpv5aFvsKPA1GqkElwMppseb4XlBh0+5AwgATKunAg17BiMHWf697IW\r\nAOqK1rPfD1c3xEKlH029WDQJ8ucZZtbdxNhAsd2OsH1V21NhmjxbKiA8xlwW\r\nme20ZKiTmtY7WN9rJ9kB7VT7SMALMPU7qhcLWPGIqAr/WspaWUhi+TjB0RAI\r\nSw2f7AZYPegPc0Tg30f/GybkhZPafk9UFSg=\r\n=BnPd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/density":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/tab-scroller":"15.0.0-canary.13e9b0d1f.0","@material/tab-indicator":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.13e9b0d1f.0_1665602586934_0.35978579271541555","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1dc797e7f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a70ebf42fa3b95962b267d4b2f23d33f4db26b82","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1dc797e7f.0.tgz","fileCount":37,"integrity":"sha512-J5k83A/Mrk9ia2/VkBcgHyJwKSfqDJ/+hL+IVLtJoURa+b+cUZ4PQqGUVNTjOvbR5lgD5AbeWvYgdeM7llG7ZA==","signatures":[{"sig":"MEUCIQDe0PgK3OrlSj3ahsJbjZ5H3wHXWynd/Ptx1JYWgRgYfgIgTrv6YMrNO5ciNfnyf2cQMkzfr24vqlyfzKxvePPELcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS9RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwIw/+M8uFXzybZrBAQluKn3n+m2vL8rY+6En3Y7jBR0txfNUePmQ9\r\nEDErxfptOJPAzXe+v504huip1tRYuaDvo1EK1Rqm5UTFMLuXz0qWeKeLBqOq\r\nueR7FwBE6J5sSIinycQkFV6Po7BOuFWcHHdWhDViLzJyAoxGH8Owe5TPVb7D\r\nXl9W7xIsYLSdV3vdfZqYhgdws3S+jTdehkWkt9KMqyJMO8G6+9qK4F1w+HDO\r\niCiu5oHsLAVSJ06mMzywwVLkMvXoWkoRNdA+Mw3Sj1iTMf++RPSuek3WOj38\r\nLMFuK7CXpC8jD/lWA48+ZAZal4SMHXJLw+H2WNPDAUJLXGqV1a6Ch6t+0mfR\r\nuHm0R1PYvPtlnbm/0dTubDR2ChBvXj3H1r3RzLCygZ+rTFfZFnwqOJb2gzDF\r\nhy5tTJgz06+8cY3gkThDp1J0nnkh3ZeI1J+w6rSfoSatZkU8aCw2lD6mgIEn\r\nEpJIC/IP5Y7vJnFIGJ0rF87izLZPkFvEycdNw54yI7l0wewfVmr1jdW5IRxP\r\nL4Pafynnm7lJK8logfUNFVhaQimBxlbXcbwtaAuYg0lwvgT4fmh5oJXS+Iuv\r\nRNKfmF6hwSioNGgsIpOYWlsKeUX2Hy/zcUzt2i5eE3gtz+sA+Z9sLTG3rYgE\r\nq0OFNy1JjL1mh2jIK737RQfnvVtGlj1/TC8=\r\n=uYkM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/density":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/tab-scroller":"15.0.0-canary.1dc797e7f.0","@material/tab-indicator":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1dc797e7f.0_1665740625305_0.4516995083564208","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ed4009397.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02678133d149c16611c859cb56aec078ece02a15","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ed4009397.0.tgz","fileCount":37,"integrity":"sha512-Nli+xtM5kVImGcndaLwGvcl9LmessyeygXe9EfFbaaYWjUrZk6rWXQSujh8jWmUW2lyEE2toQK9jbD8eL0esCw==","signatures":[{"sig":"MEQCIBUDCDrHzskiUWSK+juVdYMODmqCgtq+uJB97lYC5/peAiB0qkqvgmzQckDtHB41voKAyWB/U+ScbqsY5oTv5+maFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGsw/9HSK3DP7WOR7cilrDGBJJOyJZsQqJYr+isEfGGUYcmid4mQMB\r\nvF8CI8rmwIE+C2XG7cND64t/p3s/RkMWRN1ln3Gr9FXT3Jrg/AQ0R5TAKF8T\r\naMQYi/12paH0QD0Yldgz5lIazmbo2YIw2KIZuyWD6Ns/34CGMGChFOreS+ta\r\n49Y8WuQqkTdmOFQ08ndStMHVJ1hJxvZNYcglCH28GWJCvk5mBQZVoHuM+KLY\r\n1J11ARx/cE76NmYmBZFPFsvcwR7iSl94ukbKimreJymy74zzinH8IahzwSsL\r\nrwSLE9qyNvy7bVBrpojcACUtXQWJ+d0wcTXxxOLypmYCrKDDWU+1av5sgmfM\r\npihpKpNWX0IXwEY0fmXTK/yKEBJpO2p9ivX/FC8ct75fzFpUrit4GODlXfMe\r\nsD/3HtZ4vhA609WwuvH0gHmm/fq2o9fNIntrU2Axitt30/JDHSjmGeJHjLnp\r\n4WneS1w+f7R6c+wouD/dYGk+YqINrtnbrbGyK4y3SHNje0M2qZITbAmMtrSR\r\nKhJhZMTVBnc3/NeH0qu7INcGWneFI7yk1vW1iIOiuSber+KoKpogBAQYBz4A\r\nPXOy05Nsh/2Hn+6xzddZ/UZVFxgjlmime9dcj1I6rO23oRy3zPbmA+OfPFMF\r\nUVtevC4PhaU8kC2inSIeBiDcDfwrfNlgEwI=\r\n=b1pw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/density":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/tab-scroller":"15.0.0-canary.ed4009397.0","@material/tab-indicator":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ed4009397.0_1665766386225_0.5512179557015446","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.95ef196bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ea1c5c9bd820206f47b402e940c952e02f036e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.95ef196bc.0.tgz","fileCount":37,"integrity":"sha512-03QLRSWqx/tNDjjwXKgQXP40m927zs4sz9DiMfWEQeFnx7rhM2fcYLW4w9w/+8hKZMZnzcwa+vWm2GrVKCMWCg==","signatures":[{"sig":"MEQCIB33GpXG9PdYKxB1ERvqvzM9tWsfKlJMAclRd2abKtt9AiBMBtan1wlPJwVnEelqrSYI5c4CEim8AZV4oIR7KnM43Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkzRAApNvQYNAfQJHI/qmEGcW7/k4i1mA9XBfeq8iCCNEfihuHfqGZ\r\n3Y7Bol+rFEveKSW+3XfrTXuEEYwpPicWEC6Vz27QNuNzcUZyxawgCBkE/ARS\r\nO2gKv7UpjfIj2utqufb3VqUO8YEP1zRaWY85DBt5QeiIoMFxFHTIsNaw5kJe\r\nb0OTWBQbp9K2SXGNDHAONbMuk7LfNoLRCa/2ixHUJdaMgDjCLVr8OQ1HUpOT\r\nkIVJgWPjy4rVZW4HWuUeRCu2SiEEF1/e7IN4NrduldWvWGx1ST9VUPGIviwc\r\n/ihjG7SMwFm9BPrr6C+1WZXlF03F1/JCouO1qy1oj+C2HGKMU0etLreetpSi\r\nEcCzgf/3J9fMVWgtIT+FuwqO55vNsTkufyk0dIRVoCrL+F8hlPbAV+G8KCPd\r\n84sCkAXCd12Y7OsIZNeycA9aXFH7Rlw3jqnJVoUkDga8WtD2mCNh16ZMtmlI\r\nFWiO9/GvCFq5GChgqJ0Arq7Z7pYcUEr7Xrg4vNv1B4t3WYHvCa4ss3/8FYKZ\r\nz81jzpZjvTDKQnwqeFDluJKMVlahgtlabznWukponSEwgzZx2ctj5MGzZI1r\r\nDYy48U/0oa5Iv4L3BZpd1q0JzfAzoZxyRU47jL0XGfQy02caE8MuTvPxDinT\r\n8hlNMyIksDTg00tZbxo2fVcfxilDanEjVEQ=\r\n=vivA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/density":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/tab-scroller":"15.0.0-canary.95ef196bc.0","@material/tab-indicator":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.95ef196bc.0_1665789346149_0.39172407774839435","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.13eea1b2d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615a3b3233b60ee07da5233df2575918b0c249b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.13eea1b2d.0.tgz","fileCount":37,"integrity":"sha512-MaLRzlwfNFCBDUFVG3If/6h+L66yTCAUIjJbqe6bjHtgbTw5V+edIFmI9+uPKeROWMjfcSyhd+FUbJkxye79ZA==","signatures":[{"sig":"MEUCIQDuVNknsFdFYAHcaww/mulj1edfc3CruoIZ+Faszuaw7QIgaqHQGsFLHQnXd54W3JY4IsNFF+G5pULD9xDfrCNq6b8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNG0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAfQ//adbDoTSJ7RxucN21LDzdr3bzWli5c3CZzS94Yi9PR18jgxNA\r\n5iRIlHKfHSKIE4cZVrQ2ohiSZ6fZyOEMDRt2bNq2CcPFyCkQswAhp7buXa3O\r\nnaVMpTkjvnBaOlisHzZ/njX+laf3MALSijIxr5F3p5YibKK8I2hKZ0uWB9fF\r\ntAlokSOGwbUVJdV68UMioGmLz40jCbkTP2S57uxK4lYoXSWP61RPM7ycTfT0\r\nnYUcGuxG7o6a49T5QRk+9f3eKwVQeNQSQ7uuMmxo12UKuTLtVc902iAhfsRr\r\nbSl7PUp/7duEIzh/3lwflSNMoTMVtNhKi6VfI9wfyZKG2CIg5VM9vzGoPjwr\r\ncAbW0OL7E1sQkgo593Gpg899h7qzOXeioRlV5lURBVhQX6teawM5gxMxQahK\r\nXRet74OT1tgag/ykKz5kb6F/Q/RQTNNd8OsC21AriycbZ8uM1/2AnDLQ4fO0\r\nZ5tNPAUR+CSmLzP0jQIGR7DHJ40y+CL0MKh33kXktjfb/15aMNCd3x8XnKJ+\r\nsvh6P3JTusb4vtOcJBc9DiyqriCUJTMu9KOJVW/LxX9bKmldMd0cE0p0H4Ob\r\nf9npiSiWVGMUJnkAyF+83aAegBsRy7pVHZott3S2R+7fHA7gDqoxgAiz7uI3\r\njJfLaX0TEFDjMhMR7Ok+WgQaDz1GF9n+BrE=\r\n=hnaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/density":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/tab-scroller":"15.0.0-canary.13eea1b2d.0","@material/tab-indicator":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.13eea1b2d.0_1665978804302_0.7181998290732221","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ef9b2babb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"600a1a52c4b73f1aa613e1a1afc44bb1d1fff5d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ef9b2babb.0.tgz","fileCount":37,"integrity":"sha512-w6Lza7DHyUnNqeA2zH6BgySEeCerFgf6pdenjykyVdHEDQXxIlwxFozzLYsaX39EnFz5x8E5hJQUq7I9mbrhkQ==","signatures":[{"sig":"MEUCIGkyHvQ8tT1ez5gWUnse5KYnuRn19Wo/mRqp2MoXSiKcAiEAtZNNLJlRGsi/tuOw2W2TtpQ+5KmVb+pL/J8lP+qq9a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR5BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqboQ//Q4JZLBwUZ7PRmXX5RdWBayVfU29mqSFuLbA8hYe12MVWePjG\r\nwYNb970pAc3YN87+iyxXRUisWGnNPPLF8C9Zl72abSm1dym4vyzWESwyt4C9\r\nmg+cpHOwJ4fNsC5oeS+G7uPgLLAWFZ+oF16nH3W13H+DcFQTbilhVtAsKTr+\r\nXxAlYr7GH8af+/nC0QEPLw5gke0TaZ88PiNoOZzqgJpJJR8LaX4M8sGrlE9w\r\nvXpIlnoR9i5m9TbaqJ+0yPoxSJipGPqzH7NXgJ0wrcK9p2ayoaHY9uAzhoi1\r\nPTBAqrTQMbk/pB4NJpGfvnxco9DCg2Z7Svo9PWXX6PVfukKyeXmhTxjC+XcS\r\n/UlG3CvjIljjqF4d64yuOlWeDafkDN9sfrILa4QtGGajgw7M/cn65lF7FZAG\r\nD0UGjoGlcP1iwjj52A/scKimGbnLP0p26b2nul5CrbP/GP6ndKC8YYJyOtMK\r\nvwAC3tCAMt+o5awO/mGSntCEllYzjajqfM55oOecvKTi38rJg3UOlqqZAB8e\r\nNrKuNtO6MV16tocXFi75XVIcKi4EPv3rTASVoAZDAUr3hideOgKFXE5JG3Dr\r\nIM/OwFJ2Vj+S+fG6bHHAXRgh5etiE/8N5ifiEr2L0JyWZ8W79bfC83VJpjSV\r\nQScgXQZ9EhrynOMxvjTkQqUqln8MoYbPql4=\r\n=7JJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/density":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/tab-scroller":"15.0.0-canary.ef9b2babb.0","@material/tab-indicator":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ef9b2babb.0_1665998401412_0.5264390631542128","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cec7fb987.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c83f71bba4970baa6c8f6e4afdd4690f000f4738","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cec7fb987.0.tgz","fileCount":37,"integrity":"sha512-b57LPjQb8NmBBrOkK4U70qA0O9TNiFQzdhNBCJFP3M4/s+2RJNg+3Vn5BI7c9JDAEZk3vPL+tP4EjE9o+sEvAg==","signatures":[{"sig":"MEYCIQDzwyN+b2dGTtdI2MIwdVoFIT/QdHgimrE8Mjkel7mAhQIhAL74Z09rkfWtqOLYobdJ+wLCqAZqqaamKOQ5dgHPvqNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5CA/9HmtfIqpfjxcBPOGERtfGOHqoNGE2X1tainGF8lFZ/RjLrfZq\r\nVXRZQagmgybtYOUsZGMAbcF0uf/gFH3tbBBaxFYQy879eHjeBYMFld9qKir2\r\ndPGvTDw7P6ypDEFRvAZPouLny6d1SVj3QLvSXA2VobBbRcpQDrmOjsvEvl9Z\r\n4GofLIjTKXPfgJICG/tmHg4DaT7cBBG1x6cvxb0c+mI74xM2gEr0bgGEqAwl\r\nw72xIInuh/6QVtB5syU3TxnvI1ko16zEiQTEiCyHUTsUaOpzWLiuImMYgQP5\r\n9My/e2aWuk70Bqxz4sgmyyYdce04/cFJnCG87Kq4oIAxhmEa54KLzgL+IGvX\r\njF9VYX82GW4DVU21frMsUEPE/xQ3OUl46YBn4MV9i04pI7yYANbBO2sMgxqu\r\nIz4sNr3XVKx2ChPGsOuKuJEMwOHMT0N/vtGNDu4+rPZXx43dqxSxG4Ntr765\r\n84tdLZiQSwPVS2q+UptIt+MgWuCIxMoltNYpverOq6OeC9uXzXz6855EUb08\r\nagTJmlB01ozef7JdyPO+pOv6paJT83R6ZIQ8Kej62ma6A9MirtiNSSxZ8lmy\r\ndLZHCkSsw58WoUzIWDZFm7/zSn/h12ju4mpaMpV5X7BaGjGIorWPRSbeCuK4\r\nZG0+lTRwh7WwGGT2HLAKURZj4dWpGOydTzY=\r\n=QoE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/density":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/tab-scroller":"15.0.0-canary.cec7fb987.0","@material/tab-indicator":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cec7fb987.0_1666004288692_0.23606402087410672","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4fff58b08.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"153dd7350cb0ac640e0ba74dcb017bdcadc8514c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4fff58b08.0.tgz","fileCount":37,"integrity":"sha512-3DIkJF77MEOtTwHr0iM+2y229GjczM2eIZzU+k89MMlBSyc20a9znUK5ASK+LEiVIHdLG2xtO3+pXhGhkqZCtA==","signatures":[{"sig":"MEYCIQDRuyvFpnpphdSG2N20FfGfytXxJJSNsee4g8jcSsMEYwIhAM4lt/v4+pL9TIgZgkcnZ3B5L8Cqm1jSSKB9eP9+eLCd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXO0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonzhAApRBwmv+akBoULjdcMI6SXQ+iFTiDOynTDTJDj+qIKBTYQqeM\r\n5VOtwLwoB9+mewd2jXOHcvnac9kTvGZsWoCpPYjl9FKIgF0PkrfHETycQoHs\r\nckTr8du/m5/25SffjGy/rCrb6H4IwK8Rk/jN87V2M/3VkFEESbmE73xSoQuG\r\nvxoflI3o9GY6ppyHdKxVXaTxCCYCYlirYSg/bODLPfLHQ5Ttyn2H9ynao0oS\r\nsvB7MUQtC7hLhc3BvC4NRvSswlLb7vucYc+8linPy87QNnToCBffl8QQ99Mw\r\nomj94dFXiMTCEsB1TrVh7TU7KnGYyNNZ9WOtePSbDiKveBQ2Mog7yRZmyH/1\r\nWgUlEorEWUKJU/Kop8FfnE1Z5zHJHDBfGNNMXx1tH6dHmfpq/+8IZhniEO2P\r\n0uxT4PhgXnhyw2yvmt5YnTd+VCgTLBNo7kGiTKXX3bpAoQZb3xQ+qkCMaZJU\r\n4uJ8PW7KnzgTfvabtnmvXCZYd8ESMx7k/Rok+np0g6UoE2fLxCp1EbL7WXRn\r\nqNO6A+uS7XrYrKU2LM0dUkM002RFjEIw/0l20efGXITn41DPT+1bIOFGuC06\r\nEL7W9D9SUzWRMiWYqkL1IfaqsXQk2UBj2qzpgYsMu4KnA7mMwOgE7f9SL/6t\r\nQiid0lxS+Gq7lLukj/dDRjl+zFcQJ3kwRQs=\r\n=h0GC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/density":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/tab-scroller":"15.0.0-canary.4fff58b08.0","@material/tab-indicator":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4fff58b08.0_1666020275819_0.6003901623919121","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/tab-bar","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.587d8f871.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc15dca90300bbbce6e1ee4ed859706ed6ec59f3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.587d8f871.0.tgz","fileCount":37,"integrity":"sha512-nSRIsN4xtbjozziYKuANZefW/OKHyeyXQ+PVyLmVg9CI3VoJP5GSnZDhlyZhkql/9HrGwp6ZeL2bPxsilqphzA==","signatures":[{"sig":"MEUCIQDCG6GiEFYGcCS5Iv6QpxbAa8XrNV9SXnIFyvoWUengygIgCgUalyLM0Yrxw3YeySUtvXfk9+4NkkfpTaA21Valy4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXu7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Hw//QnguABPorm2FvlCeIYGerIs6rbXLgHBJ+rim9AAsbrB2QP/P\r\nl+PtefcGXpBNj9dNjr588LpAGkuwbIvgNmK7VjJ7y01e/uCsrcYf+GyFvVvo\r\n01OgOg//fXS1u+393WscDnq2UL4gQQZhLTCth+4pqqZLuZl6gN6iUYkRT0sV\r\nT/E6zI5/gmi1MwyjoZSs9nFc2Scl9nK2iznWVLchV02Ft3wM4rGbTDfd3PFi\r\n6xTz8+jthEXvdJMC5yQAlS3OwsKaBRTrVC1oCQ2wp/4UAtG2pwauCe1HGBJM\r\nK8lvl0bG1vGfLiYlubUacMwNtLIssPdr6iqs82zT/XeuJIS0WwDsmNf1RpVF\r\n73dRrCa4nsKYw+/Habf435KzQpS51iCySJUghdR9P3fvdQ+vYP32x+RReziU\r\ntkUy0Co2shpnXIW7XiNVnInh5ZPZfd1W5eLS459gvK47ZRFSrUf5aNjfX9nX\r\ntcKIo/yZC+a454uiJHOqEpcopY2f2BrtKWDIMIOht539oe0PKcJg/5bjeLr7\r\nnh1ms/uFX0MGRc88FMqo9HKWMj+uJnR0PHjwDO5cC8qPO78fXnnyupS5dgL7\r\nyAhPeyCAOZjY9jYyAgwAIPOZLAqmQmTGXDjPASrzV6gwNZO0zHG730hsccP/\r\nyVgEtgdUpnXWzCLIRKKP/FquSte82SDHbjg=\r\n=j7Po\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/density":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/tab-scroller":"15.0.0-canary.587d8f871.0","@material/tab-indicator":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.587d8f871.0_1666022331255_0.1122268427033064","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.edf4b98d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9151c3ed6b164c413490e5893107f49543ae3676","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.edf4b98d0.0.tgz","fileCount":37,"integrity":"sha512-f7w+/GqXen7j0M6ws6SJHsgcP2sFi1qgIqh7X4XrvnSC712puqrW5SfBU6f504ve6q/vnTM9cjiru1dOAXl1dg==","signatures":[{"sig":"MEUCIQDu6hJ0SpLoIvV4/sJs3LRKbSMZKA+zkdv6ZMQkLAblYAIgTTydm8WY/5lCsxJeWDerflBXSQLEgKou02HR6uAVW3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKug//ePTx6NxGWDuWnZfPAqeuR/WmK1NTt/tMtnrzvHe1e98Gw9Hk\r\nxbVkUSG5HDqRiI3eKDIWA3tWeMcUewNh+fEpQOf9/RWAQDD6tgWYJRs3Z1/8\r\nhrL1k0P0+tGi9nctRcrT1ok0UXOEquFGTK2uofmxIRYVKGqGt2kqHrnB85Zk\r\n6Uef94TVMl//iHzHWGjojigiCbpHdXiE8JI/G0MVbFif4sCwdatA8RVLGJnn\r\nGnCeAJh/Cr5R3hhzfJnq+RCxzmHFpqh5fuo/jzQfTxU3w313V1djkipo4kJ6\r\nFHuHZNTzbISU4ZHdyOT+SI5mtV66CFiOikPmiF5bv4ipQXPudz+MFhXeGG2q\r\n4UlSGUBgABgVr3+yR8ysI7rGRaYIzBfQ/QyMizajcrvSNwsEbP728u8qgxTi\r\nF6pXWXnfGYliBeb5sjiavmxMtxE5PwUeiQTvwDqroUQOnVogEpI+ZeGlVfCY\r\nAMOrIuk8uY+PgcgW9fVM3qjo4Sf5+L6yh1IlAbyXL37QDoSq/Lb4zERTgmxx\r\njA6lnQJOv5xsbFm/O9muqsZ0kQAEec8OU9WnV51XteamorqTsPXXl4CM8CMk\r\n9qpUiu9QBtJZ9IDNutYYpDwFrEhILR3x1HYI2NdjiZzd/1oY7zx9Jd3zFybR\r\nmdeRFKomoaM3Gw9GhQrGsB/pe5WVUBWuTVg=\r\n=1dop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/density":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/tab-scroller":"15.0.0-canary.edf4b98d0.0","@material/tab-indicator":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.edf4b98d0.0_1666024941044_0.13342998254929328","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/tab-bar","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.024ac5f16.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a7ece35d92fc5b96a1e145239e37c981321013","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.024ac5f16.0.tgz","fileCount":37,"integrity":"sha512-laH489eYfMQcsVAr02MgIMVfEL0FInhyAcVPThwkz/B4yz64j23I464tK4nsEQBTxiWnMNSTbZuopqWRqGKUYQ==","signatures":[{"sig":"MEUCIGkEWpnvQz/VzhjY31wWugaPP+CbEOefnVuKxRR/qlyvAiEAmn7KRUCHpfyk1mdm+8eS4azjtNU2KDZeSfNSOwg1ve8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdq6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc6xAAkALo9g49iA95ehSUh4KT99gpfavXCnwbY36pbEAMQhBSV/BS\r\nBFXV2wKCb/WDddfDdO2EnNU/4GPhvgLZXhwnMGoL//rWIDtOoNuHu/0t+Jna\r\nmaSSDt1nvLVS+UscUxolVkEXZTHxFS8AqJjYlyJrD+8arETbm95d2ZS3vT2U\r\nrnQtM2VDQPQ5zR3sbc7Lr5MWiBjqAHW7htWUAkZfuXsO/5YJOKnkeOS4A6p6\r\n8ElHhehz0DN1RJqsUrnIp00I7dwej+Pm7euJjuJt1H1ILQolyKujTratNZi2\r\ny1mi7rNRDeVtojrWZ9sDbg6ziJvKqNr7LCucZt7xBnNi0mxSlhuAjUi7sl9W\r\n1hwgogE0suVyNYdGbTS80O6BLe4uI6FduUl5QeSw1VO7h05BqWSfXo7Pac2Z\r\nrAxZn9mzyg2HDr1LVzwf+3g+UI6j8ITvi/y3W9ZME78r81bCNJf7dn0D6InT\r\nkPQphFowQojRqDxg6HKD2L0HlrhP/wpVyAg8Nt9iZILJbZXiNEpCrvDoTma/\r\n/ANKTsb4Wjht3Tgt6SKB00xgGfz8HCg0G5M4X8f9jjupfse5TFanoBzIdr+9\r\njROxC5HeuHNKMw3rxaVzZJo0dy7zzutVPc1nTMsHSJvH7b2Soh8Ej21pwUi2\r\nbhCZtWjLzx8SZAcetx9Suvh7hLpvXyhMSUE=\r\n=liir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/density":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/tab-scroller":"15.0.0-canary.024ac5f16.0","@material/tab-indicator":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.024ac5f16.0_1666046650710_0.18871528865230713","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c8bdf6144.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4235368e6b3a012170eb04dcc994b25a3eb10e13","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c8bdf6144.0.tgz","fileCount":37,"integrity":"sha512-89GqL6WrIkBilYfxV2nBadAIvBav34VGSeHCdn/vBtgzgmY+VY3uHYCnkmbxuhneeopiwevsKsqoFj78A8QtwQ==","signatures":[{"sig":"MEYCIQCO1UT97axkhKgpRibJgtvg33KQyyGC6Z6gOFGLexvN4gIhAKFMguwS9RHml0rvX8k8Jcl/4FFM1yOKnconY73LJ3tb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu+KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq70hAAj4JMAhdyUCC/VvXMJWGOlHxDDGkTaOCL7U3ZM2QeVfjYCYsC\r\nk7V8irDJwXWUtiLQhrCoEqOmkoJc8RonTT+79PoVO/7K2gz4Q6VzdE79HBkP\r\n53LVMczzTol6O66XG6r2kzXNFu17MFJ4nA2leh6rzLGgVjG75wbfQFjdWNOW\r\nPKbAqILOv+agZDJ7R4vitvD3nThFq4JkjQzb76+AcdWBLM3aLgFLn3QoM4gk\r\nB+uDhqR8gA+Q3H/2jHGOCUJpB08QZDELUpy84VlmznZ/GIpGh3DLw9yOFSkT\r\nbdobM/PBLqi5aF+vTaBYSrVaOrGhM8R1ZyReMj3oOxJ+tXZfYkZviia9Fc+1\r\nOljowUi4IFOa5AI2n5tUItDregqCNAayGXaXxRcEH9PHRFb3bmu8ibFDrtqG\r\nbneY+eCkTXoGMZ0cNLm/oVm88VX00n9FX0eLIjZedZsPp7BltMYcwpek0aid\r\nsSTOzYThT0Nda4VQ0lF/rT2jgWj7yqJfp0Qt88RX1he/ep+ODjKepX+rQJ70\r\namK50taYhghsEtk9HBssVFCXYNAAbEh0XSN3ulZnTBgQKqFUuQCiPlMH7VXa\r\nio6Kl+4/fGaKuIrGxaTAjC/FPGoVSGVm/7qJJA/wcBKelg7HGjjNDnTMMoN/\r\nycNBMHoiF7zkLMy1M8xTSNumfLIxrRBry0U=\r\n=dZFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/density":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/tab-scroller":"15.0.0-canary.c8bdf6144.0","@material/tab-indicator":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c8bdf6144.0_1666117514355_0.4149114599681285","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bacda4885.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"268b94e6c94b585929c712d6082da536c7c8bd31","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bacda4885.0.tgz","fileCount":37,"integrity":"sha512-JR24EN6i6fdwRzO926wmZjkryqjTlLCNbluYMBx5i0q1JeIyno4UvcX/fLt3HX45WCZlvenLlbyg5Nvi8tHtaA==","signatures":[{"sig":"MEYCIQDToR6T3DYVOBasCN9O1BrfaAZCRd/vbx8mxp+v+cYTzwIhANWsuX17/sx5ASzwXeRQXcqIbXiz+tAVtkBevgBHhRa3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvQUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXRg//SgHGSQkRBeIta69QYVTwk34SXuu3j5CTZ04LmjVsautPkOBH\r\nEuVA4ra/awQJSBwbeecNGccdOg9Y/RJc25eY8lMhPrqktgG6W6gzim2uStiC\r\nZuqoDyEsqtkwks2i3DQDOUj+x7m/VMNeinYBeBHT5GqHlhMYgF1BvlGFA8NG\r\nx8caY+Y9+ebbGTWd0a75gf0aMtJAqsyvp5RSUfylXKCprpHPuTXuwjBWAUJj\r\nklgX7SLBCU9v8+GlCFmQILUa1LPn2+f04hQ6obthjMP22c/iU1R15uqB6CNK\r\np3iTO38tDPRXG9u/ydeafvIOzHlgFvOtFGklF2k37Q/1VfUhKqVGHAvlwnjg\r\nCMuL0Cc8/nlFxHa3Tv92VnILtTGGSDWTGoPNky8Ssm4M81DozdubpaW1vzjQ\r\nuZe7nOTrcXr9WBshLOz0JROpt4VfL954JPdhpbVnURzR/vXXDpCT/1aEaeXS\r\n4mqmCFrdTqJ7ejhvG7LMmzo84ZzkdHDNVsL1EbZJFiOkAoOpvaGn2vKV+IIk\r\nNPx2/3zk/zGR293mCNu1hLl1fwmJ8d/mUq9FPDXSVwQnuzEIDMerlbZWphQQ\r\nt4ij49xUc9mlROFVvpLedixQWiAGuhf6Ip1LVrgJObCqr4asj/RnQ2CAAR3U\r\nNI3/S141aYlhIrjoO0X3XBWpsjck5/ndtgE=\r\n=7Hp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/density":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/tab-scroller":"15.0.0-canary.bacda4885.0","@material/tab-indicator":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bacda4885.0_1666118676019_0.9607885460611936","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/tab-bar","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.92b2556cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70f962dc5ed2e71672bf1eb691c49d994810c62a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.92b2556cf.0.tgz","fileCount":37,"integrity":"sha512-CWLdgmlTtJu+NTU18jEuK5OeC2Xork3xmUe9tJSETkP93vxKGGowpV7Q0BBiLBOi4VWztEwHseiPNUH0T+6ARw==","signatures":[{"sig":"MEYCIQDzpsS8tAXcx7LSXF2242znBCx5woetldRdpYfmUb/e+wIhANIKJdqqbnU6Cz2kJylz77hX2S5vOSUQFCzXqp+LJa1Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0+gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJnw/+PYxj00R7e9I1tnrt9RygJpZvF3/bXme6z38RwtlLXDd9suAC\r\nl1LqhgPyFQEeAoSoZNR/Qq9auDAyR3irFg7oJ1eG8PukzQlcb/cm6zDeDKt1\r\nA3jA/fJqWypG7OgKpP6PeWajQ7rE9nDu6I7proy9H6cHpbFjwFkUtGTH6Tel\r\nsxpKY2MeRGUFZ58alr2TqqFf6VWvKWu5rm4B50oUPGuQHhEE6Z4XyCDP7zUv\r\njzXMfgIev8JbWFCyEoe/TX+BpgFXhXNWtrMke4nzE261iRjNS+/tKp+JSgLD\r\nZxSuG3O1hi9oIYlbrIRGl7itC/Wih9BGuZHQBy5EI1Xb5lu0H/KJBc9lpLtY\r\nRRg7pXe5F0Tj2lT3dYFew5msommVt4PVglP2IKouk4aAubKhVd0N1H2nunAQ\r\nTFgMTb0s/i7WZeArSlQRvh+99sJ6G2/wwXrKpx70YsqQU8f2/NLZk/TNlnUE\r\ny6HODQxzTdJwADCOwizgq0UdIk6j/vjmLT3ExORn9Zm5D4z/xR3CWnVRJik4\r\nwjfqRX3zP22jISNj3ZsHaDlWflThSUcIR9sSP/ftmp4ApVsPusISfohteBrR\r\nIEeBER8DoR2W07/2JKbkXsI/vq1I7JLcNaXEamk8OJePx9d+FcXuRxnZH6Vq\r\nUDvzGZaR4a4/Z98zT5aVLeU6w1yWZxj88dM=\r\n=GBSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/density":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/tab-scroller":"15.0.0-canary.92b2556cf.0","@material/tab-indicator":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.92b2556cf.0_1666142112154_0.09443069060059961","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cc804509a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c1c82e2a3e50bd5872becb00586e590480ded18","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cc804509a.0.tgz","fileCount":37,"integrity":"sha512-+VRi8pS8mfixORX5gPkyL++RorZ9O1FkFzjcYcrTu3OsvZz4EQC1c3WRwL4Fzv4/OyHYZ8zYz59k6ZLgVEH4QQ==","signatures":[{"sig":"MEQCIFp0vNS7DiN9+JT4p0+Yr1V6BORAMtttDvzFumxcJv6aAiAz2NW/8Vdwske9/sbOFccQMdCdhstlPIKHcEA4GlOWAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1CAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn7BAAhb6D23dtXXXorfySppshRtNygiOfPmeAlaz/jVUaKF+gS94b\r\nsjEUEOymQRfFSAzCyNPpnmLqCVJ3aVhjZoXXZfGFbszv1xBbcyzh+hp7yLuM\r\ncmQijlGpP5eZC8W7U+LM9GgfYDp2guOhJgWhdH6Tk7M7B8SvbGm9Jj08t3Lb\r\nxkk1iqqxkEQnIoOAzgfs1EZM2CdflDdzPoaiVkOeUHh5jGkIsVkfaxOwJZf9\r\n/px/iHSc90QLWWKhU4AERgZ+Az9QlddEZjqsLaCK7gus5MnwxO/pDu5usMY8\r\nU6fOSwKAF5uTOKCh4TmvQc1CVZJOZ50vosQVXx7333wttrgt7yUPlbIqDhb/\r\n8yG4+0XeJMIvPlrwNP8d+YImFFt2PmfZ4iMn57PjTV616UxtbMEKAmALIo/d\r\nktPqLBQPih3CYE0Qdnjvi2jOGAQ+8a4WDsP0TTgWfbGnoY7WsgAtceQ6CfWG\r\n+fTvItktHwYLrHTtoGOmBJefUkvCfrkbhS9BGUVS00cisYzOROOJw98fXg7r\r\nOmwDe2ME5qGArtKQArBczZ5zRuMrsEjsSlOo6CyexkQTYYKcYu6LfAzOJVzI\r\nVD89Qb5xlRVbSRqMectIG9wA9jzlpYCUj8zn6UtAL+0eWamv/1ijFt0uA/On\r\n2jXcQKmJW7yYjJDwQZTekmcku2CE9GbcWx8=\r\n=jMmc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/density":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/tab-scroller":"15.0.0-canary.cc804509a.0","@material/tab-indicator":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cc804509a.0_1666142336680_0.7904269843542571","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.982bedae9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e124ddadddcfe1f07630c32ef6bbf00a66984136","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.982bedae9.0.tgz","fileCount":37,"integrity":"sha512-h8eTU8NZZtkwo2fJ33oJvXqGydLf6yZduNVeG5cheteaAavXWPQYr2Tgl49AkCFdRfsi3cA0K728WaZ37hivOQ==","signatures":[{"sig":"MEUCIQDo6BaPKNjmw4alZeI6XcvjFB/O3R4d/DSJ5NnQykA5SQIgO4WppE1b0Hli3XBx/LFF2Nsq6Vo5z9XUczkjoOMdwV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1U1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3tg/+IiIjR5oRczLbPv5h8S+E7zXZdh7B467S+9H2qdju6KvfJI+B\r\nq2+dumU2zh12xVZX1zlifAdzQchG8lMdSP27QjBj/ZwZu5aYObFQnz2zgINl\r\nf6jMdN7OtH9UBFfUSua3aE9DZEUgjuagkH5KCoMMt6s9oQyNQHfd9Q77GosZ\r\n4D8JpBu72/nMg2OduKIZNkgstvs0xQnAyqhihDNTk4EY4BsDHs1sY+KoO9Zo\r\nMtcjTfwl8mWT7Dci28xmK4RsDh/vCiBHuX5rMy/naO9EfFMk99OIQIrg/ecu\r\n3jmm5S/RvkNFxdkA2zWo9NmFGObBr706kc22DpPpG70mot40pamTNPWkAVNf\r\nr12XGwlsUKSpfXV0vhNkAQoSbCemGYoE9jGMdzm1M6HYW1o2PI0E/1sDSKZV\r\n9YCtQXpUdf/0NMTkt3wVSDqQ0cUVdlcxc4WOz9kc1qsCMS3NQGeIcwHSgXkS\r\n5+ZkCcdC3ZEtmHOOoEr4neuwXGeWS1d6WakgKuK+Lq2u8bDLpxR3wRk/3APM\r\n/Oav3SmaZQbnfpN6bw6MOzDLIL2qqqd7jrWaOh9EBOtw4k+hzUBm521RObFN\r\nJaELXz6xluokCReqhq4PCcAXcOGj0CRuuxn+wk5J1z9wgeTKOVpjeb7UnXdJ\r\nHvpPoEhGGrVvHFJ/ytUWAfKHlPg17t1X79M=\r\n=MB6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/density":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/tab-scroller":"15.0.0-canary.982bedae9.0","@material/tab-indicator":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.982bedae9.0_1666143541368_0.8939841891859697","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ee40081f4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce0a80976666746c3726a15e4744cb12311692fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ee40081f4.0.tgz","fileCount":37,"integrity":"sha512-Z65F83s/1EzCJJp94AnxrGn7SxJOdipW5EC6yVWlS0DsEetR1HDMNlM90IMxfcD+pomh066OzeD3nNHhXDFc7g==","signatures":[{"sig":"MEUCIFDKPV9XiS8w2R613iEuAHLy11n1DeOOSCSbMH7NO2FXAiEAsNwYNPP2h8/LnCeF8CXGa9jnOj/qx5rcG4DyId9SrgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFp2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodLg//YldzLgbIYV7aTEspTHAA5vOiUjH+7AzH3PMJ8kcXEblAbZwF\r\n7xLmtG9YwRBCy4B206KjknkBm15QlvBzaIDjhKOVP/P1ELYnkt2RfBvp2tUf\r\nHP8ms7lAoeO9chkxNL50T4Cr55uJpza63gTqY5kZPwxYhY30RNZ2HBpNCPdU\r\nFAVLJtaKGWJY5mmhD9DmBhcwJgm7ztUYM5vAuXUAOfZ/+FKo6gTfJaajtJCP\r\nitQHWj1O6a+eQWASCifkJU/4GYeXAPl7dXx3WYWtyPzeP/Ww/qgwwp93vROJ\r\nUHBv5gtAjIhkZ3ymNHwJnC/sy4RyWECBaOeRMHGVYAYzCjpnLhAoODTKm0RC\r\nRA3VNVtVdiCxcZHljxK6x0+RcAFYSkxYFUQCQC9/AekIEceCMarsk1SrKu91\r\nZJHp1NlmTK5jThAHM2cOHwi+P0lZwfHEwEB1ES22yBxM2FvpHIb5KaL0i1Qo\r\n55t49+8yG61qvvq/WMxFIopduBZSIVZM+DBhGSNjaW+7FjkAsueU5AKMlCaD\r\nI4B6jEiczYBQFNKlf2YKL7utHCehtPPRojhSKpw3tTzTH+HnKdnPV/QEWgbC\r\nXxXiAnx2DvCO+MDjcR/2emOcPW2s6ZYTJR3arjdV7quVctwrPRJtnSBXxvvu\r\nSvRwqXiN5MnZfROBnehxHCRte2YqKeuX92s=\r\n=yLGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/density":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/tab-scroller":"15.0.0-canary.ee40081f4.0","@material/tab-indicator":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ee40081f4.0_1666210422715_0.5465783515304252","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.98f1b54e2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7537b0967e629609cfc20ddaaefb98b228a1034e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.98f1b54e2.0.tgz","fileCount":37,"integrity":"sha512-WMbBcXtgZHEks5c4VbAPxx9QMi51J56GmWb6/qKiVR33GVVdMvnm7MaVLRHOIXsceGqAD76zgLP4uOMjnlzxhw==","signatures":[{"sig":"MEUCIQCF2uWQ4vbVNDv8fqO22NUzE5t779f0MxiZTldxncAR7gIgQ21p3G+bnqjpiyphFh/Y5geWqdG/n68h5uBrI8ZL6s8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdKYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGrQ//arcUzHk4TNv/4xuazAytvh2108rz1B4TynaYhNj4VRkLSlDT\r\nwp00Yo+jC87X0RN4aw+mKkKPPTW62nvCOkRZwreUUM5xoseGTvvzI1Zh7rMt\r\nTTQGpKGhBgCww76He3J+aW+PiapuwrHXc3ZG50nu74MWI/bB0dp8VCgWmYfb\r\nWXcn9fF8YPThyluiTBJlPvSgjO1beWrtC+GS+yII/0bYrRD45ySemQ3Se01y\r\nR5mK34DRT/yzSR6X5f0P178x3I2/5v76fzuJ/KOswAzI7ytBZsmdt2PWlcNR\r\nlJPnHCGM+R2LQD9xfes0Hvx+4uiG0u9Yt9kfnTUlrmsNzfiqPiY4U2Ypjf1l\r\n61UhVK2c1g6paeADLDADmDs6W2vzfR6I92zMmSiV6Myk/MrVukvlL5uii+vL\r\nyYdnD5yLHEGkimEGgkMUVXvz6fB89jMQOndNNCcwrbKL6/sXYb+TFAPl7D6Y\r\nYAveXGHyzbVSZPN3gQ/cvrxMqKP7zXyu82Vv1VP679Krcjuxx4RKgrNaDN7o\r\nujeor9IJOtluPG6wDU/WJDKvjn89g3I9uV8U0LJAfEWj1A8uftfMbRmhm44/\r\ne6p9FNdq+E4nqXXtV4mdfYNQCzzXAtVdB9ncWC2T6duvHzdkKxnZNXWdPM4O\r\nQ136e8wBTRaKt8WQdOFHsuQswbkGpxx/EPY=\r\n=gT/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/density":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/tab-scroller":"15.0.0-canary.98f1b54e2.0","@material/tab-indicator":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.98f1b54e2.0_1666306712175_0.740280209079557","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e74b7ba7e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"657df178e41ac1973d888c9ee65f0689ae54f865","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":37,"integrity":"sha512-j6sl5mRP2CWoAiCZeSN1L3FpF4YYbSPcxsPGpUM2Fo8r6S3D5pOQd71eb7KCPwRjRwzfg7wURqNNsdRlfnTJzg==","signatures":[{"sig":"MEUCIEQEA2j9TG2eqGbByyb+XykEMx5VI3VRXtLycjPStbuJAiEA4JQTqwOPjw25xXpdq4Z8idiXYlEqeis8pSmVHbnQeNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtHYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpABg/+OCuApkJjnTweoDH5Tm7olJDc28EhxFnSbo6zupqEp2nCUzlD\r\nafMUtREy3FY/nSNHiQ45a6/suwXeV4l5U3MpW+GAr3Sr9dkNP+Y7Ye/hs8Yp\r\n684xMdW9fil8Nz4f8x5dFQsh4fzFLnR5Dp1O/GlyyImrKyHfN2RZ9l+p2uaJ\r\nQmlDRHcedYyOy3w4PD3x1/kRCYIctM/ze6r/mlApnrx1+QKS9Z2z/7H3cNuc\r\nqcDEeC4CLjQPxMasIUnVdCd0T9Pfankrn4kTHMkinQlqt6zY5zMo3qfhT9A1\r\n9QA4ZRP3scuNpw9Io/ifsKzpfh4Pcd8Kps5BJLra54ZmFeiOO++6L+A2V4DN\r\nbUrHYMoXvP4ySgrGKb2Mwwmc6S43r4isjmo8UtnQJGKPonzCeZjghbFiPJ8E\r\ngRJ2RkcFfHEAbY0InZ2eN/Lzuv57N9ZqHSAvCtw/4INhr5Jz1eK9hYPo1HQi\r\nPv1bLy4BzRZ2qnz3IkmUKJ/mwqiik0Sl5/ted2ttgyD2LQ7j+i16cLkSeHzw\r\nZfcG9a6lwx9Oraeq+Nug08afn1MZXkzFWo1UnnAL6bpjE51CPhuYR9dqnerd\r\nN9/6sKA8R8es/50XD1mzIe9zlPTVSndOwv59IH/xueLzpFSscn2i1bZB5V2Q\r\nnwRVwiHu2RjZtnQspVx6TlEGIzoh3SpGHT4=\r\n=Xa5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/density":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/tab-scroller":"15.0.0-canary.e74b7ba7e.0","@material/tab-indicator":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e74b7ba7e.0_1666372055976_0.0745975270302961","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ab55c07d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"189fe5da5439ccdb303d4a38c4f65f0176287564","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ab55c07d2.0.tgz","fileCount":37,"integrity":"sha512-tt4CZuHKWYU2lqqSQ0OoA/AdPOQUBTeM7HN0atcuNiRVDcBUOtTsCJDVPUcQD6Qa6c9K+AOqbKH0t4RJ3aMmhA==","signatures":[{"sig":"MEQCIB2Hb0uf+m9QxWAUbRJGS5byWdAF/mhYvOstikMrzs4MAiBbRm2Sscx7z4i/qcJSjU4JzhZy4IUzhY98wdzVHAa35A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq/A//fdcRGltckZ01HXd6TYXF+5EAzHswyhETDfaxfuuDM8W77/No\r\n+3Y9tqCClWRpNiSmIXxZf5GgHX3NGpx+L3ggkchVh9cfW1sJplAyGQnzx3g7\r\njKuoCpcCdrHxxvp7zGfnrd2sDr/9EIkSXq0q69t3YWDsBRKh/tt+M5KroI15\r\nJXHBBFjKQOc8kuW3JOBy8KP/kWhN8zep+AOafOuG+VELgF5pbjyTYnP7lhEl\r\nMvTX57sy+ntEhiEvjBvbwQr8FGl+bGRU+B9XDxQi93Rl32s64EX+Ddvsr+kp\r\nr2WOejHWkLIlmmGnXeedcYXzkflZoJoE91Pu9InGuM0JZ2YEFjhANgNgkEOV\r\nHaOrL8s2TIkJjVMNcQmKJHIsC2X6umTeXV2giGEiKJqV9jnJ+rThQMqkd8OO\r\n+DJA2HJeAHSKMqa/FHWD4xxrjsAJlXDlerhFpWqOBUNNP/edIRqljtM+0aWE\r\ns/2/bVVrJb68xeUe/ZxNQJolJ05cBAPASQtFNNhcnrdP/bTn8Au0ebBhoLIX\r\n52E52y57cnI/in8QX9/3jadyC29V/1bOzHi1igYeiCI5F8Oc4q9hLXL15EUt\r\nvp1wSvP8T4Jbz7h16EiJ714xUXhl7FuLYk/8z4KmuhcZLS0zrGYB4yt01qcs\r\nm6Hn/NTmXqqScL1fpcsi/u/MBjJbT7ZjnDs=\r\n=Ri8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/density":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/tab-scroller":"15.0.0-canary.ab55c07d2.0","@material/tab-indicator":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ab55c07d2.0_1666462855175_0.8627140386093173","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fc539db34.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe8bd865b9a4e3658aab4034dc653b7bae9f62a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fc539db34.0.tgz","fileCount":37,"integrity":"sha512-EMozd1sijWXbrMEMYHgU36q5jFWbsJNtJcbl4rA/MsE4zkD/LksEsfCEPmal8WUGnSf6S9LPb3Jf+/jQCEKlmg==","signatures":[{"sig":"MEQCIBvx9tv59KrljqNAREVbWg2zDrYiOepfsHXbS5CVKP2/AiBuFabGA5LZLCsm7Dg+eVxxBFaJ6vSiZZiq4lnhpT6nig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq95g/8D2Q4ETseHFkf2fs4mkuoaCBqZEhVDyY6eBuUcUOeSOKTwKUr\r\nxWIGgRq5cX03Xp3kTK+lWZCPBLDNd1J+gsfxwLlHAZ2iokh8iQe5VoFuQOeV\r\nG6bxB75Agz9OzTfDJQTox8FngFCKxv9g+hxfAkkt/HjKgvlNokka1w97PCeQ\r\n7RoOJG2i23bAw1aEYlUT2F3oOlnvjXQEFTmBKsqGO+cLj19F/mICI2/fLthU\r\niRZFuKsN9nDdTr1mfS8crSa8wVsFra5Sg1m4Cq9eBP9MCtMIfz63UNcyzMrm\r\nAIVQT1lBFOfhc6kpQYhfMTuY2JOtuhVsMq4ITSinvX8grSz5jBeAYkyTspbL\r\n8nuRFchdwc1HyK4Ny6jlYWdwcICu6OFLHyJP8Ne2Dk4hqJTvZ16JhO859anh\r\n8CJ/iD1XyOfC7guzuOkGs79Ki7skP8M902qFWTEIF41WNjxQrx4UZgEJkRWl\r\nl6++K5GbSasz0MGv+U5STIvPACg3pZwFsLq+qixRZuW32W2+w8NwWeiZEBnV\r\nV33clnrU6Ku/9jryqI9nhVdugdBOxWPBCzfRuzvynhQnbZhYJKa7+Z5WEH0H\r\n7iKG1MqiSRXDMWoGwIr11Xis8qIkcw0UoqD7WAV6kxdCpjpQWLrL21epukXL\r\nJR5aISqukMu++chLuWHbazjW6uKcOXd1DKQ=\r\n=kCmI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/density":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/tab-scroller":"15.0.0-canary.fc539db34.0","@material/tab-indicator":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fc539db34.0_1666638061100_0.025370336648594227","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e340b04c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75e77fb7832688b36325635ea79f5e47155b863d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e340b04c5.0.tgz","fileCount":37,"integrity":"sha512-hnvLDNvTZnoMwAa609YoxpNxLF63oHSBGJrGaweOQNAy/rH4h6AjQxdAyIjgYeW9Y6ZN4HYJ7mzrRT8ry4QCQw==","signatures":[{"sig":"MEYCIQCPyeLFCBFLFyPETDESdj53mwIauTu11qaXZ1BS6WHA0wIhAMclcl57cflPHMmrsyw1IsdTrZyXLLVwxEIpLf07DMl/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqVw/9EhwypJolbKYdn0ijYnswVpnuxzBBFs4XjauUSEDJqsxqjBHR\r\nhaiiI1RN/X/lSmY0OvPIvZONhmfQeemdPJD5CDWiIx/U5RZbo7N2zUlvMv+4\r\nh54buWkOaSPpWwN4MNUbEq53kG81N8Sk47+j02+1ofMxbpTRcTtUOIlcdI1N\r\nKzOkoj8rtfCea+ilkBqIAj2ldEzSRKwBxMlovcyKPWjR8HcQw9QWh8M2zNRK\r\nNc5ScAn7/0aN79btVGM0a4Oou6J+JP/lw0L1VlNJOL9LbbOGi267kOLQs93C\r\nbjD+FrOpoj85V55jZCz9l+g5b3oweBifNTEn0H6VX/B+34Mi8TIs259sL8WN\r\nNvreKhJ/J7/gSp/M2Tk7Bf+7Ul5OpVBGWsSj3cHMYq46tI5JSv1b404ELNSg\r\nSIVeAvCu3Z40y+bVgePfjSW8cMUWKI5j/qhWUwUdBSjIcytIYZ0RGYm++BnK\r\nybgVd3D4go1/u0r/JFv99ctxnO5LIp4hSDW8Vs/caIkiaPpIg0JEMnUYS2Ji\r\nJ02mBgAe+xN7quLJC3C6fxOtILQgHuCqXa4kkQM6AbPOHM0rVmH1eUJB5BW6\r\nRXmdxAJvi97y8R8sP5i5QqbCVUNCuv31/pHBzOnv6V4kWEjkF0H50dU8eaUD\r\nL0vq17W327wzdWaghlKnyjCan7bo6jBd8z0=\r\n=gTmF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/density":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/tab-scroller":"15.0.0-canary.e340b04c5.0","@material/tab-indicator":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e340b04c5.0_1666741612442_0.4486909237079557","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2c1a8f8fd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e571d21a0980cd4affe2c068ed979d0e541143b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":37,"integrity":"sha512-gQ3+ZrS6vhJDkAy2sDkidT1T4cDNjZsxe+KKrT4KxBqMQF6lBkxXZinocDJ4yEtb6qw0xHkKRaNXCsIRPaGfnQ==","signatures":[{"sig":"MEUCIQDP+VIvSC6fIJTnVLxKeotXIeVYYthD4rG5xjoV+wyIrwIgMosn5Ra3gaJICNvtoq3GH47cw8rjFgnlb0EgG5OeJEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV5Q//fI7KcnWDIYWXFvREi8FRITziLYz/NWM6piFvrWFJxTbdeSGg\r\nqGpTKz6z2AQqXXuc411CRat2/wlwhdJbX8ZjcA/siVTtOdNs6Nr7dbyNYj4n\r\n87/Y+JioTCE8sHT/z/Z5OWRyxznSxaLIg8tK+ewAXszTyiHIpfuO1y9NU29o\r\nxZd0pCR9SQGRMeIO/KFbsrlRSbO89WWHhqgtYeUxzoz0LUA/rLGfX0p57zEF\r\nJK4O+7LxY2JcHAC9w2/JoBz5OkMucr+RYMS8B4i7bLx18RkAR4dtoWBM87HJ\r\nF56DycJlcNSSL4QOYnRUOApHv9GTH1l3d+lQyYaZX6evsjRDcz8gEWIW1zgR\r\nyCFFkHy5VsVQjYZQVhhF8zpkqkbMzoBWP1N4ST97w+uI/Xb9nIJNsGLHI87N\r\npZ/5pLp5CZaHH/LBn10Tn7TV/zmkByyUN1YE0Yuwq3XoOdi+WsBvVbn7+MIX\r\n9kI6EeAS5CIigIxo9T4Wf3VaYrwmEwdqWWD+2dEoheqGnrGs7S0ncWotziGK\r\n8vGPB4ODwW3Wh3IMJDFc17O86wE080qSINU6NnlnQtbYP6DygPsHd7upHj7h\r\n9K8QLnuHNRntuU0bF7hBfxHGqrrLtNA6oHCWxhjogUsNEX9q9EQHSs4/EGIa\r\nzhlUu27td7VLzBVJznSzb/iWrAasfmJSwpg=\r\n=Ztk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/density":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/tab-scroller":"15.0.0-canary.2c1a8f8fd.0","@material/tab-indicator":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2c1a8f8fd.0_1666805550334_0.47059532160482265","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ecfee946f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec0d79fa0fee4e6fd3c8b2b77e8e3cddddaf956e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ecfee946f.0.tgz","fileCount":37,"integrity":"sha512-1SfhxOkoyeEPq/SlhIVP/Eiuhr46jqmvYSZOugTurL3TiK6Zilk+n5fAQCwElcvK/Dyf+n5mFR2RDFWdu+CZkA==","signatures":[{"sig":"MEUCIGmmLqb8nW+tlpTmD9rfQTQvkd3cW1szKQzmZpQO/z69AiEA5ioBcjMA9xhXnlO+vAjM9Bkd14eIzxiVq4CFsICIBP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZXIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppAg/8DojmNjM3OVOa/deTfG9rfN80wPNBj2UiVnJ5SgcrVkmDk13y\r\nKmcWgJy3U6TBAmuxaBom1ByG2iq/p3zXZLTcFd5RIAmMOvwTTTsBXWE0c2/u\r\nZI+74tsTuhaskVw/zrNax2q/SxItLC44mW4//3TEF04sT/T8yprTAtE18tcP\r\npaby8OxmpsLz4KTSGhAEiqoIxsDW3WYdcJlyCMxWW19NHpi/qGpGPn+BvFVr\r\nn4XI2QgfasDZwyjyhrRhhC8y/CtrU7/E8BTuWSTC8bi1K9ILB44H3g68TD1V\r\nwnmEHIfBeJEAs8cVatHmw9BbqGS35KAXeJO59j0YfwLWqApxwcntliagehPk\r\n2a2W/wzDhehkfflFxLLBzjqwDzsqjp/WYufBqsVRFrPX1SCruMQu+LJDOKDY\r\n+lfYornJ2OISrF9J+YDCNI/prXuP9wM9i91meeZc03/wGscnjKPXbjAT6/VU\r\nq+p1sg1qIYocql+WRdsdFDYI0vJ/xYg+DRQfUgReDxjgkmgC+dw7PqGXDls0\r\n75ocD7cv3CQwjVFDRf1A1u3DkoCfqa7FmZG2nFf7aA4WVBq3QXxWklPcuUHN\r\noN6xm8i5ftMHBG1XmZHw6Rbi4LJMZ3dhRchh5DfUhu50ywUcXoQilJ/0g2ax\r\nhHtFff5v9jIGQEbPebkTwCZ6NB2jb9/SFYk=\r\n=Jy8f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/density":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/tab-scroller":"15.0.0-canary.ecfee946f.0","@material/tab-indicator":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ecfee946f.0_1666815432640_0.6022769839456592","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.73ca9dbb0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b806ffcfb39a688c440754840351c299b75ded","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":37,"integrity":"sha512-9PgUnE+TCJDTBPz4hNZNeD7zcbsqC8yFzheMNvpZyuLwzv2Odtaj3wEw113M4RergOVaXINNgvQgHfSFL/O3dw==","signatures":[{"sig":"MEQCIFPIXdXUErXB1NfUo+RZrBlCFE2VzKcZ4fJAR/CynJC6AiBojhcBCvRlnua1Sf9KBCl1bnZtU2Vk0KHSWym6oDxTMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAcaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPkg//fzm87TcxTQcH+ej9g6tS3YH1WPBU64t96t3FU0xm0KnI+fDp\r\nYcpz0pSrgolPhCJGOYVA7z3p1V2b+KM0PWgFXI7YJoaGP//HnzL8m0IiFO5J\r\n3q2VFlZ+5uzgdJIrKhCi8EambQF8Sq1bMTXtqbvnai4qRHqb9t2SAsoQNHAg\r\nfBx9nbMIDgYK3J92QGEJioD1C5VHiO58IKaIcYdr4u1S+G3wmeFvnGdxwuVj\r\ne6gPKTQ1A0k4mH3+Ycbh5Mrx9PJHRwUei131a8J5xq0zsWhLOVPJ6yXlCixX\r\nd3k4wLNWO+4biUXOf42TooFiCwcIAjqGL94Yx6lcFuoA8xT8/QNgs/7kZeuD\r\nzsYCK0PALq5g0v92fuPfgAICf9xAeUdWBLX6syySU+H/gfxbvnkSaLV5uxJN\r\nGdLHrc03iXIIW7ZBKkG7549h0BGfaWaJMSIA3gGD2OPEAOSKZW2T2LHpKhjR\r\nXRfiqFj+bQSa6mS1zAQ3EQXtl2FWMihhj5eKUiDn+PMJHxSXnnCCi9BKwcRs\r\nEx5cvdowbtfsyJLRaOthPlL5gFNUwy5K6mfRrbccr9Il9pirDU45LDnus0X2\r\n9NX3agHFn57D1uPkTQUWXxHKkS9gC81r0oYArig0EbMjCN7zyXCDUThnUCQr\r\nahixPh2iuEjYyg2eBBrC17YVDqeiEmJACYA=\r\n=0NjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/density":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/tab-scroller":"15.0.0-canary.73ca9dbb0.0","@material/tab-indicator":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.73ca9dbb0.0_1667237657755_0.9340999257965577","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.357f2e5f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc82ff05190957bb721237a242ab3b462b31d64","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.357f2e5f1.0.tgz","fileCount":37,"integrity":"sha512-CKeWWt4psD7KNzN6lxdE4LbAWbHMQe0EJcyKYWT9uq8wiiXkGzNfFIhs5jcQ1dlbBBv0ADfIc6pLUcb4Ic1zng==","signatures":[{"sig":"MEUCIQDNE31TRbDJ5AiREMJy9l4ayvF4LNsy0LCxlG/9JOvnPwIgWA2otZZq+tAyj0OZb3UN/KjDBObFqo0/1ZxNlyfHpKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBkyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr1Q//TPaaMno6NRY6h+kL7w2R/j6L12+jYb8fInKvkpUofclRLopJ\r\nkdZdG0Wh3E4X0NuG5i5WAT5p5PM4ChXcq3tZuJy1fzajwurnrpvCyIqPHu+R\r\nn03Ve2fQRH7uqCq8heVfCz3WnA68HuYFDY/ezhHReKujTO/Gb9hkas8B1hSP\r\nu5Xayz5MExOyfC/GcC754wrxZe0bKLsODdsGrOFErtxA3tAmN7WzQKHe+USK\r\nTK2ro9noVIdxX/AeRbr09xtnT4kBSTQXvIHiKs8fILZeUCF7PpgrqcCHd3+4\r\n8tON0n1TNh/omrHkxs7vvJsPsgzM+FOZs9cxX90Xir+x19UuIyVXLtAXRase\r\nuQ/U8uDGI/RUzhxqckAORpm8A+1HyR0lqcoV32VnyVntEnkqgEnSDeUWpZ7a\r\n8zhBFtlrkhwWKwXPlP5J0zfpBviWufS+evttICY0TaB1JV/Y/ti2BS00EypJ\r\npAnzo8xlAQClnf6lZgtGGedTHdbIIw+NJgdfw+eIouQODwQpU/d0wEMf21zS\r\nQVmtt2kYOE/SjlZ/dWN1ucSBXWedE7iVwthMWzu/sPIIWNH0Qwd3lBM9w/A6\r\n7rb47n1cH2zE1n2sLBazxvjhrdwQqCjUTYsYp3tQnqmBtpnBI+mbt1ZAdYip\r\nRQ4jwSV/Jp8NAFTRtiwm1I+mBTKgrnw5u2Y=\r\n=BI7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/density":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/tab-scroller":"15.0.0-canary.357f2e5f1.0","@material/tab-indicator":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.357f2e5f1.0_1667242290423_0.33967527580814294","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.eb103d4b5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d57b119ab5e31fbe1cc414c8d1a8208cf7e3a381","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.eb103d4b5.0.tgz","fileCount":37,"integrity":"sha512-eiej7B1C7ihPvhfWLhgiZf1UsN1rkemBddNaWaHMmixz2Cx/PU1tPUWjI7zNVk8tUnMahJ7FoZXvWx2J9FfGoA==","signatures":[{"sig":"MEUCIARS059cMBlqow6C46xeWkgfq8AA9UqfUkuUHhdweiDaAiEA9VHZ3N8Ax+8vECjpNm8x/E42hlinp1+DgD3vxJPvnq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCjiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtVQ/+KB1N+WeC79H7WgDaXwxfqTOa8bEMuDH1hd3I468wYXVDi6Mb\r\n8ZgwPur+m05FwpYKIW31+oQHtiaX/bn4Bon9nrzpo87K6xw/O2al67xc9Cx2\r\nxhgDIK3Pk5xbb5dZ/6dSGZruiiNzphCMPQ8SXInJ3xgTFxPqx46Hm/tdOTpT\r\nG7Iyyg2bVlTD9v+QHG0Lok7QKxEY+yZ8sWipbFUZTSwyYqVbyQ/SpOb1vGkc\r\nenjPYWRuNBQoPXH6AhXm880tp8Ogwe6onWYc4OMPEfJKUe1opUQ636Mkf4Hv\r\nNLKRm48NSD7S4sqjAh5jmnnnrkUKWhW1x8btg0m/x6lYMRViHofQg056smbC\r\nwRxTDOKK2EqMLqAZ/iKSIpsf149ZMycsdocjUuv6+4/NbzFHGk7Rb1Yd2xe7\r\n/Fjeec+ev0EO4FdY0AQAW5cDkkTkiSWfbmXeaZhJXssRN2wdVUdYjugEPvyl\r\nyjgmFX/WdN5UTs7VsUSImBbLL7RTbR9v9lvdxLjOIsYtMHzBmhYLcQlFV/qW\r\nPu1lTCop2zAgxHOcEreDeUpJw46g7pxp7qRQMwAEeOr185hKtQU6YtALMk+L\r\nRLqJaOStrDoinsvFPACGV8XYaZn27sn6YtZNJmiK8DCISTbEQ43ReeiACYwl\r\nm1oL16t9wK1eyR6yVjltZVvV+Q7isQ/7NI8=\r\n=qaB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/density":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/tab-scroller":"15.0.0-canary.eb103d4b5.0","@material/tab-indicator":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.eb103d4b5.0_1667246306455_0.9786628530520318","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/tab-bar","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.af5f01223.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b402e073b7dbf1f70c3e0606c025d7aee60ba37","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.af5f01223.0.tgz","fileCount":37,"integrity":"sha512-hVlZ2D/2GQ0qp9lO5PrW+8/a6cM0dun9h6yvmbMUMyuS2Ckx5enMcKE1xycqBjAT6kexd/DOQefqpzZqe4QI9g==","signatures":[{"sig":"MEYCIQD1W1oiir2kKe/yR2Yq09zZy5KGxWTmfwAbf6qlwXSk6wIhAKmXbtNPeGYB5pCBAuqkme0wi6PAEimOn32MmUzeUPUm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWeyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMlhAAkeksE0Xb5CKSgQiAzRrHJ2zKpjTc2xKTyHEfYnoHZnHjjuAN\r\nR9X4UUKDB9JEbW2jCwYqrM2nJ3Nz0eDK/UtdHYlHjTuKstr0H9HPfM7wjN+2\r\np/Ft/ozO87Zigs9vuZsIdoEr4BTRRrIqFvs+zQz7ogyDvZ4QL0QeaV0Y1q52\r\nCUkkkCcI03k4gmUVazrR7QAbU9RkIt+4SFg3JhSuVOYIU0PKwsq36j/vMQc3\r\nya8cxgvbRes5GNBHiQH2ccWj0RGcx4TW79oG+5gDGWOHFHSvQuZ3bHkArbGQ\r\nYd/6EOCtf7s1SJh3uIliG78VgD2y+d4jn/qHFJOSxwLgUjhLUHU3NRU6w0bt\r\nYa55iok/vDGLgl4mbjqZARF0k2rn8hvN9pLN7T5FQ1n4Z3fdOnrjF5r0jYUj\r\nBRIz2PFrXq9or8ZGseL3PO/f6vaay9w4uZSKC6oVcZ5YpE/PcqTlHS41+2T8\r\neOXJsPKMs6vIAJtzwclG5h4ONE1Mo5nUs0ZOVLvMCUBD7JUuvrLzX45mUwuf\r\nnTBb5RrA8+qp6huIqUNQAidHemEOkm1yOVuEYQcc30LI45+sGvSx8l1S7wg7\r\nbY3+hWG/pHvQeiowdf33KcpjkfcoxYG6O/hDidY3zjM1AGWelbf1nkViSv2e\r\no288WuwCPNjZRb1D8ObG4VTRkis6ymRnpRI=\r\n=EOry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/density":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/tab-scroller":"15.0.0-canary.af5f01223.0","@material/tab-indicator":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.af5f01223.0_1667327921861_0.17127413612984133","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/tab-bar","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.58733ef41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3548b1df50950cbb8013f925dd635acc381ed1fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.58733ef41.0.tgz","fileCount":37,"integrity":"sha512-7gEo95AOmSuNXWFyfLX/gh2f7vYgrVuDFEWXF5v7zpRpfFeoXvigVIzEyVMEiq+3RmAZRgBr9/BJiYGszjmR9Q==","signatures":[{"sig":"MEUCIEGcVVZdKGmJUWUUigViLAf5YwlKCJXmweIKRu0kSNTeAiEAou7abpYR0pgk25aB4WkCe5LlGB+Ksa34QoYdiFUaMgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrMVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrlw/8CeHEmEBnrXYjI2ZrGmcZoFodpYjUVMQbBDdopBJr4KFDyA0x\r\nWROPXnoKIMt/HWIO8IuSFzfQQs4eLvS0RbcSQL8+bXuqoimicrPZraPOCBHh\r\nbR26NNoMImQcVQVw7O6t45knlCF7G3PNEG0gKcB+7qSXApnEtH5aB0tX/95u\r\nCansHtJ85RmYqMFmd/NEB2eUBGO6U4mYI4+bfh0tNCS4ELgMVoNVqd6BUrXD\r\ntYSMaqzjGlkGC42Zsx55/UYyKh2GbFdBGoVZIZKBB9IjZylm37g8dmm8B2Xj\r\nU1h3ksZnEAjBDaNZ82SDapKDQmTJ+m0hoaStkz1YYvA0Mvbh6YVBqUV7YyGa\r\nqytV8gcLvPFaxI1ZKKjuZI9GUvVi1z4NOr+L+/lYHbfi7kY/PVbLK80AxsKW\r\nqCilgDmoLec6IhKXdo/5/dJgprBTkWo/iWKmbr5wChkl6tYgcLhzY0yXMH1z\r\nrYmVQeFxe839KLfidX6GkUWkptNvptTFqgc0NRihW3pvqrremkQAuXClFzhh\r\nzQOvcToZvTR62dbY4kpiQ52rdG4+g/Rg+8E49kYYy3LRH/N1hvrZkTjhXkCy\r\nN8zji42pqwJFH/f7g6Bn+T/aAzklY76a15lZ308tlsvweEQ0Dv/6/K7uv1yh\r\nAEFUTCovGPxjlM2HvMyHeuD2DZU4/ZcvkYk=\r\n=mWMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/density":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/tab-scroller":"15.0.0-canary.58733ef41.0","@material/tab-indicator":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.58733ef41.0_1667412757055_0.9271074971817406","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/tab-bar","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.909b48215.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fdb97347e82b4c1a3ec925dc97ea7a252fb91df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.909b48215.0.tgz","fileCount":37,"integrity":"sha512-3fuG5kcSS6/MFjElx6HOSVZrBOO7wa3oFdSmzs+10XHFwXqxfJhq1FDYYlCjLTy9ZEPtDJeulRwVrvCRlHOl2w==","signatures":[{"sig":"MEUCIQDKybj9Aws5smk8Bnso1Xg41M3TkaDorbJHtWt1ItE4nQIgclHvB6FrBYU5Gyl2o6FNvqwTaDU8bqBM3HZFXSMRNH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz8NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpECRAAgmYiJigOCNiekBC67t9Bwkx9lAkNzRDuM6MQDgJPz8Sc524Q\r\nhuNL5epv3ckie6UYvppEy81TrmmUH37rU64yBmBlXU6bHpUKkeuYHOUoJloi\r\non8hsX1iRdEVl4gM/hRWtoWDFuqqA8GbIPmfcIg+nBrji+1tvPE8yI9CrAOH\r\n9hCKpwIe7nxyrnPaewJaYpSP2TXL0GTFWerZPbxRAdEc2Yj5u0Fll5H8G7yh\r\n8wsf9n6LCYIkxBdMV9z/MZIEEWTG9DESxvW0rLp0ookh9vn+ZWVmR/0eVzMQ\r\nxXYq7l76pDl+iLF5+dRPwiMs3KAgJOqEEGTPvK/uFXtjTIoLpTYmqXmcrbkI\r\n0zDPZuzfArUufdV0wNPIfa26dsLKROxZ89yIjS8nltr5/4j/Wnu6hHmbiZkc\r\nfXD7u5+2Xa+z2XzJHSYkviYPdv9KizHMzzPhBeNOPEGXR/qQYdpYuCgY8RJW\r\nw0TX0mcIcoz03VZlgDbs+HupyKGrCzdb6FF7klR7P6XyEfcd67iN8/srFPHF\r\nTprzXoVhh2aHwcu1XMCS/CAPfCQgu0Ej6UgpOSO0YOcrayAGu5I35NVO9IOu\r\n41uKrjCS4xQzMKukUsl0H9v401X+RdD5Y6Z9/SEYaasS2X0hz+9zWt+mB+L4\r\nRIMvPl3BlSrTThXsLt0Ygzxl5Tai6Sfu2r8=\r\n=SHit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/density":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/tab-scroller":"15.0.0-canary.909b48215.0","@material/tab-indicator":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.909b48215.0_1667448589211_0.2403125847476031","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7f17127d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e5951a747b2a0040250f2d77ec01acc1fb5cd3f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7f17127d5.0.tgz","fileCount":37,"integrity":"sha512-lYbKWAfRsBqVqxm56wjPNUpTfxJmdvP4l93Qf6ELB9EOcWOzDr3VWoJfEQq06uOmHy0w0aLms7D8Q++rQT1pHQ==","signatures":[{"sig":"MEYCIQDKd1T6vSXEhg+oLrH1op09f7iobcqPCljXIvxwmbEPAQIhAPSSQ9eu/VOaM+pth9vPs5blDYELhQ/YVyVPNze+9r6f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAaQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4rA//cDF8vdNlgaknO7qFKHLlafGMONJMpKow8k1mo5o/YECWTbyg\r\npvDg6SE/7MjVQMohZNqrUoCUNhmaTvmUEzQd/9J72LRKobJPkXJPpG89/u4J\r\nT2/ssZRSSDC+ua1P4dUiP6H+i8o7647cQ3i1K6ots7JkCmEB0w/cnp/D76cj\r\nqZr531UmDtgVZImENxqo2JWMUZ5V/0JfXcJt7Rav66Y+PvjKUvgenB8Qz6Nz\r\n6ul4mdZdkp6sXX2pjx/XvJrpZ2ey3YJuMetUs1Vu5WECdb+rikXJ1Jr5x1Fo\r\nx7BXu65lhQtC9e1YUJYikyNQmqVZaoqeK7+q4DqSs2VDPihTjhrmT7K7WfI4\r\n0t4260mqarwhM1oWeb7NBBd1TM6yP3U7YuvEAtRdQcQfJdg/rl3YC9QcHsQ1\r\nSjR2s79+HZJE3QB1MQ48ZuszstQPZyPUybbTauWXxI9QqKKFQ2eQxSGk04aY\r\nTxtEiDhUKndh1ub59VekHRm3D2OcxdLXnWvPg1zHcRn/NO6yFcCKGLaW9h+/\r\nt7XoRiD+W1W9+NpxFK7SovYeSBqPcFSurmv6LdKyuX8KGmNBBR/3FN4zlKPT\r\n1N7bJkwwYvqnigRXDOaEF4vvWaZ+KpIaFv8EE/CcAwPcYaP5aZO9Ws5VM3D+\r\np8tgvQT1ShEgqbGUXqOuutvmRxE1tdHeZGo=\r\n=lbsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/density":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/tab-scroller":"15.0.0-canary.7f17127d5.0","@material/tab-indicator":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7f17127d5.0_1667499664589_0.27726683050200074","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/tab-bar","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.da95e2a05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d7886ff480df390b0839e03163d1939fe72dc4a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.da95e2a05.0.tgz","fileCount":37,"integrity":"sha512-e5WfriK/xd/ZTKHpx6DUSBMJaQlN3021U9lOdXUfZUgxKIU+q7a/4uqLZJ9ZMl06R3dex3a6cjRF9+6gBNETvg==","signatures":[{"sig":"MEYCIQC5pADtEWPWHPR3+JGT4Qr0dfnQdHO4nvs/FLN5NBORPAIhAKNPlrve0+1DJqQX2/QYWvwQM4MIBQ3EgqylBOGXTGaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUVHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolJQ//XPoyaNHGrfaGT1NYW02FZ9ijw2kenzJQdEAB29+UEJh/h77S\r\nc7iH0X+43zc39hswdes+Px0TO3bvOJA97RvmAVq8sgMQWuEllpzTKLtPaQzC\r\nkLuGKZzyroeeqxNrVporAQtN4/0HT8vjbRKstOlsMz62ILVLBEEDw0Zzl7SP\r\nXNp0Zuh6j+d8QmzG/1AqGN3SpRGtITGDl+PboQIm8r3BK2S8NT6lo00oSVHh\r\nI9PyEg9GVCS+u2KCdxcJhnlt6A70Rev02Y75ez59KPsONYWuLcXVEVBX4Rt0\r\nwd4ML4ENQm2XEgTuWyJD4Mwqb36d8VDTy4YXAGfg2FAFOSiWc3txLy2dFx9g\r\ncHY1Xt+sCIWT1aLYfE8Y9PFQbfk5tog2qio5ZGLJL776qMgCWDUkIMORBtjZ\r\nrEoUpzOoZKrI4ijzcK0tnEnZjEmAPYO9sBNH/J9wTPQFBqcU2yUwTWVwCc8U\r\nW8W0gUEi5apYxme1MFta49aMliJRJGSsinYa1pOIq4nmrh2Xi/QvEK7b0z59\r\nF13Z5Pcp79qqxsSXFJ3bLn7w7xPow3HuAcY0dMpFkA8VJCItUl2MT9Lh5CCZ\r\nxlew8QIrPLNIB7z6hFGgkmU0I6zsOTMc4Uuki/8gPGeHynIFnzMZs5aHT7zI\r\niv1judpe2hooDsQhunzOo11TVdDxUL89WGs=\r\n=E29A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/density":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/tab-scroller":"15.0.0-canary.da95e2a05.0","@material/tab-indicator":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.da95e2a05.0_1667581255162_0.3773788362794648","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4832e2750.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4192b649ad827f9775accf1f5b00ebf0dab42d6c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4832e2750.0.tgz","fileCount":37,"integrity":"sha512-Duzu5kWMc7EKWKmMd18GrO64/lEqPnt2Bwi0fjs1pGs1pclvK+WKt4/Lo5xedlGwq/pRNtTZKAod6MlllOMkTA==","signatures":[{"sig":"MEYCIQDBBtUmSUzAjTt/zUdPlMJ66L0K+HlMX9hshmVgZMhRtQIhAKMuqr2/pznFOyVmYJSW50hOl2Ei8pnpyOQTRU4Kyfnc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZX0PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofJQ/8DyX+rORdFgS35gfVXOh0/ZsUMw0DNCoZgjy8dgoLnO9akZli\r\nJIXOQZ4NTn2HSi3l2smdDZh5ar2+Y+6TeZOcNCx/GsCsBqtavNnOWg2n4T/S\r\nhif5YGDB/fK7IZcH8SJcq+VzJZzxaJ+/bZ7cClWrSvO822RvLimVoCqEciuv\r\nvy1op64xct+f9js3iRUiBZ5lE8MIk1nII9BbTwGWuGG5pELCjJPLkQDfF3Le\r\nRcMiXDnYBCAr7jTh0E/AHCQsyEWcAp0VO5ThCQzSCk1KBeiQ+hHnf/51H+7j\r\nbFN9+hD7f0xYxR5AUlhvwkCOCaKpq6SbCz1XAUTpMf5xOtuzmpyPgqiRhEnU\r\nMWTpLN9VjiHD11FUjb52I5/BOqDi6tHtsWshj88O6tt5xYWdIXR1OrE9YURC\r\n6yhylIu4VwuWQV05zbVOq7vmgWiteXA1be4KgM5G3zGrftW6wgMXh02n0Aii\r\nBdGXZGDIByU2LzAYpAsS0nCC733oFlDHJE9AdzPkfut+O9nA8eq5IGqCbJzl\r\n9iLlGD1KCXfOL7j3o53SEKzEtQVhpnS3mwA/Bpm2N2vtA4p9ZY7ju/CQXfGl\r\nqoQTcjbr7b9yl9GpXRiYeAWuFO0WjvLb9Ama7c0fVfPmkHQCgXs2J7+hGXAO\r\nXJhJk+VLxG0F1JLOanuiv/DLMM6aNIibFwA=\r\n=9itj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/density":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/tab-scroller":"15.0.0-canary.4832e2750.0","@material/tab-indicator":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4832e2750.0_1667595535271_0.1851268871552565","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/tab-bar","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.215506426.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60320408d25f5b4619c9fcc371d536d854e14b4f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.215506426.0.tgz","fileCount":37,"integrity":"sha512-hNMVywtAeruNh0X0aOJCGuZpdvVQwpG3wJpLXWEV6LD/NWf/5l4SpmpWfVnb6Hb1N84WAXN9NI6uBliOVOebmQ==","signatures":[{"sig":"MEYCIQC2XiCVrwYRa39rxPJe78iOa5S4wVWVAkoS165PgYm0QAIhALxh/71EvY4fsbV7kNEvVxhTZLj5ImV+GEvgfgKKDKDH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGMg/6AjB5PodTkXJrrvbMQt5dVdx9I9rUDoOgMUsR6JV/uTdsQvEq\r\nrcvDZo16ALa9pBUiWqj16wUEiWMCZT+G8+mfg90uz4z6QfBY8B1u7k7iEW48\r\nqaVqtEYS8hqqktsBpg8+6TCq0pktQOtLSNsFXJcNNvsJ2KyjAGhL4L5b/UOU\r\n03oZT/yRKfwGrJaWhxpj3Vt+EI9/MMK37rvAU52Q3OdROyxOd7UslUqcwdyF\r\np/jhsKGMGLmPYoHzjHcv3qg2pSG70LjzPiNOqxBf7isHoNZGnuzpigboxFxW\r\nI3CTAjQk0+311C6uUILN8SqA0fD4/Sd+w1e92dytQYQmVcFmv74HqPGcjrAs\r\nlk2ToF4zlVT15vmwyQsW2yRJa6C9p6YBAGJ4DszKRThexq6+3kx2uJiKf6H2\r\nm00peBDrOey+ODTbx79TRKsSwMKWxkon2b3UwuxMh4WZzOt67blre3FYPdLA\r\n+DLty8yXdWYLbnrE/8L9K6+G+3QSGYt/nkwbzO0Hsd8Kz/pE28EvQlTgBTnY\r\nT4e/Dqqm1BuyaUYR+ETXoirhs2bBHaGK3Jee2n0g2qIvKjZ+xPP1HUO2/gfj\r\ntl+YUz5RjuYyGsMKMv3kvPeZBM0b3Xcs+9MXVINPIEh/dprruH8Ryk1zX2i7\r\nQtpuWxHckP1naH/tduBED+2Wif2fsTUikgQ=\r\n=aZ3J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/density":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/tab-scroller":"15.0.0-canary.215506426.0","@material/tab-indicator":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.215506426.0_1667610473025_0.945749893744434","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4cf917476.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea2818f1a1230c7f3af822819c9a744cc954607","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4cf917476.0.tgz","fileCount":37,"integrity":"sha512-YD7yVM84mNTqSgwMwnZCd7HsCJmgTJp1htq58g9CHuIf23TzrbDxWs5VY2+wJJLAEnTJJeIr4NYhcO6AbZ98Ow==","signatures":[{"sig":"MEQCIEFlU3mE+d+waOVWcWr8fPeRwnY4vS1CD2ddpuTLCJ09AiAmHM8KpcemUxjpunvYsOtmDaA1LK2cGtgJr8m3DyBmuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqYJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7PA/+L3KGNPNpCE6tIUJchzVlVlEb4gfV/ZhWXTDSbHnADi7Fr5B7\r\nFLsyCddMSM9jsZpi9cbDt8BRsM3mvVXQmxFEbX1EjdX34xArZWEA0OGRdJ1T\r\n+CbC13pmexjgbMss0DToM9tJmuWJaQdA1UNLeeh8sq2X9dcDVmjSXOaKe94K\r\nPxlqpP1phGClaW3fENriYP5nFIgqfm5akrfwYnZK5wcwK9fTu3V+JGteWBoq\r\n5glexlAIFQlhq6S7vggoLb+m0ibGTWWYwHIz+tqIhH1jjqiFnqKqyv/9MWtF\r\n7k80+cpQTCTqShxmW6UUCPnEHi7cKBI1hMx+E6J4UROo5+3UH9vE6dIUPQNz\r\nEY5NEv5CGX+bSxsG3gKtdF/YtvJITZVz8X8POyWIcFJEvr5hp2gOoQi50w1k\r\nG9xPOvudic3sroknogKJAMjm/j5GMyYaGyWlrNWed5g/8PoiLKptoWk94616\r\nVasEoQIo+ApVRfASPIisJ9dlfAPfq7oMy9zr8lxFJfaAhHITQRYyS/OTXCb3\r\nWECgDUuqNAnxIpc9c2MDo0wgJfmPWbYaggOjyqETARIUVnIo+Brahea9Xmf3\r\non7PfRTtlnSPcPHcTwHuRwlEGh79TeMDrh8+rcTRy2udpMHobQ+cJtbfh4+O\r\nTV3YRBJiVd9gnijdWlrMQHX35W63P2ZxdW8=\r\n=AyDq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/density":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/tab-scroller":"15.0.0-canary.4cf917476.0","@material/tab-indicator":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4cf917476.0_1667671560901_0.14584122194747828","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/tab-bar","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.eef14bd32.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28ee8a7f7ae026334058c4b94d97722c7dd1eb9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.eef14bd32.0.tgz","fileCount":37,"integrity":"sha512-JQengvNz8Ap6UPdHttwanIVbn0/MpkJz0iPqx4q+oseVTS5VCJMEhJhS2aUos+5N8YMj+cbHwV1vjs5tGoUtxA==","signatures":[{"sig":"MEYCIQDmBU/IVulNHE6BrAItyAsQ94d2VZh/0QpjP8GpNxMh0wIhAJ66Yfmu3KfnkWPBwUTGc4Q/Y4GwsdcfCj17LYttkKbC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ7w/9FEoFFEZykk/+sLEUWlWdPR84eY17SMm2P6wcmNIgjWJoZ6Uv\r\nHbf0fdL+xaWu1qaG6gLv4ONCkTWBxtGP6JwQQJIiD5fFJPaWJSrMASemjdIO\r\nNdrZlI0puXShngcOMY1GxfrzkB1ZNtxZKKIRL9S+LMrIlavw7vVp2k+D1M3N\r\nbC49U1QoXQgqVUHnsrQYeyC+ikIKufR65nykCCw4wO4L9ch1p9+DbzeTrBQ0\r\nhBXFUZk7KCqHS88D19giN+o98ay/MZbC86tG239txId6wAve1nomqBxqjLJU\r\nm6+8fp/yvsMgTdesiYyrqcJI+gH6jHq5vpHa3OyZ51HKEBRZncsNrAGz0y99\r\nhCYnGrCNUMcPw4u/pVrF4Yw6djFMUgSmcFNF2k+dDngGMf8R8nv5uBD74Bkr\r\nNiG9fR1KCPy/moFmphN++GEUNnJD63+5MB0Cas0IauBh5amOolHqnyGzdNAZ\r\n3L+xXu2XDHl8tPEUJg2bJNrNAhYYXBYt6yN4KlidKxGeAhzyCQxWDECvOmGY\r\nCOBeXULJh/MhSjcbIO6imyWSdcBbOR99nci6nTlWGtcsXw0SmL03NIHMeYkC\r\nrwGo0ERATd7W+BuFUhKYKP5sWorgb+a+udMV5V+aUFbypzbPAanrRloz1JNY\r\nBXifz4TlrGhPCkVT9E++UhymMabIIZN9pcQ=\r\n=xYxI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/density":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/tab-scroller":"15.0.0-canary.eef14bd32.0","@material/tab-indicator":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.eef14bd32.0_1667755582038_0.30874432169592114","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6faa29fe9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff9cf0384175e307b995506dee010e150ff480ff","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6faa29fe9.0.tgz","fileCount":37,"integrity":"sha512-mt3KMZ+hGsC5/U79fDVXtvZ+3Q8b1DnKI4lX5wxQvHkh8WiDR7O/29Rg3WU1F+8S9TeDFFzdMgLN8ffe0vF16Q==","signatures":[{"sig":"MEUCIBBN612FyFWNeuVn00YWUve5qz7ECnrkHLYDiXbcvCVAAiEAha8mUGumPArDXPika4f1C8Fr2G9NSS7hARhbhgTgRfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHhAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmodgw/8DhMqFap0MsSmEbmDEXOTzyzgmlrWTB5FcPdy/Dky34L51y/9\r\nJl3DYWGFJxG7QxwWrQC3Eo/f3bnKQFbpRVqEEQ9ODo11NyxHmiAh5qRdliZl\r\nbs3KlXWexgUD/iiHYwzhWP3xdpASGF0gy1Dt/XmYuDJoNEUMML9JvVEVg9BO\r\naZz8AJBbluuY+m2hdpfXVbvAcnCH+ZGo0+e0rPQriUfg+0KTev4nd0xXft2W\r\n+Jf+xItQjMF+MiHr1xTIyrJ9lkeVdWCTgooSm3+KzGTTemJQujfaboHrzGb7\r\nBOqndNIpaEJW97WyqSOHuQQcJ98fr7U4/sXeCz1VamoObiF/fNamncdCJASx\r\ngBR+lYi3q028vu10Ay75uZAN5n/YgVzUY/Uv38/wyoPu5f2iywDoqehRzqqH\r\nhv/7qXUZ9Q09yICNBjfalxZ7+nAWmaJux4HU1bLcbTquE0y4Q+/1QnDnSoyK\r\nVSTLIYJQnpmspMz7uJDqK8glrwC+U8K5rYtwW6wnODHiDmM2/4VcuyLQhc83\r\nu/AWPNU9zkN18ddA3fTF848EJkxmYD+4EhgGK2Su1Nloi2jtGwHjjJwFmOPh\r\n3nONi2DObU9LF8BVsmqcYeIBe7NTCzFh/Adr8bTPBSL+n7pVaJaikbhUiSd4\r\n4PyNVM6xGSWvt3iSe7YIU7PU2VowtRvK3DI=\r\n=9Iso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/density":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/tab-scroller":"15.0.0-canary.6faa29fe9.0","@material/tab-indicator":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6faa29fe9.0_1667790912694_0.2968493995100421","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9af09b967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52ce56ad0f0ad04cb1ff8cc5b76049090b86e51","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9af09b967.0.tgz","fileCount":37,"integrity":"sha512-0o/RdsUck3nw1XUHQQQfIY+HwZaf3xaRp+FXayKfWAtn5TTg8HAYuZQo7r5nK+PpZAdwPuAZr2fGipB1sBTVVw==","signatures":[{"sig":"MEYCIQCs8ZGpmMyTUC86dMsMwwDdAP1pVIFt3yZlEVcILKB7JQIhAM0/wkIxPu2uWR5I5YCMFO3emER6OkpmryOtc7vt18aL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU6ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk1hAAixECo+N5xWuB1ZOJor1Q0+fsRUzzvrt9otMTAsK9Ea5EQ5PZ\r\nJddsTzvm6E0UILv9SNQ5yC3L4UleH7JRn1UsNLUnmtZHeS6X1X/6jUDaLFpY\r\nRwuU65MNQbRavFBftpwI5vJUO8haU8VRawqBThQEGv3C+dwKv03iRb5ib00X\r\nl75zRMwab2aTnOx1IhnDIvxJYIXCze0FvD9JYGdpduWKcF4LgAwddfsAYB+P\r\n+plmJts3o7nAM44zCnfkk76URnM7e63RbiS5qxWP9XW9jjMrMfgwZZcqGHf0\r\n2JYpPj1NnWKlJcC6i7BHlzIP+7LsG3ViLaa6QneoymkVwlAf1YFd4L5eta9/\r\n7S0xIfB30PW72dDoGIlJlD0Q5vFMM9yrUaXi87tlx3LGv9NeLFKcrj8wZzvW\r\nzJJYrqAtl9bAvz2sPxxas7PPXjw1ITv6qc6hdG5FuQ5+sHt+PShD7JpaMB2A\r\nP38+xsDZLBAJ9kFCuuLyWHzIAIIdIDxTsp+vikq/wK9nYX4QDAVrao7daqW+\r\nXYKqU6F9aO3G7gG66SRinOoPnbyVaq0kALMOGHS6e40d0Vu09Fy1izfdPWkp\r\npOCzIo4mdaugT0uI1ITuRrZAkmQiq3jUg594bhXtYahbt2oWLB6Og1Qac1Oy\r\nSaJIJyS1ZuanYoGOc+puUdtkKU1MXb9Z1oA=\r\n=5R9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/density":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/tab-scroller":"15.0.0-canary.9af09b967.0","@material/tab-indicator":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9af09b967.0_1667845784772_0.19332868104405465","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0f54fbb93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c599ddd8708f50d6093e4c8fd4a4e5d791578766","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0f54fbb93.0.tgz","fileCount":37,"integrity":"sha512-gEvO62tsnYgUlUb+quYjSSSbnZraX+vqxVxDF4+rDBbw2hB2Is68zNwXDooQbHqVhxuob1Q4Da0URqEiFXvSkw==","signatures":[{"sig":"MEUCIQDgGL7OgCQ0dZ2EhlLF3ScGS0VGtRFDu39NZ29qraSKmAIgG0gwxCMVf23955QzqAjWwklSNv/lvBDTQ55UAnjJQyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatD+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+6Q//fcSwEcGT0UcYzHi4eed48d7MZ/HIwAH0j4AVYwUu0W2CEvVS\r\nVyvgrLCDD4nKehK6fsTAYx+vp6EXNjjgkw2bHzwzilKoQb+uDvSEo/95Bhv9\r\nym+n0lJTwDpPhQ9z/gPgSfqcEm8NVOwWfLHeg/ydk6H2Wb4Qlpg5qNvNiFvC\r\nJlk/sVqYp4syeWXK4U5cWjwzq2Kn2V3T7Fuvy6ZH1MjVOUtI8s2/pd2m37a9\r\nJNGIIn9natfQCn4L1xa7K6LijGLHhJj6wj4Upt1KrkIvS0K6jLgAq+crJKwI\r\nV3QtGjTLlnWCwOnEWhUaVoW+LRgEX8HqY98aRyhGGzaK/MrFAWvr35sJztHM\r\nq7wmdz+ra/5/deIFbmobsvvBjleFfnx1tdrbTak0vhyhuwDnfmRipThxH1Lv\r\nFgNlKmcnN+u28Kbe5yGaGHYc7GqTQa7hWLrePieKRNwSLfDTNyXwo5unypVU\r\ntKZ+JyjRnjuVQJp8EkU1e7SEksPmQ5Jp0VW0JVQ4pUU1/9H/EiBey6s2/5vT\r\n6W91dZvQG9ch+TKHBfXH8CR/7urR+ucmLMTHapwQuUNd2ZPIGuBUdldaC4Ne\r\nSk/u/Nv5C/eaIou9tMK/Sy7UgbGhK7j7GJCuyWHX6V3G1qJfaAePHlkyk8mx\r\nNzc06AuXeXqMc268Qv2k/VA28NCTY7RWrYY=\r\n=yDzT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/density":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/tab-scroller":"15.0.0-canary.0f54fbb93.0","@material/tab-indicator":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0f54fbb93.0_1667944702307_0.13485047165812558","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a8d47f9fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd408cde9dcff831f838a2a45c9c4ec496d0bf9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":37,"integrity":"sha512-gMZ3K/slxpXXdL5gJJeMmXEgWvkM9hHufMX2p9unQ4X4x4EQeEXyKAOK/YDvozJKHwUxSYO2YVKxSfDLnjC+aw==","signatures":[{"sig":"MEQCIHf/8LUEYzoZZlDmTEVrgv932Tm0bSm3MxlqPwsvWS58AiAkUF0udwY9iOr7leBA0yf1QU+wrSoBmsJYhtcQdie4xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayp2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN+A/+OTr3LFLzIaRf9/nnFbr5KC/zrovVWOkidAbR3oOSP4GNqv29\r\nSL12bhLhDWZOw0dhPzJWN6GqeswwkpppYqCGX20SC7LvToCgXEAmD3VWdDeT\r\np2HbqqpdqbnI70jyLZaE7pnOXTGRc6Q86ribA9OG+iiX+YfLgdHtEiKFSriX\r\n/DDTVTgPz7a/ElwDkPh0UtG0SboIkSnlbISuIWMJkk35ZNzzwAMgb8wPNmOB\r\nqen6siU1D63KKxS+ECnXFkcOpNzOenGjBgUzRJX1Ctt7WuRTJ4GYFo8pJLr+\r\n2NZiyaNR5Lytjec5pizFKD7vgz2iw9P0L7DgLfYcV6vi/WlL0ue0E9CyzJAt\r\n7Yezj+BqawH4BPY05H2HpS6SYrWk5dpm0rdAaADK5jJ5N/ctcmiT8euNYKoN\r\nRTuYKN9EfZst+jcvgkeNshJpHsKqfBPLZw5CDNXeRLawDl5Gnh1D8PhXa44n\r\n+LwDKg0+THLw4UlccNGC7su9PU/EujlkZ5JSaasiCgmqbKOzAbKJqGwOGzr0\r\nTYvHEFzrvpZrk3R9svFGLJk3+wcSqNxjjAcCkhnhhSKsbCBGrI3R2K10Q4QE\r\n6UDsXtImz0Uqv/tjIaSaric5IvGwiO9EXBO236VGe6gkLV9LKIaJWjaS9pxt\r\nU3bbW669Ty7iu8sqMFsPa+Cc9bOvfDdJxdU=\r\n=dQ8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/density":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/tab-scroller":"15.0.0-canary.a8d47f9fe.0","@material/tab-indicator":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a8d47f9fe.0_1667967606451_0.9959174014363938","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.66a1e75e6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"493f89446107cb58a692aeca15a5c3ea40c8756c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.66a1e75e6.0.tgz","fileCount":37,"integrity":"sha512-q4pn9Jvef4XE83MIy3YteR712SSIXyidlgx8MW7RB5yfrnRcjpLQVRpm1i7ZMXVBJQEv/GxYm27ED/Su4Hj2GQ==","signatures":[{"sig":"MEYCIQD7rD8jjgHn698VOkh2ZFa1oAUpw7uXbOSQUbZQde+/twIhAJ5+tEsDWG10+FICt6Zhal4klpQSbMpwsEdQEIrJ8Y2b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3TVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ5w/9F+ez53oOLvkuz+Z8kjpIVKhkW38OCMI55aCVAXA08EMrZ2yn\r\neLxzzbxeiugrlm8URh+TsYDncc8DvCIf0brnsKlyHxx6qUegUjVsklaavjcv\r\nQ7C5/XS3DYLPVIPibST0imT3BJ/oX+3aslZJ9g1VU/D6xLsO8lQaFCOhlbyr\r\n2P7i1acb+41xLSkSjmlsbDRM8vIkT22RZ0Vi9Vwy2bOsUfKlpFaxLC7ypMDa\r\n/2KfE5ZvHMdlPa7zzJLFHtMPV1IKhrbZ00rzKI1tRnNt3L6Uno63aGmv5O2Z\r\njvCAQ8eOphqbDxTyZGGcp1yOMXQY6rqEYQBzZLjWyIH55cHhRQ86pNexT2zk\r\nkNhQ5fA+sCAKuUIa1iWFM0SojpKoEMlMKYDGQpc3ph0TzdL6Y/1VIrKi8cgV\r\nfn5dgOcbTEHgq89p5TzSoBCGrq8GSHCyLkaAEmmZP0qvIDUT+TxpAZCMzSxp\r\nRlDS491Pe/EjdAkZX7HAVCxuevHUNtNuAPItH6VszQT4bciZ9yuFHJwOtacp\r\nOKxzcnhQtN69VrXzbFSA3oNrDJnf20oJaJZH3FGjvPARP6nPLnk8yC3fvNI+\r\nF77irs8vz7KdCzp9GozUYR/mL9xAlTYr+sU8OoEoAzH86Cg8a3bbl5V+3IkH\r\na5mLLMLjbz5+CnmbdIHw2A1bHb85dqX1u24=\r\n=GM4x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/density":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/tab-scroller":"15.0.0-canary.66a1e75e6.0","@material/tab-indicator":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.66a1e75e6.0_1667986644987_0.2256406574651626","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5e5c2afc0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4525f9d732e8638fd2f10de53f3c843d4fbe4fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":37,"integrity":"sha512-yX6TLssNRv7c7BWzi6vRsA/4fbOlm3Xborg5L31OMLs3zWwO1TXvKYmU6oy09ZusCpWDraPV3HQb55ULHm2nsg==","signatures":[{"sig":"MEQCIBFFf6NEroaVYpO41EGzf71CllYoM/VyLqx7599op1x6AiBAMvY8q0KrDaBCPL3ilpg07YyD5cGFMtpHZBvUz847Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5UaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrTg/9HZp+R2s8Vh8l7NvfIk/acDs/zVFgQXUpah6286RBamDrbTs6\r\nuWGN6QNYcmBEHLh+Sbwj/nlQGOiHGvcMSESR5VCxXMS7OAaG3KBmVlH1gyPd\r\ni9BAmAMJ4V8D3DPV/y9a4pPWjkSqDFi4WN4m4+G7jHCwiVRUCXUbi5PchiEi\r\n1fnkqFu7pyGeBluveMHJMiPde/Xq4dYZyd2mAStzFVfaz1/ZO5zXVZm46cF1\r\n09HtXU7ALZaWfPbtKySm8tLy/mgVWKSuomZbL9XfqUO0xh4VIwC2LnONOTbO\r\nd6144PtgUnP9FIrgnRl5tCdEtvy7vhc9nBF+BHpDKDSsfHCVVs40nKB8q11h\r\niUmJ6k9oZdHn5oBSk5MU3g6NOvhs8Y+2ClDNLdcdp1m/CowvKKll1JX35/SE\r\nS59OSU2oOzvikopRIsMFpaaJLzxXiWulLqURJPWOUjNyzPHCQvhxRX5VuUgy\r\n0o8MSc9xE4djClW3atgEokq9+Qozx4GI9Q6l/Ggb1mzmza/OrsgbyIjD9Cej\r\n59ivhr/SY1//QbzvrALnZ/U0Cq65Zo8ULZ/ETSxR3KV3rnuKu/peOjMTYAXY\r\nllkw1RPnB15CiZV9F5EXxoKCseHNbe5qWFkNZCsWK/ETZGnPCrUNFOtyfkyW\r\nfKz248lGSttPBk62hIFa0NFjYExLasQWxUo=\r\n=C3ax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/density":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/tab-scroller":"15.0.0-canary.5e5c2afc0.0","@material/tab-indicator":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5e5c2afc0.0_1667994906455_0.6864742855490662","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3e3f43359.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95fedeb93c434d7fd4924a90f3a5618b92eb5d05","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3e3f43359.0.tgz","fileCount":37,"integrity":"sha512-0tKXLWxO+rC8DVIOyC1TY5Foqw07mztR/nbUjaXpl+cLeGtdhWWHKWA5tXd9i4nVkWJArSPYOmcPw6iutwysnQ==","signatures":[{"sig":"MEUCIQCxHVmT2YhIDk5rwJodpdJ4/XBr9wHZ9sW9JiHh8AVNRAIgWMGKkDsbyLzZSc/X2WQ5x30sisKbYhpjq5spdHbY/rU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAfbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPPQ/+PResEx79TgUlbSrG39galoD7vBW+p6SBwbyjzCOFVdixYKlu\r\nb/TGvjQegRrjFeLFf40O9VMlrhvOIQELEuFZ1lyGsniMfbcrq+5E7SlPLRLW\r\nKy0SO/f7KsROYNCGNZjMG0/61c7By++XQLgxfVBfCMuDEEvOohwD6MXHdbp8\r\nzUYjATT4E10VTmZPS1y4Q1uUW2ZxVIrbbfRfRX4NcXI4aCvwCkjZkKNb83iL\r\n8XWvUG2zaOF6oPXWj0K85H84+MMJQMf7NVip5uWN4n14U/qw+Pu41TfroMwy\r\nrZ0WmmyMLElJ08bCbgsZKhn2yFC1S2QKa3wZc3cP+puxPNNM3hRQsgch8HLs\r\nA9Qu5MSRTNEPiKiNvDLq0biUo6WBcsnViJxb7801FgGMjDIpTUbQ84RhH+OQ\r\nVb8WWGEqhXDuN0sl53EwZpsaC3RexBe7SyfwCmee3q8Wr9+FI1LMMbhMXqov\r\nDUQK/0gdxpbnf6VNR6EarkmyyM3lQPiHAhm3RzOP2SwHnk0Bnvx0OAfRjRUZ\r\n5HHZ+jOrGRKDvrr8mamEjS2B2Nu4FTmBaBT/NmyFscnlylps3fWREL9gs/ym\r\ngnhJQckTOZ+TeWZa+VGOJQiuTbHs2ygGZwX+rXyZuEZ2HuGe3AgKlxnkPOT7\r\nI/j6czPQhio3jLKBO3FQdPTGbGSn+QnS2C4=\r\n=Sgfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/density":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/tab-scroller":"15.0.0-canary.3e3f43359.0","@material/tab-indicator":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3e3f43359.0_1668024283777_0.18625966898668334","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3f667fac6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"101ffe90bbd7943f2ef7f84a701803d0c3057e5e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3f667fac6.0.tgz","fileCount":37,"integrity":"sha512-awj842ZrTBa5q1Z8a/OqAfeXp6tqqOpBmFHw8R867Yz4IWYopExO6M63TkCylCHrW9WvglnSxBpYy7w8E+8f6A==","signatures":[{"sig":"MEUCIQCpf6fZdoBjR8xWlNHfUzy/LeERM6pRibRL3VdapOCf5AIgKUHxWb+pUJlaCc+oKuHh9F2F76V8vivjCKVUL+T+V5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCTOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP7Q//QVuyV576BqzvHC8wqb4dNckrI0E4i4IUg6/rtU5YJ+lsiRxA\r\nDnu8LHTUpMmVIkLsUmrpKCUprXHWWSOIAfo2E2IUiOylWkU/QVoHcWeRiRSP\r\n9hMJfItVO4aqG1l06uvo4fkCnmZ+zgNzx6BO6LAvA12aBiZ0QbBEPtNyKN2T\r\nEQG1+01BFM7mHDebcQi5bMwx8AB1bWe3zVx/WhFVBePSccCp7AKTC42pLxR2\r\nMramcFZs5l13lT0GL2hxgRBqdCvWNhBLXHA4pxXnTHdKBal5+oJgD+VoaHfm\r\neSC7RNQdMkHeTkiXQeGZvdc6gNN37FQPVPr1UMGAo3SS/a7Vyf+//5yquXgp\r\n6S8sIEak1O45Jh1yUOmAUv/pzqIMijfCtbutVWmKOhK3/qwqkHwVbd3cpvrT\r\n4AD72G2mlgRs+IkJqp5pJleLUd9DVZ4cem57RaPZNAIvwsWSiWOSPoC7bvxX\r\nU0d+4oRt4nhyc5AConWw6yvGfUa2omJE2at57eEkLrQqqGeAmkqTLGPaxGy/\r\n7xu/NAlMgFJlqIuMqf3DGHqMC2lM5eC2jZGrftkQbKViGQPWR7dJg650YW8N\r\nUW2+XGFqZctFhwfKlvVx0GLYj1iIux4P4ykEhk6UpGLGoRGVD3Xq9TgIdmoK\r\nXJoU+JxaNZLRvt96tdTRAy4gr0pKoO/ZmGM=\r\n=Kos2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/density":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/tab-scroller":"15.0.0-canary.3f667fac6.0","@material/tab-indicator":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3f667fac6.0_1668031694505_0.24232417397553307","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.faa28c1c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88516b58ea96923dd86f970450451a2d2b759841","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.faa28c1c5.0.tgz","fileCount":37,"integrity":"sha512-mc+Iq1ftysQHl+/G3Fj1mfKEMKj4jMWDNfW4fpoN1vLd+f25T1CFM/EpyPzVDjY6iZI7BuXfnmnuHSnZP9ATYQ==","signatures":[{"sig":"MEYCIQCEfj+lhxVbdQxlBQHV+yGXqN9zB5WxcOWZybYX7TuCvwIhANu8aMjbEjtlhSQyqP3YubwzKibgbp4jPz9oaNZez1Mn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr2Q/9HdzdrpPn9jFcJeg0LuZZHxubCHWNIwnRam5C4tKZ8OvhxpPK\r\nGZHH9bNb3LoM9pXIOHYsU7dVJGt4JopFzwh5CJHnnGyfeoh7ue906+cqHrP+\r\nvbML7UyQ73hIo/msN+/Udrvp57u5O0pHN3EFYaPoq12n8Vb8NnrM14pbfu5D\r\n1aUFGRfJ0AilW5db+2vdj8KuuYeHZ0T7R6fnzmMTyfYwQ002FsGlU35ZKq6D\r\nxwdt09vGrXAv54lmnupI83U1QA41M6KfZLU3h7UM7EJWxV2NMuQUOtbMs/bi\r\nlmZLsRk/GUntzGYWCSMhsV0bZ2GZzLCAn1/ikkK+y8quXDFqdVZrNcHjnYqC\r\ngLm5p6pduYl6PuNl68eMj/OaBOSQf6ceTMP6cDDj8RDMt+XPNEbY66b0/sp3\r\nf1SzaaN70zokCbzis6OHz8Eqf0dofAlBxrLyiAsLIsexNBhBKb5ocHmPkhIp\r\nqx40jX+XIyxadk/x6u9H39lGEp+VkBHo3fjTkS/U2baj8Vms8UD4yhdZbSbl\r\nNduyQ+RE4z25eFdGUqrJ8rEaPWnTGIMSzaABFrIus0BualAx1ZqiFC9z5EDB\r\nLjx1X5c5XMsx954xyjqcIVoZCa83MFHuw+mYBWgSlGiBxetpNWmTEjiROcFE\r\nrktySsMDjul/UaUfu6Dsqrz/qTFHWuNAVPo=\r\n=ypsa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/density":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/tab-scroller":"15.0.0-canary.faa28c1c5.0","@material/tab-indicator":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.faa28c1c5.0_1668184669687_0.36940083339940677","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a868c7866.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"646501434822c05d4f74a2749b01510fff2331f7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a868c7866.0.tgz","fileCount":37,"integrity":"sha512-Ni5pYYge/xRvieZmIC0IFYi1dXD5KoYptdkLaEYPcZ2XXf6I+D6S5DI/0m0oqY32JCFD5OLYTcOcUa+a5JH1Xg==","signatures":[{"sig":"MEUCIDqqwSWA0LJ55GNqn1Aw4PxYmOewwzwgTS1N9skaFYGYAiEAyO280+GN9ArJmwqSelauGyAj8YsP9W9oNzgpDiJ8u/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnqGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSahAAjbY92TLjHuYnvquKxdl7yGNsiuqsJDRoBvyMPCZdDPFNtq3C\r\nFcdWrrYSAcForHW4+kTdFJIdbKRlmr5J1nfiGo0EkkQAdvu+zxSogU72njCZ\r\nz5U0RyH2hdpPLKSvarbcTfdBrACU/d2ltzgvVOtv/CihDvvw1+235N1gCf8y\r\nNtK/EzVHiuDOwZGLZQCwQWYf3Ij79yZJMkkRQXLqy46Yo72nTTioIM8C3WJj\r\nNPw8aN+SE/ZZmLEKiUUii5SHd7n38Ex4IwoUKT3YNeT/roe4aSxyl+nQBA4E\r\nLj9rTC6BYZ0+gdSLEy1mxltPYbgVZeFz5TB4V+/opOZTDDE6zn1typGb02JW\r\n13PI/Hsb+nMlAKNquTshp7HjyXxDByymV4Xkq3uBZe7JUEwFwzInLymR6cYi\r\n76NfuY8Y6Em8V+U++E/QnUuB7B6lMSWVq/uKVPjGvyt1oRyclsMM7tENfqA4\r\njltbsuBO8DBjCG0F54Z4pZHrUQGD7UqKMlLO0IWjzV5WVqHqCMzJwZorlQ/M\r\n1ZANvIhQge0vdJObeBh7IHphh4YGt/S2+BR3f2ZVdh7tO+oFFiZPnHdIR92/\r\nph7OtLz+YnSN+BDl1ZUya53OjIJYpJf43EMw6u77DmaeL1X8OEdvKyN7Wmwk\r\njsCXH2lHtp8djt50lmFYsiOzpTZXXcV+ZFA=\r\n=Wi0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/density":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/tab-scroller":"15.0.0-canary.a868c7866.0","@material/tab-indicator":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a868c7866.0_1668184710214_0.6430231541443414","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/tab-bar","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.602fe8efa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9ed2552779ba87e4fff88c5370f7c5e3750af64","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.602fe8efa.0.tgz","fileCount":37,"integrity":"sha512-wNWqDxpWYfA6oC0DVuKk7xqnv5w66OCwPBcSf057cwpvrPnRktPiNq6ZZ+XLejimUR08sevifoiHxz92pDVoqQ==","signatures":[{"sig":"MEUCIQDPrgmOTp47+HB2FzMfX3uaib/XICpzKNSKy0lRp2CIVQIgf+qXW3RE/EkGQXHREwshCJgls8xBNHRDzM3ahpVH4yU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboLIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnKA/9G7VvO3wRveXcDMBFT5wlxxR5p1UyQO4DOxhNsAFrxADxCEu9\r\nZeVUWRL7Gy8W+Xq/sFdAMJu/NhlVjeKHb/jlQAMJla0HXoX40BOByokM8KTg\r\nGIpbeNmFyoTJQwfMOND/lei1YvwwgbR8GaJUJ9SIHJkk81/n3faJQ8vbWosQ\r\n1vY76bBgGpqc/GyQ/mq9LMUYQUrGrsIg+jy1K+X+3StV/IPsFCy0dpu13dzV\r\nFOsR5rgBCOset9VGI7qSxI1/R3pvywx2oqHKB4LkveEc4wWLjrFduPQuVyaQ\r\nlSYHZ65A420u5K912yA7B1+QqpnhCgZMcpSKMaLXNMzoKv5t8LCfndhW0OP7\r\nWzv60TgcWc2w14ecUSzUJooJD7JLTwQhvY5IZ8vFESWtD8wrSHpBlU3uwgiD\r\n2YzOp1X9LM4I92QXHCaMMvPIKtCafryJau+3TYfn9vCYD1Oa6lsqlHzKSJyc\r\nhSSDP+agjggDDZ8hMhOojSfpcskjT+GNNpSDVAVjtW3J6ZlrkhwDLGh9cgcS\r\nTnUVjUkIJpJNqbUvBmVGeu+8RlHvvQBRLTqtqIQBybvEjlLXdwEEcM/qtg3j\r\nO37aU86E+PCwDBj/gzD4JuSmPwSaYnsJdyJjeMoMBbhW9Lf7KPXcC8cj8Bt7\r\nlRnxKQPFQFV6oac3YTmPpwL/pQLNXyDviNs=\r\n=NIsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/density":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/tab-scroller":"15.0.0-canary.602fe8efa.0","@material/tab-indicator":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.602fe8efa.0_1668186824720_0.9645336679309395","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/tab-bar","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.558c2be62.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec6095dcef0c3ba9dad8efc3c8c5f9c69b12d49b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.558c2be62.0.tgz","fileCount":37,"integrity":"sha512-LTZ1HAigh2E7Pv170dVeOKZnvb1h+cer/mwPMxVkF3OeZId4hbtyOoB5lMOuXrB67zB+c8WSKYTog+JbDIvW1g==","signatures":[{"sig":"MEUCIQDdN3opbyXGB4LGIIOa0eS4mGs0CxfWGvvhStDfVozBGAIgQBcv5NLx7ixhH1oGK/m3E8sIsDxcz26GseaeFt0tSvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYYw/7BaSY0ryfWub2/oghnPQ0ZkC8ZyM8zpnqW5MRP7Rie0tOfQqI\r\n/gELhG4oOdR/jownDYtyPssikI07G2xbThELQv9d6WUMJgoOutO3i7LRP1Kd\r\ngRQ3kNTMjaGZij021VBwSHMZoBRx0K/5VxRzvzWauygFjYYldb2o4rzKulhp\r\n+uRzBPmppihiR2ALItOwCPEC/oNhwnY3sKzcOQompTdAI1PgyBgtaFzZArT4\r\nxBXLPLL199rsgwCLIfguQawVruh3w/zUsDe8uhNC7BKCEFn4O7dEZgzLLy5p\r\nx1sE0Qcbui/PWMYaiCfBAgUnc781jDTz1vC2hK7qNfa90GURqAICaH+dUIkS\r\nBeBIWptBl7biTv0q5JQxMWYtbAJ4RkveCK2M16oTRNdnq/2qtR53V+Yf6fn/\r\n+SO5NKegj8JnWVr226QtAjI1FHkGXkNSHwrvLtcfUSfcBJ44LXsbGVR9Aduy\r\nLp55X3JCKIu+AsM7Jd88uuOf8dJU7rVHZuwZUsN+k1w5S32qHauIeegEs6DJ\r\nA2lImBFkPpxoybLkBK43bVT8zmX5ZHx0JYlHmOxuqFWXJMQvdKys2g6AXlrz\r\ngMPHTkl06FCvggJ6BdNCO/bjtszZeXd15SiXE3XCr/pkC5x2S6dcjJqRjEb2\r\nBwgLpQSWOGwHhdXI63KRC5WhB54mmkUNJsU=\r\n=Ova5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/density":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/tab-scroller":"15.0.0-canary.558c2be62.0","@material/tab-indicator":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.558c2be62.0_1668206831909_0.8410102588305863","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b5c13a7a8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5efe7c26d6932181c5cf3d85a3731ed5b8cd7222","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":37,"integrity":"sha512-NRie7BZ+EYTJ+LGnBCdEdUgq+gOf1TnEjHYUeFms2417DRom2PaiIbikDFGJTbh3uY5COqA1/DJE0i3m7aFP0Q==","signatures":[{"sig":"MEQCH3p65pk9yrArUsPZ2Ba2Z+5ao3yYz1f6AJyyf9oJgQcCIQDyBgtXnUiSqbe8Kk06SbzIOzGYmiVtj/9ek3vkHo6fFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmYfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPZg/+LCALOS+LniqY13jrePZqr8MWmp7KZVox8ubOeuRMqlcI94bf\r\n8VZZ2WnFdf/QnSEPHTyMVIXwvZ+r3hL2dV48W02sF2G09rOs2/T80kD4LTEN\r\n+NnuCZTZOeo5muuckCUlpeJKKh2mTH8oZGvKOCBRsaQButXi6h7iiiQ4lQgv\r\ntebnr7J2QktWD/7PamvttGx3VmCzZf7sqvjczROJY9BgCxh73ma0vgvnISyt\r\n5xJNGLQt6/KE5GQ3SCp9Md9Sk6RkoebBzUdmfpSVe2x9+tE77SxuEz21BuL4\r\no+5v1QnP2SKDuPug77QXLeLhY9AMrNzJpUF1wCghoNqJzcjETYKRy5xCB3yn\r\n+jgbZvjQxb+GOwM0kUrSJrSlaLtv1Wn73Y5lJKG9Ok86b0vycm1a9DxOq6sN\r\nsWPM9FkuLq5UdTuXrfXB9ZGnI8LPUvCnbGBflMqEOr11+xCv1HThXiGf2vpZ\r\nC5qoDall3vYKqZ2QLqSDanBq+Z03AJcEWY0w6D69HokNI7vcUxCkSm1k1lGI\r\nIs6IpF4IeRSEp98cNKKh+BxNnID/pJ0PZmWNTmpczJHl2CJ2zJCGmUYxMHQj\r\nAiPgkID7PIWpjEi8da50TOF8OQsu8cgVbO8arpC5/RKOK3KPa00QJZd5Ai5l\r\nqx8Fh7Fe0BdNJhVXAAfv49DKXk0dN7MGtbk=\r\n=vNP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/density":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/tab-scroller":"15.0.0-canary.b5c13a7a8.0","@material/tab-indicator":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b5c13a7a8.0_1668441631259_0.19739026938821236","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a6e1c0702.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e3e445fb8a035ce4d3cc6e354a5f7adddea9c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a6e1c0702.0.tgz","fileCount":37,"integrity":"sha512-0OnUpm3axA08ZSYQkJnPJcBluInemdG/34iwiQCdi6S9yOdr/UQYneC1UFZD8Q8bfdwgWd6jFFabDObgFLU0YA==","signatures":[{"sig":"MEYCIQDq+9WZqV42f6zxWMCl2zaV6jnR9VD2KUuSFphDJVJWmgIhAMoPG4OE16KSHV7afUu2Qh+BgZFaQYbpz6f082YV/RNz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnrZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqysA//T9do5MHKepG9TMcAkPtLc3HDasiTVEbvv5gy9X/pbulioddd\r\nDWPSHVV5xJB7QOKRj8hdZG4+zD0kTPWHZCBjNcnOWCqr6nXSbjk3FyDBmtww\r\nfQlD4v9nEAahwDJJETrB4U2rHLnxapmaULIFVsEOWPpba4Oyc0d8vTnLW6DE\r\n4lmcb+h+pniODJPQ68WEHkZ+sdqSh5Pf0GI/pM/WPYEWrKTHLOVz9ACi2ati\r\noLnI+7Pakc560KhMZGRe9eDvUYtyVHg46gmL4lJP8lJk3ifc06ziVkPr3Vn2\r\n8HXgRv3ZNAwgy8TvEhA6vzxqCPMq4/iL8h+bBbtgIbKpgMCNruNF/HGQHW4K\r\nqLF+xf0M7z3kcTN71X6s+NJuP04iN7lC1ziYNo1a33MEvxAomTmX8jKYsIMv\r\nYPWWWGGLKEg9vOwwIA9nLiX0ZR4Qk81fumkZCvhOCnfah0EJ1ianJ3v7Td6X\r\n8E6fcnIaxPkHQksXZ60b99uIySkbZ2CGdV2MI1P9hbMCvKoXaiKEP6whylaY\r\nyjJSCG1ggb286EeuS6UrZUXVceiGgf2K388fOQMAq9azc67pUfOTgLHfkBaD\r\nm1AGGwApppacpTFW5pzEDXnjR487prE0lpvlUtmMW7SisTHWZb3RUlt7TUqQ\r\nNHlEJOoLl/MLkL9/k2j6gBBF2zMcYLtXkWo=\r\n=Pg0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/density":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/tab-scroller":"15.0.0-canary.a6e1c0702.0","@material/tab-indicator":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a6e1c0702.0_1668446936906_0.7536560151189078","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b6f8a06de.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0414cf57a59a3e5e3498d7ef57ca39ef9ec4e964","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b6f8a06de.0.tgz","fileCount":37,"integrity":"sha512-ac7+0VFkNEP3cOVlkqxAydi4FPboHVWFcPWvOlnKf4WAFuNkMdFGx9Zshg2xIodthS/mls6qD1OY4CkUzMnd/w==","signatures":[{"sig":"MEYCIQDEht2hyQePt3dpK4QzcTLjpuk70IPv+t42IJr+aCmlMwIhAJvN8KdOwKcF7/NPXYDsJztnGliHNV5cDWhhRKoQolko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmgBAAn7NKYNyxwJ722MUUGX8vMm8Z3NSYg78Zeyq8CPnSoxko7PDv\r\nL589yiKh9JUvJV594VTCabpdRE4MXIZ7tAyaDkPTwm/EgXeDGnXVERMj8cOi\r\nOUIA1oqqmLAYrPys9NlC0D3ALL9SfCa56hy/ACREDz0STsRjYbsvpIgcp58w\r\nFdyYKGWG2APUS1o7r3hLWbOl9xneXeC70eh4Z4HDH2QU6TdK2qec+H5MZL2o\r\nkVuABr3xUO+VxlJaW9XaMp0zyfWCxYsr3xgzlqcbd9H+OQG4jktwdblvSQTf\r\nlCNrgis2cl+rOa3WhLmLeJuP6VsOnE/xSEky8a9MOe5hrYiNk1ewYOoVKwzZ\r\nbLkWyXvA6dvRrDlsquHLpqg6Zz8BxIfNFCYlq8Zg/z/+0jPmJ7x3Ye0NyPGU\r\nMwr9xorlKoh9O7Ah/yCsrjp4S9U95s9L/mKdeCbEEMWDpBxZodAGDdYxc9iT\r\nGcjwfqZXHFmq3O3GRu0ROsqd0vUSP33gapsPJ1DgWDFui76x+of/s/DX71r/\r\nT7xCMiUM/NB0D6u2MMjv6c1jrfAp58Wr2U701ikocueGZaM2pPLzRqihviqg\r\nb8X9ZxxKsDVIqHZs5eVvyb5qGtHjPWNeqw76Tyzne4ulVyiADSWL7ZoXVLCp\r\noKFc4jn3IJr4eR7o+Peus0LcUXEP6gOOfyY=\r\n=RULT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/density":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/tab-scroller":"15.0.0-canary.b6f8a06de.0","@material/tab-indicator":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b6f8a06de.0_1668504619345_0.10766103443136466","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0163f3ba5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6483914a90b2ef5a203a55ef10b36df306a8a18","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0163f3ba5.0.tgz","fileCount":37,"integrity":"sha512-G8bwEFywpTsD23hQXooz04WwyDBnmc0jiaHf3bpaA5MiUqHNXDtBz5rCQXAiRthAqRhiluHAxtO0Cvedv5beJg==","signatures":[{"sig":"MEQCIDlyjNnB2zcuF0F1bWoL5aLKuz9jtNQKCkS/uMaGKwbdAiAXKoVfUZOR1I5C82Flud2kdsKs5jSv4IvyFBLc2m0eAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9SaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqCg/+I4hY/0vjGerJy70+KCm/TP/n0sCYaJVW6XBQtZvNECjguH5+\r\nud+vaBI3A1xKmBNO+/cD6AJRh9sai/pe+pEV8znr6SHMOpKPCFjYwtQ1tYuU\r\neMi6WFchah7aIx4IM+DTT/4Dqq4c1zubRcZbxhx3z5EjjJQ0LPGN3EafE/LG\r\naPQKmyGvEHzMhk+g89MpKivd4UNxwKDlJ952zWDMWa8VBqH92nytxUOfx1nP\r\nHvE0R78TJVmGiOs0H5VObMw350eAzHRyjSRI86894eFzwJCVt9S3S7wmUpET\r\nJw6bijV7DBAQBvm0EpbiMhk8wr2/9KBVGI8oV65GrzvT5mWH10iiE0IYdE+h\r\nlrqJrg7hvR1fpDbvK1i/0qcHAn7/MmFb5j9Q06hMKll5ThO0pJcTp2NmD/YK\r\n1zWkB9u8/jSeY1qEvvWyNSTvdIUb2fsDSTJ8yxbGS5cuHVKcM3B2vArmlJko\r\nbgbK2eVIvAmf9+KggrwVn8UIevNBtcJ8eZ289z+6VVCwcqGeMb1IdVshJrFp\r\ngVBo80gG34tlJEMU9RF7VcEdvs9yu3HgMSlXWGIB0d1WImtrpyPwVj9Aw5gi\r\njj8NEQt9E62mFOaGrQIXUBCku256txU/dIez1tAcYM3w+RoEAzCxAAi6hq68\r\nV4KkaxW5STItgBC+0ysCChPkrqBupWk3moc=\r\n=TVCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/density":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/tab-scroller":"15.0.0-canary.0163f3ba5.0","@material/tab-indicator":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0163f3ba5.0_1668535450198_0.19227429053977696","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/tab-bar","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.66c5cbb94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17129de9e331c0e1479207e2385a3d08c1cae993","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.66c5cbb94.0.tgz","fileCount":37,"integrity":"sha512-9lO6Er3RxS+sR2/Qqr9JcpO9ZuMfUJWghXn6Art472YOSDpBajODaGWxLn9nOsF8gY7b7JCyPLyJtOu1OMns3g==","signatures":[{"sig":"MEUCIGUR8ElT5UjBzg1ARQXbV3ZaeUmqw+DdakazyuAcifuEAiEAtA1D6Iy3Dk0DiSN1gEYQP7Kz9SGjJsoVT7JHNwoHUjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+k1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+KA/8DEH+lImgxw6OFH6tPjZYUSuyRnOs2c+SPhrmQYVO3mXflkYQ\r\nGOGhiww4s4dvDDgwaC1Z61uxJHVsN6Qx5KR5n5TSUEGf0D0FQt5Z4/dXlxT4\r\nQsQnhW4Oo3b35W2O88RGCLCsTjFzoXpfTUvheFWhNh0lakU5J6/heMdfqwR/\r\nTJa6SUIX+c1G6V1DJ2ewDgtCHvv05PI6eIDzkxZ5u5rSl1rcP7t2wPN8JFLC\r\nn85U3KrQ08QVx4JViH7/6JsiwCKokWdRARdtZ5ieYjRZlylf7cqFZEUsjkYG\r\nHkj0HKOBUBorJfndT+op1I/iyEnFiLTwgzBMa4aQODdydlyw4zuJxkq+IGBE\r\nJhfChZuJJLCot7SqIwb8E2ov2te2m1MM5NR4ryyuWeK+dt0s3uJbb7+RrMVu\r\nuHtH3SPBjiL0PSEp03xWDqa2T3VpwsLvq/BYo5OeQgGCP4eBBw2u6Nf2jquF\r\n3j/WwPjAi4dmfcuVv0+FGGj1mc+JvUBrQtSbicoXAw9sfMePXAIN4v2OfeCl\r\nmwkuphkqStiMuyyxrySZTBjQmjtNmnGuTHKyxsdb8jxRdoL829uRgyZrBqYs\r\nLKq8lZGaqOQTBtyhI1g/3YJdV8jYx8SAYwfcoQd2y+VcUCH3ekWv4QzlMeAT\r\nAVBTNgIUnTomiJ/lo0odVmwT4BAe12z0hFk=\r\n=QStF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/density":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/tab-scroller":"15.0.0-canary.66c5cbb94.0","@material/tab-indicator":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.66c5cbb94.0_1668540724791_0.06266727213620182","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b01136063.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a26a82298d273ddc2771c0fa75f9b8b3fd08950b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b01136063.0.tgz","fileCount":37,"integrity":"sha512-39SFaB/3ziDfwPTmDC1pJHOqE9nmAfNlQxY54NH/G91qm9nkH+K3/KtlOk7RMefeQO+Z+EfhMaS16toU/Xnocw==","signatures":[{"sig":"MEYCIQDlHLGneJYmwrD2rzEKRhG3BkBg6XGgC+p2dhOeuQbUfAIhAMGDChNMdgpT1MtsdUFZLbq3xTVETbLrQNjXNpWNpvH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCwzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOuw/+PYE8yz1yMM+D7f74U7WyqAcG8QBz9JMtePWcbbaLdMKU/cwg\r\nhu24oLWDPrqOpDxVm0zLbzw/Tl2uM2QsuUXaAM7ZeCNUR4lRlcn15pQJ8bKv\r\nhr9aE8vqaPcZiEdXyQgDJe+22rneU6eQfIzKfbJP/qpFHbu/6fXWVlA6Ul2y\r\nWWA/xOCVH65ws7EENcunSwZ9q7XPZn/pcQ4C2fAl83iF3MI92Hql7SjTup7E\r\n3/VuSP7/wrEVjYEJfNofXb9Q9HAFO68hDrKjm6aUotELlscXJ3nuDRHFVEor\r\ndLdnEid6faiuXk9fBu0jvnNk5P8UBR9DwuQd2RLdAW6Z7akPsDUkC0LQmOOt\r\nCI3Da61Joq6mPIi/FP4mKtH3VSZagfUzi6bb0G6A+pc/0mpgWMTo6xvDmglN\r\nwH1C08idE+3H2mqZbP/EX5ZmO22Ga+9yyUNTDC+8/ZG8J4TQocRyHoYMAZNs\r\n4grIj49hOxXiBXvOUjsU3mzolO7I8zOzFenLQbHO5tMmLcq57ydb6bH5L5fR\r\nJa+rJ7bzrFtuchg5BV3E2GEtFkyMiOivE7hOP4CWg6Q+oIs5WAn4ocGLOX9T\r\nJR9efFHgVDSvIf/YRPnAIMvTb/nHurQ9UimEdMiDbCzOyWXhBwzKPwdX85PH\r\nERADZ4qaTVWeaoBe5FYE1VN6ZXmgBFNs8a0=\r\n=QsTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/density":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/tab-scroller":"15.0.0-canary.b01136063.0","@material/tab-indicator":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b01136063.0_1668557875489_0.7787960483121248","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.01da0cabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60257840185f12e4d9ad687984baae6b54f41863","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.01da0cabb.0.tgz","fileCount":37,"integrity":"sha512-JS57QR565Yo4CfHgojNpj7fnIA33Iw4K0NYEKARglAhFfJxIEauv68rncyAFjIqSs5hN8NOgHiBWTwSUCm7SOw==","signatures":[{"sig":"MEQCIEiRbaXZp/gF3Kj3JkKDArimwrbbhxL31PC1PrLV3qoyAiAlyoHyMgA8CMxGwKhq8+wEqbF+9nSFp/KuJZKYdvfvLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmJA//Q70koCzkjmqBsGxeru+rW5Aec6mTt4G3vS4kOTc83KYIKpUP\r\nHdjfPVotyhedrHUkZAZWBR6mZZlDPOKUaLQRn/1myLIJT4dqCaN/VU6x/dei\r\nC+sOJc9H9eYDPkRvQ1rsZo4vTxB+O9gTRy0QskJmVZe/1EqE4z+/5fOczUXh\r\nYpBv5HcUYciWWuMnfJq8jldcRI1ocvpgx+D3oU98D8tExI814QZvFZo/gIZL\r\n5UowlLTbduJFWQyp1OmILoxQwCN8UueTy7j1JMIHOkSQYhkBwLx6Ls9DpcH0\r\nldyRmHU8FFs35QfwloM3+Acix0PEF+VR8nHn5f3+r47bnxij1C0pJwQ5+hau\r\nLoVwLPfmYookai2diTV5CzUudtLrmOv2k4W31MyVKeDT/JWmxwk/olq1ZT4W\r\nRMkiNN1QYN7m7g/7OLtCLcTKkSCPeXGO98fUta/ya9PS4zmQIF2yBKNNynqh\r\nOBPWm1eCBskFFUsceeDxGu5G9b/faJAL3uIj9ZYDW8JFvFnkCyXTVfQbBiD5\r\nLRmKV8TmILJzl0jzx7VX1e9PXmlXUPEpUsQhYIAWdl7qEdK9mTWYzAexE9eT\r\niAMFGA6yCnCO9k1KwqguBempT8nqa5xDT+h0jLVIjBaAjme2WrXC1o44JpAo\r\n5Hx+o1UPi+MIgtgno1IbNaToTkkBdAf9Yuk=\r\n=OA5w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/density":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/tab-scroller":"15.0.0-canary.01da0cabb.0","@material/tab-indicator":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.01da0cabb.0_1668590116991_0.17492427495924923","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4ac393164.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db72c0ea5cf94150ccf47867f07bc0f79386e171","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4ac393164.0.tgz","fileCount":37,"integrity":"sha512-6GygeQKRu56L/V508EtIB7Wea/yhV7FB6WTyc4hoYSeBdd3n55ytDju0M8dy2rWUwJ8pGSFdrluR9/MlZ/8KXA==","signatures":[{"sig":"MEUCIEBEsjviWOC8GpH4SF8iFsgbwig3kX1ivqZtg9WMD7PiAiEAhKjwC7kn6xMXJrk47Emy9CdZhsiOPc8Ce26CzIt+T5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotuA//VuwiA0256t/LtrTAJfTbgObCwlQ8XXQV4A1QMoFa5zfeTFJI\r\nXdTDGthHXgKszHzmL5Xzvx2s3LTK+JGtZ1aARlghSzObp+eQ1OxqMamz9qIR\r\nmx6bTyA8C29BA5j2fSB4uidw57B5VKe8f8xXs/hoqXvGfNutlW7VRw/9Tg+D\r\n5bOdyYBtPAia4vSZfyoq3vT01UxpK04GFuFhT4OQSXfxcnc6iJyova3uFgwy\r\nnrZBu6mD57CWoX1oeYDfA3k34VSstloaEAzwnA4juOYkpzo7DP9ttbwJqQCh\r\nv5Si6kwRHigR2J8JCWhWwvn5qzx1hqPQeLzm6CIUSgik84i33+dmM70k69TR\r\nzFfFngsLwW8B4ylznNUf/M7t8gS72F0k6kCYNg1PP12lIYr5svcKwlrgK4+y\r\nH+lAzIAGurSV1zQdfBQ7WYF22Hxoe75q2A71dfcjrKVbM97rbSpKKs98BtX8\r\nnoX+GLjcqQBu2JrFnq4d2yPrOOsC0dqiYmmWTgdWSouYy80v2Az0uXBqgWuF\r\nOSt9wrb4819SzqJlvhXFEIJNvoMO3a8nscZyDGFsYe97YN421ucowpUKLY+Q\r\nDamquNr9LkyD1iEygIfosSImACPlOccTslLRUE6p2cRaAHowjwgRRO1G8KlO\r\nCwWq/qUAxnBfM4iTAN1WDXqg5Cu2G3U4IBo=\r\n=YMP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/density":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/tab-scroller":"15.0.0-canary.4ac393164.0","@material/tab-indicator":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4ac393164.0_1668615459726_0.05057318177027326","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6048fb563.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22dd77be47a7638050866e203e6f575b4d6af4b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6048fb563.0.tgz","fileCount":37,"integrity":"sha512-rQ3ZIUlW5G5eGJcVtICWIBA3intjz8tCqcdlmw9o8xmIkF4eWybWgfONXElp5cq5Ptmt5GRQ8N+0Rul7KNmwQg==","signatures":[{"sig":"MEUCIQDSvwS6rJXaQG5qkicsDM0bnbSJMuRbitKL1VFGQJunigIgPcPgqYJUsCQLtKtaVu3Z/fffCFU4oG524LfVjPWc5cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ2pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeTw//UJ/6xMJS74p76Onmg89MGf4d05PXgld4YtEB28qq/OBdsmJt\r\nlNyz9S1JIH8eenvSpbqCrSBwvn5TROfLhqRKx/whPchqH4jBLNboK0FEqzUQ\r\nnUU4Rq5dJR8jVvevC7OqebeAOVAXaNzj889JjY7tuJqYsApoAySd/mvjMwMC\r\nneOic7Flo9yLksCgY+hqPMtFaOWhFi/WKUKkyBozfg9US+tt2kVS9rOVzUTt\r\nVFncGosN9omE91+2M4ysbMa+zgJpVz5oAmdjtrQJXkkAubCgEt2eu+rJT1U1\r\nKXwS0m2k9QeSTBtRWYGdsDR+zetXr7CvPbSh+uzPCjrszE1a2XEzdUe8b1WX\r\nCxUNkNf9pVmRUXne2mFHhlPipl4V/6nkD6jJAWXqSYtAtehkWncp2yQU4ZmT\r\n/M2pLNK4xFxKS4JmxVyISDRZ81rr0gcyI+JSJOZqtmZ4jYTqyaB165z+tyEC\r\nDETHzp3YcoNUFoKK4WS1d8Rcx4Em5ckExNsl1BKbRErrdsHV3WMCjxtxlTG7\r\nr2QpmMFXwfZvLmiUVUtrmbiL0Ik6YaFHb59hySnCCS976kH4pprEJliDuAtj\r\nmSpG8Hiy3zTmBc9TXIJqJm80TMJcv2YIGnQAif2c6NcPk7QZnmKLKWIAOg3J\r\nMTZ4l9B1MgPOXac66xSm4Dj0meUcBeZHnsU=\r\n=WhTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/density":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/tab-scroller":"15.0.0-canary.6048fb563.0","@material/tab-indicator":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6048fb563.0_1668615593206_0.27783457844944603","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f7f56fff7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9d1eb4265dbae039d53cb1162c751514985c83e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f7f56fff7.0.tgz","fileCount":37,"integrity":"sha512-q15nQmms7VU4cabGwqS8ulLLxtyof/WdKu9ZUH6I7631K9xTmofnl7v2F8zNKZJgIWPL7Zn2Vap6Xr1FjTUBUA==","signatures":[{"sig":"MEYCIQC5qHakMX37m98za//eKUN7W+POF0rgu4+BA6SCw2eH/gIhAIn39LCIP9EC9zcVYvDyQruAAOzBtc+yWq1fne35bLZM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUDHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3vQ/8CmuDn4FbAj4co9HgDsWFsOTkk6xG1wJHD5cyvFsJ9/7nZK0k\r\nZvgld044qfRvYmrPDCmBh4K5sK+PzLk7Y6VeL/w6Z5dJp7z7T6kZpJmI/aqH\r\nIAIIMEx2fHCKkLh2QvttgqLe6NByBr5qk21HkEki5uNq28hE3dp0CKkM/7iv\r\nFotKE6q+4Wn0oQqSLIJIpMK0ZuPp7ZuAWM3KgXz+/yUZFWHfkYMbH4UsyFHy\r\nNvcne+2hK7PFscc/ecHs/hA11a18gfMqkSlnH8DJjJsYPSogR1vTbHthaw5w\r\np6CuSILO7Qyd3gDZg84a185j5SHZpLhpT2XOjha3SqQbTDzsJSZV5aLAYx9Y\r\n1IOszYnplEeE8gPle0SJ294Yccwg1IfSNqW9QZKyDmwz+plgp/MlhJgtQipC\r\nZe10wL80wIX+JwuV/HsHfWluL8fZVh5sR2Df7jwLc5iBjXsZKxyq8pVmdort\r\n8zrESsivPBBO8Nmzusfra2eYoDD0hKVGTHuFqZtL+bMU+JMdryE4LRpdEQgj\r\nWt4Z7dVU8JOT6nzWBzuLnVFuIp2jR8X8VJ2Zt7YHsWeSB7+BGebOcEHaLXEG\r\nNU4sacM8R7Kj+XLPiXNHyJgS5SErGj4p5J4BpzLWR9qMUIXRf3kGyG+DPMzQ\r\n2djSPSOyoqjR3EihkxyoSUZP1YjFipylfCc=\r\n=bFLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/density":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/tab-scroller":"15.0.0-canary.f7f56fff7.0","@material/tab-indicator":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f7f56fff7.0_1668628679007_0.17769108394632038","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7c73f6134.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1abef2021b022a71b5d3f29bde5019f8bd107ea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7c73f6134.0.tgz","fileCount":37,"integrity":"sha512-YdCDvvA1/ilkblrqq74iBYfLT/CjdvWcV84v1qZAkcxBnrqfKkShfedadximfLEoaS690Iy4nWUV4dfplihy+g==","signatures":[{"sig":"MEYCIQC04knJ57HPQaPyX38ALVnfhoZ1dxiMyfLtqZIZPGYoYgIhAMFqiAVgvZ4Fhgp9sonDv7i7Ocx5sqluE8549w7GqP9Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUHAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzTw/+J3BpE2a0gKOn7M+1u4zwZl+o+tHzsufQtaX2MGeOP4FOTAER\r\nxnncLeshUwQwx+Afu9j+pkpHU53hEvRo/h07J3BbhW7rOvAQTqptJwZyMnjl\r\nW4PKRiXNVxWXfyxOE7MA+6zZ5OVOmh8y/lomc87uZmUcxJv5YAtbSnX+Mh6H\r\n3bjOV76uue6zn6K6ocJmle/VY2t8p/6IZg6pBz6BNr6Wd+Q3Nv7jtobYFkkT\r\njnnLGbd8BpEzd3GHfjbfljErgHs30HzXAXi2Gj1qOoGSAUCmCR7EFeGaFsxO\r\nk3uJZbAL0G8v4bTXUK//bkkSL/1qsn8CveMEvFUwPMoGmGAK5q95ULlD2RuK\r\n0bgQVkEr+Lh7J8Sn54WWcly0Xa8ok6XyXUmsOJFv9MlOTOkJBafc35a5M9Yt\r\n/SfBxMGapY1nJ5MPjQ98zxbrF/WYvMKr00E5b0YTJq2OfO3xopZcHbfvvndJ\r\nIeGLBAY0I4ajnRBoIwHo3LHyifkyMZfHWOGWgZJ6dtdGvlqvLATDN1KsW3X9\r\n3NOzk4H/dddDpSH+1gt1Dh44pgYe9WNRYrbuArX8f0Ui/TgvZgegeaV6Vv+t\r\nkOejfgcDcKFcuO8BiRriH9/SfFmHOqk/lzxxTkcnqjZ7+Fm2iXzbVgCLZnNb\r\nAqH02faMUTlnHWw2QSfL7GmnDdg7ZC9wNPU=\r\n=KDpK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/density":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/tab-scroller":"15.0.0-canary.7c73f6134.0","@material/tab-indicator":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7c73f6134.0_1668628928053_0.42417384945650327","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f1e037150.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617c34e8db9df6c0c0b1d38a3cf4ca059f9724c3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f1e037150.0.tgz","fileCount":37,"integrity":"sha512-kLyP0t7CZcj4wczujV9JkiR1S4YTB7ctzwgc7Li8vbd8XyR0eix9ue+EBcrVwUG8nY0riASoYrSw/kuyoShs7w==","signatures":[{"sig":"MEUCIQDFycCT8U+70T6dW7CdcBWe9MzEuS9vI0fg+uU6tqgfPwIgIa0CP60E4ONgTj/d/IY+zA+WEjB9BNANiETFW6RKQIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUL+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtgA//TR3pC1RUcGgv9qEa/Te2YRT+TXc1S5YIjqtVRis2e0HUW8kh\r\nCaT1j2f1UHsQWXKwrCtcgxhhnTDLic0BbM46To7cr6hR8w2EourK+8mB57Ak\r\ncPp91I1Ql4QYoPcvAoPX8uRkGxkyzmwlmT97tc3srOeNvhR67HDFwqdy5tJM\r\nir/0WmiKPPbWjbnOu5e093i0J+temgFJ3GLs0HRhns8qyHObnGg/4Y1+V6RB\r\nzgxC33ILWzz7vihowZzqIgPskuRtqvjCib7obAUXjv1HWupFdFHJcBmRv/3H\r\nfGVubTLgdB/F1Bc7HC35K3snJiJlgSStAH74WJ3H41qzVAl2rZx69d5VFl9y\r\n8CXVa8kLZmtqzecCPGjAmmVch8RQqsjYTZJH3XQQzKh3Drl54yQJABAvjoSF\r\nP2kRvUpshXLvx2rrskMmj0W6tlJYRrfKcwMqdVCNYwg7bJ72/BDjJReEV2Yd\r\nNUmkLMDsfeOk7Wze4Z9AY5XWMwzB/pfaQDIrmOTnHajNABKNu+3J2xfngMJW\r\n6GB4/o+geXl9/vcEB4VOcB4vAYp/LE34SWpAExSE3Evre2dZFK03NjveO9eY\r\nNzPwW1gAU7227xzoYUb/t9bBPnAo5Q5X2HFhGqhpprufEqqtNwJSamz5Q9no\r\nGvEd9z5tfpvXcS6VykJWVViT8nPqiyPXAuk=\r\n=H7f6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/density":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/tab-scroller":"15.0.0-canary.f1e037150.0","@material/tab-indicator":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f1e037150.0_1668629246162_0.8280316144456141","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/tab-bar","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.40b18d043.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c8148bb3cff5d1ec6f8a7d3e1f27e6e98f303f4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.40b18d043.0.tgz","fileCount":37,"integrity":"sha512-o2LUteNLWNmZurkN7bt1pq0kUCJr6t4IroKESPKd7VLIIa4YSEwxZxZ9dxFruzgdS+OHMrNaeNUIBjZxLDgCQg==","signatures":[{"sig":"MEYCIQDF0dXQRKxo7Xiq6DMMRoAbuDFtjmGAvhUtI7MpIK7OzAIhAJB0u95lIG+bRGCJZjBXvItpRyIUdTld7uJfGBoFRZQI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWudACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRdQ/9GB/zvHzxvxt864SwUG0ze4H3BmqMlm7p5DGihLnVAN8X0NpI\r\nlOnEEGG0Lcz2iP1qEDIUoGf/SxmubndVM8oGIA7u6wYHuyLek60QJDWY/RrN\r\ntPIEnKp5VDX4Eo07YvhCQfLWnwNezEXqy2HCqu8DjUFdTybhUQ00rnLHiADh\r\nksIMs6OxGRHMu5k5ToSVEntZfFjjbfHlQo+cDeuB5jMYG0WUd1ubxHKi+SwS\r\ny+WA56tiBuSxCNzjwge+vG/tj4xdkz2upvnuatnzlrnpuUu74udpAIXk6OK7\r\nesnoolNic0nFaa5rNmTRc1cPCL2JLyRTBEvgNpN+T+LwtaC/+IWoExdb01os\r\n/6XQazAozLQGmM2TmtySKgE9JyiBhHENkGJPkdtgZDTPU/Vc/cG4/RkR6b+J\r\nVt29vXyX9ewENETygoxmjgmGnR83+tg9aNIS2NQbs9TJM4QgGqJJxvLJc4bb\r\nvlbNupqP+z8j8EwNL7CaA51Oa6OGYR6LF80vmmhaSqgxuX7mO7tkVT4GBeYB\r\nUFcOvpxLSQZru6tNDVp/ceMOmHyLLfV8ezaUuzKHBfW5Qsj4/5EGyV7XwZS/\r\nIP1c5fN4NFwRTc79mVh+Kq/wbJbHPAygJ8te/z6u+I417WUKK53aCliYS0F4\r\nR55z4gi9KZ9+r0t3wv2qFoNNkk2Ku9CRr7o=\r\n=4eHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/density":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/tab-scroller":"15.0.0-canary.40b18d043.0","@material/tab-indicator":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.40b18d043.0_1668639645555_0.5268779047427268","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/tab-bar","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.86bde5c06.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e3af4935de7c2412d902cf2a0622bac21861107","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.86bde5c06.0.tgz","fileCount":37,"integrity":"sha512-bg7OhP6ndp87Md+xi+bbZ5n9qb7qaeJ5yx2yNC/aV6Mx5rYoPmUBHResIfJnE10shFoxqINYkPbgR1S6HdngYA==","signatures":[{"sig":"MEQCIDthctMh7jVTNpZpqtjx+DsGw2qQOh99ueY/S3jvZYlNAiAUy7CULouJAN0FoN02xiYXk1F93mhblYmJ/pi1FDNDAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW36ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5bA//f/4CxKbTSJkP3GWhFhkXQdMQ2DeD+rU32GiXlHxlV39MmC59\r\nEYtoyu+KY3NJQaYSxw1jNy7abkVIyPAtsNMucVI6yN4QAqfGL2DknNryiE23\r\nndxNjkUA13fsm0ZY1miWg1BIg92C0R2JZt4pzROgpbYAyn4wS2lCi8ndg1Cq\r\nQ4LXSa2nKMnC/MWxNdct47tclFsOiDcaRZNPULec+xMChroigJQQcWYDcu8d\r\n2YDmtkP0F5lCXj62CZSRw3qfgCwr9SEz8d4yblnNuPyuQoaDtj+ljS1N+w1B\r\nA0qijShp2ma6BVNomn2RCDFIAd6OLXN2xnoBHX8++onRsFcbzevIcmTBYS56\r\nXvWWcpHEITxLNkFw0gZBofw2u1Iy48jWKIxzOex9F7xUhs1amJNjFwOGtAkN\r\nhlHq8ngCHicb4LeouA9ge4mrpKrD6bV+rRzgwI7oYMn/wpuUCpSjNIY2/NNH\r\n4mPKL+nLtsREh9fkMP3r8DPu6+7Gy2drc9QumhrRmevxEgnPtLlQJmBQjUUd\r\n4tpfxwr/owYtH6ibBl9w7N8a/V6a4AG86qfXV/2+VcqKrTkB9CT/QQEh4KBJ\r\nv8IVF4yzcnfW+Lg7jDgBV2bmW/yVYdHXE0oahbmEMB87cJiQt+2HivOoibfv\r\ngh3IZ6DGo5C7dy+OKAf/AxGjvF56YVK4eY0=\r\n=ShNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/density":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/tab-scroller":"15.0.0-canary.86bde5c06.0","@material/tab-indicator":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.86bde5c06.0_1668640250289_0.4893268913164943","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bb7751002.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"710bdc0b0f39085672ca09f255db8323ed89e2f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bb7751002.0.tgz","fileCount":37,"integrity":"sha512-YOEAeo8m7MnhrTZT/axP5S8Bd0U0N9aOE/rQGLeZvP6NcVw2Zk8vwRJBejvgKRgQYyTnmnlWip357c4cZc1h3g==","signatures":[{"sig":"MEQCIFx1d5U/Tq5+18jrmnawqVwQhKMBXADZe532W906a2fsAiADn39eSAbABaMnQW1x9USHgZ9/i8GyYq93FXbmaDQ+Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXn9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMPg/+M79m+aeAKtRbHxflGqTfvN1A99IpHVioV0d7BXeqsJPaLE+g\r\nEz4Un0P7AF48bUyZLRP0GcbGMGucfMSYll3OXze5AkCY9i6dWjatFCf4vC3r\r\nX9FsT28pJNXkpSxcwyMNombMa00PFgAyFwcg4o2ZowEipqelNT7xkAXYtkkV\r\nkH4Qu/6b61KEgnPFlXP2XynSFeBqzuuvdKKj+MAmBwvGxzz4qZJLBVdq0jcg\r\n7DJaolSvGYoy5HnGKGcCO3OTKTu7HpBZaM1+YzzmO27QbPiYToCjxeYruQo+\r\ndHynYs3enUJ3zuUv2IV4VjTWqwi9ep+egYo2gWIsuJyBmbo/PQ0ejJ7opX+Y\r\nP+Xv4Cxk8hpvZgeVP2XH2rDlyNoqzHXxsEMziPYELCKWou2jC/zUGRKz9p/m\r\n3pa2Ei6+7uEMFAv46CfIaXI4Q6ias1GPX+5XzhzzAUiq6X3XdzC9QqKntfdW\r\nS2ZbKJ2uEjFlX7yPJ/KE6X++oV3ehQscQn1kiUchBHuAweU4ElIT0q0KuceQ\r\nztlboKiPAf3fEegZK7fAhDlsrpYcJugAQaeNGc4JHx9CZBjF749+DjfEq3DD\r\ncLuipNio10ggTZkPIiuYKLHSKgt6/TFhpWmV+gSwH85fXPqTPn1FV0rOB2y3\r\nan9ScNBNoTHIoFap0khjTq+JU1A2eJn67oo=\r\n=O6Y5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/density":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/tab-scroller":"15.0.0-canary.bb7751002.0","@material/tab-indicator":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bb7751002.0_1668643324922_0.5180770062574971","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.63aca9af6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7be4498d69abe520fcd48c94c31c494faafaa6c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.63aca9af6.0.tgz","fileCount":37,"integrity":"sha512-x1Ppt9tRpyeueq6PFi6EIZvxciwQYX9hOwCHP954dT7d/3AGvkDryRR8F4IGf0PfHWkLNHfN8rLU+16Z0SbZ6A==","signatures":[{"sig":"MEYCIQCtwT8fDNchq3uRzcRnrS0glcWSdlFA3MvLJndDLmDNogIhAONTfuXZLbCrvCACjP0c0SZJoij+qRbG4hSIHkLT5moM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoV2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeNBAAmua/R9hzMcC5aIdinh3k6FBhW4yEPJgX81kq4BYqc3lICCS4\r\nd4TWWiaN5uQvQxUGBFz4dzMNqAVTVGBU60hfSZtLpNzsQnZSjSmnBUaBfThY\r\nL77GycYFeC4Wj3WEOCGDhLozq0Bx2YYTqijeUfdRLg5W1UuZz5IEHnbTYh2Y\r\nN1hjRfIxPYF9c1szA8PEf48WN0WQaTb0uYKi4MDAQI4qLq6eRfN+T4QLHhc1\r\nOI2kAR1knY1gmxqUlave9zGo9hZD8yjyYFX4CJxuWf5xXHNqEWyM7xhGMm7e\r\n67SipobZJWbk5iG0BxDuMdmlXPG2IZ/mdQcKwAJgWRIdCXzR5sRBhaNeVW6e\r\ntF4qcph9ZPaYXaODEoeJr2BZrIJG0uXaNFxQLmZDweDZO2B6P6IZD3vFIwxJ\r\nG1uHn7jgnT5XJ8VwXkO/G9hyuhcSJSFnyw64PBHhnn+Tdj5syPt5ncIZR/7s\r\n4ievpqyXHC1HfKK1q3KAbTdZBYR0txA8/nUMKHXeTqLjCML+EN9ItUAeOY8U\r\nEGqjpXwx0zqeADV0eHBa1uRQ+ekAFCg/xNzevaqr2az84WQk0Uvx+0zOrci8\r\nro1gnbgi/OgEkHjISVZDrRX7KLP+UGKW3vyQQ2bK6JHU7OUT8PXmNJr946Df\r\nxhg2uJ95Nl/+IGVFH99ujVdO3bXgcOJRf5U=\r\n=dgp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/density":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/tab-scroller":"15.0.0-canary.63aca9af6.0","@material/tab-indicator":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.63aca9af6.0_1668711798769_0.061582138248744034","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.56482dc2e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f66cabcd56d344dae65e1bbe6871108ce6dc628","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.56482dc2e.0.tgz","fileCount":37,"integrity":"sha512-409xdsZCiZVUUNjwmg+eckUt+Co9JpfVvVnt8V4W1ai+P25nUnBLAMpuFYCmKF6B+HRCFF6Y+s/XOFKJmlSyiQ==","signatures":[{"sig":"MEUCIFkFYsPh4wLdOd5nIRrooj2x1ldsXl0WJFJEmSG/fbmJAiEApWQm/VCfRFb9p8kocCMKxI46P9QswGT+XGm9cy+n8xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQiRAAhRuFr6Hl2gMcYL08TRhdsQwZ4ENL5kySOmiwK9C9YL52f52e\r\nZbNmtFunQfJa9vdJofAoIL2hc58c1MhSfmIzh8JYGCiySssNiJ9mYaFTx/fa\r\nBtlhccl2YOUVjf15gi/NP128trRjF4J++i1NK7OCbX3qOcpCtcym5QBYZ5f1\r\nY+ehFmM9GWnhogkkijcoXLqlE6RCSJusFdwStad4h1sYV0QOyxuLKqBFQTM7\r\nBnsTNpdo09T87NLpKFhJ0nQUBwMHpgsDOLnxKJiKUMeYkuo8p5NLK3FTK6Yk\r\nctjRqJ6IZVbMY+ekvShR57w2m/FYzxFiu4JXy8jU/Epv4TwgcFCksBcS27dp\r\nPVhHsuOYYtHHYUAipo9PS+mrv6zDcaWSDOUDy+a+WkpNHjLOgr+hFT0O9IbX\r\n1LbxTXV3q8tZ3eLHve7rFitWTsUrnaxticqbmsDxRNXZKb3nHnwYnVsC1f2n\r\nFIXkb12akSWD/qo3id2EXA+hnv2E8xA0SQVkNU9G0ScvI+BVGVCyDV/deoKA\r\nYR06aMwSyeUKBuy9PaPXc4NJhntj7NTV5iRdVrZ8HLCiA0zL2QORNe+FqgHR\r\n7TTsGrcy4TMMqpTbKp+wYO4AhxWaqSUho4LnGmcKa64eyGMTEpRd+dCzCAqt\r\nrFTPG1p417rmQpmixN+Dok3q9zFAK13n0fk=\r\n=U+mI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/density":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/tab-scroller":"15.0.0-canary.56482dc2e.0","@material/tab-indicator":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.56482dc2e.0_1668722223625_0.2795691000518963","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.953e689f3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb3977b1d879fb7e62374634a104e37d664c100","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.953e689f3.0.tgz","fileCount":37,"integrity":"sha512-fDAf7ASLb8kK2rW5wKintP61PIxpKJWArzBBie58CivxqN7QqTyg7uVtqcHIASvutJbGEYeiFXFxSwn1edzQig==","signatures":[{"sig":"MEYCIQDolwDxxjSODcODXKpqzaalVP3yGho/OmLjAZCckui9rwIhAJV7EAic5psAakEg8LERjeklFWHdjGczUiJu7f+hNV6j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5LQ/8DnJmhq8dSXPJLZTS/NDVJec7vELDYL60xmTs1ckOKk4cOvaS\r\nMeEL/6nGjRpiaxcrAm4KFVE2MuE2dhoMSn4DWnlUJ1Hay1LN1tFhohO3PI8b\r\npk2+Be70yVpLy7iqhZTFFt8JZCeg1xYnczf1+beAJtGCOsUZ9/CB8P0cO6VK\r\nRQ+Ry6ZSiTR7yVuqt1R4SyX4/Htd5/DVz6hSxUycOQm/vPCbSEm6JKQq4S06\r\n2Deng04kwYBns6+z03NzVnKicTVBP1qvicueEmRsZIYGdZViQ9zmmgFCmMhW\r\ndSQKMhGW5ZL/PcBj6FlsP1/0MHbkFeOoc/dAJs31NHyRvJ4VJhkz6eN+W8Hy\r\nVE/ewNhbuNWIzc+igc89mNufVhRtji2QfEOnSf2Qv36Cx+CAr+GCeA7y+asN\r\n+CRlRcuWmw4igxz80Vy9laMtRrnVifq1xxGFN2nwGZXzBpvsZROPyHsz9CjC\r\nMaKYmauu1dwbkOBRn33r0O0j+42ICUw0uy6i/c3DMdnSwcDomGfYSO7xFGwF\r\nXiqjbQQ3fpZXkQs4RFAoX8yn31v+fM/38Rul81jHr0nvbmYAw98BOyryLfR1\r\nWBoIqHjttlC/7FvYRx0KEFbGvZEkVfgwJsMfbBwblUZoOOM5nNx0dXKZUQeR\r\nCz4A/6TPZUZpun7qVg3OHYL2+z7AnMuC2yQ=\r\n=PPZO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/density":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/tab-scroller":"15.0.0-canary.953e689f3.0","@material/tab-indicator":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.953e689f3.0_1668722801266_0.3919856616491637","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b5606a793.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26869ed8b003976ced44d87ef51c6e8a64515750","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b5606a793.0.tgz","fileCount":37,"integrity":"sha512-cgdYHPMlR0xyDnLUYs2NmPXBXzSBW3JETqgVWOAv65IVt5fS/oGKRdfvS9qB5cq+0GWOaaFYNLyJdUSa9V0fXA==","signatures":[{"sig":"MEYCIQDXxDhdzQWtWYm9wqOPXhwAogYd8bUoJt6XRbQEZzzS7wIhAJF75HBfAzCFsoFTO+SCpDH+yHHZMEKjTD/VnBJZmhJn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd10HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmzhAAomT/o3M7fNzS1vK0g1vn7QefqkldMQXlgBg5S4uRwquXggnO\r\ndALPi8SYk9Giqk4WWhRGRZitt7WTYtdg3Yz2ZZvoY1w8Ak9nsM7uRZxKiAiP\r\nVEZgoS3iHtoY29CQYRiDHFtyMCxbaRYmuSHBVgrCkxlmZBg10u8wvvODow4f\r\n6MtU3OoX9YM1PUeU4wxZ9a0aVGT+MUbOsiVfW0DSjWhDvRjwDGzPIkgewisQ\r\nB93DEkRLOSvwWyYxjf36KARLwvp/7SLa2/6r5jvvMmCF4GGH6XOfCY8lqltc\r\nRM6tT9KEElZiYJ+ukGykyOnhXTcKVvR1RJimt1mlTLtzslWS4a8ZMIBdwaHk\r\ngvcbdW5dPD3ombjSCogmMMlEywdNhUL5hVT00EDCwUksMLrEcje0Ii6erS5B\r\n4JpeTuf2oqHdtxzFHzXpOHtaGS40Zb752114P2Ut8EOEJSmO8PJtHqAKCIne\r\na4oWBkypXrMwV6IeNtVmrlK2PWU5a4FYv94UDK5KcY3fQaoL5e3m1WGnswlD\r\n1hnNruvtOT7Tk6xISzq9XE/t+xvuqv52fQGpTHBD8U0H4wa4HRir86wkjyis\r\nYv0DpDLfXxSL/iYHk0hH4Nj8ItYVBKLmKuv3hg40Jip4e1cCD1b2gQKwyhJS\r\nYtEQKRNXlqqFAWn0F754lMIWaHGzJhqRO0g=\r\n=shSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/density":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/tab-scroller":"15.0.0-canary.b5606a793.0","@material/tab-indicator":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b5606a793.0_1668766983229_0.7056987575414209","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8c5675942.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2772fd6ec74702befeee74293230ed5223ffc640","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8c5675942.0.tgz","fileCount":37,"integrity":"sha512-F+foqhOvkGesQdsgJ0zJDk11t1cohGtlBi4SsHC+6Q2xMHscqGJk+x8pziFsyBjMbHfPkBahQKla4VT2FKGIbA==","signatures":[{"sig":"MEYCIQDFqMfaFtqLQYRGGaT0aoSuCopRthUyiApf1NVOHLniPQIhAN8sWbhkxjL2G1se9eefhwcctgNHfuM1p1vjyCo0e7jm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6I+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO+Q//Tqa/vBy75lR5F2bebEdxIJnq1AeZp5slV2hCsO4NLDhWe5By\r\nKpVK9vplDzAkIgq9bvtTMcJwv3IACjKwN+7TmCKtdeccUIJ8cvlgjjmUcXlb\r\nO1lnd5P/gXoT4mDBCqqG8ZlQx1PiNtYBeI/OK9Da4C0FBI1Ll3XQp1nO/mku\r\nb7DfLcQC/EY0fucEobBM+a+YIrwOEsyGJmUzMXHhh0r33lVkjf9Hpt5kwqku\r\n5RSUFs/enbtkm4EfXoDxX/l3hZlLoRRD0kxBrtbvFu9jkbHRl5NFBMmAJB5o\r\n1pCo7bm3LX19hkwRyLZR2zaxxki8ODBWbKProCk0+6oiJU22JPY9yvVDeSl5\r\ng/k6RobmBpmKWYr14cKW7bUL2FU81bztHoFidDte+j16u3sIwx8C+fwwU72A\r\n9TbXAgen58ZyyQ6LuMq6ljPmAoUtUyDaRoNuYnYytESuEeLhKipmHxclPi2e\r\nnhgVZNOFk+x60w8jJkirxqiVzYDgPHjEAkWDLLcE23wXAF8fq76MtwLYeOcN\r\nNSEOCV6NhNCyb7LE83f/N/TYWMmF7ExLu5YG8gnta00u39j1R7EifBW6PsZ9\r\nkjFKvwovAbqLElwOBjvKtuuuf3AxNwYXE3k7EBJZw1VwaLYVFr9GNlzNyOsn\r\nwZdBvR4nAuXlZUDc9kB/p0Ek8Kqz2GmWYHQ=\r\n=o0i3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/density":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/tab-scroller":"15.0.0-canary.8c5675942.0","@material/tab-indicator":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8c5675942.0_1668784701807_0.17055352730139361","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/tab-bar","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.697fbdebd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f631afff8f5d1ab09894e6ef27bb0820d3ebab","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.697fbdebd.0.tgz","fileCount":37,"integrity":"sha512-zEY0Y6RBNGsq37ZHFsMV6cK8HSduEi8R9oC8ZolUoMDUMvVf59kKz23YtQy1l2TZjJ8wfZNx2dvDdNj8ay+Jkg==","signatures":[{"sig":"MEYCIQCs6tFv32KqoIH3Bz3ZSl6Y57BiugXjYo1aHRBYbU6GSwIhAPRf1EN8mzjGM4wkELN2hh/5WuCzzRgW0sWoXznTKJWE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7rIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqnA//Rw1PtUzqGdt/HxfRbhZc+XTirrFF8eRhOfG40ggOWYibXUaP\r\nxo/s+grRl+C5f6l38gc2mudovjhnaN7gij5b+fawi0DN/5C2NefbXtx0ucDg\r\nNv+T6FAr8SQsaRK67WaaMRSwHX4v2UzrzlZBd/YjLSz+m71RHC0c0syK4OR7\r\nP7LQB8emBNgp7iNNo7a0qQy1dLJTi4NTGatp/GjRqhrEm5ea2yPpeV/y48Am\r\nHIBACk+600fg9fsW68Qb0Tc0W6f9Nc4VZPmam6MPhDp2EbevqCFNwhMPf7Yr\r\nqFzFRg4DXBuHGR1XN+mmKc3SH4P7GZfCDiynDcOZM2jfnPo6K6Dh17VT8dZn\r\nD7cyLKLXVG8bseVTa8mICDhYPAmWFzR3BqxQdMTY7NkuXuktY6PuyRQeNbWS\r\nhMzkWHO1k0gm7lM7UOkxH8UAlR1Qy851ZvKlKYuNQchX4dcLnim3QUyRGHeN\r\nUta3u+qMxmVqNcDuhYaluhvf37L/dWdk6NFxmB1YsYFrzoaaprzNjfNHxRqc\r\nG55+yk8Nf/yHw7o/1CnqstA+KZix0/Wpj1+UTNNn981be7MhjY1W2Kq2FppP\r\nlK3n6/83rWZxBlr6w5iCD3o6ZSz5ERPFi5dYkXuKF8vvYEw7HGr00s4S45u3\r\n4zNW9xipn9xjAr+PKG44WHGDBDEiH+HXMmk=\r\n=ZRio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/density":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/tab-scroller":"15.0.0-canary.697fbdebd.0","@material/tab-indicator":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.697fbdebd.0_1668790984344_0.16301269542610153","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d58410453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60785ed28317a690393a4fc8cc9e9b99d8d9ee4e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d58410453.0.tgz","fileCount":37,"integrity":"sha512-wrMdkaIMmatLjHdMW5kMOQuamH/46OYpMh8ueGOJr/h04TRN8i7xiYx7fDNQIVTBN2XNd9XZwEfnYb/RgRsC8g==","signatures":[{"sig":"MEYCIQCf8lztKEUOnqFwCrwbO88Q44J3qP8bz/5dotL0QXt6YwIhAKT4Zs/jFUOBcLzN2JwuxKoJFfzhPFDEzEnmJ9NR0rIO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9yJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEMA//chBRVbCiDYdRSzyFnBIvd8TQO8LA/oqrOJY07nYxQAuAVnu+\r\nyqEX/OryYouhXI60RtuZ1Ja9IA8cDddoMoU5Audl/kR51HttEZZM0UtBIU5o\r\nBTL+PVI82TxDVZHHT7ei6apnXFWMrsBV92a7D2/bxldYAZ5KTsWxiLXp7WDZ\r\nGXjEo1bMGKmN8Q8wcpN0aP/CLEhF435WpVWmKp784F7MQKZm9kZ8TJwxHoO4\r\n3x8+sW6DPSDlFESm1BsyRQGJCAU8pGxzOFfopqxev62zAmjJbe6O9umjw9jc\r\nPoAuEmkrv8fWB+37gNVJ+ZZabFQV2uuiGCUXzp8Qxt5vjjOyUSDOZg+DcL74\r\nO4WwCTd92WJ98HTCgaTfoqBppMKkpg1boDFJYwbj3cNEZcGwVx3Z1WSKdRmB\r\nvrqv4xKXs4FSaQtl94lhLOuRKsJhjXOsvTSv5S/G7JteQaMwafevlygT4i0j\r\nwAZ2723HOjr3ZAc/IZaDCEGY5lBXtxFYei3MDKqOQAlrKiIKYaqVaMSaji53\r\n4ZDs908LkWyb5uNtXdAzlc8iaxoUiaKNRbFHo1+4B2F6F9gfMt+Qcl+E9DOR\r\np3qT9e4DaE1BXrEV54cB/cK8RACWXhVKGrur1uOcwMt0N5Ko1ZHLtEJ+Fb19\r\nPhFRMLsB/dqShelW31rzveJNNfwdXdhU1j4=\r\n=Oj3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/density":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/tab-scroller":"15.0.0-canary.d58410453.0","@material/tab-indicator":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d58410453.0_1668799625789_0.9409251272559493","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7971d6ad5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1546378d3edf88d8054f1b8a379bb07536289d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7971d6ad5.0.tgz","fileCount":37,"integrity":"sha512-hEMnb2C1yOQPbqdFCTCuyMmjcqO4QIvPKAsbquAwOZc0tz/U88tzmfuhv1k77FB2hbESwN9sPpImU0g4Lrvfhw==","signatures":[{"sig":"MEQCIElsL8q87xyPdCivMT1C/eJkOcIO6qG/0uSBKdH2mPM0AiA8J9NAGxx/0swQyDkAY9XlV/fZ8xTuqAe1rqe5eoMkhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJgJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIOQ//YuME7+HRKAtmtcNmNKvLac4tG2IndDjlebJLEOjYkpa1aQDq\r\n4s6mqIocY4Nm4cjAQCwI6nbvruxHunzwVBs09j/PXXuNDIce8C4Z1ZJOOD1k\r\n7AygnrTkOG+IdPqedNISvxgQnrCQF1ELr8XKuie722x8Ss1lcIhfOQyrk/GV\r\nzAInUkvB+LdfwYaC7F4dtgDK3oEvt+rxa+BLRpKNmK6yWClBypF8wkQMlgAK\r\nO1MrWxxcOEQIr2GvKBvD75y7BYd7Ly2blglC11G9DBSyY4x6G8bjW2tJqu+v\r\n/Sp+6XXLTaFWcXhSLbDk59/+9gjD4lXUp8mSSL1sFTUyx8S14VEbfE+LZP+5\r\n+fsOl3IwXYkkECnNElA7qwEu1UEufStdQ7NVBfSLqEggBFjbEnr6GLVIL0va\r\nML1mVpgGOQCwYeOryMM+u7lovBxFfmldpQkK8T+Xjkpc2+jDdKRfEhNFqMK4\r\nQUVgUh5dXUdoAMMt5lKRu7BjgBjkEZ7OA3RiXv3pEDsXcXe1F4Yy4J31RA6r\r\n/grwKRjxfI9QdT7DsmXQD4L1Khlfu6mmCyTqvYFll777MBxiTkX8S83rDBsW\r\ndRL3YA8eGu4kUiIM46iPgHaWj0p3Peg0kYqVlvK5ITVC350OJFn5yFG7ehzr\r\n/aSTAsnSqliYubc88CtIXag8lgEzyGI648Q=\r\n=BTN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/density":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/tab-scroller":"15.0.0-canary.7971d6ad5.0","@material/tab-indicator":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7971d6ad5.0_1668847625378_0.20693253674165524","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a0ae73b0e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f7583c2ff021f684a93c8232df214a1dab169b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":37,"integrity":"sha512-SIkTuSm6Q4pmEVOGeIt7QK6DfO2U6VY+H66VjlNWmnz9meX0qRbyHYxcCgYEBSYu+r+rIHatv9xAAvsL0EpMLg==","signatures":[{"sig":"MEQCIDTCVHlPOVl7MHn5FZYctKQ+IDtkdhTT1x2aehdYCkFuAiAl6hqoXSqDUMsUDe2+mcvJzO5I5zUzuh081Ih0qbGXRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1lAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIYw/+KvaI7xEb1lr/Pw0dH5EBrX8qUlELop+SU/TxKZ+S1Iilvfi0\r\nantJh74PL1zQbwqCN4ll5vZnLMsDVWrqd+dxJNVsJXKTNbOm2NIhygAZl/Gr\r\nZydEmiAvI/3VJkShJFFQ6GN1v8QCaHW+y63/Ou8RvOJAgtnz6HyVLxf33WXK\r\nMd2HaAavmeP5MZ1RVjI1HQ6tNlNPVBR1RFkZJxEfE0NuYTIuc/mBsl13/mp3\r\n8m0ojpWq1R+sY2b8fGiR4tk7v440FTXyr+Tmr+okL1CusgTOHeXlHJvt4MzM\r\n6jL7rRMhYL+YWpA3asT8UdxCLJicx/tmWuGjjfJiWd+x2MbQwhXYGb9ZiKJ5\r\nV4zquhg84t8Due8PHoqJ6zwm00wKClS9VLCsobfKzPa5LUoZ+ZqQOyskQ0cy\r\nGC/WWabtusmtla5lDlcnSX7HLQ2oVHFkrPM9CUBnqIGLvgavyHMN3uN7Tfvh\r\nJe9p8yiVKLDCM3PXbHbPOouIOEivpAjwGsOPmzcESUnS0cmWpt2x4QV8uF6N\r\np2TXAndZZ09i9nxFkbumwQLzR45rc/vi61ncVXrAHD/N6M57tnUhCjIl6+l7\r\najD2MGtJsjCpCyIM/9BeniZ7b/Pfz3l6KHiM9ntJcwuSjK/l/K38hpJhBq+b\r\nMXTo6Ak5AlCGWPXnCtcl5JRAEyWnNqfPtx4=\r\n=BDxl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/density":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/tab-scroller":"15.0.0-canary.a0ae73b0e.0","@material/tab-indicator":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a0ae73b0e.0_1669028159810_0.5681022974409355","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/tab-bar","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.96f472604.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"026e79ab01c8a9e28e1a6e817a659c10b5478ccc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.96f472604.0.tgz","fileCount":37,"integrity":"sha512-KgF9sG7tMHQY1vTHbruJx6DOmxqmZFHv1z1Za8sHQoZjNXA7z5pQCLz84G1ddnocsygR9l/CpYRXDwEs26jKYw==","signatures":[{"sig":"MEUCIQDjBfRQB5SYR8GEmwAPicD4Z6SLxrOH8WYCRKINytbiswIgSWeU1Gy3kL3ZuKhDYqVyX/u7rX3gzPXT/FkeqNWf668=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3UaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvmw/+Pp6QuhPPP7nrEV9qd/f0TOGYk1CUQMb1lROsBwF5WpyjeSgI\r\n8NKVxLe9O1OAlVf1rNR5epVkDyib5kyKvLOFnyAPHSlbvlG9SwNgJTjjdcJP\r\nXV8kDJZNeymy/n0q7sQnjTi0jmOS17RMp9QqSi+LAyaY28Ntlrjz/XmEFFnm\r\nhlxBcJdtCw8L3a1JNUXYMF8csAlqk0lJTUrEBq7IMdl+K3pxG9yl72flbOBp\r\nwpP5WIHEFj7TY77upePQD76Vt34rSrUGpFh51fDXhNKj/12Mc39V+0V0J3eu\r\nAbF90SHdXrnhkvN29G/UpVzLErhFFSqxEgQjPzWXayI5QjNAcQAsmPSNGbgk\r\nLkcXr5oAh0c3Ozr5+SBQzouGsq18dOV41kr3fUj1zM+EKGLuBvg8Fols3ZnP\r\n/DA8a7CH7kWMCwYFEWtOA4Hn7InDgz7dnz3cEp7W3c4uX4XtXDcJy/M44BW5\r\ndHr0L9R/A6YnoZPHrzHnVLTse7TqA0b3asuEgbIz+SxgZWfheLjSIG9oMKBT\r\nzU+WBXGKCAIKlppFp2tLJBNLVf+wJpIu7us+T+z/d9Q2EzjWmb73CllbD14I\r\ndSjcIMPyOjWEvNeP1UHColXDZ9I/O1LUNutVFOuHaiEkDyT838128ZmrPHPr\r\n8B6EHQgGzL4wMnGOzeEz9T//XwMUaBd/GB0=\r\n=nS0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/density":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/tab-scroller":"15.0.0-canary.96f472604.0","@material/tab-indicator":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.96f472604.0_1669035289995_0.717157168274059","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.912f33ce4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"871b29fb5a4d4748ef2ddaddba46f72aee2a43da","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.912f33ce4.0.tgz","fileCount":37,"integrity":"sha512-uGYAeeAVcNfOQFwLyNQnaoSykYyASUJktoIDAAiioOEYusjwuGWhn43b9IeYOhTy1gWJF4Z7Bj2gufZK/XYDxQ==","signatures":[{"sig":"MEQCICh7tlAu+ID7LKR+zzFiNLTbO7P7rkZ6Fi6WkFiQ8qkJAiAoR11y2H1wPVtDPM2gTy897ICTvzp+X7sCCLyY4Oxg3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7u0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw3A/+LISmqCMIAeJGSQ+bUB9Jsyd0Dubi5CC7V9zT6vKXYocvhcIO\r\nxTXZTsJGM2SxM4ZiS1Zajpp28/ZxAblxykw+wew9Dlmx8KQEFTWVxTIbqAcG\r\nEd/Fpwjoub739Lg1uTWkNgLWqyEB4s5XJv7qz/lRhwnBd58a65OiMiJgaDEm\r\n3znDZBXABbBb9kVefw34BWYruu4MwPGx0xDEG6/oYOiO5RBnpnwEXzeYrYJj\r\nmExGfYRB1Fx76fGB3yjSlVfrVFHfsjqP5+OUFzCjgioYqksmKnP0/hAfrw/b\r\n7J7a6XfBDFs+9e4IWcRecPKIcQ4HcrFRPJSBmZs++fFn+FQoHEqgH19akcvg\r\nnu0T2ivl5tbztm+zNOHOMTLtXJhnRuM7sXyF3pqbkXy2i+lx3CbiAi+21xUf\r\nQnPlp01HukjgbpwyToxeCqLCF50AMjqBPQqPMOv3KKQ+Fvpch393WrRS3ppk\r\nS2L6xINLNMPtyDdCf9mgGRQcr4DwVnfFKTgsdUDRY7LSKakKp+bFUIDjb76z\r\nb3M5fPUono2OHpDp+F85j2sMTNSEBa7sPCbGGD4cZhiRodYM+SthVJfiR8ai\r\n7SXxilDUYoRPQn1z1dM+9yLyGIXIFDZbl31QvEES9qX6NxdNhYCXEAtAaEKi\r\nagwSpSbFD/mrbaPh6lKN+IFfvUN35G5Zy68=\r\n=Jaid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/density":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/tab-scroller":"15.0.0-canary.912f33ce4.0","@material/tab-indicator":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.912f33ce4.0_1669053364486_0.5551208252248823","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1e1b1c369.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e83cf6863b354a7e8f8f00ff822449b5e0e6159","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1e1b1c369.0.tgz","fileCount":37,"integrity":"sha512-YXvwR5JI6U0GWH9nLaXKnYz/f7uoTWc5u5b0vw962yD37EPbtUCQz7zgRpZfV+n0a+WNiWLDBU3qh6LIAbKN+w==","signatures":[{"sig":"MEQCIGhxerRwTn44jXklUEQ/KkBPO4yHwkB4yzTIRRByy0MgAiBi8H9aeuIgrq9RojuVbWXdBFYXF5EqqSfL7H+fbr4NFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYgQ//T00OaOESDUH0WmkDaNEQMW/54bfyvSYwYyr/uFWbm22sJHRz\r\niL6tvGuMKN6P81J2aNr6B9ujex4PcCH/2lQTxn0iMwAaJQQGIPk/CNORQ0D9\r\npN7WAOKgpzWOp62DDk6wm3KRh4KS81VCKMs1iaf6txR5UMp7IpB+ZwwFoulb\r\ny1Ik6ef4rIRLtH+uaO/y/kw21JAzXaOasiHaz1giUQqj9FT4z+mqpluSomMf\r\nonz5kghbrw7/jvcdFpbH7kSz1h4aGJdn8O9yK6dltYZKfdzXUh0A306V1l3g\r\nv/DFmovTrHOsOOCl3ZKIGBKq0QoXLjE4uKShcMrBI/pSxZ0xSf337+sIc//6\r\nD41d8XsyBm+9YY4SNy/kN7cwpBD4uiZGXpzn7nvE1YKS6MGpKP59MiDZJO43\r\nPyOvOl5EKltF8yboEnE7iut1U63nHCSxAeN1i5x7zSoDid2jPQ2TTCplHBEy\r\nPiB5ZqBG2PDa+dkPe1u33k00XuyIVbZr/bgl0NkLuwVa0TSbkgbuYTjDU8ip\r\n4c+ukCA8WloudJdHKBG/9soBa9BW0WK03XjbJt0sBd+UaMcpborj3NVGq+7x\r\n3V23tuQOrwwh1Plh6sMXmjB+41hxXEoev8TE6Leo9udXLT2xW0sglWkWy+Qr\r\ncJ+ZIv+HBXBdLRNzI/WK4N6chtOLZpgOFl0=\r\n=bUmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/density":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/tab-scroller":"15.0.0-canary.1e1b1c369.0","@material/tab-indicator":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1e1b1c369.0_1669230170910_0.5000157672716226","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a2ec49244.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd72fe21ef636b118de9781123224bcbd29c3f1d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a2ec49244.0.tgz","fileCount":37,"integrity":"sha512-PgGsvx9O+BwBZ2EWVn7I7SYPXKqtmS8eCGwo1OMrSlRQ+IN0FTlAsvkWG1D71HE4Nrv3sz3kOC6xixelACIKhw==","signatures":[{"sig":"MEYCIQC1romozWSUIcYjyXFz4i2fI8MHtskPDck6Yrfm562G3QIhANPv7q9N4aWQfdeZlGOjrlRb5R85EfsOuZB7E7gqPGoj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhwA/+ORCyixxpMGPEXGu3ruszcgWczHUqDLtPr7gJS1gzNFuIaGu4\r\nlDIwUK+vljJU3GJ00B/naXZxGPvH8jo7w/g7RvFqBNk2jkQUkPqpuJW0E+Sl\r\nty2vBoVAmmEniJrSAze3UECFLE7thnZgxMwdwEdr9LI7d5Lk+9lxkDEZF1TT\r\nuMEkIuUHZVfjfer6jSmL3quYy6KLlVwOd8BkHGPSFcJDhxBXC6WNEQk9woJC\r\n2R8DhZJkKFMZtdiET+AkNl/YmqrOtFHHd8h0L+4Xw591Kda1XiINPpaNZPR7\r\nHJkgU0SNOjlWuHOs4gdd5g2Lp3NNNEjK9HxuxcSlbZgbWSOAxFYGTVVtcfMj\r\nemJGG6oVG3TK7EV9aVfU+iAUPdTxYAby7g5GG5Bj0zd70d4bTdEn/Nwfkx1p\r\nZTnRUFAPbk6xCYNttNsMb67NVbIaERRGRZCuSLPfJPdAT7jVathTJ+RaQYd7\r\ng4ac//psh9C3B9mfXqB/B04FfvrYHUxKOhQ2sLyOg9dnWfxynpuO/iJCXoT0\r\n/ABP3F6UVP4LzEbZhl1Rrr9r4N5mJ+ea0GmTHNqvK3+lupXIlL0S8H9eKHjy\r\nzlTPnsfAWStEVzDywyYvcJwO+XD+wgrflswc1dn1ta2rfm/m0eZ06kYyHID8\r\nf7WPHbryYgRW5TG+rjSsJKoG61ImSZnZjsY=\r\n=7pUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/density":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/tab-scroller":"15.0.0-canary.a2ec49244.0","@material/tab-indicator":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a2ec49244.0_1669231975735_0.6888351957414931","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a7458ba0b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36a6a6db80b0521c78bf683aa3d03524de0d8389","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a7458ba0b.0.tgz","fileCount":37,"integrity":"sha512-ybiuIzZYrNniu6bywadMjTdr+lCRmZ/v2J0Lpra3mHjTEjoxG68EIF+7xZvL8Q8gNiPcY3ZTI2s2akUOMpT2rw==","signatures":[{"sig":"MEUCIGmYn/YW8JaEYV2baYL76rZqXZe0kL1MnbbBdmubx7ySAiEA3iIiJeZDWKmADag14GE7NPbHN5vcyjhvjTX7tsf6cvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfoAgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlfg/9EYxg7fHiV6DIJLk9/uMVTUCKKpavqjHOoI5LT7NNRF9BDLAa\r\nHhNUhXdrXuU/hEN8uKK0m8JTXCvtxm1jSz1nW4fVajerym0dW4mAhgn9JB1n\r\n+PA5X5Tb2auxKh0qObrTlDVYnbzVDGI5b7LC3PfcqqOrKv7/f1eQN/eWUyFP\r\nF5Sv46qlk2R1Eug8RvOD4vrURPs8an572sWy7aWG5CbOGSqloT4d/+JD8Vwx\r\n8qg+0JWhwZTpkv8Q0+LpcOWwLOjXMmlacctWpbLqsemYOQ2imI+7DVHKfP/2\r\nwqUU7e/wnObo4sdab/qYS+5kHk6G7z2sLI61l7UAS8ws2hAtchX13n1hL/Ik\r\nYCTA4FdLNABDeHvK1lB/qKWpkTEWCnCxP81V9m6Ok4vJc2y/7fEgcMdq9By6\r\nuaHR2stSyypk94LzHr+oZVjKt2dwTBVYbKZVPjMUL0Xs3v/p/gai+Zal2hJN\r\nTs6Y2NNT8TwLCUsoYvUonQSX0JR5Mn73lkZp3smrDl+7wIgfMi0Xs+X1HhrA\r\nkIxpkQJsPFJ3S/Gd0eFkjBD7m22LSP9V2jeGkyuR7NrR1hA/6OWwZ3EZWv4/\r\n+itvPvQNVhDqqyf96W6GG4Agf70xA9zHFhQaEGQmiPxenS+sPCc1Mk+A5J3X\r\nlW3Fhiu6SeajkdWJR40BAmna6kbk6xZWx9k=\r\n=Gxds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/density":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/tab-scroller":"15.0.0-canary.a7458ba0b.0","@material/tab-indicator":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a7458ba0b.0_1669234720587_0.40866803004747854","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7c35e5036.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750c62fea28ba3811553e2850da1495fc40148fa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7c35e5036.0.tgz","fileCount":37,"integrity":"sha512-0+gIg5FhxjDKmH4XlIqpxV3k3KcFKLbddwx+8wXs56zX42UwR7h2HGt5O6nmoIpkDbq/KRezZKZt4NpyBhs8hw==","signatures":[{"sig":"MEYCIQC6m6gw8FM3WzAE3+0AD9ec/hWLeBBVy0mj4A2XRuokNQIhAMA4A4WOXrEQtJvLiudpr0FYC243kmSGxJe4E2ik8Nlh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy47ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAPA//Rjiclq8QaoXf5id5PodMaALT182OmGgwanZoM+Cy0B3IGjRS\r\nC8W+S+E9zowv4VSnQfpSEAzE1r4sdJhj5h79ZPcLw7rUuK424vR+g4Ymj1lW\r\nLYMESl3dyt7TGw+w20If7AtODwe/zZcadCvsl3AsTE21kzfkzzyVxN9LYT/3\r\n7l843jc8EE34SDQiE/5FQFxVS1wfwRkcSj1KR8abod12I9pQ8HZB9fZlt1bq\r\nInn8+Lj7nFdpA+xuJ+w8fYG296TQ1dBaqqn17QVdO4aeKwhX4oPxgmp2Kj7/\r\nsfu3SK/5QzzXwAmK01JRyilhnwmBq6t0r3KKG+x7xG8iNrOZMPiO4Gx4tBed\r\nMLhTM7ZW9tpSbKggZmo2HKBkncUF6hg3J6vRgYiBp3rP9hYnSrbVqEXR9W2S\r\nLAIwqHHehpm+A5DxE3ciUYup8sllnaiLlo1yh7I6N/oy8J8e51nL80rHMxWA\r\nCCnxqCAIZ7oWspZiLG9RwhDejYLjI1XH8I/j2MpERfbjAInNhzUrAdIzoTKG\r\nOJnHp3oslL8SYdmtqiAjHdjhWJrtrvmw1PREK/+sNh2AR95wY2o9280YHnq3\r\nvR5KwCeGIllC8/bFhZRfgaNuoAGoHW3K3ZFs9cIqViCbX728PpmoYJghpCpj\r\ndGio/JH/2tw8B7PcErNHdX3J2agjlEq7N5o=\r\n=v9DF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/density":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/tab-scroller":"15.0.0-canary.7c35e5036.0","@material/tab-indicator":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7c35e5036.0_1669279290855_0.5673998802478069","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4356e05c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b498d2a7041063aa5a00c7b4876408d75e03eed6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4356e05c5.0.tgz","fileCount":37,"integrity":"sha512-PnPc2i2r9b88vi6GdVlvKfM8/C7k/71/yQEyMFpqbzk2GGYZXnpWKst2UyRmv0rht+t9XbMOhcktU59M5PZvwg==","signatures":[{"sig":"MEYCIQCKW10/OCU+NY6LreO1bTZUFhQ2gUSpeq+jvUXSXK3oUAIhAJ66YOfFw8fe9O61bPD/GzChJtAsxPHm+Wl6KFFJQgCE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0BeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqXA//d/FAPPyUVqj/W5aqTJW90xEooYtaxT1oldg00yKQvc4lT5yr\r\nZOFZCx5+OtIKAt6i6AOR5PFK2WZdSRn2iBRaXDsMw5wa+diSPC/2fweBa4ox\r\nO35f98PdgaGEpr3qEjkhYuhg4B3ppdT81RUeh2tvQJ+7wawDNAeniAWVm0zW\r\ncUjXqFKIuoVedhi8xHRzKN/oVsFPz82Cnmq3cKNynjvWCsV82nav71H3GEHv\r\n7UBnj0AmrFqwYVLVwWWmcEutLQ0iFD/L91LWn9LtRQ1Yz+EnEsXlu8n2sAOm\r\nMvkqNfWtYa5SxuSbJpRwA6KSmCDzIqGMfLkpxP4yprAZwS7o34t543KxbVeK\r\natjBIH3leWwoon9GoDxyIiG4Z/70CLV9qBRb+9O9b6NeZUBnE02f/jHgF93L\r\nT5U5DEIMz1GNt+sG8oRbby0fIMCZVjgmNhqbw2XyO/uOm7A3/mXc09xbWp81\r\nYuUTooxjoLJoMRgIXUBKfRN6FrF0de30XzcPJJEpXYzASvpspFSYAkKr5qGB\r\nf6UZnqDpxm9yY/ityVnV/+vLhHnniA3bc+hph6SvLtd1oBfexg9RkU5H2pxq\r\n3v+HCeuiSWLiryvJJHSsVVTYeGFPh0e1O6ds8kTbbU+z7t5MzELgFiK5OKZr\r\nignUZkKftlbSG/bejGzKOC3/054sAtfaRcY=\r\n=PxIV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/density":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/tab-scroller":"15.0.0-canary.4356e05c5.0","@material/tab-indicator":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4356e05c5.0_1669283933838_0.829716353497596","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cb605f8af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1b8fa62b3990b3c6fce6a211a0a0cc37dec093","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cb605f8af.0.tgz","fileCount":37,"integrity":"sha512-bl89AQhdrCkezIf9MdB3nHGMLkDn8By3k4l/w1zjJt7/pWGcG61ooYMGgPiXzHR76MC6evWzTj1zbozQKSEWxA==","signatures":[{"sig":"MEYCIQDhlINgW8Ah12Lb9auxFym7PSt0NQ6No8ReTtQGfbSoEAIhAN+DUDfo0CJFzEx2qks1MfXAF10edVjVWZsxDciS8Au1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0TkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2tg//f51klgVO8OmOQoS8e+oS9Irvb1jpngkG0p9VNex3UgduZ4Zz\r\nIoaft2UfVTK3Lxa8XgG20Nrlu2JDT9oHvReFuY29BitpilIjUeyWYQaGjjDP\r\nAH3LulTwwBcK2p7p9qEBTvaVaqSnUMAgUwE4+709oxhy1z1fTWfP7GVRj9KG\r\n9+ECmvqZVyceoLJbNWhgg/e2iSD5bBJGSjLQSCRhzRbunBBc2wovkdhXNFZR\r\nrT1GmsaYnbVQpILNPxYJrNJ39nlj8CyUnRUnXhcxdjiuHR7RAtYHY79epcri\r\nZq7FQaPNz1uedpqOyJrFnAyn2hTQJqsSdl0A3pfOx1gIUToSFDUjvXiQDwPA\r\nGaz2tg/UDggVXg9wgq7csra8CuT9DLpFRVkYGAn8Q837HvTeUvr/NqM8pqZF\r\n+Wc7VQM4dGYueuCV5KCb+A5J3T+DOMUnbKEyJhNg6d38zW6CkxMWHr4CfQ3P\r\n8KWw0/9lMoy/8Sg6+3hwtwjG6f4EZcKJhquKrrPxyUdqUcVKQO6ienqVSsmb\r\nZB2Hr2pfr32ehDvtwZF0fqONYLYHWnVOV7yneWN0/S26WKx1VrrtfkSR0eAZ\r\no6+S6fgZex5LKnrIyjeN0r9whpYvqwrrIU6hOjzE6/2x1xirBdfzvi9NlmeG\r\napDnwrcWvyS6lqs42L7ItA6HaIjC7tqlcII=\r\n=AoH9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/density":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/tab-scroller":"15.0.0-canary.cb605f8af.0","@material/tab-indicator":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cb605f8af.0_1669285091795_0.2874921989592676","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.05fb07f9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db5df12796d96689336ee6e483b8be0095eaa689","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.05fb07f9f.0.tgz","fileCount":37,"integrity":"sha512-/HIWjugL8NNtMbZZiXRUkn4c7h46GIB9Pg77epwrvXxTy2+GQQYMiBjtslsKdyxI95quEuJQ1hq1GhtDP0fSlw==","signatures":[{"sig":"MEUCIQC+GYKpx185oXSfGdEiG4mPxKpDLvxTVAWeB/iLFKzC9gIgKclrmVj85AmAAvi4unD2pnuYmMzJUQ95opYtQrwIwAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6bCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmor1g/+IGTMpxp8s3AjCN7rCtYd4/w1SMbET3aKVD2tyxJYo+XR9Jbd\r\ni6y7vULYRMyhDPQf8X8YLKw6SI4c3TnbQ/2imYQlBtIcrqWAwHVpmnjK+t29\r\nya2vrZrdoqhuQzMizk5olDrnwL8UYZ3c4PCRk2KcVLqG9Ckav6M+Fcs1DtU6\r\nWiz9VJgZpu7CjjZKfTs+yBqI+2ByMYU3yKlTICaVF3pf/AFOmdCyAdNULfYw\r\ncU8iz0vcSi9KAoWq/jypwjkhmkoJ/dwvYFzq5AFsf0DjDXaASbd3p2vRjh3K\r\nabqcbz5BMfds5y10KYSNsaI1xmYIehl8u0bCZHmkQBzMYmYzUGsmxh0AF0Z1\r\noEbEaWmBZrS7/BJyctJJ4o07VCylzsH58WB2Y7VnCLqFYLJ3aIJNZABkGvT1\r\nGn4hf2CFYXfDOMWCOCFrU1T3koiyBvpaFx/agWEJyLQXmGV2uHDCcQbemeNM\r\nsbp+dzCdk006HMW0QtwE/fbSBY2Ed5rYvsgZoGnQmkqditAiARa5BW3CDc4B\r\nsu6PvSUbEZdp0q2IU4swMIbhb6MIffg0Q4q0oBdcK3MF2c2cArWZUrzLJAVV\r\nk7bMdhNkCtZW0mjeuJ6m+gGuzwhit3xb+lzr0ZN8utgXHJzOMgeQVKIu/KXJ\r\nDqQlVKzhLVjbJx9gxDS1gp+rfu5KhHgSRlI=\r\n=/28C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/density":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/tab-scroller":"15.0.0-canary.05fb07f9f.0","@material/tab-indicator":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.05fb07f9f.0_1669310145679_0.4501068616131916","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a911b386b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d94698343a0f0bc57f276ec201e4ea486b4adb1b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a911b386b.0.tgz","fileCount":37,"integrity":"sha512-FShuW16dpsH3qw70Bda95Mc5+bEiVTjfvUMJXfAsnXF3SyTx1tu3v8ubuiBCfpqZnRJMicgbrM2/2JkK+bMhQw==","signatures":[{"sig":"MEYCIQD1mhFfUSrFSxNLPLz6h2OVFATTIVzUPMosKqVWaLR7CwIhAPL/g9Kq3m2jWFIT8IJAIjKH9lW1Pu8mryKPPnkACJ1N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOaUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSRA//aZuOwnWv8Mry47nzT5waGbhBsM+a3wrKhhVGE+i6fCuaxpWQ\r\ncrpwLaqKitvX89mS+UyijWKp055IFVvrve7EO75LeGdwuOgUgg9iPwB5Vd6E\r\nfSrL9VDIT6pP2x1dWxSWZ8sCR92JuhhpBEGKtfOzfGsgBEz0yOCeuG8EVOTe\r\nBWtYG3ooo7XA5ItE2VzGGMcuIEV2AJFsn5JCR7uVZKou8Vs5DDqeC+aEnsqx\r\n2jQjbojtZVsXu5QUO75JG30zdUuo+9bpYTTuu/mPAFxPA7H5Kc3SttFX5SwI\r\nHrkEXRlwdbr7bjMMkySDby2CsWztTVsLUljPeVsdtOJvEj++37NeWNkXwjy8\r\nbm7I+sRFHU5yxN1bxSF5ic6pejZEGoOXcRHDPiDqrY9BmPDuW2v5JnRYII0G\r\nIdh/g/YhStuQusTPVDvd/AnSQktTawHJu28q5b6FK52MGXLKpzHrOFxsr4cS\r\nRre6MPtyYVIT8tByePqht16x4cwmIaXNSEot01C1q6pCqQPBDnu+SQXmqbow\r\nVmoW90J0h/H1HSOAHhg4zwt2dHw2o4XSoJy+pFv9dtuhoKch1hOsI/WOCAo3\r\nCozfALKE92hRQF/neXT5KM5B1gILszrW2wZh28xGKWn+VT2Jm4hwOTQ64Izp\r\nRzHHdhXt3kDDilpw6D0LO43ov2OYNG5hhCE=\r\n=gqWk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/density":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/tab-scroller":"15.0.0-canary.a911b386b.0","@material/tab-indicator":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a911b386b.0_1669654164374_0.5034206996345734","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2aa8050b4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b079f4730250c6a88124ca7e531fe44ee432b43","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2aa8050b4.0.tgz","fileCount":37,"integrity":"sha512-kbh5+/lZZUxgXqKmFl/5XQ3a6iUtU9igrFLOC4ZcziNJG+aeuTA5gc+vg81KVhWb8UWxAfs02VFPoA0yeiS7lQ==","signatures":[{"sig":"MEYCIQDS28hKmpmj945GXs/Zb7ngdCoMtuL7HOEMO91JGPXmaAIhAKvl9cNC5OHSvH4NEXJDiTBZdlm+7S3ZDTUfzXEQAVAR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr79xAAjETTCK4GoAf8xKmxOZFGW7llQtFGFJfQ3/HlNY6j32L5cNgQ\r\nQGHiYbEGhvV5zMv0cIRN2oH2PcOFvvT9DS5X1lgbveQ98Cj/syzivq2YGIuy\r\nhZaxXJy6qS7AoNaqh2Q87ucRHWogXrngwx+4NGOUALmUD4XKHDE3yFL6V7qP\r\nLxDMmFp9wwMSVnv2ALlprrDpPcSKICfGWQOzGxrDUNOsprJ405HggtZBvACm\r\nnN1rbpoPjQ2t42RHuShV0apYdz+M1mUlnejHMpJAY+3S0MP65maum8EBKUlU\r\nWpiTeyGqglMKP4sHv16DkReATWefSFg1iwemsAbhdjuvveQxFBibMkF9l+YC\r\nanqalOb5Ln0+yEYXzUe40v5UHFccg2Zh/dNxVXIa53g4ntwADi4pfj16EAN0\r\n4WsfXU3IXli8MPBN53mRf3NTPj5VXlNda7P9PJKOv3x+S1k7qFXnlHAbgN86\r\nmQ9m1mjIo1uwQR8UKyl/Um3KIQamYKbTzWCeUuKoMdIND/+IflNiCl4z11Bh\r\n8dBg1jto0RQLhZBVUwHyoahYZNefE3jD5oow1JX/jYTxVeRGgrGk7vMubNJK\r\n+eg0JJ/uq2VaEiAV7Qo7gFufZcC/0cGNkZhrFr+yHZBi5GVr1n2cW6q7Ng1a\r\nR7XlGm6TxpQDhAko9QkkUz2FOSQxDBKcQ6M=\r\n=y92y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/density":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/tab-scroller":"15.0.0-canary.2aa8050b4.0","@material/tab-indicator":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2aa8050b4.0_1669662825521_0.33792074892864377","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.323904a9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed419dadef6466a14f2fe4767348dde874cd9b58","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.323904a9f.0.tgz","fileCount":37,"integrity":"sha512-Q3EpfXlEnQ6fRNilL6laKxdLJ+rxL8S3lipuNFaQy8qiN0RfgTYMp/eLlfX+uWVAfWYYhHSSsWADzZG5HXArXw==","signatures":[{"sig":"MEYCIQDc80fpLuA2zlOo5ZYUh/WiRg7EYq2RLgOXOOmxsE0AXgIhALm2Ryzd5zF+c3VwyJFMaTvkrk/2TDYgLCyLw/Yc9rMl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhibjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5rg//a4hsYevE7rLr6DZbRgNRRuwQu5/klS/cPoG3R7TkftiiAkBI\r\n+O0YbJhh51T/GuqjBrkiHYb48G+HxNSBkM00DCQltiHqIBk0vrb/nxbggHby\r\n5QjZdiebN2v6LPHzorQSsoB8U/VCzbdXLQXn/wnbGA++kaGfeaa8dWN+/U7S\r\n8Br+3qx3G5NRfbRsGbmt5LL3mKvtuEeAnKgdLzPSgFk66IdA+aN3Oh0bghAv\r\n5+Ul5Tu7Mn7k/ELqeyKLd/bang9QVm/ZA/xGPlkcsleWzbp5oaFQ1RgUMg2d\r\nRUBZFskaur3vvDKoWCsjCdGs3y9f7JVoBWX+2GItw/KjTVNp4EuQtIn+UYFx\r\n+osAToFuTbbWVeXqH7umFyach+UOi5yvlySfQOS3xgcbWaTEsk5/hkK8ShIr\r\n3+jjM7iHEDyMGwE+lif9MnyHDiHmm0wEmLIwn+3No6u0AjheUmD94QBlFt1f\r\nHQ4vtAO/Fo5TlhlkBxi0YsW1TrgvQqrGLABF4g3rFpiJ6rAM99KcG6sQil1S\r\nCUI0nJ+hGZfDUb7DlQqS9GFWy3kKmh0M5TgKjhNZedjOtUGDQPfuuzRb+BK0\r\n6bUmU5G4fehxTNljpfethPxzNzliBUb8oU7DF930m2iD6H7GzVh7zhoSrAWQ\r\nujRXZ/FtyiyoLfSeaEwlyRFrrxZl27+LBec=\r\n=/Quz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/density":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/tab-scroller":"15.0.0-canary.323904a9f.0","@material/tab-indicator":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.323904a9f.0_1669736163133_0.8433611441448512","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.168a629a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3a8af9a5bedd7847edb0e9eba48906587e67277","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.168a629a4.0.tgz","fileCount":37,"integrity":"sha512-5pLrReK1MsCcpXyH6yompLRaOI2SkAKGJhCAcvDNrIPY/US8OtmeMMuLG5sMUE84Gyh3mR9eQq3bQmbOl/8MKA==","signatures":[{"sig":"MEUCIDYQenckwgA6yvMfGAbTk8deUyGfcqjx7eJO3aJyBDuVAiEA59Sbu6p8rlS316Iu2elwhBp37uBltSwe+7lYpPMOo1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjh5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPEQ/8DJvBRlC+NhPqc/TeCr/hnN+04W6xre8s1NVoN5FRPNIdKFMS\r\n8qN4heCfMqEN+fdhNffXWu5cYnzypAom43RaotS5fkWgsgGSO0/dBZHsIvEF\r\nku4AJWePm4kKCIBEyMhTB6VFESSHL17WsUYuQDvmgkqLgnIFveYxCVucXERS\r\nz0WJaWFCUHXmR8IZXfF/c+vty5JFDEa8H2QrvEuwpoiFyW/+zRPXcWLep/D6\r\nrgBw705OGLPzePDHSOY7tHxmKICf7cFPY/WSna6DwVmCH4t+ON468BLs65pv\r\nylqE7FiCkpBqN9SqnEFrMAc5zn8Ns1WjoIZSvkAYDdkmuW0emoLXUcZXI2Q1\r\nfAeuYnerfa9Kg6LrmCEqfdeo/DUC3pDRTC988+m+JsjCJeh+z84kwf3FUcYT\r\nvAIOJFIRPzI8LeMt9Mra8Uc+V6+tvaotFA1yBbX0kuyWsZ+G7SzqzNyLe4zZ\r\neWYVflYfzlLvKvnRoUfVUULP+Ryvbn5la7Ssk91n9CLb4MI76LaZkqB35vrB\r\nyYZJZxvHnWz1z1ViA9sioUwx3DTgmJAobn5o6UCaqX5n2DDZNI28kU6iiS0D\r\ntyo+qbc+0nxIpoCsxA2rFfnA1QIuLBj5w2LFi6bnhudRnV6/SXOVYFAkT0hX\r\n1XwT0xu96CP+QQlM3yGWTUDVlHqM7ebCfHY=\r\n=fKE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/density":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/tab-scroller":"15.0.0-canary.168a629a4.0","@material/tab-indicator":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.168a629a4.0_1669740665287_0.48863012472212297","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/tab-bar","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.65c411674.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb1ec0abdaddafbe20214c3a3307455015b74aa","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.65c411674.0.tgz","fileCount":37,"integrity":"sha512-2/VZiiJ9hwWQXk/xqPPBKEUNFo0nC3OnASQwPkL1dXAyIs/EET6YkOVUSEd7sLCrTalrnfMTvcZYSPi/OavlJw==","signatures":[{"sig":"MEUCIFm8G1L6x5E0tjhZz1FuziQOZ9ZS1RI2WYLmQI6WJCfrAiEA9k6HUdeE6SKBN2KR1143zfnlBRjPl/cjD0DegxWn0mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkQiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqibQ/+PDsJcb/F4LgL6ez0em6Oiw0uzR9Mdlwolrae5IWlF/O0YAJL\r\nSlWxDnCQwR5Lv634QHjBfK88F0LJPL+1+bz5HbkUnPcgY9YRSU8xcMjVM1Nq\r\nphuNV0100RolPVcP4V+mLQ6kciPASKw6kVY0+qEv+8FOn/1GF+ZdDtGYO89V\r\nz0IzQzMc2x964HLiSOCYYyAQ7PKs0kvR8egcMYApIOJEMHnC8h2L7hQmXdAK\r\neTYj1aLrWV7+eLgdIAUpEh2E2+UY+PyfO4BQSMYNlFkWdqLb5D7/M+oOvPJN\r\nZdMMwatfJGQCLiKci/m+xILpX9fdFMy1krG+I7yfAH8PHTj3S5yEwK1kFtkK\r\n2HqZfmzEgubOUuHdT903UmshlIUMlZrgKPH+kFAbqy7Jbyel9WX797HnqbIh\r\nfHp2egqcoooXe06MgptS/xlb81oapnksC8qUqgvxxokseyVuicvaeT6m4QSu\r\nR8zuIY3pNgeFJTIM3RMAcN3RC39fnqEF9vLGREdpxlyiwXVrVH0GKPmYELR9\r\n3gHMn900JpBhLB1EgBT48ieKRTFtUp7BAzf2oeAvcM8wcJdZ0QaE2swJ9Dhx\r\ndaxUlFtBplXyR3YOI9Z3k3xdAh4w9OWw8zdBwea+tTg4ykAw6VyJyDuZOY+N\r\nTM6jirSzohUcEy0MatjHO/r+pgtAq6350Lc=\r\n=YtNh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/density":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/tab-scroller":"15.0.0-canary.65c411674.0","@material/tab-indicator":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.65c411674.0_1669743650550_0.03830088740082038","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a86d36fd2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"679bed711dc2a5a43ed7f72a8460c051698ceb2c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a86d36fd2.0.tgz","fileCount":37,"integrity":"sha512-SDaJjoOMkqzNlAIwvTvn6aeJGvBk0+LTYWTd00uhj9dFdWdECMt93YPQ5FN5sFKp6YdBdqnK3VeLlQdS7D/7wg==","signatures":[{"sig":"MEUCIAcezyxblU4b5ttU1j5GyJIbcljACNQJqgUAr+dDNXhZAiEA4T5J+MvDNr7s8hHX9g1LNri2Tln17m3+ImBAvL73WnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOdA/+PGEtmBcmU7mesI0moR22s9B96pm8o790dwWh4KE9x0KMTxpE\r\n4KMA6dbwlzr4bdHJaHG6IjZjI40UwbeT8rMk2mlPP6rZil3+K/M32rTripCw\r\n4HvgXfcwhnQxXuhXgvj4c516cAItcJQQ/1SSZDHE4Vs2s+wA8YZ9afYuoNs3\r\nwLDlI0j7ysff5yZid9AcAsvsLJBP+Q8/akC/Fetwt1yuNFARCniXXbJJoaP2\r\nGRHMcdSXRju/yMCUsrysoonfmhZT5dmnkox6lJtSnIjE2DXlx8ueemfsx+70\r\nvwP39gJGivUJFDwmln2qT/3lv+d3egD/VHlqFNX0pJ0yyewbCqJsKumId8XI\r\niHN0OZ3XJkCx4iVmyd0fImziqur+HEOl4v844LSnpSsHYM41MD0xi5s/MgOD\r\ntAhpyzDkGElsRjYnqBLTHQPfdIfGTPgdQK/rrZ0SR/cKw8BXUWfNHNDLHQ6d\r\nXx5b3ubUuZvujkvKXxIxJtChXSE6m1xzDuCo7FPyoWpnZ1r6A/TpA1B9KzVV\r\n70KRde5JFWSqRydHOxPol99kIR46pcd7d+NJVs4ZboIRNa2r8tP1rdItpw/y\r\n5oYBehD2sL03QBNpgT5f98jKCRys7z+KFA7Lr/ybOFwmlVZThe1+TKtC9Npu\r\npFfdcWnffYBofbbbyLy+VJ6huOgmawcmNd4=\r\n=W7Od\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/density":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/tab-scroller":"15.0.0-canary.a86d36fd2.0","@material/tab-indicator":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a86d36fd2.0_1669774578965_0.11322409035394321","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3a1f46c66.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1082ad53605807d99a10c213fd0a346fe74ca4a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3a1f46c66.0.tgz","fileCount":37,"integrity":"sha512-xpcpFefD/cJNTkS0paApbGAOZflf/Bv4eRv/vGhqOZRiD7pTL7LTdN9gp2EnkqOHQoEMYWR/YNHm/7d7bcRK9A==","signatures":[{"sig":"MEYCIQC2PNdXkndAVS1/TBGas+aihogWRauSIKVssOkfYcYSbQIhAKRVyJHsDvg1wUKoIIhc8KhZ+QyDFCIGtZXd0HDl9fFb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0gTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdhQ/9Hopb4N520ouI1hKDDXQGqk1Mof5puJNOsy4uu2s/GjjkF+iQ\r\nVDDdngz+6P5tZ2zz5kJEpzi0dqlFQIhFl8/UdDWHHWB3121vrsJGjGZlE4kf\r\njgoZPqA9JE/svOVGUKlO+CXnory1i5SF8tcdaFM+8gWlUoSAVSskqj8589+P\r\nZL7jrwcr24caOvdSosEOCS0ZLwzStPlhUj9jl9Hn6DrWg07iQHaYrKK1DApd\r\nWQ6KOOwoCs0d+5yLBuTtlwxMqVdSfFrSreik2io/r4YVNiXLVXKcxvc/ZDa1\r\nlPxSh4YKgt2KFX7Xj5vPewjBZnCTu+jTDu5ltAd5C4rmDQacJCxpElccQjG1\r\n4T3luK5ZXMtm1tUotzTtsoh4S2KeIe3MMrAO4H53vKVR/REIQjH+tJpJUbkI\r\np/o+Jf5Fk0OJFMjwytAU6B1UEi+B+bvqIY9lZNGCJ9SyT3PIIoI2lOfIJCp9\r\nTtbOOllXnFmOfWHpawobyYuKTlR2z1RjGCyVaI0R+Ssg/EV0vuMNyR8ByGa8\r\nea2kJitnZZYOgi2Br8B0vp2U5n/PXg/MOGnUYJl7EqIDD0hJ3b8rZhnbPdhe\r\nUDLZn0vs2GMnVw2K6MerDwCPNtEaz5m5lg55M6Kpx6xgsPnBsFSEN7djlsYR\r\nF8ccb4cZ+tWmkBUsQUmsUPfEVtw4Ga2QQcc=\r\n=JVGD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/density":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/tab-scroller":"15.0.0-canary.3a1f46c66.0","@material/tab-indicator":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3a1f46c66.0_1669810194941_0.04645006272652008","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/tab-bar","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.32d8a9648.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974cd68f81f4d44630281e6cae7e4cb2e9806743","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.32d8a9648.0.tgz","fileCount":37,"integrity":"sha512-yY+YYa6iJMJD8rY1O7OWycIS8gg5IrN+8R/KjkdM24MpEFS73GnHLsMP9s/oqLfBgLHY8ifyC6gGxq1Fn2CuPQ==","signatures":[{"sig":"MEUCIQDAeX8f7pZH2+wU3HLdUh2zc02Pcqh9QVWyPvFCUWKBagIgDdLLIg1k9XOJ3U084mNXnvB1E+u9stg1SQ9rgXLUzYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsjA/+JtT1JR1q4kVaZLfdR8/KEB1zRt4nooUu42bsiL9KmyKhDwjB\r\nsqqZ0D1m9hkrRXk+nrpWqi2CC0gopr07o6unWpT2BiWMQcMVCjkIUlznQ+G2\r\n6iYWcOjDr3JPHIwMrtyYKt3HSx9iv1sYtQCd2I7V/cmv1bmvu19PQ7Cbrg7o\r\nhnKsbYb2qOsZ5FWvv7ZihNq/ZZkL7fvexNjaSryh6i8qEDmGiNGUoycrljli\r\ns858kMCzwe0jFLVVWj1bQRcghNtXoNgqREEb0yGrQJmk4r93hBIO1GuKfhXN\r\ncOiAFciHzRu3nwB/9scEMCit1aB4hwlOdAiHxJ1yz/Li4XEWVCMGtpMftZfO\r\nD/ncaVPg91YlikOxkfKbHLxzuokjvdJ/IYbU5/pHUODh+Z/vAAbgQaImysyd\r\n49csA34zWII5a/idNl/ubPUyAVNjedfy7ZAK/62x8vUtqlUlq76KrRUE8VYq\r\nMdS79B8bBoxKNAnyu9yP0WmccVHBXali0iv6Mc4zOxpefU/sKhnp9UB2I2cb\r\nqPDRx4i879Zim96MGkX9WboFRgGLD6nMQbbtY7CXJAMqjfBPR4udRFx3iMiN\r\nS5z3f0byNNPL02D09wnnmKsQUQ4X/u8U8YtOsBizNjT6Ap/anE+c3ksYzKE0\r\n5KVVJV6Uz3fi1EH0On4AIBUnpX6APYugG3I=\r\n=LCKZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/density":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/tab-scroller":"15.0.0-canary.32d8a9648.0","@material/tab-indicator":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.32d8a9648.0_1669915883058_0.39876170354327267","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/tab-bar","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.03618ab70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da9718895c77f6236264970e2ed0a3ccff6c1f0b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.03618ab70.0.tgz","fileCount":37,"integrity":"sha512-7H6BrS4NEMCj8T7cZGl3RXZVocDejI+jDf+XjqHs+KejfcYx6JWTcAwX1c9Nzgr7KbJrNbszIsaDiEsotuhYPg==","signatures":[{"sig":"MEUCID/h+xfQCxQY84ltUwwv6nerntIFsWxKGDtJwfj9FdbzAiEAkYsd8DbizwNkLUxlYe+wVNF9I4EEPxDp2UPk/2N6E/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRUAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUgg//Rdz9yUsKpUntnNqT9FACtBAVUk3W6mN8tQnlea/tgOQQYMiz\r\nK8AivuISshf+Pdcmn+1YYQlOz1al7Z8jzMNryHjzA3tNtuQWCMk4CF2J4hHN\r\n1Zi3DsO9bfInUSR4clPPCHLcJMq9jVCjuxWoeLQyBmRouNVGdAswE9fWd7aO\r\nUCSbni2lBHLSUGYhhycex3/ro5Sx1AnCXAEMnw8ibRug8FcFsWDfYk7hYhGq\r\n7cGEeq0hUBIhw80+qky2h3nHEbvib8etv6JMEK1yLQI2OSlFN0se6OOhYMEb\r\n9M1VUx8RWilZVP0Pm0vQ50/bqypa6N24C4RBgG/ExPaNozcNB/xkxX/VLa2G\r\nTzQK0hjIGSgS27F7MDjEIf1gjIYnIEj9EFTgKZCSpofBiqqjhbfUJOFnCuj7\r\ndwkvV/HNVWtLI/IJUin9mXXORL9XfFudQ25YpvNS6LEz9aJqeOHQ9T4+5WpS\r\nhTTMX5t+9Oq1VxgIpboZnqU6pLfL2ZA+OJg8sFfVs7OBR03djIB/277zm5zv\r\nOAErCpDTktCDF8wW489Ak5OZyV9J0AEFlZ5RDrwrb1Ly2rk8Vn8BWy58tt4n\r\nYr79ZeyAHYRjrzmWy3JzuRWL48lIJHI6ORllatIlNM8VUDyLR4FW6XF9DuxA\r\nS7r+aYBuSXKVwXIv0T0miusFYduZSOB/kfI=\r\n=cxd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/density":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/tab-scroller":"15.0.0-canary.03618ab70.0","@material/tab-indicator":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.03618ab70.0_1669928192069_0.8160586991265257","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/tab-bar","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.68aaed940.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d633aa9187736bd95b69f14ed5d6f9dec706e849","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.68aaed940.0.tgz","fileCount":37,"integrity":"sha512-ph577Y5QA8B+j6E+1RFhBZHA5gq/TaI9XN6IeaZndFtb7VWN/ACmeFgy30JKSg3BedSsH4PQtOB43C+PcYwZrA==","signatures":[{"sig":"MEQCIETTgIHHFKw1LcA1WI2c0Xi4lkg0J7asmYodfq40HkkBAiBcSfhqf3SK6YHPbSVPDU9f8njl2hL+sj7Xs6vhD9ZVrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRv+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYaRAAmL2JWybHrgOXmW3hDOQeX7lv+pXTeKUJvQB/4C5EGsOXzACG\r\nGVDjKx/HFcC0vy+Vxf2YB+4l41pYTBlouysu1lSXzc8jIEBMYtri6kl3tG4l\r\nmKPcEH831LHPm8EXg2OUu4F30oGi5nxHieoeFqIUItFcEpdqrNF1h7bvCMJ8\r\nOGiaE3sSPtp5YiCOXRg2cFVq8cKnpeOyX+6x5/BraIfwapd6xygSUY3Mz6wV\r\nqxz0nBux14I6MR06/e7RlsjJS7lRWpu56kJWW9GLtLG7VsB4y39P5ppdtc+7\r\nL+SPDDfGJEtyEeXB1Hk0v3r8ef5FYNbjjaETGupI4/axo+SXvR41lhmw8pz+\r\nupwMHGpbv/9aoD7I9EMWafRKXz/LjLa59oXwkjcJm9PgS0h3t+u0nZuD7Kqk\r\n0/fEwyAfYoIHzls4Frazts3zv/a4swN93cXXZr8dIHcAwRsBnIxbz+0njKup\r\nhqYI/BxFnXO+L0jHsK3xI5O3eMaFl0YU0SEb1PH67epY9DyLnGvPUHl2Ee+t\r\neX7dXS/b9NbfJd4a7SjR6hB1lHTsxOETwOtje+p8Mo9/dJE5e5BJEiRcfOxO\r\n6aaq6WbDddXJtzKWKPZoq6Hly4b7Ld/yhggY0XLIMdO+NIVMKtz9kffvq34Q\r\nm9CldeWU54VJpDIt0mi5xCIAK2/3+G1QG8c=\r\n=ehNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/density":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/tab-scroller":"15.0.0-canary.68aaed940.0","@material/tab-indicator":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.68aaed940.0_1669929982014_0.42194929214862587","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f0a0bbc75.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4676d7fe726049cdde722e4c8c8b0a881cd7e98","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":37,"integrity":"sha512-xllvBd/ksYzGNuzmw32q/g9TYPny8arbiNmPdsl8MaQMbI+LRO6IgOVrF9Wxx74XKyHr+CuzltHKhMi64EbUFA==","signatures":[{"sig":"MEUCIFXg0RGrCmd0qlaroc88Egljv1DK2pNndu6QtiSEYUu8AiEA8TAB4YINlcKv2WDZz1Niwj3fWN8esRdIiMih3qLO6+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib94ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHZQ//UFLXEG6wWlSQowFNYDGxyDf9pyaiIOpe+erDxewgJ7rNbs5Z\r\n8lvorzAcyzsUPKMJP9zkEBnt/asnVI7I7e3rQVRGynt3VmPKAgjKX8OhWahw\r\n0nfPUrgkwL1St7mDJNyF4rU0nlSAT8n9xAcauW/4jqXFSJDG6niEKuGkTQGu\r\n7FsL2RgtUJZLcSuPCzZfAXqZ1jYrFyiO72+yTHJ2yBqm0v3tALTGMd/2Dyri\r\nxWbLNrRkLGS2p9KB2ZjjS93qK/ExHV25TBhjr2NiDeXkhhKNdz2Vw3ipbKKx\r\ngoYfgPuMlcO15vVC7QNXXasjszbjf1pN5qONoG0T8b7P4zqDxt45OLX5XNo6\r\nyi2XjFkpffQvoJe2urLhFLTyyHS7vzbIfZUUEHAIAQi9dpmFHxXzCOxdD6eB\r\nsuUeThipLF08M+BWuzA9J1QhFXdZhKmux9LjZsD8b08rwfgXBwS9e20nuqDG\r\nonI3T9fk0JhsP5+p8SuFjKhJ8FLd+N0KJ1a5GYPso2Fp1GQK3XYIbboT8m0C\r\nbsCMrpUbJ09ReAU0MkooNGAwaoY3rvLpnip2G5BfuK+FnR5uvahs92HV/GJW\r\nMHJ5cE28tPX7Afut4v3VXVVfVuKu259esXkLi2XmdTOUAekRNCpBN28EDEyD\r\nLea4H9lTpzR0kIXNjc/UmUgaUej8GT2evAY=\r\n=mq6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/density":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/tab-scroller":"15.0.0-canary.f0a0bbc75.0","@material/tab-indicator":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f0a0bbc75.0_1669971832660_0.5723912594209575","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/tab-bar","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.dd99c8764.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294bc46138dfb411ec5a53dc5ba5a019c4a72e62","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.dd99c8764.0.tgz","fileCount":37,"integrity":"sha512-lL0ZyYguXL9sEguNL0Kted83q9m9cvKUUq/AIQqwtbi2j8Nug6aDPCeBA3Y1bhKmyzKTc1NWBx64/zKp8fRclA==","signatures":[{"sig":"MEQCIHQDHVGgRrSUS8WaJvwj5CUtdgug+gitwZmJDK9OWndHAiAbe28AZnyct50wQppe38xOFytDss97t389fjw0wxsPAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigWXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx0g/+I+0MqtWf3tK4I79v87teSKDT6+12bG11lr/4MuSc4ma2Bk06\r\n7Cv6i2L9Couz/2KM9VuE0sTItMZFA7zyybtdrAgfWZRWi/BtWCUfIJtiE0yD\r\n0yIEra1NZ1+Xx6UayK0WtxlMyHJO16bNDNdrEbZphIEaDSBYOeQGypRBlJRC\r\ncyeTqTAQqY4dmoFntKMbHQKdBZshndxnRMqFdc2ZwhucP7jrv6Q4k5HHdESZ\r\nT5+85szYio4UxbCm9zyFOs27LL72tOnBOpkRNYyU/4YV6aUGTVZd+dSVGdsL\r\noweU8kjJNqNqfMJliRjugViMcwpBgL7EMyQ8+xTlGp+d1v6mVOayVJRAMnHg\r\nEnvs85OpAcjh2oDG//2q74C08jqZPoIV7XSGy/eTPEyGEQneW3a5cKRjhD9u\r\nsy84WKjGQCY+yCeXP2AjDwqXrpF54vCvIlB8g6vG1Y2ToQjOT/qZLjTqLqCw\r\nGahQOEhv7o/DG18lv/FqV8RE3y5aKBzXkbjkVCRbZJnTlzLXsUYBP6GIj+o/\r\nIIsPDdHtq4CC+AWHlMMhgS3Hz3E04IsODRPT8+vEomKdpejy5z6zP7XzLKkE\r\nXqMTC4P38lHPvC2By/Vicial/IGLMnDs357u1H7wINV0r5yv0Ylc+lHMBZBT\r\nS9WqECPh8OhPCoL5YTu5VV11klcA71ym4Gk=\r\n=v0SQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/density":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/tab-scroller":"15.0.0-canary.dd99c8764.0","@material/tab-indicator":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.dd99c8764.0_1669989783363_0.672016134495607","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fabdcca3a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79d51bf2a5cfe1757610a9ed4b47ecac89d9d7f1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fabdcca3a.0.tgz","fileCount":37,"integrity":"sha512-0FqkqHCXxi4UggfBrCuRxoRIyzrNvyaICgoiwQie9QbPwtcnwxWRh1kM0d6iz7WU6VmYhmfSQ+eyF3vZzuUk6w==","signatures":[{"sig":"MEYCIQDCzsLrGnVf2my/vW/OE0lWJ0gnKQNRV0BaOvYxAxJiGQIhAPfVGPRGiEVIV2cvAgPN0JXFVOibF3iO2aO/ytlbgtRK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihUMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorHQ//fIPSfA6o40N/Nc6ftsEX9LatVlOhp8CrTDkkDtTb9C9/3IXw\r\nbJIJT+VljZyK4n50uOcMMT6sqvpSqLyBvOQrEu4nPnLI1Ud1xuvxsml0RTVn\r\nFZRDIqQWHsrxGtRk0jd5Hz6dJlTht3010Pc3uXj/REyCpE1xXEyEQVSyOj0B\r\nVKqu7rJF8tY1BzkwVs03I2y9fmz/kB/J+tt3+UarU4b2vgeeeBzGWeJEjN7x\r\njhF85vXCRd0vNKTApiBHbspWVyUmBv/6uVEovXiIVJQ1t39tCqftua87RJZy\r\nqzyyOVYhcUMuC3T+UPN82aWCEuJ1neHhQEGrGVviwNjSXkw5S/FW7Z08xkRb\r\n89iYzri2sR7sZyrkLqo0S6kVnAjixWgShrE/ZoNKhElUBy+gvg5DQg4jRjPX\r\nfgNUlJZATdYpnYWDpHFj7A477xqFDiE1T+mi4F3EdXX25DchOpyTgBSxjNWa\r\nJSrxVihKQxUf/2lV+3FVJWBxc8b1JDlLgXdcfHoysLkUdXk4/63zSAW7lAhv\r\ntvfiboWU8VwOlH5bE5fV+ruUjz/fYBDxgkDFkI/oZqIl//cmCd6hwAjNGmK9\r\n0XOD8kPACq1uaIjCOUnydLZR1zbykiYCyN4qzRoY0i5SNd2VGd8KZBShrvrM\r\nC07jzvQPEaNzil0Rejkwc3VSs0HeqFNrHuk=\r\n=ut9U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/density":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/tab-scroller":"15.0.0-canary.fabdcca3a.0","@material/tab-indicator":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fabdcca3a.0_1669993740202_0.8428389119835686","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2d26722d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c20bd6e8e1196d3c739ee8286c7826f66ffc656","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2d26722d2.0.tgz","fileCount":37,"integrity":"sha512-/j2cxSd7MmTLcxGKvmKHYDmC8mc+36rGgyWTb+P4uNaWjbcAEdBNiJndXH8dB9EfzJVmewWsBiKtfoj6OPjtyA==","signatures":[{"sig":"MEUCIGPZgD9jB9iksgewVKhrzxZX/3ooihbRr0EIGj88M3eqAiEA7heSv+uXfqIYN0Fn5B6aBxjjS97UwsnR21E7cPbJK/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiie7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9yQ//ZU9GFmjFA489HIlNHzLPYNeESt8e4jBfLEsBMrg6cuE5Lp0r\r\n7QRl7m00zdsArIhENFa21OTlXFKFOxZ5cOoaNWR/KtZ69KvTdmviQb9lGwcz\r\n96lIl9UhjOThvj+CmfEVmKVhQONnj+GLPn+il0gq95ECDhVIukUqsX/wZifs\r\n1yJ0x8ozQcPiv4NXU+Sycquu9OSIZJmCNgoi+Wg0RBMtTfeyq0Xs9d2gaDHU\r\n8dS64TMzBlz+mR1szXblKCJqt+cByblAeSTibrChMsMcRQ9by/MQmFVoxYJB\r\neK2oA1Pwrn/VzgsbtFZTOOGXJ8k+qsVgXhX89unXJ8cbmPJIQh28NexeRKfJ\r\n6GXtMCz8GFQFnMJBn0eRb6/2i77Fvs2n041/F/zIvg70eCHDMuDrsE/l3JGb\r\njmvwALHLVipn3Ys1+9KYRCjY5fMjF2f/OAD/ckJJE2N8mFSJvux6Z/zk00zm\r\nSG6M7uqxeh+gdr6/bpRVBx8cOAk8i1JmYAqVAx3gcAVScOxS/4toqUQb1nV/\r\nIxMGswNQ3Aq50n5mtrlnCmejprArIsuTje6+hbwPU6hdJAG81vVLcp7YyxqM\r\n3Yg9c/MhhG0qsQoq2CDrCbHYnbfTm96NycNIz5mqz/1oeDgJCb3WBwNM4JR8\r\nu7clLHt5IvzqQxnFkepORmq5GnLDlY4ctbE=\r\n=7P3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/density":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/tab-scroller":"15.0.0-canary.2d26722d2.0","@material/tab-indicator":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2d26722d2.0_1669998523067_0.30288269322096495","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/tab-bar","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.eaa0c3a86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"036519351f4e6f0330390c719d701155c9f1616a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":37,"integrity":"sha512-0IRWjjhfqmNHaFDdy6W7g8zR2yh26y/Zqc71fyrtik/21mgAhFLB5I3GyRYiEykbo9pFmmIo/OVNnRFgdJXVNg==","signatures":[{"sig":"MEQCICnyIzJXCc+hDo2XTxuAEqmam+1mCsNCFJ/HLMGhDlXyAiBeMANqpBk89MQE6sA2IO/nemZ8ct8tKDgIoWbX8zl0TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijmXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJOQ/7B3nwAyU/5L82t2r1+vBgohH5/Z41nWJitgiK+YRRE4GoCQuW\r\nRvBwwtGIZ3XxLekOUvbTWOaCBIvebdhrCbR6cxy3pkT6ou/ccUJ2VqdI75uR\r\n+Q+rLA6UyFO3tof5erntbgiR7d9RwEem8f8A68myh5BLvsFlo2b9w/SCQQ7k\r\nTck/sp9KfRC0qlWAx02ZJ31pgC8ojSmxOB2ckZBTpNC6rrshXlUtwIaR8kJ0\r\n9qbtGAbVR8cc44QJ2fW8Kw6YsH4TdIsGsf9v29VIJ16gVwbOB1C2JNdc8MUl\r\nFHyr0QiYl4amE+gtndt7ELx69Bi/jQOHEqRsakW8jYv8iuORyRxkyFSbt8M8\r\nHZUg6zMwpbWBptrvxVf5iQ1Q63JDrGRnikETrd7ExJQrfjz3wp7X2KdvCkox\r\n3nGVGKif8NbgQ5njtbEsJPqUqv7+lO/Vjo8yKGV5naiWQ5WF0hk71nV9bI53\r\nVEvvVGAdNhAlbbDdQVBfIvFDZiNO03ina7zqLsEK1NZdo1kgKi2pFCGmrpQK\r\nNTmF4XV1dWo/NYgDTj+OmG4DbJOxYumVb5UYCzMmO5JXD3Ur9AHU8u6+VFhH\r\n86iIaYrpTxLYQoofR00C4C79PaOW65t4Yxke4OxUTxH0nu74uM7HLzrBn2ig\r\n5N0vl9fJw2ZvXP1CquXFN9NAps7CrlK2trc=\r\n=j68f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/density":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/tab-scroller":"15.0.0-canary.eaa0c3a86.0","@material/tab-indicator":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.eaa0c3a86.0_1670003095683_0.0803554747923565","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/tab-bar","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.79a613bbd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1bbb46f29002413f419b77197489254494acf9a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.79a613bbd.0.tgz","fileCount":37,"integrity":"sha512-HrW8WC5Y8pdKvxzA10X3pwuaMIStem5KUaqfol89fbyZFlNO+XtPsIWcbWhIqw7so3oto2M1YZPJ3211EXHWog==","signatures":[{"sig":"MEUCIAafZzftJia5P13WStzjjPkFPAJ5A8Ish5XbMFryeZc3AiEAgCLAigaTctLrF/NX8w5/3QEZJPIRlMqKdJcXAn46A1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1FjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp65w//U4s7XJooWdFHgsMD+AG/I+jGWQmJ6GVQAXDBHPITImrPjzaI\r\nwRG0qEFLcwHDtTFWW8/oQiFLgKU11XLhexzYI49tV0gJghRJiy4QQHyzYe80\r\nwZ9HFPxGzRr5cODN8yvZ8br/7XYb3xDxAABn+0FokCklUTtKyfbciWK3zdCV\r\nswFb38FDj8mFEXoX+W/CVIngxvg2HnXYEZg88Wb0Q2Y8d/i4erC54yLpFcMH\r\n3UWZ9DR6TOt6oUN60JRwhGmwnbR6D+nPPPDawUkjHSfzoCKcBDOYjfcx5n4/\r\nAaDmao3ZL66EuBrkwB7IUgltp0G+R4T8EeVVWexd/PfuY2Kuag+WDR8notzD\r\n9v+VdgK1y08vsFs/tlCdr//ovVrP1/M9dKKFj/0wECjfDdJ4NknGvb5Hivqb\r\nM7LREhRaRTaJZtBTv6Q6KzbfOTiueFtRS5zHcVXY1TnwO6NIgeIkIkQL4No8\r\nIAp1J3WkGnvB3IOLmdmwyNkV78wV9LZuEYo2IDaPiQWy2yVi4GZEn2ACejo7\r\njkpeWxVkiW4oeJb5W2j6WGV7r9fz8aQGZXzxieD+JOM6jmlWt2bynfq/3hTh\r\nRTr6BATSqKcNLPQaIrO2uaS6leUT6G8KXOFbfEZSGhnJhffr/kH/bDVFqkAo\r\nms5HrPaMO9lfjS4loMAAwgfCA7MlYiLdKWs=\r\n=XA3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/density":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/tab-scroller":"15.0.0-canary.79a613bbd.0","@material/tab-indicator":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.79a613bbd.0_1670336867215_0.007199750856478504","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c871fe61e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a77cf699c562e3ba071c5a426c132fbcd156f0b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c871fe61e.0.tgz","fileCount":37,"integrity":"sha512-MstUXm9X5s3cElz9kLbmkhrX1tlqSzL2zJ0ekujHCtrJLmkMttit7LNVfEIp+SIKOEL6l1YpAEaTs5/B4LXkwg==","signatures":[{"sig":"MEUCIQDb3MHyjnhAVEPU37BqiyFl3qFTzyZgfP11QMtfSyxObAIgL6A49k5s+cTcVBKY50B0qe+yt5hcTOru5npOQXKqxiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEaTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocXw/7BtAZH/YP95/Mf7Z/m+gXUGB2U9F6Ou3h56J1tMwBQVxUhtqz\r\ny9AhdXOu3LoBzHdkrOEtn4PIkCvZEisDWKjh0LQC/HdiTD21wsj0tAm9rMzh\r\n/o1H2vNtUDclUU0hMgM/tTMqDGctgbtB6GgYlbztEvj+KNkXrTMABGPSaFHi\r\nz/K9EnePUw6D8GIpupQweg3w1tOAYWo6OljsuzJ1enfjpyBlXO0yygjNzxH8\r\neyl9wMGbTLyHNAF9CkbKE6y+5KcfHOtJQEuZt5e7e4fqickcS3jPRmOeEIz+\r\nO0s9XMtnYT+KnSef+v5jFfkzSrbeZrvvAPoe7XfD7PJ9zndneNlC3QCaGOI9\r\nXPmBgszoJFeDPundxJIoPc5mvFC6EpkFkdLzxq+TBXnf4Rasf1tGiIxRcIl7\r\nM1ChFrqtUqK8+o8h8zfPD8yZL4oeFf9VhoU66DkiJ7tKSVkdouHgc2Qq2m89\r\nZCIkzqkhOGd/LKmsTNy3IhT8toESjriBBQ4UTdiVoyIyJpsR1ufk9rnCOe7O\r\nqbQa+IZN5pt4PSNPoTKCkTNnUcOHskqT55yobQR9Zxk6gR2uZoWaiGgLiBY+\r\n2XFYirgPIBqbOTCz5RITNCcoSJLA3u2UxW4atQqLJ/q1khzFWQelpfKI97DB\r\nnw1I/KXlpZOOmVYHMaCQfdE7/xd2gjQkaOc=\r\n=jeRy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/density":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/tab-scroller":"15.0.0-canary.c871fe61e.0","@material/tab-indicator":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c871fe61e.0_1670399634987_0.5345318436921054","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9eaee7936.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac2b2896c69f1bc4657299ecc3e7c772e7847cc9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9eaee7936.0.tgz","fileCount":37,"integrity":"sha512-CuX3AS06L1odqTlRO0bXKwLp9Jjsxtcio8i8Qh0XaOkoqrjZlv/+bYLUcVKpCp/7Ft8k8KANxpOi5wT6JTeijg==","signatures":[{"sig":"MEQCIC8z3tXTV1pqvHPBsA/45Vwk+6D64clSoz8rqFEUeScDAiBrNn2RYtLlLPAl/daUz+vcBZb2LRBUMQ00m9s0knXk1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPIZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAAg/7BimxJv7CgCELnsv30Xwlddgc+EeDuWrq8rPD3Ic7KzeLMPvH\r\n9jaCgDhe6vTgmwDO1ObV4NvWnn0qqiBVnZGVUJU+F2BqyMpafY962R/vEMeW\r\ntpR6tKSJ3/mo869J7QxTu2B9Cp0Yb+LE37CGErBiz71vu8HK7lEn0zUVrsxr\r\n7GKcgYXoRh/IHOxaUJe9OUElpZ3lbzqdWs1bEWDCt0zLftZbXTm3nif/lPo/\r\ns0xWuQzUyFAh6VRYrtH444/yT2dPNJWFeQv2JeTEFetCdtF2aGfdVkcOQiVi\r\nOijBe/0SA5p4mpo/abyE2T7HTXFJudkCsHROdUFOvFddzs+alvuKMItjBuTa\r\nfy6g6ebisRO8Bi2Pd/QxKNEoI/wneDz8Kfkv/71xyo8rjA84zCMMT+7OlAdz\r\nw/r7y+tMX+rGTZTX5E9Hk2Fc9n0KXleTN3D6iZB+2z1WOeh27Z8lSnj81D9C\r\nA6SMgbQ7V1zz56M9tGqUb8s2lLv2pyqesZcMlpJm80NcOo8aqZS64InTZLW5\r\nuOBn2a6ihxxJJZGkzrQrgyF8Jwepcxm6XSsFSzsVKsj7+EXCafSacWl6MxAh\r\nN4rpzamd22bAQYupi2LphQF2LE/B74YLxK17nARSTeutcREIWC/rvy5RxOSj\r\n8PEGL74wjXCVhD/ZcyCa2LklTH+ma4k4gI8=\r\n=bqz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/density":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/tab-scroller":"15.0.0-canary.9eaee7936.0","@material/tab-indicator":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9eaee7936.0_1670443545348_0.09928243709308782","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1d37bf601.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0840ba69e4346a377ebe18e6e27553d89360f439","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1d37bf601.0.tgz","fileCount":37,"integrity":"sha512-ByJYgH1Mk9jghRxfUbKSmE72ApO0NqppB647zeqx5Jhd3dluU/WJQppYg3R72AG897Z82IFMuQoJ5TS81jXWtQ==","signatures":[{"sig":"MEUCIF7hiW2UAMaXdzUSytNoFCyN58Ku3qXWeqUXy5yGo5TPAiEAnv8nmyIR477kVlbXqj+InzhCXbvS5TqpkNpmKoVzaV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJHg//X1jhJRObmXJUQcK6PHuWTmwavFZ1yfyvxEoPmWKLnlv0EhXc\r\n0fk0I00Cw49dFFAb1ncZ2SU8I5Smk+8wQ4JzHSI60h2F/0g0tuXTH3ECQgFm\r\nt2CugJEf4hJ5F4uiMXrxivvTqF0spAKbiR+8ra67HKqSQ+9lw0FJ+ojMvahw\r\nqH6WBLQO6R5UKUt3/xczx+EsbKGCHwQmMvWXkvs+P7rVx8ot4K6V7YteYc13\r\nU1eqM1nIFaYEZWkMuFYvzj3BWkhBHDXi9uaeWUzPfcicjHRLB/lfqQ+3FV51\r\n0RjhorGjpRTM0zYkfj+xkmlrIiVidEmfwG/tQHZvoAoUzAQSmeK6SfJRfdl+\r\n3SVBO9cMff5I330BJSwI9EAiIcIVH4RzQnwciC5qpT7PSP/FEg673hWC1eAY\r\nu6MRj/fDMsQFDBZdBNpAMEPdidFdsPdtEp+Jh6ngZmxtden99BxFsaR3Pegw\r\ny4RUEsnbqIPd0OVc3CyApU1oiTVojZsD8qAji2lAIa6rt6uHKsFBW3Rm0hsl\r\nLWwV+AaiR7E8ihn1lJQz0rANsb3JjXtYnFZwErnrENZXwtfvZxl+UwKj53d+\r\n0nyZU5gUcHmmzQMAslwpgDqcrWFw0IwmjG6exd0+VkPLK+ApehG2mwyNCJUC\r\nWoKPZ4dRFKe7YEti0iRhXlQOeYlhL1+6TEA=\r\n=nj/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/density":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/tab-scroller":"15.0.0-canary.1d37bf601.0","@material/tab-indicator":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1d37bf601.0_1670445804180_0.231154499053301","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a5fe069d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c48c7bafb1d733efc6e1a7f4aec0c673e1927418","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a5fe069d5.0.tgz","fileCount":37,"integrity":"sha512-o1WB4jYNBuxRbGNzUl+fOS7ycpoBnP42EqVZc1AfWRkEfzm0hajMIAkUygJMErB9Bog7zVLIatMAbJwdjGns6w==","signatures":[{"sig":"MEUCIQC5jTDtK4eVwR9P+ZulZaj4+c50uCByB1bBufJwLvopWwIgak9SCJAwvIwpmSex1ReiXuwlRBrH/6xiFnOzoZqG0Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4KKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVGw//SxqGBk4tTnq+jDZqDecyQmNNC9FrlxdpDvuDV147BHq1eZJI\r\nPThs5fyoNggM7/UGbIwf2l+tvJIgCqr9TvSH/qayPT+3TELJZPV7bP78YRWx\r\ntp3ttNQ8xgilVAohh3qihiNtX5TnB1IdLsLuRbiYQQda286/+/UfpIjzJXQG\r\nPukE6dTvBHX3gyKpH02wgPdqjI7wKnk367Z4Db8xNLPm5URN8A4/Zci9l5vP\r\nBbSl1u6s81rL+67g8scoZSSSgcu/JvvhEsSEB+sUUYeX8ExC1Ar8Za+RMoUa\r\nOLTPpZFfJa5SLqYdykuVA8tUFiMC9QxgndL8ca0rIWm4dCGiqiWkfO1f7eTp\r\n49W7yo/CqI0fIko7QHVx6egJcKIaUo+EpBnaym9+YkRNhLghCMQP+zk0Nl48\r\n6AGwhsYytfFIwjkwmE2XEPGI8hkKIP1t/qBCPykdCjlmcwWbs7E1sDzpaJGb\r\nkGReqAYxPIZRFBFTaAtTbCMN1w4XwCrOWRNA0CSHdBojePN8BAgd2du+UgQP\r\n4FELQ6IRmrD7vb+9WFZrRNf1bSiwCnCs/u1qah6DcvylzMZ2jZQDAVU/uI+o\r\niykts5wz9AMGs3RY8LybU6fjfutzxKjrl2JpR0NT5Lcb7LYuUP+hwfRZ3f+U\r\nHwDf61ziOJVx6i6wfR2/Wpt7byyyw5B+XtM=\r\n=58Ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/density":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/tab-scroller":"15.0.0-canary.a5fe069d5.0","@material/tab-indicator":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a5fe069d5.0_1670611594621_0.17660418293934543","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ce8b5326f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a112906c7fbb79036c0980e9a6f867e8bb6e1a3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ce8b5326f.0.tgz","fileCount":37,"integrity":"sha512-eVrLlaStccwNpf5Un5Q9uZmVd1HVtbRmuy9NsVe+Lgd0Fr/n7walMMFN1q9ZBnV19zOP3dtshI2nfNVkNWtrWw==","signatures":[{"sig":"MEQCIGGVguAqFnGPww+Wmt9N8GQoSR/rr0FHy7EjqEOAUh3PAiBmU9PKwCbRrmn87Rmx0M/cw/+xcLzI5AGsJl9ga+cKDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4chAAh8fzRhf4S4pYBNhOW363jL5bkJ56P9bouTcPy1+15B3RcFCm\r\n/NKmm6z7CHZrtg/IuDCe2dyYa0Tb7Eln4ALGXx1MCIu7xttkK5KmZCdYj6tc\r\nBxkTz4vGiLAlfbSN8Y8JfJYybWhIuzU40q6LP8EXYUhGLpct7bKEUdwaM3dw\r\n4bc7S3rzjrry3uiebQVKDedlhXhRTPudhmUwDn3/jiwxFsiTZ60kgDgEiPwn\r\nWIiytlSlJC93DODe32ZCrERWtg9OpLOBzvxeA21dddOL4ZA+YBai0zx85cbc\r\n+uwIg29RQ1LqyLIzWt+Ej/9T/3tRH+HbfNhXtYfBVPdSlhrM/8onOgli2Jaq\r\nCsBkLooCYDjEt4EmyG3GcBdWE2Tx6vXaulh6gWF2ywjTlOSNFvvQQzUkF1ad\r\nF2skLmSGaTT/aIA4cAG6w4aPXE0S3DWNdO8Wyx4GeA/WQ87g20MGFpgM+kfE\r\nxcVNiUQTa3XAFuS1y57PYEv/CovlbexojpfRGnxmKnV0o0Z0mtqwJLeYpYUI\r\nw3WKH8k10lETfbZdsPnch0XDGrHLeQWdAnurwU2vT9VBsyb90gHbW3jqPfqd\r\ngsY7gErs/e4VepNq3B9X1jIDKG6Xx0MWA3BPxRjcqQyWS9FeBd/wLOEcze20\r\nkI4FpTyjbx2HpRJQvTLNAAn8AiORDxLBy/Y=\r\n=TimW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/density":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/tab-scroller":"15.0.0-canary.ce8b5326f.0","@material/tab-indicator":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ce8b5326f.0_1670628771371_0.7447196850687268","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.43f5323bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec8d0c0da7c625292060dc8ca6f2cfe6b5fb807","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.43f5323bc.0.tgz","fileCount":37,"integrity":"sha512-f92w/53/PkGHOR/dQkCVSB9lD+KPRM0rvDqvNoHs9nQ0scU/voAZ2MT4Kkzk3YiywNg3qBYgKQ+7vcZddyxtuQ==","signatures":[{"sig":"MEUCIAxgtfMv3m9nPKkj40PJlY1WVJREWV3oPcZ2ylKzP6OxAiEAk0sqGNUMhELDIEbSzFBpQ/oNY1LMTzTC/FBFZ1EqKcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1toACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjIw//SfQl1L7NhF/MQnIASJpPaWI284Na5LnZKWTIBywjGSvsDLqK\r\n5c4VafD7+QkbzruSuyN2IctCu5bRgFizDKoSSkM9Uu+5NUfByLw98v8hbhGT\r\ncHDKICPzwt5wG3osU9MLsO/EN3q1uVXQ1WcRtIfPSxcpxLdE8Ju3bpy0tk02\r\n2KLko4jfsAumbEQd909jcUke7+osW1yc7mymODBt5fl+yoiGwYE3NkmKJ+74\r\nV3tsZVZP8ebay2hsifme7Xoxpg8su6TPoH+9ph7CufZBZQQifBOx6Z9iiJ7t\r\nS308imssRZNnsZF4o2ot5Odb0V1ldpZ6QPn9NIaxlViE6XaQ2G9k0HVi2HHj\r\nwZZKlYcEEKD7xBtXYeSsTMbcqXNA5ODeIitdRONUVQuioBcN8uhf/7aMkrKq\r\nFnLYUdcIgGmteomfVpRjsHqbHApjcScogFhUTMobFltn8KOD1YYTCnt3CATm\r\nU7rBBsQ7dfie4lRSznNx5jfnnhTOIVKsBTA970JQj1Z3+VP9/dgrP36GOaKp\r\nW0bPGUDZGl2Z70u3eDPpNRDz1F88+a7PZGDkdZKIIHKFyJHddM58cYEm1Xax\r\nGyatGGzfcsK9ywj0uP1OgZ+4kFstYPLOp/DN41o9pE4y0gbXwKZueIQHws5C\r\nia/8wZTNl4mA4sC84a5izUPnEUVWtOMHiQw=\r\n=HYM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/density":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/tab-scroller":"15.0.0-canary.43f5323bc.0","@material/tab-indicator":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.43f5323bc.0_1670863720234_0.5641013707792268","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5490e32e7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"895a3bb5d236938b8c9af26f3a6ba08179c7777e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5490e32e7.0.tgz","fileCount":37,"integrity":"sha512-Y7h9p/5UrE5zXmwZWru/amU467t24ezIK6Aji82pnhAAz2bLz650ERu9tan5scEHnBKefD/sFX/H3x6dDhcTOA==","signatures":[{"sig":"MEQCIDPvg4jl3u+t0Yq7jOKS79ZqHnfpJJrGUSz20/8V9ZraAiBEr12CLoOZ5HUw+aFN5Ofldgm98s45yNOwaG4bfQGHQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl18XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQgw/+IWsZMBvFX1M5uG7M3M0IZNIvUZ4a5qAIx08Z/kPOJtrfm+Z9\r\nabrSeHoF11u9Bv86rPL8Ve8SUdj4uIBdIr8cI3jt6VLGxtLNQ669S9toqQXr\r\ndtb+gt2aKTG5eyjiwziJ+s0xApmRyW2Eis/h8jyQntT1ySjrcgD+MkNHsiGS\r\nzi/3YAT0YTM2/iWVGb/iVTgWewWgz2xO72nAyFxcFAbvWBplnA4zVP5Deqry\r\nQCDMJ1BDymLfdfXyg0Ak/agS9R7Y1fJ/VhEuAZNwKtGMx8fIFgtBcrL7g5qu\r\nijRsmD58NqRh8PXDI1j8VzQrNlZbaj2Qu7wXavKm2TT80HW3T/tfNQJx00S5\r\nupRhBgy939Ld2c+LhwjySvaBWT2RwTajLUfvy+OOvLvJ82iTrido3ZCRkMEg\r\nNiOhA6571oFNbyGHrFi3iCC79GfQIEAe3W9vzsN6CXqexWW4h85ojjQ8YKwW\r\nE93DzxA7N4TP+cuYqHk0NZoql/d19wGwiuQhrncwyrPhOllazKzBPsY9EXVa\r\nJ5iN5B9UPaFmkcOxv+LErR8w6INSMHaZ5E+q90zNo4vzR/d8P8vDo2QNBiEZ\r\nn9xNjJWhPLNnyuGLAts7k9le3GAuo4aL+TQ+Nr4bWDHHZEjyontnBLitjqgD\r\n5FQhSXiSF8THe+LfsqLSwi5LMLVfUICDItM=\r\n=Op0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/density":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/tab-scroller":"15.0.0-canary.5490e32e7.0","@material/tab-indicator":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5490e32e7.0_1670864663749_0.83779804008305","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/tab-bar","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.817002c29.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca969623dd376f572c7b914ed3ec937905e833b8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.817002c29.0.tgz","fileCount":37,"integrity":"sha512-BYhS7uqtxZYizFKWMwWKp9GzEKKLGiti7WSrsIRARP6TIsHS3w9QSGVF/fDKEu4VCcF9UxEx0a2csKQZBqRpsA==","signatures":[{"sig":"MEQCIFVFOWyfux4EBUgmED4ZoRq7M9H3iElsls8a8AXhATBJAiBUXikHwtoVHojt+554ANBkSUJQrXjk00D9j2kEZzwCyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPUBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaWg//Y5hIvNu79G1W0YAdn1pBLyKmMuIrEKN6QK59+AjlhIoQ/RTb\r\nyCPxphugPq/Q+YYV2Jssnt0ulXE9EXcXEMCIomWIzV8L3lcityoE/WRQL+6N\r\n6M3MGX6ktDO1X+8LGiM7RJztqRIsEf+17WRcZvOjuzOT1ZsuvNKDKY5HDWER\r\nCqlPSSXFvGhhD+jq3JIbH3w7fS/XCJQZnVnbOSJEqRAv2VLrAmk7UD+MPNXb\r\nFLiiTQfNiO8fcUF4nGeu4iMYIl/zwZcXzbZnPTs3422Dlcv3jO6RlsmPjc33\r\nZnPgytqv6PNfSOuBKSqr2rb2Focx12699m0CJjpDiCzGMvX46A23FjJ89X4h\r\nvUQ0OCekegDu6FB5zoDNBz2ITLBeNzBWKQ9FkoSYLpX5LrUDSlS2RnLLMw1+\r\nnXPSKTdijXFeGP+xo562HF8cnUVPoahpMbfYTHmI4OM+v58Pycy/zlgekPlQ\r\ns9zqzp9SLcbWy1qZjDHOGT1y2Osyp4ElZvgUoM3Wc9mCdk3duKZq55IQp4z4\r\nq3Nw3+Uq6RD8W8YrMNVwAT8w1iXXYQqiasqrftomDK1O0RJp767Glk10dFXP\r\no2uJWa6Yk9CqthAxokIM70bES58qa72XOoKFDwDEsRa8sw8AlSIBaq5/v1uT\r\nxomAjwuqwict/eN+qLp/ObAf1Bd2pXTy1d8=\r\n=jxeI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/density":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/tab-scroller":"15.0.0-canary.817002c29.0","@material/tab-indicator":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.817002c29.0_1670968577428_0.18080652887952509","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.313a1326a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2395b1f784c476e48101222cde1261c308cd9be3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.313a1326a.0.tgz","fileCount":37,"integrity":"sha512-HD4R8idbBwXI6F6vxjpEW1fkA+MdFFR26kIQLi4qQEe1JxyaU9xr5AFzeRZ54BBAZOO5m17SiBVeWt9B9xtBzg==","signatures":[{"sig":"MEUCIQCKpNGsFmakhc8KHRUmQBbWlBx34ngXp5ZYi+2toweFrAIgWvwX8MtmZpJPGfvagX3Rz7amzHkymX+gcdxHSovnp+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrijA//fYGN6Y+MpATalitZw9H0q9Mn6G/ytTFbzjidB02a8xIVYCsk\r\nJYX8t0t0pBB/fa+JtysYAbZnxFfp3GNQYrm8CIeXpAQqK7woJyUFzDbKXMx4\r\nR3/Ue9HGw4ZD4rP28VpjsnNusDls3q45b56mp546ZLidI3/zESZCmCjCgMRR\r\ndDe5QWZRjSC1npsW2DALM3v9GLoglOxRIgs+pD9hqtVCBaxdk5XDBm/isSwc\r\nmSAHUU/yJDlUbbRY5Mal2w15sdcqA6ga5khEcdnuRJwYyVW1OP+n1hh6ePqh\r\nqc/dlsGgrDu0ntj8wmUKbR6qwJYMDvmFrDniis59yJcdU5l/DHMy5HUyvp+q\r\n7vU39BAa639H2YOp4VSbMGHsrnPkXEQo/vJRnzyUZksYTWghWi01dAPRMSD/\r\nWzUyOKssWImAamGpiiBqRtE7mPFdmZwaJFdTPbNjHf8fDPJnfW1so6beszS/\r\nMevaTkZGSUGV8l8xFSKLZCewTtKI+G/9Pm071eiNyTyCRuUhs4D/N/NZOkIJ\r\nb6jtYmU4/RiCXQImFs2L8wXjAspHIL9IpohzbnbO0zNPHP//8SnPsNerjhBh\r\nMskn2ikcaoLtIq+Pz6mjoN31wlo5tcnThYyQZJreCq43cqAsmu5J0ItTecIE\r\n3DRwMwepz1LnaFyTGHTKhpt/TJ3fZxKTs5Q=\r\n=FNZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/density":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/tab-scroller":"15.0.0-canary.313a1326a.0","@material/tab-indicator":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.313a1326a.0_1671013865294_0.6098769207130428","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a69c14e10.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4813ec16043e06f2eefe32f33bd04961c5dd64b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a69c14e10.0.tgz","fileCount":37,"integrity":"sha512-gZEouzrT8yFyge9v9CP4M5q1+hxpnIpkS8591f/WkA+WqAs/b743+NVU2LERicRDBzQZ7sDqvhJAf2cA652ufQ==","signatures":[{"sig":"MEYCIQDPfGWqqTp3SPP/ZTPgIQjHtO2C1khFUZ1T+qCG5CW7NwIhAIIxfw4z+nYjWlmXGT+nc4cm5snOAZeahNAIzCu4Fs/U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcGg//TTGA0jHulhIxLl8Asf1Ksc//XZ4Qd1RjTX5SPUqgmbQY3ABA\r\nL2dp6GT5covboY4UsQ586V3dRUWSoTvhgle/jwxGAek+y2Kac8ksW15E6+pD\r\nykZy/9VVqPfke6xc7NuINBx4Jdv82xDwgOpct47PMPRIrsIMQ4j51bOwsJkj\r\nL09GFkX+CYXn6E/pkzHGnIXMXGIbuWMeOEMsxgyPNnb9gA0K8LxUXjloz02q\r\no2PMpajGW5XMMOMz9c+tGp2eq01FHSkKCQtOvCezicSiWIL9bUVgOu380clj\r\nCb0MwBufOBxw+mYhZR9U1lMYFeLNNLG3wchyOKnTFXaZanaKnjKg2D94Csel\r\nMSCyFxi7GLOx1XQItMPAEhrlQj5osub/ZiB8yCoYo/W3ZX6yAYyIHcsk/eDf\r\np/LF371pkmIMwIkZ22DR4bURIU30T2ADvVjRJWPPNUWPzZ/NQrNu1KThWfZo\r\nHa0pC34RHqt+Ak95Zie503ycPelhFBNM3918eb2Ylv8LyMkOaiQTVqkXITaw\r\no/VxUIrMrV4nYMOmL3TBIl7gARS09xeogyakV4p0O+FaymjLS/2OEKmzcApC\r\n6mC0XR1So7jeIOJLDpkWBSchNBVdstLJnsur013PUijbL+Whm0HMiIRjYgzR\r\n+XuigWYSD/fD/0SwqsojMQRHeVPJAajPAgU=\r\n=r+a1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/density":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/tab-scroller":"15.0.0-canary.a69c14e10.0","@material/tab-indicator":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a69c14e10.0_1671016874221_0.31345081412620024","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f43e0ceb5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaa616ae708756c2e8418553570d9e49b5bb9687","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":37,"integrity":"sha512-271VV5l+1B7BBf9JeHIBK+ehte1bLSWkTiCJgqUtB2F6QKwpMWd6R73meFg6pvErXkANDi9OuvTM9OoE6BxNNQ==","signatures":[{"sig":"MEQCIBYefNa9YYcYKdYTTevS87HAECcglAlizTGA58q2IDSAAiBcjTzQPZpdy3HVY2z9fNAFuUFgXMqVEIGiRzYi6nstJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf4HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr60RAApHbCldUDC5jMhwhS8BPr6PCTh01iwfI5MDwsBUTPuV8JBOBp\r\nZRh3AZy32kS2W3ZSD0LGgS8CJSKA8h4dBGEcwuFau4BCHYqeqweB3/sMpAo4\r\nSP6uStUyhyWTkIYhW9F4P59GnLPZtz4UJmmnTTz+uHZuP4ML9k7OwTWHiSqZ\r\nbj/ToJKqVHcvjd2XmOqN5FW2yTBslOZaALm6F541jDCHZkweUeBW/Ko3vmxc\r\n8RxzT9RKNkqj/kuidUbWAYUe5mKB/DTiBYm9f0rpQVMjUV7q7paSBv3x9T50\r\nnbc3LsiyuDQ5TgpDcCHjWTMm1o+oCAwcCdd/WzloBUSztA3nuATMig8fK9Sa\r\nXzTIX+rLNq5aM3VigKT76nJnvZJM3hV0SxYuffjtTnLjOi5oChgusxyOjhBG\r\nNLywdfPpP24k8+0EqTg3LVraKTNu7rrGLQxIJOiX3RG/whbv7UoJi8T7BfHL\r\nOOm4VAY/8M1V8Jq4pqARdluzJY8/CYWOHp5RNWLCUffGKhXxrdxxS8m2b8pQ\r\ntzr7iImuhHqQtKMe1zI9HewOgHLspnIr9+TOlJM7iIfPHk3LLU7oBNlFQ6ug\r\nVK2rUg/dxzutfVeyx2ET/NpRTdmwmyO6fZ2b1C6akfHc5ShVNOVZ3EDLsPnf\r\nliNprXB8VaEomWXwcK+BTk2BtoeCoNcEhwE=\r\n=JqQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/density":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/tab-scroller":"15.0.0-canary.f43e0ceb5.0","@material/tab-indicator":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f43e0ceb5.0_1671036423139_0.4128991374616362","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/tab-bar","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.34767110.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b034a4ac1d6999efd3794d32f4cf5c6e1d8b045b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.34767110.0.tgz","fileCount":37,"integrity":"sha512-TJTbOAK+3zdWJlxYXaAoxrB3WVNSXiOGHGy9fW4QslrTgBq1XtksFUSU1C8xwl+s8O+c2SrfLyVSi7bAzjL4PA==","signatures":[{"sig":"MEYCIQCEGF/0MuwQ800qK0Yxq/yEF4i6oAatSFcPmNRSmr5ZvgIhALyqV4hJ2grFqt7RT4tgG/RrHwY6AqMD/e+jBLTCV5FS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgTBAAhIHmYNPpu2eR6u1EmjAKw0vPMPRuWfqEymYofyyYGEXs5qkI\r\nkCfJPunDl+Sxr54E9hdtps5rdfXv6lpoSXeyCl5orv6Ru3xXeDJPFXOzciYz\r\nj76pxjq33CSO0RfTGXk7/VEJ0zaGgR3OmnKfR9cWKJhuY2zKs6IUcAPhv3X8\r\nGIF/Pvre7yfflnzSKZue6kDVT4/CTezV0WSI7d18KRkoXz+CLSReo2tYJjzL\r\nDwrSkgZyA0E7hRjb3UYcwdlDlkkaJOl+R7l1B/FKw3c3gNsaQDaiBZZLf5W1\r\nPOB5yIsJh9VbjRUcNr5sAUOEyVaNbG1DN2dTISukEy+YlyPo/N1iq+DBKGWK\r\noP5Tj61T51ENHla5x29wprMH4NonX0h/yMlMXvB+nQe/EbAm8OdNTM8OVwKw\r\n3V+b7pOkH/oU83c4pmaVJgxX+Q8Mu0OE4g9v0RUR/7CO4nZNky7UhgVr2Uy5\r\nmL3Cq4+Qw8ATAT7Wn+kRFksTcyV6Eahz68ji4pOvWtZZXzySokZ0x0AQn+Bv\r\nxktXuEnUGUHBpZUi/9hDF0X2qCpK21MmRJUMiXjAhHAhCQ0eEIYKkvJHNqHw\r\nMQlKsaZM2m/dLuTB1+moiN4hzBEnzY/RCfuVEpXl7fo3BwIKI72CGtinMdnI\r\nwsK5++Jtvp/4d57ufqUYky3sEaZHKSvoWUc=\r\n=m4bE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/density":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/tab-scroller":"15.0.0-canary.034767110.0","@material/tab-indicator":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.34767110.0_1671038545384_0.2630650513991737","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1f99f3c50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d59af8151c52d4ea9bfeec22f57de38d697c99f0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1f99f3c50.0.tgz","fileCount":37,"integrity":"sha512-UgCBOQp2NKOoASL7aGphpyqlwUwRKtyIXrgnir5FjKmEoN/vg/23LyFAgC7oF1lsC853MQUEWqDerQeraHWBUg==","signatures":[{"sig":"MEQCICjcjBEzBUfwA1Iuo/p8sN5EWjjS91zba0vDpq0yEUpOAiBxte2pX6n/Ydkjc8l5i3yZA1IISe8czajCV+Ce8ysVNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy7gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVGQ/+MaeUGgtBAWFqyXPZEZCnY+O3ScyAav1r+R9sTnsvuFfJJ514\r\nPcW1I0FW3lxhT5sBvK3ZXUcIeQKV0xfgSRuX+SyfMl077dR8Puh6FQiDAscS\r\nsNj5aLX4QL85NI+pYtDUZjuCP57cKwpn+7d6KD9M0MVkDyZV77cJHDO7k9cR\r\nSqFqOnewXMU4hAvhs1I+eGXjQppTLC92/O9pexVtObkFept9FjYnq/+8l5ff\r\nkp6H17ElD7PuD6NtZH7FYbNRHEshvcbit5IOC8ZJZu1HQmSv46kKoswRv0j8\r\nNMQrc3iEVAYXEybxVICG+gGbExBCtLjyQXeL9MY974nJN6z0Ji+vrZwQZF5T\r\nCCr43usiAFqfsDEew314bQ7LzIro2S7sWq8KIq/Pn7AkWjIwAhzCuYjd/Evb\r\nLQdy5PgyaMzC5dEF91JQq5lvj7cAv6OqXkiEMCwId+b+SkZsjh+PGX4ueG8y\r\nNY/BYj4dqtcWwmX2qDs/oD7uMqBEnfkx6ao23oROoT3KxxjDh7GfOgvZH1GC\r\n2tU8H8OguO9CrwFjOeQpRSDzy/8plznMeSd8loprb2b6H7QqCJz43WeEDAHO\r\nW5oB79naBHg5Wu63e1pSsIX6nJmBZZa3KmN6KNTLKCphcZkRZZi+l/jHG3Mf\r\njHUvSVw8hI5jx9YRxeQ/Ce+vIqR3ll8XsCk=\r\n=qu8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/density":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/tab-scroller":"15.0.0-canary.1f99f3c50.0","@material/tab-indicator":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1f99f3c50.0_1671114464032_0.28784435257764707","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cfd69490f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ac48ddbec661ce027478d27bee32e383b0034b7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cfd69490f.0.tgz","fileCount":37,"integrity":"sha512-7XpqNNrzwKMfl5jCokVBujZe1XvpHKLFzabvyFyyJh2IaDCy1/pTSOJYhEB2GQauWjSjtxq1ghh+Lxm9P4USTA==","signatures":[{"sig":"MEYCIQDtV6Mfa7wowGuGKW6V6h5PRvXmaiFra9vPGYcAnEj2uwIhAOKz+JoNr1RrweSULQS1TC69C/sSur5mc1cInxYqdxp1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMqxAAnTXyTG53K/ToOxsGNzJe9kXh6Oc0ZsHi/p+1hnP5WH45Z9nZ\r\nNXycbCdE9rueFyWdNJUNjd1G2PsnCIVi0sJiwCtFqjoms/K7yWr2NkVOugpF\r\nhKfzNwqJWo/f+vxaZ/csp3olPEj75SAOm924dhgqQc+SKcek0dN+UuUyBfGg\r\nwJWLcsfeVbQIiH6bEXyVyUT+KIATMuOc4Q69HVrDMN+sQ3RX4eloL+ODy3pH\r\nhNBWsDj1imyov4Uyu3nyPmg61u5ldmt346O7ORvNFxRbbho77QgqwdmzElAe\r\n62gITfo0gNOF4q2o/1prZHk193iXrK+ZIfpYb0b6EFxHUjeOIchhitEbTUBC\r\nr2sQuqtPN+39IwvAY7Mkmnm6uBnXqIfduEJtWZQmdeT5qmqYeQbHV/WxE/UN\r\nxmRN42O/GIfyNEw0fVZ++F3wEghRPk4hKyHtjjAaPqY7rB1WuGGni8lVT5ca\r\nSj9umNb2K5StFJTrABnMsybohkx2UjUo3hEWH2i/zWwPfKZ+1y6Lwl0/yjc6\r\nT0TNjQngDFkWyEnrSzw8jjQU1ZWtAFJBl1hA2vVdP5Z/bHzcoIATmnE9SlMU\r\nEJhXtgVGejD/8xJKtbqUc2v8U3Xa3+e7fn1bbo56LpvsgMQtxnG83WiGT332\r\nDwZm0T3CzQUBN8pmEWNBJpBmdf+ayC2znTw=\r\n=lFxN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/density":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/tab-scroller":"15.0.0-canary.cfd69490f.0","@material/tab-indicator":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cfd69490f.0_1671221443751_0.019344840930886953","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/tab-bar","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.94ad8d986.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20894e511c6d25b0acadfd8d5d78afa0cfd453a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.94ad8d986.0.tgz","fileCount":37,"integrity":"sha512-kmKZ9a1+fDZ4zUzlkH1Q0gbci8+r5hELKyz6h7/Or88J89Sk0/8n30L/d2Q6KozRNhRN8xniZ0LpDBySirT13g==","signatures":[{"sig":"MEUCIQDpwFJdJ/lk4KovMLPG0jonG/eP3NF77FztXtSxvLK5gAIgIPJzGKSVQmPnsItEyT0KXwhZHUlb7rD5NvrHzr/I9x0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLuTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrItQ/+JtZS/KzRqS0siEi0GlHb6VsuDEwlnRB2pDh8GHqs+eagjk8o\r\nxTNTkNySXC/mscfyYUGaflWGhQVT6Z2W7wezSC+9vV8EWKW51sAIeHl0M5Hw\r\nOfYGAMcCSk+poi39ivLKWjX9mrwzCSiWiSGtdsSOb2edXYGwnmRXDRdvzatO\r\nbCA0qW5TxmkO1YxUBhWT/H8Mr61ky5a/3EKzlXssQ8j1iLl/Azu6s5zhFvWV\r\n13aUTe9iBykeywR+0rhC2ojApBHQcyGP/bAl8BYnCCPpYMLmxDqR7JxQQeF0\r\nuZA+p62hDBGXcYFaFZ0A0L+TrE08N3whnJVGIcHOE+p3WIuya4FB0fRUYjdw\r\naj5oco/NTPfycoMHfmEZbppA+vg6WGNEflG3guHwiZrC2Vzcs/ovo7V7zY5m\r\nDzrFfD9SJC4szJFEuuqElETpYZ+T4jOzCXMu9eHnJim8Ww77AeZOXnqdB1Mb\r\nrEEqblgkZRHGQUX7SLPOjfwXRdpMGdwJk5KQmQiIQmljVIk41O1+C+chXMvN\r\n4k9tIMYOpAw8wRUD/LZIW+UNtHAifMy1z7p1Ffk1d1UTv0YDwOxTLFzypxKV\r\nJcUYqLKpCTGtMA4eyabKD6UK4Rq08oHtkiOGfXm+Ffe31l+ujYL/zAzOvTQ3\r\ncQwKtsAoJHvRirM6zlJSbu6bsZqvTQUMv0o=\r\n=ll0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/density":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/tab-scroller":"15.0.0-canary.94ad8d986.0","@material/tab-indicator":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.94ad8d986.0_1671478162783_0.6433479941834264","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/tab-bar","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.604264203.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f49d20bcd29e226b30caf2972f1637b655d580b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.604264203.0.tgz","fileCount":37,"integrity":"sha512-RNY7s/Dkr/vh/hDn7dDck6Qo7BvRR07jAYYM4n0pgWxZFSOi9nkvklZvJ/0vyiCBHdo9eD1kCSAFGRR1YfNgaw==","signatures":[{"sig":"MEQCIC+/OhyrS9MEY6XtKov6cXP3zbHQZmbbisr3LnYIp9Z6AiALUtyYnIU7+xs/s7vV7FsYhkriaIssrO2FVK+sZUjinw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo33bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+JRAAisZZifSGCy2+ZiE7hQkOyxrW5lS3p9vj9nc9jN9aaChL2b0j\r\nGqT66owJCHeFmEn+Cy0IRlgbqKSy4SsjXPpxAD4I1ho3IWorVRKxSF9I4z1G\r\nWTFPsya0WY3fA3gJdwLRRMs5CEbty4MUJmjMe6eFyglpMQzFFKSisJ560hf9\r\no92fw1lpj7RWahH9kZrvn4xLG5yOYBvlkizB6TCvEbj0kuZ5kNMgqKgRzZkn\r\nz9ayC2h24ASAejbOMXxKY7MgvV0bEgnu7qTCcKuaGtJuWrSg4k8j/EMeMtKt\r\nKkaWUab4pK+l2n6mjuAhOG0anRXs3C2DP9mC6kxw7VOMnYgTBcMJH9qviNxt\r\nwCtG9ED4DXC6hizIAOii3ELykDOzBfV9lPvghlfN3VwZC30vc3K2XreJ/djW\r\neubUqTeNgK8+8+/Ix1zFwsY00LQYhOAi0vh/6ir2A/nJgbDV3isaeJ3CWZ2T\r\nJ38FDnT6uz1zwrip5mHZrUuzQbVIXFaPYS+Jit1RBjJM5eOQL73Ecu8M1aYD\r\n4FhAf/GkYDit0tnFWcscTJLqbEonsptAku74vDPOi52ivsF3jTOhRDptxL0t\r\nnychkqLWoCWC3Uj1REqUjqXHKbb2u5JyQaQHL52+ComYbqBL3b+yPkg6XFds\r\n3qbNuMxsfifxsHJM2r2bSOpB8bhjmKwcJz8=\r\n=6M3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/density":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/tab-scroller":"15.0.0-canary.604264203.0","@material/tab-indicator":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.604264203.0_1671658970940_0.574612397988203","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/tab-bar","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.85bcff6af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ab5bcc073b634cc3e621e6ee921e0fa77999301","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.85bcff6af.0.tgz","fileCount":37,"integrity":"sha512-BpVBmNUQdJiltd+1pNe78CtreFZCU6cCvNpVS8Rp7BxIMFhBx49SDFMWMFZJBZqYwkSy0F/dYWXoKQVpP841nA==","signatures":[{"sig":"MEYCIQD5MBn0KQd/Gl2k/3RW7wTyPqINlq+osPBVAVivqf9uiQIhAJmYkekNyjc1+xcuVmJMZRUwKx8q9S6jd7itCnXBhhLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDETACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnig/8CvEkZ5y3Wfq1lzSqK0Wdh2E1eZJxRepcGno6+ga7y//7aS4D\r\nSGy3lHN0dbbdRK5DOlFmlRWD73hxW5No6Q7kGbBsgOhix217wQ/3gF+Q+KEy\r\nxeY/W5FZ/OCUikFBgCBMvwLGbjL81by1mzBG+TwaqFEOJy3T6cChKfABY+2i\r\nAO3nO6MremhHrGIlT4lbw+sNjQUs3xZG8Onm9al27SYRHhgjtW0pYBrAjUGo\r\nLJ9YbQg9GZBUy07EwcyonSFFo/KacVvJXRY6cfNuOyeqlRSkkIgvbKY+RyT+\r\nWZmMaWLQuR8Pj259lOPbiI+Aj2/oLQmq1gCDc0Ej7HdNylw1B/JbkQqx/D92\r\nOLYgQqW+jfbLo2OVfITgrKY71nwdYV7clX/Qw8PV4baCOou44wLC/Tn+oajL\r\nAlMTCyNya9XhQrDfWoRO+hLv/gaXxrxf92RE/XiduE6YN4TLLmQCNmMG6gab\r\nxILoAkFdfYGKmHGrevZ8+Us5oX4MA+n2APfeGes2nt6su7KaWEgUR91dYJxx\r\nonzPtxAS6a/JmHEmFz2TZ7fk5FmcL8dKtONQ9A7zh1cxrgsB8Udnl0WH3vUH\r\nyXw9+FE033/g0XVCHGkC1R/6gugTpByyEdf4WgkWTspNFKVB1kBQaOzGi9s6\r\n6kdvtCIWy3dIl3l4U7YicAaSh6BoGPQ4Rwc=\r\n=/yzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/density":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/tab-scroller":"15.0.0-canary.85bcff6af.0","@material/tab-indicator":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.85bcff6af.0_1671704851070_0.05730319301823372","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ece3e8d21.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77af57a5a332e28d54fcd8dc3c4c99eb3f3f763e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ece3e8d21.0.tgz","fileCount":37,"integrity":"sha512-x1N1n68etJ4PxgnjRmzjOukV5RgIYYgraILU/lIdJPxKf5I+qzeV0927mkm3dbDPchSppYHpRFBhXPyXmt13Lg==","signatures":[{"sig":"MEUCIQC2vGZl0aCc8zk35lW/QkEmJSWJKMf60/sF3VscUwTXcgIgf9UIMr9FZPR9QcxWabqxEgpsii/sDjjY9FUvbwKnc/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo01g//Y0eeZu6Zwu/5kQLqOe2HN5Rvr8sXYjUiycIinu5+8YEdECgW\r\nQX+zauGijSOof+ocv4o6vs/jh0gJBvySF46UVX+q6EOmcgrxmf8FB/N31yKE\r\nhFKMHS4NSkwOQTNMKgC50/cwjN2+PWIDNn7kh7K5jUgrqwf+hPKf9a4d5ZOL\r\nQzKXCurGQOfWxBw9eb6finBiUa+unqmm2gg2+OcfHzTFZX1DKcWwTwuGKKbj\r\nxNZpxOMxJz+hLcwgwftOxjc7E1P0X4xDBcQMSZ2/2jTN3RfS8wFYor0D/Jub\r\n9HgTyNx3H+fbRkudoHcee8ggRBEyyuZNsBbF93V57C+ezi+zKQ4Fx3K1gMjE\r\n/K8AfWG1Rrm3lQxG7FYAxJCwNNKtHI8R4YlUAlWEm9Ov1IVc3SvOCasQLuLp\r\nblLrVOCGuya4yQrmSk9Pu1IdYcsiPu+iI0+tEIL6Sb0pjREwVD+JhJIP7b6i\r\n2flV/GDq3jyGEamlLa9RrS9I7Ls9lF865VgV0IMasb4qPvfjXFD7325w16Es\r\n6/TbEyu45JG1yrvqBZy8FAtJ/67awYXGzQB9R+BDmgOUzHlrpXrbLRwoDudR\r\nHF4D/X/UZntqX0dADAtnyCZKBU7p3OBONqDsWwrfa56EFXHJEA0LKN9Tq2o3\r\nHpkIBu3h8sqODg2TCgdHkUGwipm2PgEDEDM=\r\n=LICV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/density":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/tab-scroller":"15.0.0-canary.ece3e8d21.0","@material/tab-indicator":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ece3e8d21.0_1671729260337_0.31429492068303877","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.278ad53d1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f00774727aa20ec42ef9d1eafb78a113e3535988","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.278ad53d1.0.tgz","fileCount":37,"integrity":"sha512-90XSGDL73NvOSyIJ3gRJoalHy5mxNkK5rDStHSXLMVnbAJr7VqxVOuLYcKiL2k/02UOJ2ksTKCy/Mbq9ujnHSg==","signatures":[{"sig":"MEUCIQD4ea8dLMYyZOAvFOsUv0bQ9l/2d3nKmyXPI6oLp4IgtAIgHzGORah+RxevSCNi6fg2SrY1p6n8SNYOxGQmPLKqx+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyZLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXpg//eKoMg9qXGnJQH5/pCjrN0uR44CYTTJdBpv+jcXLFQRtS3cJ+\r\nEnDLak1NrHx5QTlWRTWBWsJPI498lsrZfhX+B+EMBph3iTvXEKFqnJXesApN\r\nJrhBYLjePX+ix6aMLUMsRO7PE5cDRDZA7uUsIoAE+JQVwIES3yy00yzr0mNt\r\n/alFUP6Mu4jvzDj5DGEEc3cQzOTKdin7bBqAfa8oiT3VX4pWOtCsx8bG38T2\r\ndBFsnqLk4tEs2fi7TXNX8OxI9Msqs6we+95To7UdPUB8bCeTrvBIErIKW18Q\r\nYk01FYJMai2gXHsr1JiYrBinbwxxJ42vdAzTUq3xOG2xOH0H4znhFCSt8opl\r\nIpoaOL5o8lAoiENStuQXZDTIjFjnAaGP7a1XUfVfDRX/COlcoZsUmUXx2JEa\r\nenlN6ePvkqmGRnvE9q/1WIDEQ90L6/RSkjCfJB+W3Jqb+9rWW46n0eNNEdHD\r\nDRHqpC8K5wXcvVRsyo73RuXvreDgGzigbgv8M/FL4owTWr9Ewz18dxWAriQU\r\ngoc2G7SmfBwo+wHKrexb0HlIc4F4oFr+/5OhvOYmDTK1NfxHJkySnKVUuT8E\r\nlPVEXrHixmUfZ/ITdPFzAL756NkHNw7ump/pqWmdFQ+1V5YYBUnqapcs3D9E\r\nO8rCE+ZmWFj2Jvdml9dromQmQ6knN+CBiZ8=\r\n=V/Xp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/density":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/tab-scroller":"15.0.0-canary.278ad53d1.0","@material/tab-indicator":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.278ad53d1.0_1672160843098_0.9698437075255879","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a7d8389e1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4da3169482ba4a3ab3208c211696b8c01e654c1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a7d8389e1.0.tgz","fileCount":37,"integrity":"sha512-spkVShHJdyI8sWPA4cbSIokk8EInE+fTd27oYs6UjamXN0VyFEeQvCzfkd+mpri1pDaD02VLJ39YiT6+XSPwUw==","signatures":[{"sig":"MEUCIBDYt0VhcXuCEkOhkk+2fvG8uEwUs8cY3LiiCQrVzHvpAiEAkryqS48TNRJCpkyv7l3/WNPiHPkrMd9zhM0xqbIoY5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0ImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/hA/+P+6GNIpmICCVnfj4KWBFxXl44kW9EoHVs3Nxwhq7/JKiU661\r\nS+6v8Pc1R95LefNqi0Oyg5ayzPHGFeM/Dos0LJ+Ro3ZnKv3MwYsnd+508BFd\r\nkCcy+8lgWo51q8kQkwkzsfix7o+k9kQ/RPf2UWrXdHZuftyb0atafqFX/ehW\r\nZfrjytP/drfU6cOKEZ/66kTAzKv+1ay41OmSOYN6AiQaaF2x1C9Iyg9reQgM\r\nxTad5dWAkobtf6RGHeYWgfR8GJXy1ZKSX7vmIyFI25rlHyYGYyYLPVcn+1Vs\r\nxORn4KCnHXK7Nzix26nOWF6JtwjatP/ZDZo8OSDdaFWbDSpz+XnYQwijh/rH\r\nxXkdHjxGSi9bPPHrn2A+CNUiZWWUp8uHvCUHyRVSClIh8uJWCn35BEt8p+Qd\r\nQ/vSVw8B/NBaz10P4fAZeO5b0suVZKXCRO1hZtrR2Ps4/fLefjO+/DdHSjnc\r\nsunV+H768bMfzIJgAUZLFhW5S8f6Sf8ouVleXP8zDwv1fZi7wMB5UYStEaGp\r\nzWdEmjwkavkHubhNQsT4pq26AL8qbOE2R2I6NpfA7BbusBntSwpND1e27198\r\nLR/QlNOBg8cfIOjLNW6gm/pdrZ1eyOrFRnez7CroqsOYl8weiFfJxrcMKXjP\r\nl0rtqGfycNOPKkOII0ecahHQUfy+06oxG64=\r\n=mEKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/density":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/tab-scroller":"15.0.0-canary.a7d8389e1.0","@material/tab-indicator":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a7d8389e1.0_1672167974216_0.5952874786064588","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8175d5eff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c194f8fa9abf63648ea5ab1fad3459c3dd5b8d2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8175d5eff.0.tgz","fileCount":37,"integrity":"sha512-36TxhxuKplYZK9gOwKxTw1RHO5HkwwfXTWRPqMWFS5YnTPf3umQKeZp8DuyhJZ1l468fzu3YnHIML7nHhfOdug==","signatures":[{"sig":"MEQCIAdThLmbNfHpqaRCn/AZuRRP2z+fEt3W9sLxtjQPI9Y1AiB439G2uRalw9qH2S7i9D3zLSuy4/Aaiv3Djg6KUn2JdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrttw//e8uumtpQtFq8OzY76uDxh3M2Qv8nY1rO9lmG914mwPAM2S0O\r\nXmZ+gg8jVLr1ehExBJkpOS+yyF8FvLhiEAxI3GFfFeF6RaUqy6s1/5+A3Km6\r\nZl02jdEL0zQj9K3CIVD9zXeDyClF6QySW3EmU/EM+LEiliHdJ/Vzezz79Fkh\r\n+FfEynTmev6+M/52hz3CuhilFfPN+PzMMdwU52ZfehyoW29iH8kn+0BXuX9k\r\n1tKHHWdRQEr9qFCxvRn/xRsiQofZvGiBhgah+aQHD4vv8aAhFPGB/3xSASh5\r\n2KtSQoF8UfWeoOE4SZcvjCR1JIDGyfoCDntcyrSyOrzq79861rXoy1QHa9qj\r\nWXGK9tbBb289mEH8G7S0ozSd3nOZLEnvcyD7E7utqZvbGFmvXJHViX0F2l7B\r\nq6mPN5LIOaG7XhXepX7h4pv8f+BPvMegjCdlOBdnRlNhN1ylgR5eEqWpvN2a\r\nfMKYqhjymOwcKipTQe00bdJzGEPmcdUz8LZlVaGqh099yM59N1sr4ALwPpfs\r\nGgnN2WbZv5eE2onAk9mlTQHgHz6BUqUVgvGXboCiWfILOKIj+4xEPMhkZlu7\r\nOB8ED1adxzUlp/xwlfdl7Me5hIsND9MolYeuUDrqURUzvgKTFRWdCC/nPwHu\r\nxlIGyDa3PDuNaZSSNFxdfz+ztWSkGUXP7uY=\r\n=zl+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/density":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/tab-scroller":"15.0.0-canary.8175d5eff.0","@material/tab-indicator":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8175d5eff.0_1672192426229_0.8860052654174904","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e21dcb86d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc5e1200e3d5d8cf3290612073f0b8df43e59667","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e21dcb86d.0.tgz","fileCount":37,"integrity":"sha512-yaCjWg5kJSiv/xcepdpydUK7z7IKcjD0FXUuHfG6MqVkwu3XfdcmlL7tVcEEcU9HTKYlka+rsoDH64g6C1RXCg==","signatures":[{"sig":"MEQCIAQVNkjVuMwcJdRw0Fil8LFxwMuyfvn3LHwNtv45aRe7AiAJ54xzMFru4PnGBwMH2aUu2mfCvOsNu+kJ2VucuQ5fSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokHg//YHyyrRFpFN+ySI1YrHrTPNOvhigwIBoJWtpqORNPxm1WnzlZ\r\nnJ2BX2rOYVoy2WiQyzHDpQXvDfr5yruNB0qLq6Iinxw8SqG92+ORveNtLhxz\r\nR1UjajNASSRsR3UOz8BsSgB0rbxv/fFT2p39SjSBexdcL099hQkrueSHOK5L\r\nd3H/sMAdy8yIuvfbocwYFXel/7TtzS7imvnoDoLdfFJL49Qz6qGVFxOZxyXQ\r\nB+WklwAqkpvfTro9C+Cq+O8NFfpm+0XofCYOH0ku+dFmngRV8GsBa25PLJUM\r\n8sP6iNVOE87dTK1TQClJ2f5BblAkkB2jR/M2qqAZQHN4UBP0v1CI8TAzLBpk\r\nUMrDCuSCx0Bks8FThhgXTacHgLElYIfcC3PrhqjlzFKiFHcyCOGTrOIGtjQn\r\n3hb7roLf5Up75LfL76iyZAvQfJaQpwJ5HU5fVrIsDkEsS0SWivvpGDmHLJev\r\nvTYMYxzwpWMnhuOKCqlYOwIL/rJb5YMXn7g5bj6d6FbZn0kbuDEVyvAmiB7g\r\n1xDl9gilL3NBLO40MSoF0A203Y6vE8P8/ulXJHHboa1Xb5rVqnp+ti5jadS+\r\nSKCbFNdmlPsNjSn0YOqEs9iK1ylELC7YpfXZIuTnOYhfFG5CGnvDxdbGy7D0\r\nRkmFQo0J65Gfu/fOUSrU0vzXYBwiou99OeE=\r\n=FH4c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/density":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/tab-scroller":"15.0.0-canary.e21dcb86d.0","@material/tab-indicator":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e21dcb86d.0_1672322666953_0.8440454203449768","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.20ab6f5a8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4612faa63d50c97fbadbea55b37c7f028cc146d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":37,"integrity":"sha512-2YWVpIycULgYcklSOCdQy652dfGKKqtLWuf/tV14D9VvbjRA8rXLRcCNCfGQdumEFcnTNgNCZlSpgmTBvhcT1g==","signatures":[{"sig":"MEYCIQDPurTgsQi6TUsQQgYWRfZaXCzPGLiPcncYDTBqYi5wRQIhAIt60TCrxvvu81vpIGu8j0UqDl3foErdhF0azssNbimE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre3NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0dhAAgx1kqsNnr5E/6fUbULxwYKGAm2UuMHeKs1odZjC0duQ1Lef3\r\nwe/bly0SqdIT97klTCeUMSqNkbrUqMXkFgSdrMf02gICLNjcx+DPlZOGPJej\r\nOwVzf4rjYIZrEG0pG8R9lW8BTSe3BbrzeRvQRrX9ijMOJ/moiA0xoBt/Mb87\r\nDWvJXEcIYPO2RaMGFWrfZQ7U/v+qEz6RGfh5fW9zQRPzXAk1dF0tnfYEONun\r\nytQwx0NqCm+Nvqs1R1FIxgIApuTNKelRkL2Q7rXLD/pmsYstYBuV+yp+srSL\r\n78Y6szUY30D52UzE9nKBUlEFpnGR7Q/hnr1Gdq4xM77jlatd4cXLulgEN441\r\nzCHkwWpvPP+vZLhbgzTbnGBTSmpssM/oBxZfces0SHy+o2Fafugnb9J41Odv\r\nRAAcasRDegcy11ccMOvpiHx7Of96p3vkqJFeVQCe5VwXsORY+bsISfHG6sH3\r\n5ilpmQTbcExAvEfkqlX0HQR7+q9PI4iygJmvWqWkn+erSS9Sdm/GWDIkyDUQ\r\nEFiPuE6YvtncBH7zZigi6TBqeDFvXn/ND44UEUIGabyH/2YRHl60eOVhKqSG\r\nnA6seyhnlPoGmrfU0xdYax2YcRzDbJb9fXQcGDaly4VU9tbVRKSAcs2jZNjq\r\nCWYxqZoll+B+eORHMI1CQx2+wJJdkXf+OQ8=\r\n=rpwD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/density":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/tab-scroller":"15.0.0-canary.20ab6f5a8.0","@material/tab-indicator":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.20ab6f5a8.0_1672342989447_0.5772925002348546","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b9806f623.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e613adc355d4ca4866abebcf115224943d58858","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b9806f623.0.tgz","fileCount":37,"integrity":"sha512-o23JebeFzJ6T+alRGPdq+SQCRUGmG3+f7ul1tSEp2HaHmO03CObCEgM+ADUvXadJEvSks7QefFmtj8w9vayrKQ==","signatures":[{"sig":"MEUCIQCKfPCTNcvfXCpN7po4vXGZQ4jX5NE6ZlyaNn4NKM8zSAIgHG/mTC27sxeBVE4e4N+faU4kI4p7U2shSlF1rYxDG3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh3UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn7w/+PMXAGitFkmIX6DVmEkbB//nOoHO/cd8mKJNW+Ne9/Ag6foJy\r\nq5OYDPb42mMsBWrsRnMhEpskcbaI4TIZRyHaQtqT9CYX9gENj9NDV6UOZaoA\r\najlxFj89LAgzX7k0zoret7OhkM0neX6GE8OpO8u4ARGrkeU6qgICOHgOCCsi\r\n43ipKaRFODCKYvjXkjBjoMYvYxfpA4lGCtJKy4121gFEnSa2Lmpypu6ekoL/\r\nnIH4c9nYMFccLF95eBj5iGDupsrVT8Kr5bCRHzbsEe+SAxR+u3yUxko1Om4E\r\nry5DyYpWJqf3bKee3wKQbCBHT9KlJvokvkXO9VWvzDRnwrUlRHjebHOPGXEb\r\nD/+mv7lc9KnvKVhUxJ2YVbGebOOK2FuoU8GNhQ/IH8UQLsSc9rHyiW3w1DS/\r\nVBdTSi67KaYzKLQuWQEj/HYxKiPeEe+IRx38qdKXukr0Yn0ky8fefgTYUKRw\r\n2ptwGuFcWrzf+8aJz8OwGpU0zlMwCoGQWQOTiGCi0Z/1CPrJizHP1ZajQG72\r\nn5564LcsPNJDOIhnL/IWb4UEbV0JASWSRAstxinPZl10ggbB3ZdEZshmv/lW\r\nBi66XiJ216l1gGSFxD/QG06Cnka/XrdmbPhQeUcToqNwHi1bHBQLlUUUMmiY\r\nIwKUmDJrp4rCSbjKe8MSXQDHoS61Ah96/8c=\r\n=Qwja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/density":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/tab-scroller":"15.0.0-canary.b9806f623.0","@material/tab-indicator":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b9806f623.0_1672355283890_0.2572257202204882","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.50c9f550e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fd068211c23acb05b6ec3daa901a2bc043f1286","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.50c9f550e.0.tgz","fileCount":37,"integrity":"sha512-oJOn7jwA8JM9DRZK77yQsFDSnjesp5+rBfRmDSC6FJPEGMrxg/NCEgXuz8cZfXLXxfbeGeqFzSlMJH9uOVEUfg==","signatures":[{"sig":"MEYCIQD7mEUbrR88Dn7TLkClBM64nzHlQKZipO/6Uj/4wsaM5AIhANamdrc7CpYQCNcsF7ImNO6WzmYdntwmZR4hLnAU/kul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE6eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPwhAAhdJ43lJwl/jtmnNgq3oiaeVFqE47cz/b6ptckq6RzYsrkDA2\r\n/a/PUEDcyWcRLzPeX53N0+UXVqo23EMDSQczkezSEvfNz0yIdJoooEqprXDt\r\nYa7ioW1KOJVay+6cQFS7rdRlFC5szOrJUnqQa1gn71a7vafsARqthFDf8aJh\r\n/UcK56PuEGDQLOwx5AJddZFL3HldoLWA4GBM56zzsGJzRn1F+FJhvxCOSyI+\r\n5GFHWCQsDGKWc/b5UTLstiAuSkbhyctbrh4jfAl6EaFSvg5Pmeu6xgFUfbsN\r\nwnJzo5mtvX7m4Vr3Zpl/Jti0tqzmIwirXsm1v1BSnX8T5pWQStseYSusLEjm\r\nIu8Am9hxDF1rijysEBxwbJheqSVHYpWWwIcxUufsrn1c2lr7dQ3NKYEBFYkO\r\n6aSOdYTd+1IklPnQAR2cz8h4jKGexPW0EZd/mKFpTAj5NsiK0HZdnaEgtQd4\r\nhFmxdVGkFgf9+RrD80cQOA3HK1giNqITzBKX2BP5vQRSUhj6Ob/TyQWq1Wzs\r\njBF8u3Vbn8BxQiiZU7YAKQNm4SeZdvP3XGcWt7hX73m5A1MTYAYsw/oVUcLo\r\nyG6I8fG7eg4hf62yemQv/fdkfmYcY7pdwP6+m5ux8eK+6Z4l+GGKXPqGRN93\r\nt1KXMIvbzjqgGzXap9qNDHMjpJa+yKXRUD4=\r\n=QI1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/density":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/tab-scroller":"15.0.0-canary.50c9f550e.0","@material/tab-indicator":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.50c9f550e.0_1672760989913_0.6155781819595025","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/tab-bar","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.af490a848.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfaa04b58a99b1e24b90c7f2228f252a1ca66d95","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.af490a848.0.tgz","fileCount":37,"integrity":"sha512-Bb393donNCZPk29/XcxfCyJ1/dkGoggJhprwUmFix74kCVT5MZw2glm/IBgEaczWwT7X/SlxGDwHVg8Y7CquTA==","signatures":[{"sig":"MEQCID0Xo/oer63F+1Wo/6qzmMz7p+nbv7fDmZJOAd0AXWIwAiAFZq7T/EqEIqKk6Q6iUN2HV4fbH1zBfw5JqpeJ/Qi6CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQqA//dJNrDNCQAU3Uyeq0UoxbndEhCqMGlXB639SYuOWTNh/Xbzk4\r\nuHbJhpFOzHEfJEATrXD23Pc/hlvF1LYnUnRvO/urn8GnP2sfJxaBx35C9fvW\r\nT+lrikrSy5nqNJm3oYS56OW+w0Hv0hKE6/BbKtX/ySOo2EnQeorSAEwLhMsP\r\nqIskWU1tERClYBOc6HvxvBZ+KhUBkoP1trERLQeSSSHNqOqY8JPU4QLUBlQI\r\ndHzwBvWvyKBN4QiJ/D0EFANsSvLzLjJrjA91cHAMB4a/S/YEO8kFaWNchLru\r\nQJamOuQmHmgbTUM9KzrSm4zB+5AyE6jjxuPaG8d7NqeiZjn5219ET0+Smio7\r\nA6Fr0cUjVtJaym3Ph4udV10Eqinui/Ygk0NCQHWkmFm45Y+FYY/NLcLzn7IL\r\nXRLxegHjs/JKQxes6BxrqnkwkDEv4cHWuiDYbTnDzgIvmGa711plBEONHATB\r\nPjgj0lcX4W+PVXZXYAHxetIS/Gb4UNmGnFrYgZ32qXP+0Ro8jqPjJHeONtwp\r\nEhUPwfbhBUB8JF0UepLzZDU/fFMgoS3/USd+MXqXVsYlWA4gPAs7ZcUW/M+/\r\n8EVI6IdB/Ov8lNJH65Aa8HpJ0je+ftHz4DoEryPUHIlYSa+UVJFehH2UhsbY\r\nE4QktiSyIOUkWEZv7zrkUh5gHzV6qDV1wnA=\r\n=6eDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/density":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/tab-scroller":"15.0.0-canary.af490a848.0","@material/tab-indicator":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.af490a848.0_1672761617827_0.1195781283466888","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7cf487c98.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e1d8f205b90930b353a43d54fdc75b85e72e181","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7cf487c98.0.tgz","fileCount":37,"integrity":"sha512-Tcat210n0bniDbaQyFtp1Af00nqnvErO8tLIAhjsCcebY+Cs4j65VTKzvr58fqeyFmXWpPx6jam5uZd5XaWuUg==","signatures":[{"sig":"MEQCIGbhzDMsRTqhsPsM+5UbNwqBSlq7MBPgLuoW6DxOJu4gAiBrlIejTTKOJrJF8uV6D5pM3X/ajPRBJ7iOgzTs/2/VxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGi2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprKQ/+M1MmWamIDbQTvFkxOywn1jhFIaR2dTSOyG+z6mrOdwhDewev\r\n3o0Xr4GHL4qNSFDlBbXkpwIgWG8LuMjeRMpWczx3CZeJ1KlCrkrRlPXUnzz4\r\nZ/dAIU0Cucf9cyY3/CuMsq2/QaWCqPvE2zWATi+5Sb0zhRpUd6uqYtscThIi\r\n6KWAablxj0dOoSZMs0fdcuoXpJuA5YTQ2Z1Or66uH7SgM9Q7ndVzV+ecxOfj\r\nbViXSvXXrqe8An8q3Fh3DTbG5f9h7o8DCGwa+hHWiqh0QtN1FkvxEK0mlQ0h\r\nYkx556R62w0x5f3xxW1t52RNT8lyqeKu6vlE39y7HQSJW1+svGP1h3wn/fRt\r\nLwNBAes9H9wdDSAo4HPyFxsLLDoCccr+tl4w10xyN4gcscZ9xM3clxfkQbwb\r\ne5xzp+H6IpH40mlTqzD/ZVu5l16m0pTfn1RdO4iKk2BCDrukKg5csnpaPaEU\r\niq5Rb2JvHLaFtezUHHqr+Q4/cO8i/GVK5Gvzwom9KHkXj+H4rUGYUCmhXJYj\r\nwhrueS8oXNKphnE9kbDizBWy/lu41wN1S48GfPSjiAe2cDHmQe9PhrKGzH2w\r\nhfl73Y7GBR2xaurOyeiVZq/jl7FOlHF6LUMf9GZB3an7TiIbcMZqLvKlSMHQ\r\n1AmqbsGmO3gh+FMyVY1jcIRhSceJ4EWXwms=\r\n=aN0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/density":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/tab-scroller":"15.0.0-canary.7cf487c98.0","@material/tab-indicator":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7cf487c98.0_1672767669924_0.10236542250974834","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a52be2d5e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed628f2cc5ac058aa88eb5eb15db69429e91cc91","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a52be2d5e.0.tgz","fileCount":37,"integrity":"sha512-Qch5UmA8GfTEjFuloUNLJ6dwlrrFWBwA2L1RkZesVwznRsfPRImum4Yz6XHQiolbehFeI/jeATWoTt5XCFM3ow==","signatures":[{"sig":"MEUCIA/hwShwS3nibM0BsNagxHAbvkVUGyHBokbCvNKY5jatAiEAnIhU2gwaopCUPZlVr5aPPSwsOIGHr1SaZmWN/x8T5eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH7JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonnxAAm4AO6A+rXKJo/TSDfjgwICci24y83f6+nOJMZquRw1iW0XEv\r\ns40Rcd/LB3oMufrDM5Qe1WAOkKzcUvfMNHNruihZOKwO+KvYA1FfOih7fEbY\r\neTErDw3UadxtOIm8ejlfh2rsIN0wfbA8neDXyooj4EgXrcf571c5sLohJtFN\r\nloanHUp9kEgnoSN6Dk1dUWTc8dkBTB5Nu97hJWl8J3sJ8f7CHSpyrP+YaXIu\r\nHF2YA/73fhZzwq0ye/NkbE5iLLltK324TUAOZ26yq4gIN7OA9HfIdp4xeTfv\r\nkLPC2hsWoqAIk0T2znAC3Gzt15X34cwULcmusTk1T+Z1k3sITpbhvaqoj2ue\r\n7rIdebQr/YJQiFOFEPWq7cNqQH36qRoNg2znNz1RBZ2MDOgNT93KylZIigy6\r\nFMgXHR4HWR+tIGMaR7cG0oH4TpGFBRETmawn2P4IgbgqiTqtzlYDfDPQxbTN\r\nck7NbMP/7r9qp/f5EFARzDWYiRl/elofpGSlVzdnvz1u/apZoM4renSg9XzA\r\nNODRKn/Cn8JTDDc4co5OFRY6bFf8a92nS9PAhEBLYk29Xxyx9mZTxps5T6Ms\r\nrnZdf0Xcu+Y4q9jX4RSuE5IDKw4ioU1Kb81jA7t0EgGs+a5lZCnd4Z8Seot6\r\n74z7ptAXVBzDJX4Obcks/4GYju55fbQCmF0=\r\n=ac5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/density":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/tab-scroller":"15.0.0-canary.a52be2d5e.0","@material/tab-indicator":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a52be2d5e.0_1672773321606_0.917760988868777","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e38ba17c5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d67aa0bddec5906987a7ebfb50ae03f4faa7d3b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e38ba17c5.0.tgz","fileCount":37,"integrity":"sha512-KSzZaSK7hEFCG/x3WfG5FI0m1knuGDyeD1BgrxVeviNC9TUZ2Fd2ELeIpsZDCgaXBxpIbLcKfopK668NUxqozA==","signatures":[{"sig":"MEUCIQCYJXEC/nbKPEwKeaRvcM4XyaXs5g5End76cLh0TpgPUAIgdHrvn4Kh8Il99EbgqNmZ5tv3n7P/27WDnfQWwU30G5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5cA/9HEt1qku51cgfe7dDsUFh2J85+YrQgrBPk55P5+xWuntuUoUP\r\n1FkxONrvOwBoLxGxFBbl2ZwR6SZcGyNZjGgrCOBmz6L1WWfbDRPxxnnqJi4t\r\nH7W/OdBxOo5m2HZ7aqBBx4t1BFv00us2C13s2wU+Jv9c8N1LTzORzR5cmKJ0\r\nHUKp/lQ91MlidO+jV9GySOgUnaY0F8brcDVKwjDiU/uf48zQJGOy2JrBqy7Q\r\nAbKC+P28FRaknNQv+S3JeUQJPAGqq+qHY3p/XTmmOUS9EdSBX5+U3b9mrfGX\r\nDEW0Tz1o3LB3szPDz1MffQQd8karYzlfnl5Elo8IZk9G1GPseVD9pYruuRD/\r\nYmxBR4jngpOi2M47QAuP/NDMXZSTbn3+535wMU+stJJqoZ2w1F3yUFl8aEyh\r\nUh72wAI6VtUkSdxnJsT9Tt0J3RN+ZnNSjtJrSTSgV8A+o1j7HcE/terTZPJL\r\nLvQ3uwjmCVSm+TxZfxufKLxKlyxN1Lrrl6xCjqe6EEIlNY7nPrDTR1TgumrC\r\nDC9BwSWwR4J7fgKv3Hmn64aDJiMmuoFrb8yE0JwwFSWwrpBf0Gi/E6h7TH3Q\r\n7yYykWr8DrLF/64xw1fxRQ245k1EnLixxlE7B1s9h2V+SPShxxthfF3dVm0l\r\nUGycJHKo+QnpiE+XwF2kmXpU6rZYdZf4ai4=\r\n=CF9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/density":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/tab-scroller":"15.0.0-canary.e38ba17c5.0","@material/tab-indicator":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e38ba17c5.0_1672785277893_0.43537464855072594","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.49041a6c3.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da4a716be4e2e1ed3d36a1ebe0abc392ab3223a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.49041a6c3.0.tgz","fileCount":37,"integrity":"sha512-rKjd/F1ly3Lozb0dH5AqMO+3dcnAMajIYowM+3VYOpcie2P5yf2X7BwYxsRylCEJzfPHnig4aTtYRveIIN6W2g==","signatures":[{"sig":"MEUCIQDIi6iB8OBfr+izJy/SqzYaovOMikmzZN/i9JAafN77JwIgami7/xt6kZDNUoVDXqE6QjirKqYdmdSiP4FwdG/DfWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZkeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYIw/9EwmgpwWLKzwdO0rIZEeO5BTpGrXXHUX9diHsN+XjAkwRFHsF\r\nzjWzujxn/1bD1ZZP1T/aIE+/vgOi51S3j6IyOxS8Z5EjWtMUq0DCzYLiE+gE\r\nC9XvjbiJLVKwI9hlwqcz1ixWMHLOruCQRIbjNMU/WPNfvd2UMNRHSAMEBR+x\r\nCyrU+eaj4PVvWEbGlQqSPntMqVV39PDVM8ZQfbW/of4JfCmHZEyCTDdAY+Zm\r\n8AhE/s2NeLLnHE3u1uX558K8h2nrVQpjp+eaU9y+5rgUyNvsO173yAiIMZzN\r\nEzlSAMfIc6D7/15gqOZmMheKSqI8o5SxBVlQL0fHi20GQj3tZt//qtFTK2Cg\r\nswSRrIiQuEarz4I3TKbjvLMNhcyl/VaTChPftMNkkLO+RTok/yEDz58l0OxS\r\nGNc1kF7eRyoyagwsFEiT7IQUdFsnxSmAi3D5HfIwM7I9miJRebt/5k4WAzuP\r\nIf++TdFrFU/ep7bLsTAduUT8Ib9cysCDGZXR/0x+jtwuZtsgWVV9oveiTHi3\r\nWCedgsawUz1PPU99A2g4RGjkAYw8+0zwDoAgUmPvjTHo+bq/YjolBnwTFo/W\r\nxxuwsgrhVJTxUox8pyda5NWqP3h5nNrZcRhsWsiCfxq95vuPIPdvqkWfdkGO\r\n1DBwYQfH3MDMrmhUg+oOUxw8lDhEpVcjEWk=\r\n=EgUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/density":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/tab-scroller":"15.0.0-canary.49041a6c3.0","@material/tab-indicator":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.49041a6c3.0_1672845598214_0.9544923891475143","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d7a2277de.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89b25a0a1c4f52b4613109cbfce7359f086a9df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d7a2277de.0.tgz","fileCount":37,"integrity":"sha512-MBglI9WuwrwWvxcYMH6XFFmznwK4hFT3Oh+QA1nD6GnvZqG0XIje+0myX2OLL8kAULL52weeWWjRnYYDCS6Ozg==","signatures":[{"sig":"MEUCIQDh3HyLaMkf1UpiNVEaveJZ4bGCxh+g867Y+obAqZTZQgIgI0WZAAR+QZqZnj1QM4mXhUkkkWs1eQN+2FY3ccGM5uQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfG2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp68g/9HWkGKRVpt1yev/5VH8jxxjiY1ykirOjPdr9cVVzA3cmtEyon\r\nd86f1cU4lVSK7ZiMdS2zGAlnQsCgpFcct+uKCfkdxMMn9OX2VxMdCU4ujJJO\r\nZ5dk2zziofx/u0TV3IZpyzItsd30hJ8rafuUWaiQUZZ7DfM3pxU2O33GC67O\r\nEpkcg4gfyyp4KzDYrc1bGDkScEU14Fmn/pe0y9DLRdw5paBhEfa8sMTp2Hf+\r\nDMg8aDwCbX6SzIxMQhUKAGQSHzqtn/0arK7HADp9nJ7xhl6DKLXYKHQCDT/H\r\nE/UXiaP4ZdyeLqeYOyt4MI/X6qPCi/KGZe1xp8VH2xxPsVsbjArVrhgx/OPm\r\niT/71MBZQuH48ThEv5GYJFJzqmTn8uZQYrDaxHzAAFZvoYesrvZ27w2RWzqS\r\n+h9mTJ2U8UtiVvPzXG0NkoGKaUB9MyWKDX5ooIkZt/EEBENpRAIhdkpeVWzI\r\nTidpT8wlrqFfF/utt8E4SZ9BfSXyH0VldyWF2CQExJGDYTvD8Zbr1T9Qyj5Q\r\neyVfYNUHgE6f9rnFcyAAaoKf8qa1rnwbGnbPaazVpjF+i1696wWN7v+0ZEyM\r\nxH+Pr6a6rpH9sxq6KnraWsW7Xa3XZPhI9agXP4j9nrXu6EbRrO+LLQn6og+t\r\nunC3BHhoYpsl7MPRPlCIKC4Tss8KlE4kQmA=\r\n=OTWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/density":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/tab-scroller":"15.0.0-canary.d7a2277de.0","@material/tab-indicator":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d7a2277de.0_1672868278340_0.5309747961356164","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fd95ca7ef.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5997a0161773839ca4e9c11526af627add5bba67","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":37,"integrity":"sha512-URYYOwzoRiJJtqdgufl6dNUJphdLgrmfW0e9YvSJlusfAx6SsmbTykTvrRshVRZuoJSsyAAHPHxRY747gmjd8w==","signatures":[{"sig":"MEUCIHTYYFlUVSwd7tVsyXJoF+lSD4ubMj+SYji/K4DuogFoAiEAwev9EbzvXpevG1q9A5IWywEGixX6zNgpXXF/Awuluw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiI4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokKw//W/d3XsI/wGycDcgZTQAn5XxGdUpmd1uFyPuNR9pUQl1kiaS2\r\nL1lbNbPzT1Jx7yjqXJ9sSLg3JIvi+Sb3NwFLyilTDMori1+SNBnMsz/apnkv\r\nQnpPKpAR+aQRPSPLaUe2UdEv90tSV1ozcEV74x/Ftrn3QSZLhEbo2KmyWbxz\r\nG36RJeyR3z30DZX5Mu9sXy/PSMEpP3oeceSnxoDHHPqg/8zwXud82uSGFjyC\r\noJ+c8kGWPTsdcnqKJnBlXW6KFtsWNrMMVlV8BrmArRSHD68oAz5ySQIqziXn\r\nQmuOL83BByX0ZulPBJCpuX5jbtmVBb5kf2K8S8CED+uu898CmG9KPWfMambv\r\nXob7hv4GA9vwS7ch2AUWEpBuaRyW+ej5XJcESt3IGbFscSGHtk42bdwol+MS\r\nn33P+5bmbKkIlFZtFgzYN7vRhET8MztH8yYGVhyJgA7FVC/GE56iV9N3b7AL\r\n9SyhoZt28frMCb02GBYGIyO6yCw4958BNK5ErOGXcqcG62ZjpMPlpQ7KIOxm\r\nWX40YQ6oDJafUPBRmSROWRaZZkO+rvlQejhAmooxFo8Yn0kWJxQ5dBjQp3k6\r\nXSy7hYxCnfnSQ1Sv6KjUPLWNnb+09ESsEFRgZ2H1h5uGLJHBu8HPRuaqwHWC\r\nYoLD5BOEFAMxXiEfkHNNDLqLZ1F2XKHi3s0=\r\n=zOTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/density":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/tab-scroller":"15.0.0-canary.fd95ca7ef.0","@material/tab-indicator":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fd95ca7ef.0_1672880696156_0.8158913524907168","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1eb44faf9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae2a23a989c6a2c4e9174b478214200d82a1a9e4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1eb44faf9.0.tgz","fileCount":37,"integrity":"sha512-/ga8L3mWA0n8OqCIkhHOfCItEh8/YFj2Te7PTX6WK43xp+0UdMF7xEx95bWpomCFPtf4rfDgm7dA6BP2kEp1WA==","signatures":[{"sig":"MEUCIQC3mfW+2Cm041HBWqO4DTeeSVGQAuTAgqC6yLjE/zO3MQIgdOlU6LVkNGJl2AULA7e2uOD+0swYst156MWTaxRWeSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpRIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7JQ/+KpS+KvKk89+xxxIfI1XDgBQX+vjLfJsgbDHEtR7h/oszvOUm\r\nWI+m3FDV1LZcCAjU8kVE4yQO8p5zjKYWkR5v2f6TRYC/rjg1/zXXJ2HxFXMh\r\nPFQyOQgRq6XBiachr7vH+E6RhcZw7A5ryF3nz1b6z9Wg9sjVdTIos+Mn2R89\r\neapRlUxV7/AI5/6XOTe39uPT58yaWwm3bKbAAM0J11vjrxjRrHcOWLWZuF67\r\nmhghw53V7wAVORv2So4wRrm3LzsO5mMIbabs0AF+p163wSE8tq67D+07haT3\r\n5eeIHxsTPpUzl4KdirVTG7iWvAzWX0tHsywjZlnY1gBJAh7EfDOInSf+zm8l\r\nfjWbRnA1b0Tx1NXBxRc1RB/Uy6JBBH56UPKInpgegcqIj3bd7EKEivXApc8G\r\nyeIx+DALaT+9UMStXsmFQyLOd02TIxZJ5x19HdSU21pXQPg+Wlj09mN+blfM\r\npC5WMiu6r69BW6XXpYIHocYVrg/ssEOSSAFahssDFstpSHcCMeLSoZKQb5Tr\r\ntbwOwH59dAXD3TwYB9c6cR4PKUKIim3ie180Z3bMIfJCiQrDQ2AfSLhznPYc\r\nN1ZdJb9NFu2OOYNUvelCNz46/bBCM0aoqIlSPsbN+s/c8P72u5XS/ne0Mf3Q\r\nAw9Im0fwG2Za7COw39tdPYCqCAyT2O1ps0w=\r\n=vZ8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/density":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/tab-scroller":"15.0.0-canary.1eb44faf9.0","@material/tab-indicator":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1eb44faf9.0_1672909896514_0.8490014415812521","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.adcdb7db9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b039b8c524eb3f83985c4003ed3fc4e53831b5d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.adcdb7db9.0.tgz","fileCount":37,"integrity":"sha512-2Cv1nNPPqb2j0Rna1p61KgiJmSJhPUtPQ/9mBkREGmVh0/s5kirtNM8F3b6glDzlWSCM8ytyiBgJKjZi3IyRqw==","signatures":[{"sig":"MEUCIERHUKNuEE66c0SEc9YX7CDKLCsuptZ3d4cnHsclNR2BAiEA4qj9TGxSIBMfUKSmkIlUszwInYMJU0YPMbZUBDRIdBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvmoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDNQ//VONcF5gYUfEvrzjWkH0qBGKDcAzf4kl4AbwA+qpeVKNMCXuD\r\nGxpo5dhKcbWDpLe9lkwjtujW/FOuGjW5j7myUIqq+be5f72szFcGxzjrfO4h\r\nreACZ8BxyvSFkuZf98yNAmVn6TQ/5ALB/G/bSJm6jIoq5wB0ccsc9C3UrftR\r\njkcq8bTdebsqBspkYbHi16CwubJKZASQYLlJ+7zCiL1otiRVHVktP8b71Sp4\r\npOPp5f067QCb9n2zSH70FuiN/YkcVqdSTa6nDdA65LlAsU/UgPj2JeryKAkH\r\n7aFpAlwTk+WGWVQkdfaeNZmVlNDLnEHFZdqYBFWsO2ZVJBg2S549e10cK2qd\r\nv94NNFxRBKsWrMSkhYkm5fuU9r1y0rg6KJFNL4RXZh/ROg+0qRZeK0V8MqoE\r\nsn8dOuibuVOcuDVrpUxVKxB1hp9dxbAxDXiftvVgB7jZ7rLG5Kx4pgLvCpZA\r\njESiEmY7hMXuDI4sN9ki0fED3qsk1903t3FqnzsL/Ga/KeAsSLJUnRVb+dYL\r\nJ+94kdFROlYsqyYD3X0VveUpwZujVVNfLZHexkcwCD+7tSBjUb3cNtXCZ0R+\r\nojBUhRkgdPIaZ8qUzrtJrjoovucGndjnoZIDrwgqESvVoaIjzWkmFBx74hvc\r\nymkBlAWVq8KYTarIKbfwt+6dBYGXQQEGy14=\r\n=Zdvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/density":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/tab-scroller":"15.0.0-canary.adcdb7db9.0","@material/tab-indicator":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.adcdb7db9.0_1672935848143_0.0017628416222696952","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/tab-bar","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.067af7eff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9de61c3f68bbbfddfddcc36b42ed291f2b8fdb8","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.067af7eff.0.tgz","fileCount":37,"integrity":"sha512-F41jzaXIyQkzSH08S34w9rr4U+Mnns4oZ3fBffzFWO0aDBrIhmJ6cx+L+uk0oQjTcq9wqHQEPJ4Kbsb0E991pQ==","signatures":[{"sig":"MEYCIQC86dAuREGF5bvqiFN+vPKEDucM38FY7tGvpDIlZIgPlQIhANCAatUiw6uQspbmjpSbbA6IFszsoaJtgPgbhsxzBPPG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqthA/+JgRTNjNvUZutHaMEmWC3qYa/OC2qcHQeXQdp+GydDOEh8Cq6\r\nDp0CB4wTa2hGSWHjtj+uzl3h/dQ/NgOPZ2n3sDLgfHErJKkMV/QfQUYgJP/8\r\nBIaqKLobRgJQfAPNc8zCfK9220yvznofl2XvUnCLrjPU0bdG61gq0N7LLSYF\r\ndlFWx4ck8JP5vvmiYygt8ySFSXQGoPWi5LusNRdarfHKq2CtWSqYzbhPfWUh\r\n4+DmkqV/999MGkCm8CYG/mvypH8DNXgjUbZl9ev61g9NT7MtCyvdITikoTfO\r\noR0rpsnYxZ2rI1+4e4P/LFvfHuIo5c+SgYj3ZTHv6fZOZtgwUitnxkvPa7MO\r\n/UUZs+xxOMDvRukTBhbWS/wZVOuP+amm1NdbCrVt8g85XWjTt1DH+GWTQ2Dw\r\nG1Asrm48ZR12XpbgyYvrJkaw3+M0Px/uhVIWqVed1/U1PAxpzDItwtBzHex+\r\nHv3sDgiroJJYh5mfOEtaDwm/tCoI7cMKjpaajLG2Tc50Vz3cDbhhHeOAhOSK\r\n7frsh1Lh4cxKwGfpc7luW4NpXGDRnM+rkjdiiySSjeaJJ8LDw9ULuVp8Eb+d\r\n2ouJsdrY5N4lMnRHOI4Mj8b14OcDOOD1EK3fE3g6c243dNP44DCC+AmFBlLn\r\nbwLplY3CxkuxvQXxBZBSxcI9XLpYDHnBvuU=\r\n=mEsf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/density":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/tab-scroller":"15.0.0-canary.067af7eff.0","@material/tab-indicator":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.067af7eff.0_1673047087266_0.6181957017854867","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.21d1196a7.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61766663436feb33b52ca9f27f3bea65b53bcfae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.21d1196a7.0.tgz","fileCount":37,"integrity":"sha512-51FK2Bsx6uOr9FTUSTtGfBgfOtTjhaZzv8dgVOSuFnB85R9SG/ut5DE0v8K3lP2cj+w1YOC55TntileAhz5mzg==","signatures":[{"sig":"MEQCIBMHwCeShr96EvzOvg3otlLAMOU00AdQOciUXkMc+uIVAiBng9WKGNg51UjoBuVn3M1+rOGXKavHdVEmLBcyOAFm0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/BHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Rg//URt+ymXia2po9bkGK0rKcQjWuJrTczpkEnW/CqfApKUFxHOy\r\n7G9tlkdVblL2dMAPkyJVRLjtyLLZAB1CRMFXu28R3AOqJszfRpR+V2AjjdGR\r\n4+ystjIgZ8TbjJHDNtrrx+cjAscFmKLm8JtrK5QuMliocg9UdQ6o7Ni15S5P\r\ne397SfaXPzp/j1L64ilJPzd8t4o7Vat/ILeWr/F3qL220bL5Ml9ebgxH157u\r\nPmkMyFS/Y5GPygmSdps/Cmbh5JJgFbAMJT+e+QTgUsyxM63IBqWxTfEr5Xpc\r\np+UUGPDpapQXG4mNcmb2PfYmj7SUqJzFl3HvsdZhQR6kN4Rxaot4dAtQPqsX\r\nbsFwemYkByetGneqC30MsFExvqFROXitXnPJoCvpREbAozF+q1VdHr1XkY/v\r\nxvVrJ0vKVL0F4xklwTvX4FLnT39QQPWDzE10a/yVj4n9yW1COcEZb50OAFZr\r\nD6h3Q6NcUCCaQIG5OhigbJr49df4nNMBWyTHl5neWkX35b24vJzZKu1iiqsG\r\nZXD/5PVTp2sAqeV6PJFXJjJKbCtGliGHVmIKfsBFsLPfw2P0/mDhcPTwn96Q\r\n0Axz62qw0DEi4iH0BJ1rpSIfgzcxcD/hwOt0I26C3cUFwRevCFXAfj15p5ue\r\naLehOhNVglLyBl/uBNZOCYkMxUWxNG1FquM=\r\n=npUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/density":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/tab-scroller":"15.0.0-canary.21d1196a7.0","@material/tab-indicator":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.21d1196a7.0_1673261127613_0.30537077677224134","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8d2d8d3c4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb6c249c19f5099a4cde497683a8fe9d1b113a14","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":37,"integrity":"sha512-3lYq3QizsoZU5FdeDCbNci9EmqUA/GlyYEGGSxqe2CzzspmT6o2xO3dSUGn0oMfMs+kqMntgMW6KfsptsFHjcg==","signatures":[{"sig":"MEQCIFz6iulOyPbuvbx869NZfw/KedDBKjKsIf1uwZWsLCY6AiBnKZVIsicWgyXdS8lEF1WihsPx+SmdiWIv2IeqR+/DRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJSEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMJA//Sq0SzKz0O94/1b8E4kAJBpLkw2hduNiDWUygcOR2fr8HdArM\r\nnRw3tqkxfuW7FVBiq3AK66k827Imgpx+DvogeaTIAvVnkieBOR4u5/MbmtF9\r\nW6Ivgj3nCwKfgZXpuTQnqcoDEGJkB32og8crZzmW3xIR3IcB6bHZxmB9995V\r\nQs1Wu9rDDR5HVSvO/lEbh1CjXem+V5WG0mJnBYZ5CNZl8Zo9OUjjdQGJuiZE\r\nxory0cHb59uNCiTcJZmr05HgYWCfRvtH8tpXbn/3u5GBFsb6Ab2pz1xynqTU\r\nVSZm/SO3jEm2Q5I7eY5aTJXqjJKrary82wIjpL2oXUt9jrYrkXP4l89QvGuy\r\niSAu7AtyHTcXt//b1opyav6bAVAZvTOiR63dBv5kaUku2083y4Wtq4MMqk/Z\r\nV+3JrGAkqqxJII859MsrbWvcW0koNcG7vlYqZpQ1mvNbwQIHhYd2nxk73gDc\r\n47UQjeEbbihY470sPthkD0hUnFPTgoQ+4wMQZGyeLgH6ndEsrWf33W4bxN7a\r\n3kFF3R/zXKCq2VTAEJI6nqwcPot3ip19wwJR5zObxOLzchH2RUI5qEc640Az\r\n+PAj4eyJK3SVvwFS2VwyLfSrMSXwagHudeqY2bfqn8ty2xiLmS7LMGP0/CzA\r\nJuDouGPVaUEgndgSwnrmQb9EHJus/OEjlsM=\r\n=G5ew\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/density":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/tab-scroller":"15.0.0-canary.8d2d8d3c4.0","@material/tab-indicator":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8d2d8d3c4.0_1673303172578_0.4509750526754259","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fc6ee6c32.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a8429e0f705fb07366518e92d8728a857c277d1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":37,"integrity":"sha512-vBPLTmUEbNuoZ+YkChN34wf1W0VdxgvmPG4XaQlmgRYXWFNYglKuCufiLXjrCrDo+jRXM0ra5T/gfQIlXGhQSg==","signatures":[{"sig":"MEUCIApWqgYNHH4ml9lNsqgAp4Nsuntq9DZW0bxeQ6ZYd7aUAiEA78QGCiEXumHHqhuP0sMw3wCy/PLHZrlQA8YowBQ9TJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7+g/+NAFeVMEUPr3W0NuXdRGur0W49uwFy1gt8JRlUunVVpyh1lN/\r\nTdR6ojZWp3LL42AgVa5RuxLQkwAYuXOvCpPPxKzh87EmWMK8LxoVqN3lSgEd\r\n8ZUwxMD9+PN0VlYUlG5izKu/2cL08bLzQN81OKQDywC9pYSeiXAw12ZDiQgC\r\nxiCTL+KHYxosbOH1vOUgkhd37Pus364KGjglbsFoTYWv/XQJfyJUD/0hp7pt\r\nc56GXpEJIXOWPheegq9G0qMIxKVrTT7hw4/MiE1gz8f4bWseLKcquNa2TkoR\r\nm2bepy2AlOIZrPJrthSd/CXTGPkHpfLRWOrUMZUTLNMnEFgwMf2gzwB+5YwY\r\nJxM5uPTLjqQgfHrdw3huHCpr8Nr8adQqa73zbMs/62hD4B+tI7g8+hQYGbXg\r\ntzbrfnBpY+NHT1WD6+xAhFVYccochzPkxLDdTlthIOk9bvWC7uvxnGSjDbXa\r\nOf2OoLB6oiMyi0My/o4+xVf/DFMJ+Df5c/7WU27iozWWeCKuNwUXVMpUoBe0\r\nl48FPQg4e+cKgO0ynZxXGkIVLcs7/o2Bq6TNFHul3NggHL2266OxYK0YMJK+\r\nXJinGuIlV7Y29TYDCKCpQsHVEBkPs/KWDR4OumguzvmbxLtqmZcjHXw4hz9G\r\nqEcOVxcsMF3UcPXFsd8TnMGr3RKhCpoEpmU=\r\n=cY5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/density":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/tab-scroller":"15.0.0-canary.fc6ee6c32.0","@material/tab-indicator":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fc6ee6c32.0_1673368227757_0.9360256178189263","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.73537ab0f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdea5c56b65cd66216af3da85aa68b2bbb3e85e3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.73537ab0f.0.tgz","fileCount":37,"integrity":"sha512-WPLmvZXsXfVR/BMWqXUuXzENmj075r6qGHR3M53mSW4UcVFLApIFbm3E0Pi9ygOhOw8MCfxyAUYUJ05UVX+Kmg==","signatures":[{"sig":"MEUCIF0vCYFW/dzqyu/A9boA4e5XGRaVpaiEX6lbMBt5pnXiAiEA9Tgng+3ZMOZaRJSHpKtka41REAHmZl47Q/5zZWFOQKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvarbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY9RAAoh9apTP3NnveKDEZC+GUNypE9T3uoPxOSAlZNqTO5TdoHZBF\r\nFlR6bYMKfbcmjiOGvcpHJRGUTlpSdsOAag0L+W6F5z3c5POIAO32Y+s6NSYe\r\nKq8b9I8COFKLswlNQ7jNeNW/I6qpeGLN224su8I9lGB8pBjuRZ7bWu1ZTMp9\r\nfYLfXCX5LWhJ1SACIqQ7ROjeOF4tMLlhz+ifDWB+ndKmvYmRXdJQY62S2rgO\r\nE/Z/KIB8E45lPbVGbPDF9rjw1CGDlN+PLTHkZg1KCS8zXQiditaVigR6ekQ7\r\nrOq+/+cqbcf6ND+H4ptxbIuP/zSUgKDcbC5r7t/1qG+b3sBzrTpTfGjUaxCt\r\nLJkdz88ILCVB8M8B3Yu1/nVegx+OYQu0Y5M/jzp2nXyFzuLbOk96WPxLew1L\r\nvEQSMKhbp2KvbKNvpUg9/1HSBunsLTYlwYd36lJV+80cFThu32mH8HqjWS7J\r\n7o+S4zrjT0eqeYu3hwvFH7VIs3bfNsvkO9swxw7hCPgqw8CZFpsf0Pv5NaZY\r\nJZKIlZYZ9Fp1cRFA7HHdlAnvDKXwRQLy9IpwDv24oFZEA/dDcyx4fbhr3NCk\r\nDkhRzpS1oE9FEy6UQ5zdJggVyLOC4c9KoWjuQJ2fj+ackYnAG85bXtWXq50S\r\n2jdsHfPwfu7fOI7kxBH1YqcOF9w3GpX7uc4=\r\n=cIn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/density":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/tab-scroller":"15.0.0-canary.73537ab0f.0","@material/tab-indicator":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.73537ab0f.0_1673374427600_0.9604154404137404","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/tab-bar","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.684e33d25.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"621ca40d8ed36bf7213074c5737640ce49984480","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.684e33d25.0.tgz","fileCount":37,"integrity":"sha512-SW/cMaDsIGGkM1ag3A7GJRlmr8eXmObWsvitQJzh6Azr5zzZtSI+GQygkMesAEE1gbpqOVN8d40rh3H7VVIAcA==","signatures":[{"sig":"MEQCIHIpxKKF+LYeGiyYrr04pdPQd/Dm5dIZdn155S/nFXbyAiAssnwBqFLSkP+h9mDjv0zGGo5bbKT/iQ05C34vEQwKFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbqNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPKA//czTtVD5yi0hOzLchYlePIVLhZslELn+1jzjkPeAnJQi+cq03\r\n7EixQ5naMShRXVINv2OAzhtga4mmUVwPJV0AbreuAsuW2Wu5Rjlrp84P8Ixq\r\n6s3MJ+PYzh/eFnAbB2Ksoeg+gJRrwSokXQ/9d/b+OWOIO+JcutR7xSYcyhK7\r\nwstJgtvTjZRirkA92ErYyqke//mucfoNSSH8fSp+VK/wEVtZmWWvAP+DI5YG\r\nWN3tiluHm+zhHgWFhkxtpjKZhxMUAtKUZygyN8mn93zEDaEijjKnixGn/ki8\r\ngc+A7SR+LYMJ5sFH50D5HB6ITU7qPF5mRTZ9Go+HpbCt3EV+WivoOb1dCASP\r\nWh9Gdpgmixelz05M8YWbhnI+Tk+WXgA1QoYZjfFJyrhBRShuNxrqThD/SWKG\r\n6Ys1gFgV5ErR+8cdUHrhLLrVnrGGHVfEbp2fjz6PDJkOuqin1xmazd8yldQw\r\n2/yehOlvUtRw3XJiq6Sz3TMta3d9ZDaSOh/NtUHyOtDs/IozgAlo5izrGB9i\r\n6KJAJWS+YqaZIMP85KKcSnOQQx/t85E/TBdwGXb/rADS5+KvGy+e6l5UtQ69\r\nEci4NwovTpFadULe1vMXiW5NH78CaqknUuG05iqhStVcF3XOopag5LmRHiXE\r\nWbq44H1m4JAy9nQcijzrBRoCSLYpUNw0hgY=\r\n=xAtJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/density":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/tab-scroller":"15.0.0-canary.684e33d25.0","@material/tab-indicator":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.684e33d25.0_1673378445258_0.6794686266225811","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0e89aab6b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a59ea1d055ab63306519c18a07c8e4140e6500b2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0e89aab6b.0.tgz","fileCount":37,"integrity":"sha512-sTGyWSxsve9D9dIwbB74xSVydToo+hvqfwgKbRTNo62AxLYiUmUrl0ylAnehY2Yt29gatQuL40gSGlQroHrm8g==","signatures":[{"sig":"MEQCIHRY4ZfhvjG8jOIJC7PRqwgrHafMsj9dWxsGLSjSoVQXAiBuwF6mplr49/ZeMMH79Em4olCljS7Jmlio155I0EiG7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuHNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptwA//VLFl6fsJsFQow3Ip0lKmgq3VTLcWhcx+uoOcaBr6uGLTRjUj\r\nwS+7qhdCGYtX1rPsYhHvrnpcm7+BfpSoA+hAQI5SHBuJAc/RekV01kD0Svv/\r\nwCdTAq7CwWZPRLEUVwZ2R5sAN6MjmRzlWZMVU1FQg1G0rd0Ntn0EX4n03OlK\r\nytUbB8jD3gkrfbP0qJPRNt1aMGNQ7ADk49S1f7rSBiU73KCxmbuYlZXOj+B0\r\nR2MifEVOrs5CdpwYrwW6NsUMm1Q4RZfDTPTqkiG8RknqAj5Khiphu/2CP6i3\r\nqb33QyCrvfbRqKDSnYj3Tc7ma7tQV+VkHRXl2aL+WYkkxEAPWM7/AyVTpM6H\r\nlvfa2RQjOmGS2xebh5HpX6HgxVzxK66bcI096TATy5nHT4JN/7jk851OP6DY\r\njuWh/W6aSsiEaf0ymbg/qjK4RjwLB9zb8xtQwA2o/iO3d+UzkJ54OVd+NS49\r\ny4YpFWlKu/Ov4aWjsaoIXFZLif3p2Nmo3K3uD3znYVhKaVB9kxVqmYp+wqRE\r\nun0x0asVCemG/DvwK3Tpqmc+8QC/TKlX0xD8R9o4JQMRgbX8niWVMZN2RdhU\r\nRIYf6mr+KInsp3MdLT/hK+tV9gmotE3auuiEbSDaH3IZYGvd6ZQgddKXF9RK\r\ndyfwYSu+W6wJhR8ojIsvHJphAVAusyUmoUg=\r\n=yRoF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/density":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/tab-scroller":"15.0.0-canary.0e89aab6b.0","@material/tab-indicator":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0e89aab6b.0_1673454029658_0.44805906780666516","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b0103d10a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccdb81254e474039d11663056cca8690bc39c11c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b0103d10a.0.tgz","fileCount":37,"integrity":"sha512-vFdqeXemn6QZN5lKzd+dYo/XCs/cHHYYtsqU6VKVEsQsqPvuqaR97c0kVvGbyomGrAR8TFlyumJh8LV+cdGBlQ==","signatures":[{"sig":"MEYCIQC4txJ1suba1crFGUm5SmFZJ2XU1lOmlKrfMiWgJ+fGBwIhAKWjGkjyMT65v160DQcY3WRc+f1jpBiopWRCWNok41DD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRmg//f+G2fnQFGFsMSdaqCQW8KJXbOsjSrIxkD3VSl6QLXfX8BB4U\r\ndGO+Onh0HLAfvEASBMjpHwfVkJG4kR96cFabYHgyTxa1gSgkwlX37mVfhsnH\r\n2GUl/zleu2EfU1xMAxLWRKIZSfi6mWL38FQ4oPdmIp365xdf/FMci1QdiVL6\r\noEzC1bBmfsI0Sl/g6PFHL3M0qvgDAH+8JypC4itVhMQ5ed4CTz1tggp8f+x+\r\nMwgRL7meKSwZZtSWmSQCkMy9ygLqmAxv7lTmHZp/L7bnGlRihCgE8mfmwvMU\r\njKCiuafoIz95/cl7psu0uPR7iMn59tD0c83uo+aHjjHVH9qsX6+CaeyMxNen\r\nGjxpi/ridAis3ZBTUABFFlcYm9qX9GpBoTwVyEVEcxPH39GUeBIjZ8T7zdOd\r\nU1d45QAg23752Op43gbBtjFJV2dK8eyQV58AQH6PdKiPbY2ASdY769s7gORe\r\nn//iYBYFEm3kOl6ybT0jOA5G9pigoMSirGQYfW39qsEZ5jD/hzJDTC1gYEE1\r\nUKs6NbdzC6bgOld+L/g6arSPK5X03StHlcVPBSlhljHg39akqge8vio+8z6S\r\ng/48w+tXJFzmJQm9ReqwhHPvPRdOGH9iTrhYknlbIorNVDwB6hvsAfDjv1L8\r\nJG9z2AZuRDEUxPmwhbWZSlD507oAutTHxhU=\r\n=0dLG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/density":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/tab-scroller":"15.0.0-canary.b0103d10a.0","@material/tab-indicator":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b0103d10a.0_1673464500094_0.2118591952128699","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/tab-bar","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.50e7a5312.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fced83ce7b4ad422d344edbd205d408eac7164d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.50e7a5312.0.tgz","fileCount":37,"integrity":"sha512-tzRJKztpwZRZfeBEv9H57GOes2vx7ylm/xcpQbtqw3qxjSn7niP9tBsgVYAb8e15lp4VBakZpfNbgPXDbE5j9w==","signatures":[{"sig":"MEUCIQCSyyqP/ifRQBA/7M9CIZGhqLufQo6VcDMosOMTiE4tMAIgNNL60YaR9ukczTfzIsoesoq/XDTX6nIqoN7X7/OPV64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEsRAAicLwy0lBy6DXxwsw3tl4dBUV+A1z8vrGFhqO7Mn2QN7M0rM7\r\nEzVfw9lXfAFDpiwzE4ujYLXeDHgghrMvYOrUdVSfU/NZyQgyS9u/IPQQBl8y\r\nt2Uw+meqWh/Yu2606Blw5E0F9APymKZ4yqTkwpRkYU2/LJXkPwNvO8PXFupw\r\nUL0F7y47JlcO0F2qVWXL2JrPGjFtOqZaLps9t5IZGxkSNrbtYTU1NSK/7DB5\r\nAMXrXdqXRLggEWh59n/HmIh80/wtzn9WeVX0pW/3d5IAD/4qc1VVzkFFDLJi\r\n+R421+vNNi4LmVKKNL9wAwiRcAbNn8hKaV1tsSYcR+YYa5+1AsxMIinQvTVU\r\nDFPbjt/SUF0avr1fbYNMxU9APlc7PbpjynNMC4wXh6IOvsfMM7Ml6+kYubMZ\r\nBXSDlBCO0hI64krwFBbYG+0pL9TxX54aB/NRXFBC3W+My6nwamymAjfmzVJ3\r\nrV4TmWzVJUUx5edBMqEnT/VjIXeATiJRxIiXB2ZGEB2Vfj3dfWwxBzn8YKqZ\r\nJ6VoYJMrycWYgAK0/gE27vnOBcTBJp79R8zveW7jWN3LldaaxclMpWpbNBDu\r\nbGCqX5y0yAL8CFH1XEdGLEFovWt/Uq1NM8ZFcFNYgbD8RnrsqAXQ2yMZjcXA\r\n6rDmk+ql3YxM1MAB8lds/HT3PCfCBPMn3lM=\r\n=gJBL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/density":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/tab-scroller":"15.0.0-canary.50e7a5312.0","@material/tab-indicator":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.50e7a5312.0_1673470585358_0.49786739468191743","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/tab-bar","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.202823f54.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9b43d43baa9fbc0cc36c72563130dfcd9944ddb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.202823f54.0.tgz","fileCount":37,"integrity":"sha512-YaCDKgcVGVwr3umSKmYFlZdKeUZKlpfTMRRyBS/vwYUFKZJc7rBLtcwV7jHCioiDn2P2jDy5XdgwnnXwmwkZ+Q==","signatures":[{"sig":"MEUCIB1OHMTZvF7UM4dhNaurrxUNh0+bvIHQ7bo3j8LQNg+gAiEApC5+8r3cMnQ8iY+eztczdV/TxmJrSmriq2KSeTYFIWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyw2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNVw//cdXUZExy+OdWoPljtZ54DhNmPKEx9d6fPFkGs/xD1Fo8Gr8y\r\n2sgSOnkq9G354kM8VDcmBZBqBEGx2A/x7GtgMMckoze6UOxdPjl68eBIoE3W\r\nCQlhZovpsfdcKOS2asEzIyTDKsk9Dyzng4AgI6RjkrNOHiVst0xrN3eUSnm7\r\n4zLfi1Vx++pulUqkYcs2g54UQPNBLJiERLqnz15QJ81cpuUPiIFF+HaCswo/\r\njvkAGADNNzm0xV4vRKop7zqRJh/IXWgaXiKI+ksr90LipyPKHQY9Gc71vcYn\r\nbKNXegzUd5rljTNiWF0Ef+/RJuqCNxT2I2aJdXbKOm+qO2cXkN0NBXt7N3Yr\r\nR2RgV8ErM4VODGP7a53DRqdogV/lcPuI+RLabFfx/WyBkXKqgSmyQKGpC9A/\r\nhDzP6CONsZFNW3j67b89yx/ndU43rYTR6h7AesDYxfh2uCBBa3UF8WO+Mpwz\r\nKxFTThYyI6SplO/JOpL4WFnnTShW5k+yDQNYMFZZXPujQcsX3IXEXhTgYg+s\r\nM2b/2LssJ8WvBYLmYnvNnlfm058nXW3x2IvJd2ikowL4lk1jnGGsHBaCH7/C\r\ntlYs2SK9Eb/DRP6xDz1+QCpuFWHi4J5LJoj945bIrEeB8V/xI11T7ln9Tkqn\r\nqgpCnGjA/RpZCj43f0aT6Ak+1SQ1yl/Z7Dc=\r\n=yxvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/density":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/tab-scroller":"15.0.0-canary.202823f54.0","@material/tab-indicator":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.202823f54.0_1673473078662_0.3098000238911849","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.199fe2a2a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d8c4bd8127a6b592951537cffa251bbb88da25","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.199fe2a2a.0.tgz","fileCount":37,"integrity":"sha512-LXk7ianbKsg7un5sj/Eq+6ADVBEWNVU2r1sy1bfyhgWjqTPuy2rpcacUXrEGx5ESuZpiTUxfzq2kf1GF8gNn+Q==","signatures":[{"sig":"MEUCIEXIfmMP8pNGZVhbgqXVSL6+85v4tbZTn08zbJ9LE1P5AiEAkvFjeE8MF6IT7aPazPTpuYF8JlKDgTWHTNhoAg2ke8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpltw//dTU4rXVSnqISWWMkXo+h1JfIdpYYEiuJY8QBnG2p29yfRVBM\r\ngYNzkgvYIklY79yDSyiJWXBtm0audioRB5fGyVoK9wnIcTyy7LZhYoQAJxpv\r\n7f01BENMz2JRjY1InDTv4n12tbNmEVK+R2lgjwsMpYE8lFoMmIve9tT+X5ux\r\nGfT50Iyxqinf1CE0sJ2UP+E45A9XvgAO1xwGDtWR5ICTZsHmM4CCzTEI/UXt\r\nmmis81EgEwc2rFcnIplKvOFM6aJfiabuAXy5FGJ4Fh9kh/sJQ0g7sI+Feq4d\r\ncU6zS58TZOEEgSF7kWtUTGK2O5YEyfR4SXNEg2VRaQ/CyALjkjyqWxcTcbol\r\n2Y3BAXIKjoUtGSiEnwDmzY4m2Gt905OIRz+0Kzb/r5grjBbVUCoyp3qfxc0o\r\nF31XqRb8NQ+IzAWCltY31H2C0doH3HhRJX/hcl1PfB+CjB73/D25ien70VtC\r\ngV/gcgDyKQI8MX/pqpYJNLSYJMSyT1dwjl0lYhCt94g2iroPYlmj6RMZO0Lb\r\nbqB5eJnkSpGGBlUNkEzn4jMGTrmkapb3TbeJFeGjyT4AsdtGFsiGJTMu8tKg\r\naX5fgHCyO7BMTVMhwygUlvLz7KNcC0AOuwAACX9wdnpXiHMFCD5I3tGnXKuM\r\nOFeVg9HseVJAvhscN0tBNA1/dnZouwKFiKs=\r\n=YBoY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/density":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/tab-scroller":"15.0.0-canary.199fe2a2a.0","@material/tab-indicator":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.199fe2a2a.0_1673474284091_0.6521359583489525","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8c0786d6f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b7c4311ae966b0f13fe6672a17c034733312659","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8c0786d6f.0.tgz","fileCount":37,"integrity":"sha512-RHi9DOnCJKXm7i5MD9p8+U4/eH7w9RzZaKlT0sxLe4w62xmo8uGDNCv2wf2WsHKgYNzvRh6FXxmg6RQ0ajkD7A==","signatures":[{"sig":"MEUCIEb+etCS7MiMcol/sT9hoAwVtyYQwa4Cvv846GdnxJ3lAiEAgUWJGHuseR+Plaeza86pPyVKnGJwZ3U6I/jxzSnELo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrixw/9EtPdNVlycvfzUd5YmtBal2cVbeFsaFQjkkfIyUqUv7DPjqCL\r\n6z8IZsZN/gDk+lNqiucWhM6q0gsyLFY5lSDkneslke5AhZi4oP6h8xlYGRJg\r\nKidJ0C+JCCSdbUA8fjye5J30DjseIesa4Vh0or6ufkHQWrCdANquFUasvh6t\r\nMqG8KR2cD0GJDIDaxh8k9jUZjnAsRzbOkjRhcXSr38l9JrjKeni0TQfg7OAP\r\n+2DxfLdzciSSiHJvwWvAjkQ6874bw/xz+D3ScxvqxJ9fXzzcrHhZOf5ZJltJ\r\nDN7YvubuqySG1oCs8CLj0MQXrGbgoMP7DxISYllZ6J3Glv/dQQoFOKi6TMLg\r\njAGth9jCbelssciVG9M2oAD3IHc6QWBK4I5at/a51Lk5IxVoQ/oq3VTkqZOh\r\n7QL/yYlo2BmsPrnT7ZRP4F5sz+4Y02TTc89p0oXk7Jc7xp/4HrRKq2KNJAYo\r\nG6XnjVki4sPiiKQ+CRHf9vqFP1MGyBCpfVrena29YZr5RiGn4zb4/HAaGqDS\r\n8xWIu+NvWyng4neLQxwflrYNsn9xwAMe5ILzc/TsgmylkMYf4fhhbmfVyGL0\r\nzp3FjwxYgjbpq60H5mQu+rKgJbTUqg4getkxUUzmO0+UYnhPJHhPOJErBmf7\r\nJxeL9+SYyrRIiG1Yhq1jHt1vsBXGd+8SCUk=\r\n=Z2ql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/density":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/tab-scroller":"15.0.0-canary.8c0786d6f.0","@material/tab-indicator":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8c0786d6f.0_1673534323297_0.5039741311194417","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8a74f7c6d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39427732bc66512c4eb9de896d837d8a581efded","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":37,"integrity":"sha512-TMcfLqI8GKSVOMxL2awV1My/ZRcKS1o/MWwpbF9oB9YzIl0sUQ5XkUrOyS0UM/04buavwroK/CsPQmg35Eq+/w==","signatures":[{"sig":"MEUCIQDymg4cjWNa30brktPbebM/Ho/rGWLNclhsSQwKVI7cKgIgEBpTuHp83+8d0ViBM/I25d5l8ZU4ndbXdvXSnHUAInw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvaHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHsg/9GI+G3G7Jw/PKLJtYAmwUH/nV3Etp/4MYDk7GrEu4Cp3+iOGk\r\nLKg+n1dGEzczIH4lwqGpYG2HgIUfke8ZHdBupGByuPl3ai6xl8XhH8sEg/dW\r\nPDGSA2d3zv3RqvGQWaDk7cBMnbM5Z20dUt+dEsvcWyqIm7a1YYrr6J1ELtt1\r\nYRMItuK2I+wd1v0pJHvv3cpbGYeajriZ6fbacP9hTFYi+smQYACjgeocaZIi\r\nXK5FQQQbghLHBM5x4qkGW0zk5rSeCnYlczkEdOjmnbfUgw98fljmtP4rz4jV\r\nffXSY1VZI1w5mwnPuz8PvmtEAELQY966AdZANKq3JYhCW1XuJ7ER2UM9aN7P\r\nR6OBd/87ekFf8UOd/wvBU1LM3kDV4YVpFrnOWit17XHE92t30bMZ6w1RN08+\r\nP68tBehw1WqnWmp4XIA2IXUKoA5/dC6oONaQG3laA1gGexjw09VInKbTfLo9\r\nbGI30I9xtLRX7/NvawTtu7aBwoGnkKL9WfT4QtS7j4QmkjCv4KbRc8G5KNyT\r\naVm1EoLwdGlrKrJpxR/6VYY/od/dZctcRDbbFtxSYP+lyHRa0J2CieQE9+J1\r\nD0hjsRM7uW/biZxmLbJge3fM0pOwL6ok/7KWWiUt562msIVg/Y/cNWrg2hmE\r\n85PLiwnlTi5p/1+g0wYaPtSBslAB2FlE2Io=\r\n=L1/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/density":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/tab-scroller":"15.0.0-canary.8a74f7c6d.0","@material/tab-indicator":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8a74f7c6d.0_1673983622833_0.28458352196372605","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b4687fdc1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c460a4ebd5158e2d6b347a50e401e7b3f77c2f5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b4687fdc1.0.tgz","fileCount":37,"integrity":"sha512-1pObLDq8Zu+HfTLF2KTWZtvbwDvFGrn/DFPMwczb8GcR1y5N/F78PkaLcyhCjPWi5OYFCK7SFzV7oiw9/kTf0w==","signatures":[{"sig":"MEUCIQDbXBmV9MPcNhVwQeY7MiShKgfzbDTHdfeL2nyd/4BldwIgaDBEHd4qVpv2jLg+ahhEaTV7u3HQ9AEInZRaiOXlKQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ9YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE6g/+IkE+G80E7a3IntRNaGU0ml0Kq4GhsJC34VD4CS+ND8fndBuE\r\n9grmThT3gmiHPYz5N6XHj5nVBfEJOU/99gNQJ9vVObXAVXMcMrV3CPyXMaao\r\nDA2hd7Sp9O3GmK2gQZ3++oI+/cy9A29qUoVX+ZMQVipjVF6KJYDmQM03d7C8\r\nifyZcIhPkw3DyUplE4Hv3CQjS534UX7D3H4ntlevKg+Mvv0c/V0nGPxxbw2u\r\nbhXPk5T1Z2GswIpm4Si+jIk0xiY6ZMKqtMAx6QE4bh9nFx3bpK2QbqhlGh0c\r\nMdD5lZBnFxBd8m6GwQ45xKI1blho9LbNNMIzSse+nDk4r7dbqZxbUbe5iKs3\r\nLqPx9olarzluVVJVQWonvz4v4Gz9qxA6hxmiLADLl/YWo5x3xwtk3N5QjpR8\r\ncqHqRUjLTsLBhItpMVPqLQ16aSfERI8XD2EHnOFB1y/2FKHGN/6hr+ZW/fEf\r\nY7CPRY6Ap029Bdq8wYnUmaccPPKvaYqnebyb+UIB5WM0ylprJ96/zqJvfuvu\r\nCRG3nq299Ov+BHntICH1HsqXnl+sF6EHL9L+IMUaMRuqNwZQqo81lr8pWO/D\r\nsOzLRyClzmrj1Yp6BRQIlMqBJPVWf/deEdw2WTUx1e7uIEuhlH+MYR0qhlaL\r\neJ6JIRmKIP4/sFHn7rJ4YI10/dXgpKcu8kg=\r\n=mBhT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/density":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/tab-scroller":"15.0.0-canary.b4687fdc1.0","@material/tab-indicator":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b4687fdc1.0_1674157912222_0.6214201627064382","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b836b9892.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff44d2fdc4e4ffa89725305c5977702d12c2a1c5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b836b9892.0.tgz","fileCount":37,"integrity":"sha512-avIiar3P9SmbRT2G0mGpH0N4+wBZnhpvI+Q3ycAQ+XwmcS/mkfRJcGSJBOo8/nTeUyQ4NPoC5d50Fy6/un9sIg==","signatures":[{"sig":"MEYCIQDv1t+O98IUGtDtCGNokCw5DHBgZErx50bkyGRo5LQS2wIhAKf6jI6GxgAy2U6i/G1/R9M/eu/leXM+A7uZUADJUup2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F6OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkvw/+KMv4cmBJD9TktipGt/+xxUil8B1qjzVCuaVl/e84N1/yQYU5\r\n4VNuz6oGQyq/pdIgl5MzUnbl/1tpCOPuvaQM9+GbbZrV7O4xVTVtDTDxYDfg\r\nMK3GWPFwFh8GWnXD1qt59vKRcFf3xUYdRoYp6AmjHFp7fzSKGzxGPiMz/UvX\r\n8Gq6wsIlLWeKpyapyiZZhhxfZuZrv3Al6wtt4TYkG5qkSEBHawByon9+KG8+\r\nUs43dsPplHj0yNkXebWx0jnBN10qd5v5b839YqOxO9L4JjAjB6lrC0QQn1cU\r\nppUVZZHslmgT+nqSpcev8ESVVxxjDHQ9rkCU06EbVRyVcc6pVb+WMxFh4r5V\r\noOSdr6ezVscPM9IYtpHh8BuURuOnTaNElu95NGiE0mpa5mDbrz+lRe5JMl8u\r\np371E3A7LmZx6pw6mmm2F3u/ES2VF66CVeg5MtXZMyGKfJZlNjomU/3UHgok\r\nb/cV0qTaJpUr1+oJaX8IzUVbrI1icKmnWEBFnnxbt3dJLx2FWTVpylMTBN9s\r\nOwhH1oRU8zywFTvN+zl/6huVw9f87BZ6qhLVq6MoFNzhvrTQySUXIPY4Wayd\r\nPhfGxlqkR8d1M52cFspGpSX5hWGvd5LDfXJA7xwhKTR7c1MEwM9OG5Hu1Z7/\r\nkmtYqWdX+DBlNwwaCsmR9kr/su1Tt1HniZU=\r\n=CGEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/density":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/tab-scroller":"15.0.0-canary.b836b9892.0","@material/tab-indicator":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b836b9892.0_1674600078053_0.24357571616597795","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e8912fd37.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798f5f33c549cdbbd35657fa41da4eea91decc81","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e8912fd37.0.tgz","fileCount":37,"integrity":"sha512-b1tN5D2hYkHPORiSP12wYFm7PEJqK6dTxciNC7IhH2wbr5vtYNUybA/SKrtGkla0bSex0iJV1MqQ1Sci5XoqGg==","signatures":[{"sig":"MEUCICf/CpoCADxAX3CHZzWp1zcGBVBK0WHcN/Gq6noJUb2jAiEAuRZ+cobluQUd3urdRpG1v34t9d5OhtVGUA12z3kqZFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0scfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnoA/+J59Ho9bKo9ZHXSpMSALtNR4Zu0k5O1s7PiyIzb60yQCMUMI4\r\nvUbMhiusOqqLIKXZ4mz62MOkWtdzylh9I9Qjo89UgueonJbUwUuyIxaeneeQ\r\np0J7WEYb2TFb8ndbw5B/55zCxCya30bnwHhpzI72qN/p+M1RYSgMzHUYW/pf\r\nIbtb06zA/AQATigvXHlHBILR5m8HdABQNivBEoBht5qeZN2hS9A9CwNPISa3\r\nVMM/7XVxq0wc1HEijA2WVWYZoT8+//R/k9X4zUUnQkyJNvFDJ6lDTtzy2the\r\n3mluVOrWkv80iVBFtKhVAZCi+HA0wOX20SGRNf6gLl6W6MibrFpiZ4DCbSRN\r\nB+7V+Gb+OQ0/BRMhEatMAOkD+fQVGfwkfoc6yHnLCRs6/xKIqBI8iWEK9W8Z\r\n/3CL6hQjdhnvp1LDdhbtEq5qxjlZ7dCW3BcQjs6UwzuNJxk8zCk53jUUe5LH\r\n6pkJpIIwq4J00GMGOE59w0vOgfOEJnpArVAMCP/hBDjjzdOoehpYKW1H5XCH\r\nH6RRJzK3WgstZvPm1vjYizXj0tpzHAHa4Y3a37+xE+HoSiFFGcpb1OOE+Ynm\r\njVcPxqM8M7poisvvcplAtGW6h3Hwf9XmCrMONTuNz5nXtNwiLDivVtLUkjup\r\n/5FaqT41Icblxj1lMOMKl56uBBPUtcMj/ko=\r\n=FDjQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/density":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/tab-scroller":"15.0.0-canary.e8912fd37.0","@material/tab-indicator":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e8912fd37.0_1674757918887_0.8425329516518538","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/tab-bar","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.16fbd30ff.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1366c01236ddc0cdfe0ad758a76589e63f41d754","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.16fbd30ff.0.tgz","fileCount":37,"integrity":"sha512-uUitufmjnJ7kOY0dn8smSt0aUW/pov6F3qwuKdtwpcDktgIAHk5fSkwcekmBe6jZidg5egfDfZ7STzUpiXxt8w==","signatures":[{"sig":"MEYCIQDFU5IrooiBXpjuf6HNAGNndNtK8FhpM5Tu9pkIxJTSYwIhAOveG8/abi7Hs43RS7k2V3aq8hVnE76c/ymk6Q2Pi61f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0shRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMkBAAhFT3rgTcTXb7TYqEvmVyCCz69WrbOPT5AM4LAHdCUohQExyq\r\nKNAI+its9HucFan4sOcP16dqlE/NinO3aVhHXKYt0j1JQo3izjqFyPJpDtlu\r\nWAOIK/sAo60gk5xaDPt9adfKZldsNiIlsI91JEF9iIrZWNlDF9qYOUyx8KjQ\r\nQTVtcrjlkgsw7WEBaHXBmk9H8PFyrhX4/kEgU5UTgLJ4enjBKGC1QD/B2z0N\r\n+NxQ1iUKB3sTqfNelNVA78q8XpB2b5SM/SvE1YNIj2F/bgJupz8wEqqv1QVr\r\nSpDELZXKEC+w2dSakcxrVSgjVr1gBh4bjZ1oKgb+M9dy8Dew/Ja2z94QL8iJ\r\nWPcgNWMHTkplp2sUHXX1+OSBY9xAY2+AJ84ejtfCa4GacwGKEe3/CMI7NbZc\r\nfKm0rOpTTMxbWOsxInhbp1E5BPrjqgqN7Pqj9IaQt63qmMO/tt9+6QxEIxrG\r\nCVRPqo3UAouQH+le65hQZL43ixll+kp8QC5p0BTGt8lnFSv5nL7TJ+GGrDit\r\n6wSv0567M1BLgPQSxSki8FQDvHb42yE0SQjuY4P/Jt7yknIQUOiX8Xjwdu7s\r\nO3ZocJdzp9YOrMVjE8pLvp3qgIRf0gxQjtRruUrRHm6f1pIeCFt75UKPQHaL\r\naTKbv+NJtnR90vseF4QqJ+l7UeBlZEnCx0o=\r\n=VMHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/density":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/tab-scroller":"15.0.0-canary.16fbd30ff.0","@material/tab-indicator":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.16fbd30ff.0_1674758225452_0.6440238301943404","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.033ae083a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828e91540eecdfa8d96c45d3446a1cf495ef7520","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.033ae083a.0.tgz","fileCount":37,"integrity":"sha512-iQM0Tlq3bUtT3jLd+sHQWFaw2kR+MtGD/qgd+zF3/KH/7SQuTDpT5+bw0QNEgK+Ro/9FiO8bA/b1+ZgBya2ujw==","signatures":[{"sig":"MEUCIQCG94+iyF+RfxGYaAQW+G0iej8T13qdYzWgtotjZE4zjwIgWzClprloz26Md8X8OUn5X+LXaMmwr4ToPM0DVVmM0lM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tSFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPiw//WW2ze2MePtyfW3WRSIgFbS8QF+bCl/HxiplMFZpDkQtplHGk\r\nJdaFNpdx00WZ8qMp/HamwD7dIx3zvYR9jljXCCkerX4BaJWuujy0Zpwxp9fZ\r\nIxweYKYGkiMM0uK5TaB6dJvGPkNxt5S+8+W6tdg1E449DF17Dlw8OQOjfhbw\r\nyMX9HrMOPalzsl9Fv9G4D0JRKeVfq2xi5pGAoQur+B44XkDhhEgI72tCt1hZ\r\nDDwxrIw0Y2q3npzb4aHlCXIvGfq0QvoMGUoy6q11Aizc3yBmjve8jjcrSSCL\r\nfVQjcsBGiytIj11raNsm6J+1JKN6sQvZamIPMo8ZL1fI5iJj8/Jg0gN7LKTC\r\nvo+NbjcSC+hysnrK8e+wg5FglkxnrSDueHu7DxbdJ8CGE5gEdIk0oD7sVV1h\r\nJltY0TIox+CdB6uwe9qopKKoPNUnLqakwMhSh1SIaNgVKHqC/DIGlA8paF9g\r\nncxPdglQT6GvCeHaM8Jn6ojmcZ0EmfT3pbq65QY2iUz9mdjEa/Rj4YXco4s5\r\njVoAOYZaNYkZScxhrY8XRc3KcrSx5mFWngWJJD27WuHiYzd8Uzviv5lvK/Sp\r\nBD5orD1YCSuny9jK3XS07LL5yOsOlf5Bkp0EfSuvyJ76y2xX031EpcyptBbu\r\nhVl6yLbO8snValql6PnnSxjdzCg/0irQ2Og=\r\n=cKQr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/density":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/tab-scroller":"15.0.0-canary.033ae083a.0","@material/tab-indicator":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.033ae083a.0_1674761349445_0.13569792961157656","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3a705fa1d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de872156db0e8eb546bb63f8e9a1de5bb3efc0dd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3a705fa1d.0.tgz","fileCount":37,"integrity":"sha512-e2ys+Rg5u8GcnmFp+uLnfaLG5OJDnpyNUwCZ7vOhz33/g/xO6L1QEBfrJdQd/CUGxrqEVo+u0h5N90gRi70mwA==","signatures":[{"sig":"MEUCIQCh0Q/V5+znJ4YztYaQlktdMp765T8+AG6hsYnjvPLhfAIgRFRTVenm7PgJIXAAsJ+IjTosoI6Jc/PkKWv/kqWTPKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpyQ//Tk3CHADBf1FUOIHFsAqFPe+iSKlXUbhJrosxKiEk4pUXOvd3\r\nXNxNOtIIqL4eXjuDcMbWyIZJIYQGeG8KaiW9eAsPX0Toba1CzVUnqsMhwYF5\r\nRtiX6u9jhZFwmaWjiMv27kUHwvw12fIhVOBuHbX5ElZvdOuO5uEVJ3WgaeyS\r\nW/YrYQ7RnQCi+4q/TCZCAmwOWIHB6LGeMMfH2QR1L4UJNL5BQGTHNIDPL1y0\r\naq4wSRGo/rcCB/aIjXVZHb75NPDa2WNuuAwe4CDzoIRWclKYqVVvE8YeP1hU\r\nvErmLVKHCDkxHYwaFaUuJwCIhjUV3t4nzHaj7LUZHBIpZtA6vSEPG9GXPz4u\r\n989UWn4/6cw5eB80q+wHifaAM+r4rR9LUDog9UWZ2xlFOSJhCRGUcWkW6TjF\r\nRNw9d4mhYOQ/HpMQtwm5eOy0OaX6X9fUry2QzUYKWSqaNMyJZdPkV3ZVZgxF\r\n7+mpZWI9yZ3IqFh+DR5/Bw8CFIJMzNxuhKuGio3TKJLoF3d76JMPf1X5Cr9c\r\nFuD54Ear7NrdRDoSfSg8hgOtnLdJ5E/m6OxXEdvFX+AnsmvWFuJWn/1f4fy3\r\nIVtk5DD/GLgBc9ZoaQj1jsrp+YCMVwm8eeHrP482eOMaPisRU/51bfy1yev6\r\nNRTqLoQ6Ut7N1QaAnFB7A8RmhTwT5QMnf/w=\r\n=vM7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/density":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/tab-scroller":"15.0.0-canary.3a705fa1d.0","@material/tab-indicator":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3a705fa1d.0_1674859534901_0.7026112958246984","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d6bea2ff2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0895ee7c7ee27a464658ee354ac777c2008386de","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":37,"integrity":"sha512-3oQdzN2mMF5ZL45TEbSjzT4UUpQuX3zh5+Fi/qGhfeYiqFZcZlO4afh7ivj7Ht+U2HtkCj6NhpftZ5rjK3Nwug==","signatures":[{"sig":"MEYCIQDFFXUngh4x12GP9/M+X9g+JIeRWFqm0+sEMZ94Rx6OpgIhAOv/TvCSF1yGK9TwveiRwCTdOjuA8AYvVY2LMdTDcKFw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TSGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrioA//Ubx5rxFploNwq13XvpCevWInNz9Ja4UWXenxImWR4hmF7dXt\r\nCRARHc7Ihz8VstK/UO5UEDHh/zZPG1XZ3eS/S6dRxCCDGOK4mNcGmmAqoVlT\r\nPB0kl6TfaYJNezWXl4Xmc/Fzs5zbdwmOtbja8aKqRJLSMkwbCHYS1QFhftaR\r\n9Bi0y0EnswQcgDPRIQKPCTC/IVWMHkfkRmTqBjXakNsXUSPzjVho5yvCIE9H\r\nHBsngCAN1prAR4P6ZdR+67EfJZpHD5FS6KUXZ28f8LnsWm3IPqbuJwBJ7+lZ\r\nZmULF56/a+L3sVVrfhXmRN1jm2diKRoz9sbQSyfK+4kZTVtekNAkho4UOH/I\r\nDvS7E8uStLVmpr89oOthkPYOZfw7xtf7b/vqfPlmmDP4URBHjgeq2jDQtuoU\r\nZ1PVH1BaslKoVtpEvQQvi/U6MpANQu1GJ1yGfjuxj57LIaW/K4a3iYjfrJSX\r\nfOC96MLcpHZLmJTcBKDdNQcTLMF6UTffaiGDxLOfEUaBpwbkdVNSQlVBvq/Y\r\n3nUcpPqPTXXh0tjBXlSOrzwcyQUJHBIpGBlSr0r2QzPMJ9vT//Hq2S9xiOrW\r\nCt6pUf+xhZEV4KTqSQMCoBcJmmU1GSFw+loHyoEabmyDEha7awZZXkCTHTlT\r\nYNOLLjTwkPmb8L4h39sN3W2T5X2Hfr8WQwQ=\r\n=/VDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/density":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/tab-scroller":"15.0.0-canary.d6bea2ff2.0","@material/tab-indicator":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d6bea2ff2.0_1675179142235_0.9817664128174448","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0c94182c8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"913107dc07366e0ad3084094eea40207db6698fd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0c94182c8.0.tgz","fileCount":37,"integrity":"sha512-sERUHkaVrmPB0tvXq5edCF9E+0Yx3kXi6F6A0fFeqBM8KyzTFnlCnAvz4weGX0yqm0CK6LFATQmwufeXh5dOFQ==","signatures":[{"sig":"MEUCIQDF3lU/A+TOT8sEfBGPSt85P7EOSsb4SreMcQqbOHd3kwIgQGxbnaXNgY1Eb0r1Tbz2IPeE8AXQr+IZiCwbhw5EnxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qV3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+LQ//dmouxw2BIeMWsxgwAuWdcWlOaRYbQWqXOeuxpMrWiK0knvn1\r\n/l6lTqiJclaK8BwJMSzubR7/q/dmLrRt9x/d4fS+lNXj23ZcVSUWcdHlBGpO\r\nBIoehZGnLT1JtHNbqQsOgeTllU9JGKfI8lsdtPsnNCO/v5dX7nI1isQI4Ivg\r\nKbD33W0vkDkN8RP40gD+eVkoJ6h8+OZ/prGaWGlx965EFP/Z2vgu+th/Go6I\r\nciATh/LUPliasF6Rbtd+cQQ+9w3HkPxWrsH8DpojSJbkiJffmjzpUYJtD5gS\r\n2ra4Dgmrhb6GhCPWp6CRHzSVz0YfcwbVPUt+ye8t1sgUEylgSr0BHNiLkIGU\r\nrh5UzwYv2Ooa87ffsLpCxl+dMFtFdiAOM7VyiF26BqS7njOVM7JQ14RfmGF/\r\nF+lLlDeQR3EmeXaegYyW5fLDZq/BRdJ+lETI/qPtzO4viQIZ11l8l8TOHNX/\r\nqBvxkPYaGA5fBntiWgkk3Lv8/W9MWaIllynuWfb7H+6VN6UucN7PHVYpKLrZ\r\nfrUK+FhbYG5kNpmU8QxvvyJVyMSKQsrtRiKXcwYSZUKknzJ8G7lNVGWxwhy9\r\nIDcW0KsHVY4cW3gEBNfJmIHbcAvHzJemaZO+4mw/2jWpJiPazyw9glMCd5Pr\r\n/d7AKSDyE/oMGybCwDf8hbobX29bK2G/HJE=\r\n=Qq7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/density":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/tab-scroller":"15.0.0-canary.0c94182c8.0","@material/tab-indicator":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0c94182c8.0_1675273591511_0.4381253008799315","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/tab-bar","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.15b221540.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1181bae3e719f2f70c90ea60db09b29eebd4805","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.15b221540.0.tgz","fileCount":37,"integrity":"sha512-+5ooJWRuheuSJU9OvZo5jMvt7Jmn2y9A1wpbskXLfMjpnCZ4NIr1dm3LgNG/1UxzfaeqCQLGhYTWGzIkKvF0Ug==","signatures":[{"sig":"MEUCIQDy3Fj0IPdNeU/tAofaCT3uhHgYvtmdL+7CVCdhx3seKgIgJCX7InsVrm3lu0uQLFnceWVwuUig4POZ5rzKGFSNiUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXzRAAlT3yGZmbqQSiAyyp+quTAPB+xzgcODeQHo8h6f+br9Ysf1Nh\r\n2rmngTX9OzFX2PXNR+KK8IRi8yqm0pMczTO9iVx0M0onVCFIq19Nl2U9Vm24\r\n4U/RQpK6x65nCZe5QRiQkzSCB85c8min2k1I9f2SG7N8dNWpNeoydB+rF69G\r\nbd0XqIlhE14TfkhU0sTqPxYg2RxhU49eRD+Rthx2yRk3Yg9TkZRm/TCOPCWz\r\nM+CQzqFQYYqxTg+yBw7g5rap1/QfW0k9PO6lMU1KcC1pKp9fECZB4Z6nsUzw\r\nTDRmu3jPMDZ1qTJlOOS6SAZ+fSDGYIsKLo1ZDF10TJua8hLUopOA3mPMsEj+\r\n3vjHpkwcp7mppd2zV0kjwLBHG8vEKldIkV20dVXW0gT+J8iox4OY59hehlMX\r\nZGY5a7CIKB+lR6abxxKhtResvUgXHAnUemOZXDB4dxA/Ncii8KCwA+xpuZKK\r\nGRXDkWdyMiKV3sN4jFsHZcrbiBFY4YnDSi9n9wlfBZK/wl6S0y3R7uVDf5C+\r\nnxN5x5nUen/Bzg6wRrzw+OmL6oTxUxF2UQYktbhp3j+f4xI6ObFDKt+ynTA9\r\nCD3OvzyUtapkifg2lGCUokD9N7elZTSaPzJrRv2RWHV4R0Sa/9JJVUsY/WWJ\r\npxN5GGCJYjbpTwVz6gdb2rn0Ugf64wZFKwY=\r\n=mHrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/density":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/tab-scroller":"15.0.0-canary.15b221540.0","@material/tab-indicator":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.15b221540.0_1675274093122_0.3654666702360354","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6a4b3f834.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"897441cceebdd996bfd5a100bcbebe8550053491","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6a4b3f834.0.tgz","fileCount":37,"integrity":"sha512-p1DhGhYuE/lyRwYcl/KyrtNccAHv9ZpqvSICfAbvjATSc8cU/j2nF30B1nbyIC7AIC9jmUGxUrbYBJtcOflE3A==","signatures":[{"sig":"MEUCIQDb8z1lulB14gDWW2xGTJ+TcnBoyVZx1ClWGmGhbQYSLAIge20Zts6Mcq2uTqUnxmtSwzXNOzj4J43Z2KUGF7SCOHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rbdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6yA//ZjvZKeiuEVHQOzrlqgESO2kxJcmFNDUp5idQvgbr2iWhoOW6\r\no8Z+PAwZCEeRJGPJlOvETKo3/cPCrexrdRx1coPjltVOI1+e1jldZdd7NaUb\r\n8JvFCsh8jL13pnsRFyBKXRoiXL363W3uwNR8DHM+DbJoIaxXY31/LTGhIiyK\r\nUpeSnpV9oOtgL4kGSmSmquP8rDMBek71f/a24ydOvS6NCPfnyqatEIqlj8An\r\n1yparqhSUNx+r95ctgirA0ur3z3NAcooR+ERAVCm292AZJCDjjJgBA9hGU0L\r\nwwaTlZPwYYU1JsT0RD3IttIT1h/Ec0U3fqBIku3AMvtR07MgvwupEFc5qznv\r\nRFjXbl79RHhYSKXA7p1ZAn+B98xiySZG3KVrNpOUVfogYctBVGhciEdtd1cJ\r\nsA6kB8rpRd2e2reRtID15fHE8ZxWzpk8PjuJIIxUpTAEkKGLEwJVWDj1hnk2\r\n1fMnqA5QTfI4MfZua3j32GlBQdknJ1bJlUvxd8soOjgUAw7THPuhIVPMYyA7\r\n9hbI5a5Udl7nD0SV3yuqBySfuPSiFCbBzko6RNrM6FSXC0GN2hHPLA+pSix9\r\nlV2Z2N2+QUr7eZL3/wN/0Gkqz+AcnUQFHrdArBeXtel70ZA7fPgXp1Iu+a1M\r\nhI+O5xCyBd72rE3FbRTf1zSvuiGDYbsCo2c=\r\n=AkLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/density":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/tab-scroller":"15.0.0-canary.6a4b3f834.0","@material/tab-indicator":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6a4b3f834.0_1675278045330_0.43295075257287774","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b177b40e2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02107267b39fb5d767d0eb1deb48daa62b675df3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b177b40e2.0.tgz","fileCount":37,"integrity":"sha512-HdKsTx/FlYFLoRqhZYmaQUJbNbLni0QVI9fnQ0lek2zDbGHA11wTRcq0fu5VohnBMfzoMeFERuKS71D4hLy72g==","signatures":[{"sig":"MEUCIQD/EEjc+NtnKVkRKDbARB5RY6xQeExtQll/CCxHxypTgQIgbyZRISrej/2A5AEScg8rYrlRX0rNQvn05ZhI49QMElM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y/AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmdhAAoafS/ywgPW55Lr9OrJLyBneEpzD9FI9o8acAFFbSxrTNHT6M\r\nDP4M6wyxITd5MCQ5J6J5P+VMToHAB8tSFa+mJMGsdX3DzRjUt2bC3Zg9GNZw\r\nVrCf2tZlmMDjuCGp9YqcJY6dd3hHCldd0wtLCh/mAI9iw4bQ90JxYLYBRCdK\r\ni7Lwo4J/4tB1a0pDxKvrltloQsgb5uesyLT105Qu0KG0lq6nOZJMAHydaXoL\r\nd8VqfTi+UWB55cVB+LzDThL8KYh3NHUEw6ylHM8alruyCVWThW7iQvVptXGK\r\nomFNFX1gPzbmKXgOJJ5ES7GLKlow+vNz3TpsDIyicZJCGm0l1f7K8zqPl3wa\r\nLbkt2xxAMj0I+HSxxFhEs6FPQ8hB8G+v7rWhF0G+1c93svUMs2C0fAllytVJ\r\nq/JFU6ZoB8iY2MwiEuTK8XyB3E57mRTgL2SA3NWnKtpiAxAcLrRDoJo9K8du\r\nqm4aJSNhyP1zx/OhiOfC9PCVHOKx7ak5ewBN/vw3/BpUjkQbhc32qLJCX20A\r\n+oulL2JBnmXOWn+AmF8E+tBetOWJ3x0XwT+YWaoA6tongZlxUzHAIHgl8ZVk\r\n3TssdZ700cUhuRdtgjV7jNy4OLkItNHJ9l43Wan3mxNnZhISeiNjbqoKaePZ\r\nucQJMPJ1NbIP7Egrrl36hej0oKG9+osaVy4=\r\n=iDVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/density":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/tab-scroller":"15.0.0-canary.b177b40e2.0","@material/tab-indicator":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b177b40e2.0_1675308992038_0.9663246809346908","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d9f821042.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be9a5c4c83711fdf667078bd9cdc56740f9a56f5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d9f821042.0.tgz","fileCount":37,"integrity":"sha512-cQwSXSaU1zbghrWKo6q2tG8K8n9YNwRMIxafYEPgLfGlkX5toMYfAIGYMWhbTbqpOY2KsHPywj1zK8ualjfsTQ==","signatures":[{"sig":"MEQCIFdUU6Y60McsB+12E7idKCUFi1L1WkBHQ7NY0XM+jysKAiAa285vQ5F+qC+VBldSHbWn9Kuu/Qm2GXqQ280a6ikQYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/WSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS/g//UxThF3o1qIL14HV2cyiZOGdOqeDfCiqNdTdShrJaGA8PH921\r\nNn8TyUxN/r4NasFJNDH9+XMjEx7J1Prpb11SYcCvIhLym7QEKQMhkK2Jeswm\r\nnH1KTqdidYnIRNpL/dF+WUPMUeLMaI26Q/sY8zaVjvi+5cBPGXq0KGZZ2MQS\r\nIGT5zjVaQlt5EegfUgOSMFlKR/5As5i/zrWx7dizt5MddCNXdS6m7R5zk4Yw\r\ns/C3RujLnYMgK/oStQMeXheTtH4fQZKJonXPWB+47MsAisK2Aq51ZCIorxfa\r\nxnCzZle36pYjbafLsp56nj0TK+PdAzZTqjfH+lvICrsGS96G7pIh0Cc2y646\r\nqLw4WUbMOWmAhUW3IcwOSbbp1HMNCoutpOAapr1q6W4yVzrecrn/Lc7MXTRC\r\nFBOSW1yjj2aZ+CDs2JiGZjD5G5hi3/GT9VmuFovIxIkL/QC4GySLm5vvcZmk\r\n06UCdfEa3BoFDt3rPXtSJxlqjKFOhmt6m67jIb+4LXH50zl7dFbOLYodPGaI\r\nNba7wnHnFAjh+W1tgZvuz98FaY/UTDZIQbgfZ3nqICMNs1KNNP9SxUSqB7IX\r\nphxxCBuCfnzt94WC9mgikJ2s2s5hTxL+XMF6YnLO0FefcJaweaT7VAiikyS3\r\n/pDoAgYY156N+yovrs3nC8ApUsq29I2fOyY=\r\n=N6Y5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/density":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/tab-scroller":"15.0.0-canary.d9f821042.0","@material/tab-indicator":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d9f821042.0_1675359634152_0.9263649079587761","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/tab-bar","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.47c7deb19.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a4c3348ba1b9fba877811d7786a0c6b277d08fd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.47c7deb19.0.tgz","fileCount":37,"integrity":"sha512-yH0xjnAYaEX0Sxz3EoIrha+KxIz1ZVWPstPu37fQwHB6Xab+xuRUClgchr/YmybDZxvBTzFRdM988v+btMnhvA==","signatures":[{"sig":"MEUCIQCU87muyE7HOlVvGi/tWqiyeRwFkuGQiOW8Gxv41Ckq6QIgVOW+oM0qVkTbjAiQ7JEoSb0Wd3C8N/9vAWl8b3cs3us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ2w/+Mwb7jlpXzhtXoATbo/c1tMkzXtDJ8jYbyF835FD11KRV19T+\r\n1mcAYIs5ouMR3rS/KhV8cdNAgiv9xJVUgyh3f0NZ3P8EP44Tf/IzVoKnPIed\r\n0Sndf5fIBzD2ToMddzq01cy9Yh4A5bIkxyzOffjIGUxAqQctF/0fVj1eiogB\r\nrzicnM+SLmqbsVf0EeHCPFZEs6PvyWp/IlaXSFotNNyoIYNHUgJkjlTRKOSD\r\nyY/Q2YC415wv2tQ7Th1I0LvyCMf21qprOmFMrNsXxYAYxq0aPEuj8tKx/j37\r\nhz4aWc8f0v/0dEhZvjYIj//xu8GT3ZxGAcSkMJGzIXf9HwhmoFu92q2kaXJo\r\naXl7Pd5m2Gs4YIhpTipPjvQIZ/CaKvk7hq/ujAvHQcGZehvuDnqfTYAZ2S4Q\r\n95M5VQmhWF689hA+mn4ITt0YHO4lrRYadQ9ZWIhUGOKCfcj0hufwe31h2KI1\r\nL3XF+4HQp5txxPntvXPjX4QR6SCZJQFreUliIidZEGZc4vVfhIn9By/FYdgT\r\naw98NcPUgou8O3KvTbiCq7ctefZkCMHdqE6cOz5ffPzqId/lfPS8bBhv4RQf\r\nxdAID2Vse4LDG4oTqEotIq4SAnFzQ0KwgPhXSltxb57A7iEaMpG5svCNILU5\r\n37WLd1Kopp+8R1Ii3mjXw+mjuFS6yfjg5SY=\r\n=4I6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/density":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/tab-scroller":"15.0.0-canary.47c7deb19.0","@material/tab-indicator":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.47c7deb19.0_1675415468838_0.5182518005277699","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a16dbd1a6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b024c8b80975719742931eda91f55c4fbfceb66","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":37,"integrity":"sha512-99Qt9rFD4tVzfJE8pPvlhTDaYAJbFk5DtROD6kJzwKnaBRLdtVZ9euL1CeKnqI4fLtJF1EkNZzEJqTC97dxPVQ==","signatures":[{"sig":"MEQCIHyKcwyL5UvkoY8sAq5PL53FO0AIA4hVUzCfPnrdamRJAiBAcdI1yBlfNkUxsHx5uo1mHql4qcQCw60taIyeFaR4Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fhIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSCA//TCSZEG3XtmZusEKL1OJEs4mfAivv2SJwuM7EdY12vUI8T9zq\r\ne4Jzz82rxEw4ZArc8YU7PFOvnbcEsn9yNao69srjnzk/sV7BxahevxYihcgV\r\nZ7PTftm9sWaT63/CbZgf35LhWwVCZKEhWd/gh7CGJedf5jwK/EgnrwlBbdGb\r\ntAjpzQOkMpsSkomP3RR9Qe8a3R7BhV9ZXokdcs27jdaN6WAqOKGQq28mCvNy\r\n3CKJ7khExg1tyNdY2zXmbcSR1HPGZoATlXRxdu3InQP/pMjhLmO0cWch3k74\r\n8Ke28e6VuDkME/GDH9cWIJHOzBIOJ5SBHxPuAF5bkVOFYLdY26kW91TDlVUR\r\nKlbaASP7JwzZtbu8SQSg6H4TDb/+ioJ9qib8Vn3GxyUox1aROgKARzaXgh0Z\r\nvqP0FvuULQvMzbagxqP91JeQBGaTieYqnUgE5fZ6Nq+VYuAI763iB2PsvIkl\r\nX0rDJGq9XPX4gSaOH83rYST3tl/FTVyQWr52pnpbPRq8XRZ1WymV08IVHqN+\r\nNm2TnoIteIUAOuuuRCV06ZQKd52IeA9ZSdoaKRDtIV/ajfQ+STCUR0tq/x+a\r\nSZ+E4GpLdbSze9J8xah/BLFFAdgiPCVTygX1X6iG8KwEfTYaAVI/oyltDg/4\r\n7DQvBt4tUAGJzE273k3eHy3e7V0eol4lXwM=\r\n=mbmP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/density":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/tab-scroller":"15.0.0-canary.a16dbd1a6.0","@material/tab-indicator":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a16dbd1a6.0_1675491400173_0.8654653969088109","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.93416f87a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89d3bd2a0d27cfed420ab88be881b671f6644a7f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.93416f87a.0.tgz","fileCount":37,"integrity":"sha512-bHHDaAuXggHLFyjsfut7qAXlpfRczVYGUXSAZH6nWeKLDWKsSa3yFtxEOBvB3k99byWCAEk77spfQw81myncyg==","signatures":[{"sig":"MEYCIQDLWRVNE5UotIKJMXWXCnaQPEjN1wHzL3bUQCtBD3J0bgIhAMs/fMyoUAYBAHqKTDrV/IyF1/o+DhUYP06fz02v/VYM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lGAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPbg/+Nuq0Y/vi204AqrJ5TCz5HjBm30/Rb2YNR5lBKKr4Vuqpsq+A\r\nrxnUdr/RxQaXq+qleH0f1BtHE7qucXfN0pmkTlMmV4ZPuKLgPUXSeG6/8LuQ\r\ndKZJJJ17Kj3P5DR7AUqLQKgXbm74WssAcaY4bAGJxzdQJjg4p1/8XLxxN6Gq\r\nU9CmOPD/RoN7gaJGnxjQ2GJ5qmjwn2+IdjoM3os6+gHhOYNhOHp5BuYh6L0b\r\n8d7JUk3Mu7/50VD+7OmINiX0zkF0Ock/Y7NG0TzpvWrqUUCK/fDZQmnlFGYS\r\nIovq9MSeC53CtCSrls6je9TBmjc11DEFp75Cv/+s64uK5q4uz7yPTMC97A7G\r\nVJmfgrDE5hp9W339OBxh8RbVybx3+dzONEUi8cDdpGAtcTDWJYJ0fINWgce+\r\nI7ZFxFuZ8kmNpP2ODYQoEVm7YQwGM/lCopGSgfFHK3AGoWX2oyTTVUn4CemG\r\nV/YgQPFUIMYSXQL1NMXBkpiqIJySNvCnGcjB++gMWM2Vod7tlHR1eQrqBe24\r\nRXsX6LpnnwiKyfePRIXodCf11QAtzOiiLJ8qoIIKfADi3KgCsm5YfNJ/UDPm\r\nc9UIBCXW+w7Yh3FKeZxKIrMcBWxvdbUPp5+NUFFlrup0WVjJRwCIouXqX2Bl\r\nIKtq+Xdny5sHXfhGwhTh4kE33V0cdGzZRf8=\r\n=Jv84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/density":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/tab-scroller":"15.0.0-canary.93416f87a.0","@material/tab-indicator":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.93416f87a.0_1675776384428_0.862842995529794","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/tab-bar","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.49b8e7442.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf11866420a13f95fbba222976593700a2a9a49e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.49b8e7442.0.tgz","fileCount":37,"integrity":"sha512-tWsLquNr2fCNfa7lbp60qxYEgJ1rb7iyVhOVlyfwekp25rGGqF3McNAagQuX5VpLryOpfm1sMnmBXoCYL4+WrA==","signatures":[{"sig":"MEQCID6/aKkyfLsbBjkL4SEeusntP8M4tvDKiqRMAt5tl0sIAiBSuYM8c1GzyalS50RAgaqL79/LubZJ5bIkfk5xPeGq1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH2xAAgaRRbTJdu3cljhNjKSEYmvOduSHGMP7l3imfQFUD/P0IjIkR\r\n/y14PccbJhNETD8ocSkFnbggjZHUqavVoT/CHoTsPGdWtL0SfUVY3sz6Z4aW\r\neEb6zYTDHU4/g6jl89RDv3yuchvfkSJajTFMz4QTHh51EIQ7HJMa/GH1JPgK\r\nNn63uIkWTVIsgp415vYeJAj9TrisuHiysn7QdzjyIVfphHlul53zQDL+DW9t\r\ntHKSep8dPg5B/d/VtV3Hk6nFEGnLnJBjNqK79Ojakvhg6gHiAB/uxol0PzAx\r\nK7wPfRwWOgWe5++UYe6n1Sj1DNcs7CPFAcyRdsruwnvdAOSIRtsDC61E0dWW\r\nkvAoaLD4PAkdmCr7S5zihJ1AdjlBlKe08wOEJA9chUKXLzhDXh6o8V01pam7\r\nbWCnaeDNAmkGCesC5+H6Y9mZEE8C4KGhQZX27MBToizzRunwAxddYfH4iB6A\r\n/NlXLnDoTwaWEfKkqPvKBFG1sf326VGKuaFHHLpio8WLCxGlXdvJJxIVOQbP\r\nPTG9CmhsxnaRFJv0RqAVQvIV16PlS5dvPA/730Tdn5oKR1cWBr9dhabV5bEi\r\nYdMsPHvbdGMl4LF+VMv9L+cKWsGA5lq7fe5Q4pjFKUi4ySMzJ2+nNafTfURw\r\nBkmyQJB5EdBTrjcsCxZ3Bt8YGoh+pkIhdk4=\r\n=hSOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/density":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/tab-scroller":"15.0.0-canary.49b8e7442.0","@material/tab-indicator":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.49b8e7442.0_1675811501181_0.6437221357074356","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/tab-bar","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.de38de758.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2931248ce29ec9e240b4f2d2c315867cd48fd89","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.de38de758.0.tgz","fileCount":37,"integrity":"sha512-+3AStu2jz00VGDDf8WDmCB+5khWX/MYBc4OsR6UXJjf2R1epS0luXGG045C8I4z4AdvkJoZz6XrzZFoiSVdWvg==","signatures":[{"sig":"MEUCIQDJedRPFRluwhaWiVAXibikd0+nK3R6eL9CgL/YZjGR9gIgCpC4pMyC1dflWALDZdyL3lpoOK16PrGAKAuJLphs6CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RTlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO+g/9HiHsFnGWmzcny2FZMekkL1li3Xws935Yjk2COyLUO2o+7wzM\r\nMtvGKfoGA0fnrv3Ztw+uYP4gml0J3ytPeIsj3XvFdhER5QopnF2ijljNsrOb\r\n+6iN9UnATzyv8Hh32etKnOgDJLMlD/U44ksMfSjT+kdj7PaAzv0+z6MsFqfO\r\n2xOP451jqEelsGuiKhX/DBe4NXO6IGhiuk0u6Yyvt8ZCV5Atn4fRLI2sX27X\r\n3ef0THbcrHYJ9mLMp5i3+eF5kJJ6qDWFpW/EJMrWeWEHWLm/fyW6SRhP8hbW\r\nOtYYztRlL5KX5hHcl1t58OoGHTnucIEHpu/qyqiJtaTj0rHKUtxHYbx+Zk9s\r\nMBFyfhZ6b40tQ5Hr5QtLh737PW2TY/99e08XjFWbm2skAWCJlKneumsx4JI9\r\nXPUqTxdXssjQvtSGozmTz+LkDF62jljr0WGw53RA9OEoLK2QeLv1LQMiD7eV\r\npjauI6xaLLk6go6fQEzloED9+shvW4G3iB2ZU4dt+6PzOwwWRABC6avgUWTo\r\n1by3IXjGOIcrOpzlwJ4rPZhVbz0+5H8Os7NgoglGUC9AFo4oeNG1wbW9XQTx\r\nylrd15PM5eHfs7CJVBmV4JoG5IPBiPh/OEr1/lVlHV4ajTbr5cGTwB3OkjP6\r\nyXWdD5UWR5dSfe5UBEdEHnrkMdco4YkcsB0=\r\n=KP5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/density":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/tab-scroller":"15.0.0-canary.de38de758.0","@material/tab-indicator":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.de38de758.0_1675957477145_0.8619263703267528","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4d62de70c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ad3f7fe6568e5b73a3ef7fe3cb679781891d289","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4d62de70c.0.tgz","fileCount":37,"integrity":"sha512-avICswGtuIBY7RSdMu6A6C1BQKQDmAbodMifVoaOe/6eQDuBPWSSMaaw1OVWhI4b7+ZPpbMqZSFNBnoD5yOmxg==","signatures":[{"sig":"MEYCIQCL73CsT1SQQMYAl/Iz1AxtJ5FnHWfupe3F4KwYE503MAIhAM2tsEc/LUItg9n83yXsn+mnPRoXZDk/xTUiExxLhEiI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W48ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFAhAAmEy3KDHvDRSsHTsTUqkEoqiF5PTv8I8g3QIop4+C4YbMAxm7\r\nOXTGaREWmO3ufna+Vdp30MORmVaZoT/CYpmnC50byFy2onJGS77Rf2A+htvs\r\n0VuzS43cwH1C6G0A+s4C3MTAgAYWQ75yuSKQhhhIzrv+PrPDCKaoHc0JlH8U\r\nJGx/CnzW1sGXNnOWXwkLL6qn8TxSrjfv4GTSZ8Jzuomc4cSoLUjsttXXCZon\r\nDvRCEdMAHCdL5iT4qesGy1JmGJLk6ly6ypoiJlJ5Am4oQwv/mgttEN68lKoo\r\nxQpGHg2lWMOMj6ln1kauzFA59NS5SHRvtAic/jyE5hteSLTkqhgxX1VaAgvc\r\n4X4o3Z0i4vLKmo9fxmrh5xrg6XVyt+bX0pxli0VGtBB784U1olwLUCzvZ50T\r\nxdhpMIBqEQ9DKZ2vt2M7R8toqunPVXxel9C5yHbVtxenzjndvoYJDT3a6kF5\r\nY4TFdImP3u7UdbqdpBBpdVL+N4nbzSYpb0mO5SH6BYv9kiktQNZXleiJWbZe\r\n1pb2BtItvbI/ovu0ukGdRqBwZeUTqkLKnLU6gACLabyyhPRprg9tk4TkZzbk\r\nlHkjKQRwaH00nKj4IccX64fqcqBKFY4t5hc5tnANN8ZQSaS2/cOV43eU0rT2\r\n2R+X5+8CuJoAQJdUnut1igx0GLu+Q+FkfIc=\r\n=auNF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/density":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/tab-scroller":"15.0.0-canary.4d62de70c.0","@material/tab-indicator":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4d62de70c.0_1675980348665_0.5705164029471121","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6fcd8d418.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85dd79f35d20ed4cfa38e9c4ac3633ae0412d279","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6fcd8d418.0.tgz","fileCount":37,"integrity":"sha512-F0z/ovIzCRb9qSDNjEsoI/jSu1j9+6LkfwZNhOsATg5lFy2oD/LOi4y/b0cLkRKSaSnh1zYYdYNqh7z5/Z7KkQ==","signatures":[{"sig":"MEQCIEg/80eoBWcspq33qu9LEMyH8GU1olw8tsvkN84dCwHyAiAIxEqzLE4daTVPItAiKc/EV3o3ncLoma7yuRMmlKgp1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iReACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbNA//Y+mJ70VGUw/lEBxlC/33AQrFRcI4Z27ZcKAyE+J1Hj+lDpOU\r\n2g7JWZ0rCruijburAUmwJk++oFNMAf6XgX5OIc7h8d3eCwgHPzVfVsvX7Ai6\r\nzVfR/QSUwK5ZCSQtpK/UKAsLhmyeHXk/3jxf4/crolQLmCM8ATSsOtumaE+r\r\n1rxwf+mBaWV8M16dB0qEGmR2cL4Kcque8nXOTL5q7o4cBG0UKUYkRtwH8zZP\r\ngQZ+k5Kom2QP0Od5ae6UDPGHdFKzB9QjZauhfn3GzSyp6IF7/AvTKMiWn6K4\r\nDx+RP0Mpr0xjhmKwP88uAsGZceVnTik4INuy+ZbQ8O/Mvsd3Ci7OCokPhzIj\r\naQgBX9yxDr1h0Z9M89VdHgcviDu11r1B/0G+ZPDfIq4H2wYVsYBJyiI9MDbQ\r\nInwdTn2sh7zvYSrohCm7KyFSbjgd8EPwly1b85CNh/H0e1OvnOrQK1Hdu5a0\r\niVq4m5YZGjhhMjWoh7cIobcuYHoyUCLNec65L5TP+MKPJkPYWxZE2VugF/bD\r\n5XKPGcEMT7Jo33RVLOTbIXAm9REcQjy3Y1NScR8oXJENlyUfkH2dXC0Qxycl\r\nsf9QhGb1zrRT6M5cZtbfRZ2p0jvuMzQjuxJyDDABzWt5UR+SMXiW0Oq4vokc\r\nENfSxnQmpn1yECXYABrzbUil0lwM+cAIEKE=\r\n=A2ZD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/density":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/tab-scroller":"15.0.0-canary.6fcd8d418.0","@material/tab-indicator":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6fcd8d418.0_1676289118423_0.05583952831542405","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.066d9439b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03f11fc3bbdff23cfdb25e7e918fd4be1415ae38","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.066d9439b.0.tgz","fileCount":37,"integrity":"sha512-szJ8FIhnG40VdHgV34+JwConO/dOz4I4BLh377ZreoDb56wxtDvc1NhTFw986w9MW/qGv7wbtLW+wePjy2Rd1w==","signatures":[{"sig":"MEYCIQDKbiJo90Q0TT3BD+A3BTZMyPWzqpKY7sTMP9vzLizXKAIhAOAiWN347RnMofTtY0VTsaR/PROCAwX2QTCH/7BxFVBj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TnaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro8Q//bZishsXe0tcY7OQaXe/fao5z5A1hL+RA16IoQFBA0Ibjy3zk\r\naFngF8OXQk3hNHjFq91uNjirIXYZsR3K3I7w9gvVsu1YS2MSUq1b9WmuTMhu\r\nP1k5xXDSn/3lnPK5vQ73LEH+UHWMO75uudP6PAmRr7j78NjVoZSn0hdfvkc3\r\nTyP0X+MtCvK3u/QXxgyuDW2OQpBHOtpV7brMs+E1AhM2N9C/sST6g+x9kXwL\r\n3UwG+UphA8HS1O3gFI2P3Fm4lQYNcItnBdn2lYftMhCpHwPT0yCtezqkp/VK\r\nbvye2q4At2dKNqGn+bIcXTkG76cRusq52X7VUU9xPsF9adwIgFtLqFaaxCen\r\nCY1S7ohm1gMimDSQgyix4z+3Zyzo6tyVKH56BjYm1REQkk6+BbFS9/8wTF2o\r\nQSHMmk701U3HhI3qLtrMv7v0F0ULzyCHnyM5hCe4ALwkZTRk1qgW3wNmZdmJ\r\nv3WvSpbJ1cW+AgL/5hU0L/ObUHR+QObfgT/0x4T2MY1wK2RXjxRBmLbBCRVT\r\nxJITMFnypv3U9LoffbiSWCjXC5iLwRI0w63sRskCPRer4HX5F77uK27SlG4E\r\nLBRWkSjg3jAoeWlXzmu0JkK/riKA0H6YgGAFcmUSyzFT9AWZ4+DbgXENj60i\r\nKA9bT6UFIEqLGDHpIMAAP/Lefvel32uN8SQ=\r\n=AJ7V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/density":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/tab-scroller":"15.0.0-canary.066d9439b.0","@material/tab-indicator":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.066d9439b.0_1676491226462_0.2975493021464042","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7ab32468c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a3af9632619a1d341c36d335cc009442f7ec26","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7ab32468c.0.tgz","fileCount":37,"integrity":"sha512-r3NgAifaYTeJvwdj2y1HqIFw3CYkarj7nlfb2Hj90302bUKUvlbcqJig537mBhVOxN9ypLuLynEgfVBY+nYxjg==","signatures":[{"sig":"MEUCIQCr/51JpwXKNQgEn+DGCgqV4QPO/uWK19lUnfz6XypjpQIgAorPqM0b4b3SGhVNs1sj5TwhPRzLd3so0mmsoJhObXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q8rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryGxAAicdhJMKB1qtwyxhYtal17BdD4ogkK937RmzcDEzD+6Awf0Nc\r\n56z0vD9Qr/EOmatHi1JODmpyVbqGfjAHqFiJzS2pCMb7Nkr8e5RJaC5dIpzt\r\npJ8rWEyDAbYMgpfY/BOKOnpQR6YVK8aBQzTxt6KhOqePhkNqh4HNGV+zP4PS\r\n0SB0TXnohm4tVj/JViP3H43Sjqq0V4jRUia65ttXSbqucBhOoglPt6dhYUki\r\nHypdeH1lH2v83rOYs285e/FOO7V0buwjSX4ldalkrQjcWBiir0ihqEQE8vZo\r\n14hNiWoxAyQCv0XEQ0xwlmrLqkNrZnkwT/foKWu3Hc1t43xCtyOPhj0kKRKC\r\nLsoA9kvRml4xXgftpW22yDmx13fxSYb5p7aayHGVKQbQI+be2fY+WjZhlcbX\r\nJblVF8rbnN0Exp1r3NbxMNuBE14E7UNaur3AWOaFmsvvEa6zTc71DfUdW981\r\nTdmsqo3B34ic0TvPghqa6bR5OCmPoCsDoMcfMen+LK2UorSk3UyJDh7gSUfg\r\nxAKisOacc50mC8jK8o17NHvOIXs+0R7aCu6XyQj8F8A7zmTcUfuV3TGhBWNQ\r\nzqlVyvqaOkNwWZKQg4cXm43MBuAvXMnfhMay0AYAlg3XHWppxUTCM5lvPkok\r\nZnenCyIeDtPA/WzahOPqY/qyFch1kPLS8oQ=\r\n=PaZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/density":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/tab-scroller":"15.0.0-canary.7ab32468c.0","@material/tab-indicator":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7ab32468c.0_1677004587702_0.46160716225820186","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fa27ba61d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58373c67283e5d2c195229618bc5851a13a4a59","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fa27ba61d.0.tgz","fileCount":37,"integrity":"sha512-HgecMDLMl+SxwaO6Urs+rF/LyY9/CJV6jnXcg1Jm4+u5cfPoyaQ5QUpydUBGl8sHLaKeWWXnkmoWSHUhCUuiSQ==","signatures":[{"sig":"MEUCIQCi8kLHP2CENM9K6wM6iNniDfjW7E2iNzNrpZ1WUQrdJwIgfbpxzktUyw07if84Wq/m0dBtY4RO6ujSGqD+XB7XpFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/Ni5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPMQ//c+w2v+Z6Q8e788ypmWXnqb0X06/ZBX8M7JKYvHRndRJLZS0A\r\nflI7g1LP4WEo9PO4Sgl2E9YEqisjri2vZWh7KKBlZWY9evbkCoxTQ86Q29ws\r\ntPqbqEi8+vWMkm0bcr0HVeOuKQu+s6jAvTyykSueV7TUIErA/luQdUMjaquW\r\nJspMkWnkAYQVF1PAFMigGifJCPukbMwu6WygT+ZHbqAojubBw085cY9LN9mz\r\nEeDqyLKZh8hdjpzOEsq2UY8uFwNZj6aURL/bIXXDB0mY8idZ5kt54fGFcn03\r\nrkHvPUsDcMTHZSu8Y0y9Auq8OgYM8oC6s3gFq89fthmKtFjZLsaWKlBYHl+O\r\nOzCDylR++BPpAce0UTfdT6hAHTXNVpWqvLv9h8AJqYLgrvfPIAbOAbitp5an\r\n08Si9cRJnAV+sGXoAiwdnZhrZXj9yNtPgM8JKfogjtMJEtXDKZds2BJRcQL2\r\nO5RsbEtlK8puyFv475lZhb2t+jwLp54rBjIxTjR5jGpgrIH+2f830kKpWcMO\r\nBzk1UahsBadm+6oT5wR5zguuvK2ovmO63pS5WgMuIlbX+xTl4vTb4KWsJFSK\r\nB/13RJ25LHvfgp/N0YBqwdI69+6jIx0l19pLLHqZkzLsk0fuWSIS3kxZpqaG\r\nNAI4oLENQ0C5naIAmWf4NNcM4otHMKNa19M=\r\n=Owvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/density":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/tab-scroller":"15.0.0-canary.fa27ba61d.0","@material/tab-indicator":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fa27ba61d.0_1677514937057_0.7510163029763741","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.311ab4d4a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e395bfcd960c77fc6d0a24604cc8466de425a32","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.311ab4d4a.0.tgz","fileCount":37,"integrity":"sha512-/U1iMX1ZnrKm/erGeyZAlqA+B66oAX759MqYHLr8vhO/qRaqxIHSZvkCbYdUVJRxYlmdnlrZxO67oINJmFljFA==","signatures":[{"sig":"MEUCIFoEG8VzvHlgkGxNvoht4HqXsuVWO26pJXnVETksPyUYAiEA2xaG6PETdDrk6YKso7Lc0KcBrqRx+0D13zlmY6mY6is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRMQ//Q7RzSukQPX/OEmclTmz7PgeSM00MuK2GqZk6gEPtv+y0ReG7\r\niQgUZyxma/e4V4ZSYBtFt3RxtEnRFRYalYQpq3PSyFht4D2ObLiJpD2+hR/i\r\nHd7J4P9X7lUELk0iHSoRq5gohQc2tTXvt51RvCqrIAADUCqVpYBoLWq2yq9f\r\nWI0KOdtFYU5cvypspTp6xaL9iQsMv2a3GXCwENRw2mCX8Y4ALdpGfrMIvF2t\r\n/nSPwLjoQDKdeGBYECMJX2mSrDZE2lYKu++cb6zCkjiFrRIwqXrMMZlZR2Ve\r\nnxkNIdLhPnslM7DA3zgkGd+pl/heUCA0kJUUg45kTsO8NHHA/BR7ZhRnqf+O\r\nU0zaEa6Rb35AqI8rbCpbFeKItKX0kF8NmagGUeMQiT/OLYIWdUOzFvqfSLsh\r\n1uZpmoGsB4CmZMBp2b6ktR8xWP4AknkzNK+3yS/qL8PY5XTkxmYjKrExL7/h\r\nDGhww3/FxN5b1efRUlS/vDHO2Z3rG3xxVunKgg2wlgYjZAvgcBANrCjiFqmb\r\nStntQT05rfrEaNM7OX5REj75nnqLXVKa+OQQhjnng8nGUmdIo6DpeFTS4Zm1\r\nW+uQH4u/RCB8Uz/8QOoUFwJSxoqe9TvysxNkx8YU50jLLtU3j4AUbtmopfuK\r\nd/xcmI0TkoEzzm1d1x1Phv9tDLUdWEQagdM=\r\n=yKDp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/density":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/tab-scroller":"15.0.0-canary.311ab4d4a.0","@material/tab-indicator":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.311ab4d4a.0_1677516222588_0.11140863064250905","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5cb8e2174.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14c5ee143242d3ca8e923f354826828752378df6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5cb8e2174.0.tgz","fileCount":37,"integrity":"sha512-xDPi/hxNVmfUgeQuqG334eN+DdfA15jAbDJ5zSvK0qiUsM5K8d+HZEm82tT+vreIVHmKIsPXR3FifGFlTHCmhw==","signatures":[{"sig":"MEUCIQD4ZX4ElghQzLRTS9UiRbFJxazwrr152JbDi3DoKCDDPQIgF4Q8QTQfq97ba2d3oayKOvJq+Ac+pXAfJ6lieNY91aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/39mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZWQ//bG1nMzWgb1iD8X7UNeG+yLh33+ytPjYZSOnmtV3uT94eon9+\r\nrAAhrYh3Cz5MHrGjZUHv7oJd7gtfAItJAVLJYDJymX78MwJsKtgHaFks43KN\r\ns0OvCj3stGqb6KRvb5bv0REpuhiyNZDFWt1EkCCLEP6fH/W0Et+3kGOq9ETi\r\nG5oJnoRu7zT9oYYQRq5qeYWkmEYyY71IWyALNnwZ/iZSpyWvV90QgeVGIw7h\r\n1/G3XzNGLCzW0CyIZSnT0ahLBKE8dc8x1K0wLiZQRoCPC0T0mM7IIMAdK16M\r\nMfsP9EJLS45DBg3knml9ch5XQ4V3Wxx30GqLPSXOqDSJkIzqi642K2dlBmn6\r\ny4AXLZZ5M5MAEZJGxOuW6DQhW+0kYe66Gqusl7zi41yd5thnRqiJzoKLzyE1\r\nT1/9cARgtCKlxlDxUWvLkllmVOoZcRGigPiETa0gjAKETzcAAWMUWM8mMUw2\r\nV5gaxb3sefzBheajELMGXxKuZmBT0fAuj4Wc5ul0tbrorWZP2iZX28VEZSSw\r\n8Np+MEBgPlE1TB6cqnrhO1iaLDiR78f6OCoxnAGdZS14VusrXbMGoWUY0fpU\r\ncLKlgLiQsKtKjj1rvSIITcj+6RUSXhKtXbeBk8EsYfolAetUwpc19482znUi\r\nFbSw5yx5qUbSfJeSY2XUN8tp0KXFQ9G7pdo=\r\n=OScA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/density":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/tab-scroller":"15.0.0-canary.5cb8e2174.0","@material/tab-indicator":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5cb8e2174.0_1677688678164_0.4108460320854199","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f32339937.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1f4c21070ec4fb0f87816c98a398272ca03644","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f32339937.0.tgz","fileCount":37,"integrity":"sha512-5fz3DAQel4UoH62f+IFDVSOf1s11TfWNHXRZ6JWkmWI+OuxXE62WoMX9ouvmtbm44hRuZk4haTLFNa20F6957w==","signatures":[{"sig":"MEUCIGMWgsZuG2S6mMmDphVjgskt6Ks9ISH/rakFgSZJr2cuAiEAvMFjcLOidUqV7hEZ8zTOLpBqjXHT5EJb2PeXrqtqSlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgQjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmophg/+NFCCuGDCLoEBmQ0eJTFX2x+zHhfvzpdNOye1erP3HL1USB2d\r\ngj5VC+Qkb/vrv89tTE2M2/SxrzzvjS3N+WNXMUns8DTIILPkJ+9xIFKZ2SLG\r\nl4+y2ZlCkgdWwpVHI52lHNRny9Icy/xOXDsTfcggNvidagNQLewkhzffbPU2\r\nCbK/51/Zii0gCqgGOe/MNYU2Fw9dVNp/t1juPoMN891D79bsht2HKFn8810n\r\nNUgMEN94mh9YOrLYV1sMici0BhS/T/JRKIXvblM1V6KwsxFf8i44Jp48zL8R\r\nwnn5QGZqqVW8q1nNYnrk1fAJDYFVOtGqPnLPfRBhuNsoig2riI5WLWe646QG\r\nbgoo3TjVHogM02uMzh4QJWzbUT0F1rZtID2PmtLnkhl2X4MsOQ5Tandc6eIL\r\ns94DWuYXwESZgH8sDFT9aOKbkwbCkymLYaMH4dxEayqAssBGCrhTINNZl6SW\r\nPSYeG57YHJh2Z13wQSvOck9ycOQ/8FGPuu2zmsiOO8tQX9LmRRDuGT7MRy++\r\nqs+mFDlaoz7QOz12OB81iHQDIQYgq5ldC21pEZKx3JxF88FrmrjTOYWLFWnz\r\naAUrFaR5sWsGreNGBiRWDtmWqERCYIGY2WpG3hDA6t6G3KHu2MtYmZXxP1v0\r\ne9eh5Qu4Q6ft91x8BeznEWyqoLi3AZ9XtFA=\r\n=i00j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/density":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/tab-scroller":"15.0.0-canary.f32339937.0","@material/tab-indicator":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f32339937.0_1678115875577_0.21404490991869585","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7644d63d5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e08c839af32e3d4132b03efde9b83172ab6c2aa0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7644d63d5.0.tgz","fileCount":37,"integrity":"sha512-rElIs788ZB3inZN3hyo8y831z0/hWjhcy7mXFNJqwg9tJeuHmC2NRaB8Q8Je4sGrZfn9YmAIZNUwhnphK8KofA==","signatures":[{"sig":"MEUCIA8wLkvxTku4Ht3H4C4Ruh+LbmZrOCnZJlOYNa0FCs+4AiEA53uwReNG2NI7gO6YexXhzSYZn54sip4Eyfo8ESlKWeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmlPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8WA/+MswaYopViGanDVB/1L9vQLcr6quyUPi7NFr2P1tig+s2FYIX\r\nrW7XjgAXp3+XFggJvQEQS4gg5RUF9aXZu04VMsgS1DjKmKAMiEh7bDXLai1t\r\nF7bj0JXX8lm8n/cqvO+pPrfQ92xgcUTBivDPGEBqRVGLeD4Bvcajf+RbA9X+\r\n8zzilqwOPZVWNjt27yX41n0cXSfHDVi0uueKDq17+K0iCEk8QZ3+CCVsWSop\r\nI9d6q9MZViXhMW++ixSQNT89qPqQ38kshnY2fpCVViA5aqLnUJJGCRkaSqJK\r\nUa//4D0oxMpzQvvRLxQN8H2NPT7lsSxMnZ0tPvjn5Kcf7JPviGmhxmCoorMF\r\njOXRuMTgSHFccZPvyGL96sLMcOQoWj5VHA1APW8yVQAYuF/h422voUX/nZX0\r\n63Yo8GN45KMLaX1NgLmHFcwGOHJEO1n0t7tpsOLMh6E5Q+bbBu0Ya7hfjE69\r\nUORDlwJaQbQoMA4RHcZH+NEytXY3eUQ+pO1jru0pWSlw63bUFM2mC6hNbNhu\r\nsFNWrtjYCPl16AUK5uKnLW5h0/0nW8XO2U4dH3f/32yxvj1VInuM608UZWfp\r\n93sED/wsfj/9HJeuH27cvmRNxr/lAn5kgWgkQHu+0Lrdh6dLkWw4hMOu14x4\r\nnSckFyfmpQY8g492Jui4FBF0vfyr8XjhdY8=\r\n=lj/o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/density":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/tab-scroller":"15.0.0-canary.7644d63d5.0","@material/tab-indicator":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7644d63d5.0_1678141775535_0.7140161125899513","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d96330c08.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6881e20ddb45659922b1f426e56e580206b77e18","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d96330c08.0.tgz","fileCount":37,"integrity":"sha512-rbuA6PFAua8I4wnKrEpTPY9MlKBVI3SrcpLI7rvCfVF+8A33PQg28zRa41EgXIKAB7nfVrGd6e1VR+XWDejPTg==","signatures":[{"sig":"MEUCIHetJaxbwutEpWGNBc9zHKegBHnwfDBVVYu9X5azYLhzAiEArD9NMF0LnRgt68fDNPpY6W6/w0XnQW5sJy10SZDiIiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHT8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMPw/+L1l0J1poqwAefIZBoGCIB1/q6pqVnYTkwe7M64a9UxwuQx9F\r\nbISOaOEnmWLULWwyVeJStj1x4IEJsKfoN96ZxKfT7ITCmZFtKXPm5MKc1xBk\r\nvvPG/eh4NrfnWOeAUOfe0Gzt1pf038nQXVW7v25NRZZYu/XTvnjptdBRriGH\r\n4hioggeFwAYpLAi6JUjZ1U4dhxmRRpHOrDt8MpkjjdIZZ8q2pS6O9ergfPW7\r\nylLW1MvpFko7oxRtUaNz2F/IFaUPzP/aX7+LE+1nMa/9RfRrepzdPGF++7By\r\n/oCQ0q5IVFrkLverfU7PZ0Dfn7nEhfIJIYYepDmh89aY6gCWh+op05STtHya\r\n/oNQ/9OKlIrw9s9tYvfAs/0fZZ1o6gP9MviWwomb+ZkxKBBoUsMvfJVU8XFO\r\nRtGytAN5r3nxG4bitV4xdWOI75h0h6zOMnTwGPoiSThN5kFyvlANBt0Re6qd\r\nxsGvEkxPLYtaP+Mam99d3IzNBGirnXBZBYbkwENso1ZFZLZcZUZTU/fv83TL\r\n4NBNf79RU6TbFidXDrISQPzdB+wFmEklpWxdidMTDcrvK/n9dENXkB4xvQ9g\r\n/LrKKGqA9SNEWpY+1JMbSuT3Ky18fLz7qWCQ+1TYtC50njG8p8D29tAHQplg\r\nOdTVtBNnidtqyanzFtyAOtKRN1CVLGUnpJg=\r\n=Q3xy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/density":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/tab-scroller":"15.0.0-canary.d96330c08.0","@material/tab-indicator":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d96330c08.0_1678275836689_0.9034111774419613","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c99cae77c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cc6f6deda267c80f14a515921fc746e5670f5df","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c99cae77c.0.tgz","fileCount":37,"integrity":"sha512-8f+hUdGrT2ee5iZmZ9hNCXWKEIJ6P8m5+Pt+ykK4eMPVqR9Kh7LL4Ls6R0gduLdee2rRG/QgfGOJsQs0YjtMyg==","signatures":[{"sig":"MEQCIC/mjcRtL3dNtXClddxea3e4gPbtXEsjWinaCrcxfpMgAiBwsaBLFQo2IUmiwybe9WmHlwFjehnLG0N+D3qACG0/nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR36ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+JA//TZxImOzXCbzl/hTaBCPDzOygphDUGw1r8W7MUtNkBzgjJBrv\r\nqT8hsQ7YGw0f/KTRi7bSoiFdHgIMp5SKdAjPbJInhQ6fzvblybXj0FCvng//\r\nTk5Y8bdHjkCVYjrxF1Tm02dlUxCvEQQbmeGRX2QsqW9kA/QJ3SnlBD7oi5JN\r\nRwfo1KHXpTFeka8jWVHb7R3FqfUoe/9rQekhiGvax/VZezkweshaTtbAnfVZ\r\npATvcaVNs9oe6b7AnTuVulheqf+lWXbvCE/nQcaqLIWcPfGGI8VUpzDYwStG\r\n2TsXKUCZvuMMbs0XVKkCKEvCfj4BdsdRsA7HwPvS8jPHM6WRDVgApTBBdBEW\r\nQWFxvC6KrGpVy5JJbmyGWZBsF7MjF5kfm3yRJxH4FgZd7QfFazHNnkwWNnXg\r\nfYNJbVioADFRTVN6VNo+IXy8uK5CTRAfzXyj2o9BIF6CXrFdQQxttz2X8rO2\r\nbsj2RxKggyJBxlhTe9Wr0yfGB6T1AdJ42ih9PYK8lJoDXrHClVR4hHAGtECm\r\njw0UtiKVcyp/xVwz5PQtFKNOm9eub68iuyWg8oVpuqSVm6VWNJzdRGuRdGgw\r\nICK2A5MjHhl1ThGexRGsdP5N0MWJzJ0HMVUlm9uD5LIMjzR9lsxwKVyhPDmT\r\nkDhzkMf1lG4Qxf1nv8Izg9gp4Zzc3qqzvu8=\r\n=3zC/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/density":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/tab-scroller":"15.0.0-canary.c99cae77c.0","@material/tab-indicator":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c99cae77c.0_1678319098677_0.08833942671719064","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6023b1cd3.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ffae52d565fc4e876f4bd7ecddf8343b2f2ba18","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6023b1cd3.0.tgz","fileCount":37,"integrity":"sha512-9TRCIY1Ofo1+3IeYuLx/mB+maXkr+XPLPxknNBiDUPdtJWyb5I8DHcXw3kKXRqVBd5I+NV7FAvShpM5hcimKZA==","signatures":[{"sig":"MEQCICS2aJfyA1FdcSFwb6xMaO1Op5sbD42zh2B1Ajv0TWC/AiBFHdmVFLb6ZveeoD2L/aEkrHiCOiW5xhdH9LziBaobfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCe0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpedg//eMifNhZwOvU/+g58wJN0l4zsGlValKfQC7A2zf7gTWcJf4wX\r\nacG7EgrRgtJfXa3dq0qNcqmhQg9ymWFs5jaqTReE+gL2dgb904a0sKZ7E3L8\r\nLmqn8KvlwDGkeSxCCoy+G7zhbTKyqt3j6H9PmEaHIcwAakCeBuwrgKhMB4FR\r\n0lvlTkQiL0Usa4TdLd4TTPnHsGjNRt/HZw757NQnS2hV/RkhKJ+rN7VEV9UL\r\n9SCfEiD15WhiaPcSf01VdYmP/UCer441GVb8zPZLugii/gQG3MK76K1buoHZ\r\ntwodeKOIu6ql4BytoG159DsvOSv+79nv5geLMo4YgJMnUV3UCnnwBpfUk4UP\r\nHKnzyqSN3ccdJ/FSC2gRqlFBvKAAFKHi3OtrxAh+E/Xe40Gbt8zfkN5M9gMa\r\ni9vs+jJmPvGqIXy5wyjI5Kgk+WXNQ4nMTHdnBTrTpmBaTaXb1cgI9veKQ821\r\nlcxxkRfhUrk8OVbwNb1GaZ9HYBtDfaxlfeiqZKpWwvs88d/AxAKig5fl4gar\r\nIejgGDHsC2RRJyd7ADy/dDE/gcPIjobU4JFw4hto+gzrM98dcxzkepMPcx04\r\nHFzfew8w3N/gtHQ/ynZbjXBfa6Za8WnFI3BxwE+aXWCQZGHseMz8Zyfq0B0W\r\nCngk9uymNWjFKmSvnRNJf2vnmZCW4pWlb1c=\r\n=/fV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/density":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/tab-scroller":"15.0.0-canary.6023b1cd3.0","@material/tab-indicator":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6023b1cd3.0_1678372105775_0.04804944457378246","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/tab-bar","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.274610c77.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfc97dd3442d6b2878de9d91a507d500a0eac7e9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.274610c77.0.tgz","fileCount":37,"integrity":"sha512-c2gLX0TG4mg8BpnheQoOLP41O95UdLU9KXIckXPx2HZBYs870rJ2WGHLuaUZRtGnW7+N2uZFM4BzUmnbtZa2kw==","signatures":[{"sig":"MEYCIQDWtUuz6b4as9OM8VbA9jNvHYUZMF0GYPpzIrSuqN5JTgIhAMoc10AFXu9rlbxV0RNKmaA7uQgjuuhuHlHxCvckRrDq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfSwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLRw//QRYm5ylGlQmxgMwI2IoJEufHZOjAFARyBtM4lKCLGRiUajR1\r\n8QPCTSp7y327qzz3laObC4hCG5H2dOUUG8kGseWugwVKGU5sgDuoZb3s3SC7\r\nJCIyVKIC24hbN36Lebcbx8yf8mOMsbWT5m/4seqTUXTN77Z+Wgjvsu+vtwg7\r\n8isYfvrhvLr1X4ktGGJXhWPZs/JVbI3CBjeYjbJstrv6tJglibLkp3jOH7C1\r\nRG7KATvgGzr+XGWpQ+yKbkpfSe9hYU2vhHV/VCaxAff+OEx4MCMuh/Qyfgxa\r\nYC44ircQbWPKcNWLOIVNN1pED9qw5tsAEpILC9wQHHYx1A4fYgzr8iW9JuO+\r\nzxCd2xQ0DFzu35AAGZYwnh6OHXCD1BldFpg2goh9W03pfpuguFFUhI4LpfeP\r\n6bQzy0AXuPhLwE4YWw52ZuHocnYV42L2ECkrZA2alw+eB+XOeeDyX92D2MVL\r\nexjtA7OmQldb8PKUWsYAAHI+gyBlht7s5vYOJ8KF778IjQU2C9L+jeyPDI7T\r\n6tV8hQegKFmV5jwEG49xURWYC9Lk1IXEfR3gtP+PZCv8TSNXKPMJ78xPFnAA\r\nmoa9CfVPr/b7l0Yny1jUCCZxqXfqo9JT0OW1E86vDtC19yZV4SvGG/oAax2z\r\ngXRTJfU1jImIXhc/ZHFe7mMdcce6K0wj12w=\r\n=N4nB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/density":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/tab-scroller":"15.0.0-canary.274610c77.0","@material/tab-indicator":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.274610c77.0_1678374064250_0.14024724681251466","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a274583b9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a5681bd056cb1e454792390c4cf4b0b46eb631","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a274583b9.0.tgz","fileCount":37,"integrity":"sha512-awHj0bQByk02LpDMd32u+PL9UQ7XIRnkWY0AqpMazfWMgEOJtRuJaoLC0JUGsenZ3VhknqqQvSqtSZo2ETecMg==","signatures":[{"sig":"MEUCIEsnQJABN9vcxgDpLo0odtdLmMWivitnt9N6zDQaNP4wAiEAtPVq7GpDVitwXr141Nt0FK1YOtVxY+yaKIVsc+abcY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjmJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIaA/+IUEDI8ejuVeDbenLrNMDumLcOihvPZDoP5O2lywi1SJDJiWG\r\nrBwHMLTFnOKUFNdnpy6ga/DGmVvR0qtt8eAhEKYJMoLFfDyks+XzB+HD7TFF\r\nCdRsNG0e7UIMr8F028lSYkTyY3MoMGHrQslSjhBpD/yLPLVVo1vCVARz2rBS\r\nh1GofCEGhdOtupFuxwPpczpTqAVEQWMhZbZCmgSzCPkGuiP1RIDbrbwJg4xT\r\nPYltAq5Xo7PI1jWqSuNX/nl/KzQg4BJZJEJh1y2arOFibw8/0CS32lGuNB53\r\nhiL0QJfkbDROfgrTV4RTDlVEnwdr0+/qXEhAcMzIUZHO6B/4kD+UvRHemdm/\r\n5eaez+OPVzpXMsGRhmjVkNoGZF67Uyesru2A5dNo5DQQxYLFG1razftKmwvB\r\njQO2KMmNGu17a/EnBvq4tyqW7n0QwaZvQNvZN4Bmz60xgxZaAN828aT/H5LG\r\nKr+b7F41SSxs876rDTBrc5itrb+lKOX7s0bvFMoV5C7jIqdQAEDGY5MSIrni\r\nwN/A8dWBQ0ryiI0bEPFu1NVFJ7v/tZLQ76gcH6y4FtuuUc45nrGW4dP18Qxj\r\naNEyw11DfVkk5VYUcwnEm/atKC1H/sq//7Px9uy7A5yQk+voTPobF3EdXiau\r\nqm7+6sivgTrEEnAGWiqBB4mrS87SutxycA8=\r\n=KfLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/density":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/tab-scroller":"15.0.0-canary.a274583b9.0","@material/tab-indicator":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a274583b9.0_1678391689654_0.6536548977807044","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.304a94e8b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aedf6e13b0c1df350438ef7eb86464c76e9ac0b5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.304a94e8b.0.tgz","fileCount":37,"integrity":"sha512-KcJA0HCXulwaRmZZ1OJszVU1+9H2fcB0Sfyj7Rk85zigpPA47km+3ZXaxG/+ZDj8nz3bjg1biZkDLekNIKbEiw==","signatures":[{"sig":"MEYCIQC8OO3fn3bOPrwKT1yqX1x1OFTUSd7I0V4/iGnfgBf3+wIhALfLMWpR5w8tEf5HEzvSJ2D2mraJw5SP33ZkqDnYoAZf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkXNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKHQ//Vs07+nUKMISk3idFmAfATgBRC1m+31XzAN0aAMZpTqPdjNxZ\r\n/S6cHFjBsmF0tpMetk28Icja8HyT1SvXOMmxCNPtqMy4Fg2ZJHVmOrp7HG2I\r\nYwx933I3mDPbeX/o0FWuf+esih2aWjwfgbHWhEQbnvf4HK+oQXKpxdsN/W5g\r\nuRDbqpfPsLLemWro6M/o+zzQGQmvQX3vvBUW215IUYwFgtrEFgc61V/2TJX4\r\nLUVDWOC4LnMSlRvLyhU6beuUDd89XiULcyzIn2HsbQ2h3n/CglxhlWrIXIeP\r\nMu0PXWKKe/hwHIDfj62qw7cWtUCgGinw3M3w9Aing0hcUR2a0wGiVbMYWsAj\r\n87AR+Rq9zqa2/Whi/4TLrit6ojHbnDSQO0BqY+wzuHiNBAz+tfqKnaKvrOSy\r\nd3vv4FojiKbxdgNlEehsdjl5kmo4qB+BxXtyvgy47nkK/vfQ9jqxySvxDPb5\r\nWY2j8bOci1ATxVxUko0A9Rpq3kGtEwOnNdGHtp5Fgn+iWRT0HyVPoMiJXr+y\r\nI1y1q65RJwICGbvKo7g2IqbeBJf5ukLSSLJaj6aU3grkDSnCFy80EJBrvEGV\r\nlQqANW2t/b2K8WEWKe0MN3quxkEgJAHVsjOyFd6daClpXvR4Ap1Ly27aTW1h\r\nrbPy0PhlFkSt2faBhtjh1i5miEXdW35fvYo=\r\n=kIQj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/density":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/tab-scroller":"15.0.0-canary.304a94e8b.0","@material/tab-indicator":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.304a94e8b.0_1678394828915_0.733337920384113","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6c265915c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"560ab4713804a275c5b19f6773e5f7c9f040e4ac","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6c265915c.0.tgz","fileCount":37,"integrity":"sha512-KtAAuMC7ta5OZfR0dq22neGt5mizQ/T/e3JlrpzAg/PEgS2IhGuYpiHGS2aABEUwczJWSORo7+mXwOBezB8Y4A==","signatures":[{"sig":"MEQCIEsx4Jy04ZLY8cARtAzxYVvEC58Wtz4/Kv9PMlnHCQpVAiAAkpYNrJ+//ScBl+cgrOtvjSVWy46nggoLsydibTPKaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClRoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqaw//WMmpilipAkWBGKpmiD8cn3NVKLkfSWV71smCviTaKOm5Abbf\r\nlpdMDbGEgaktW8l8rsulpsiGffQ6YWgsm/RCcIX7O+DnWg/AXfas32TU3JJc\r\n6RxafaQb26tYpgZ2+lfkXH/YWOLdadnbLinzZiaeXUy1RrnLZlvhLs/PMPf+\r\n2iRQXUdo7proR5hChI+SboZlXtVULo8XlW/6p+0sK9Hc5BUWm0PX4t5b6czn\r\nPJgYRbjZZORyn6ueabCJvmBa5CxtUFocB5ArIeuJRtYq+EGjN9WnkmligumD\r\nPGpyfBpgeMm1lk4zZZbHsNddlUs8dgxIarzZ4VpGqNJ5/lsyIcWArontuqTe\r\ntq9wn7aWAA1ajp439Av2uTm/9G7Suyqhp98ge34uzwA363/Rdy1VoLnrRFkQ\r\nHwMIWeXJJY4GRgzn/uPwOT39q+VR8SQJQ1X/a+5VdzHoYySz0bBlGKCigHSb\r\n8kNDwN1/votylf9yi2F1+OyDlk8xPMTYKVeCgZcWPmWBKFfZYtu8EguQFE7c\r\n47lAyhCxQd4Iibn+K+lOxhLimDkbgPtGiMZfJbcM+S2+OwO7n3xibgjdDUdO\r\nmqgjzcHPKkQ2Qncnq/STwyjLnn4XlhrYWWqKRZ+tnReE8esq2CENFbtPZ4Cm\r\nghvviMD+9RauS0HvoZ0kxhC+I7wLHu/vLxc=\r\n=4vjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/density":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/tab-scroller":"15.0.0-canary.6c265915c.0","@material/tab-indicator":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6c265915c.0_1678398568093_0.18057914648109907","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/tab-bar","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.de5224633.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"347a4796fd93e6bb588097f41ab61d0ccd9b776c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.de5224633.0.tgz","fileCount":37,"integrity":"sha512-WRiuEKbC/oJuduhuWXOdHATfLbORQGtgGtrIB7iO4o7eB8zPYM+ER8yTQrbESedQvW93KzdwmbX4Hz57FqM55g==","signatures":[{"sig":"MEUCIQDbPw3fytQf5BDyy0uhvhiPxbj1R/Dc95MTYQ/EuosZ4AIgCSBTncnizwKO5DmBQ0NNRbqqzqTiL0bsKJhZzPvbZjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnKBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8ZBAAmnKFJMGOsdn7pqAArQnRmnWM9PIF0mbGUuCeVRlvqiAE1Tcx\r\n4ACfquYX5qo+4YMMQTr2DBbjilLQvjfkKoTbn2VMj0aIi6Rw7FqgF6Pm667H\r\nO8+MGf6PEKWl68/A+D0KO+xAFy+N1ileGdmGKnXh3p09IYT5gUngMBGZljH+\r\nvwoV0HRIn0LZoA7w9gklmJ3P4ulsRgZ2d5wvfGeLQ0V/3MAlVmVs4QMOuzre\r\nvAF00CEah/z+f0Qvm09FZA3vqaF6yoyie75OvNKvr5UbroDcC8Szq1OhfZAP\r\nMkL1gvk1Ik3R/sBw/mrOJzoYSvFK2seweAjZKyozPgwp0RQQofF7kie9Bh+4\r\nRTZ0NTGJj4uRG0DU8qkNKYX9FpzoxD19pOqDx6i60G0mkb65POHq2ORs1b2f\r\n31zd/hf0F8MmDlHz2ytaSCV+E4FZRdSdrA8tLZ/UDcjvYpWPSUnrN27b/PhH\r\nij9UbKkAos1WHn8ucg8F3TkyKXTlEkowiZC08WX7aPTWaUpMioSearP1qkmQ\r\n+ejLg7VaNtXU4qgyivIoXyuF7K9yc1iFDS5RVRd/ZCVMjOH/lB2uKBxUCwUk\r\nYMcrwJjpe6lDTSUc8SC5/q1WCU23AfhSpQCrdb4WfYE0toEXg95zchcn1BGR\r\nmvaMU6hlO3ylsZ4NR7oQDtC/9lkYnFf3zcw=\r\n=pRVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/density":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/tab-scroller":"15.0.0-canary.de5224633.0","@material/tab-indicator":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.de5224633.0_1678406273558_0.30796528022982694","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8879557e6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07708549702c5ee0fe0f2889158d49edc63fae5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8879557e6.0.tgz","fileCount":37,"integrity":"sha512-ZSeSC8S9CdXdsN7MuXArlzRqnygCJHPcvY4kpjKR0S2ufdsJHKF9I84zKi7XKHodNLj8sovJRVIEk4DotjuI8Q==","signatures":[{"sig":"MEQCIFKRG9RMiAY8s0/kt1NPl/9VCPltXxh/s4GY0jeyLBypAiAJUKVfl/uokJxgoIr58gen6GHZ22FKJn7ye4+WtFPPsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6jQ/+MaN6/+CuthV5cZ+pVH9hbP7H4psF8Lcn8UsNo2oT/s/eivOC\r\npvVPrnTO99S5OmodGiUGc4WglYRee5RUvGD47UrKQSjK+zYUQ2yx0UixDFC7\r\n6G1zKp4y33ML7t9TngurmbWHqTE3oB9ygXq09u7olNwEeSBmRMMOGNnTTf5c\r\nixSqNBYS79W1QM64v76mKOiVg+mn6XU/CKjlQm8z9KPQcGun0me31T9QZI4x\r\n3z2qmlnTIXhYIunpGG9ejIKnCon2w7e7flR51y+fqULLgS6JtzERkckDUU3L\r\n7JCAN8Trz6WOaPv91KGqjlh/wyeKKAj59w3eYzSYxCCDGmI8U2ohp1sWndBC\r\nOBJZcJeLvwG0JUGGOpVmJG//kMzxzR8EnyDZrvWFUCy2WoD3Ll7zXarpsyRX\r\njkSGmhisrS0zmc83YT7AuZJTxUqCYSuJMYOYfZDukUXF8PyuXF/aKLY5yETA\r\nCEo0uoxxZZXXWe85VhLj0O/D+fvvtRKg5dW5QX9N2eYzX3xTpJpolnsd7P/g\r\n0dhFi8rGKr/5KJdzUNJsaed2+UAvGmOvfvlyPat01npULknDVCr7cPRp/661\r\n9HXpxF1AMfYrHlOdYPYbZ2PN1zeMA5lFfzXo0s2JIdo2V4AUlYBuO6lJc3jO\r\nYyOKjd2P+Hm7Z0uj0VPczo68C0ij+3sHv6s=\r\n=KJKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/density":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/tab-scroller":"15.0.0-canary.8879557e6.0","@material/tab-indicator":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8879557e6.0_1678457401295_0.5027898051848907","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/tab-bar","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.23073a303.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54d961ad6dbd3f5d879d66033d195de37de4bb4e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.23073a303.0.tgz","fileCount":37,"integrity":"sha512-WmuZGxDTloWnwdFuXHFSUGvbcNw3zV2RWTVzIA/ASQDK8i+t8FM3SlMLrw5gbMzQzh2FcS3IzT/sczSMRUiJbA==","signatures":[{"sig":"MEQCIC+krUcqLYQhXkaxsuY+vJI9il02oSD6EA4BurYIdVGOAiB95ZjUtvJG66R3uxpQrT3+CQMcvTPpCWBr4pvT64SwdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzvmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJnRAAnnlV7epNEaXypF4Mwi3UHuchNaj5u4L595RXD+oCca+ExTpS\r\nSuiIJxZud7i0v9MGX3C7W46qsBKis6RJK5A5tnWwc7Iu7UhF2iDmfLr3Mhyt\r\nfY5iWRPiGbyat/89pSHlPrdrjDFmOOWZqcfMjwFmkMTe2wTePoLz88nlRE5Z\r\nJ605wYpDwVqVZSGptEOqKKxipfu/Yy7VtfNmBJzr+ACgkKX+R5IA9QA8cHc6\r\nbsPIFhwVGrDtUSn02mICpY5TMrNgTfrywpJxShfWQ8jAwvTd1seP84uQDlf/\r\nIVT0q9xlOzPg9PvmMp6EZ0C1WBSN2zuFAK9igIs1FPH0H3xtSIajjhu6UG7i\r\nqlkKD6cChB947AD86Hz5Cq6dJWHyWI+pWTqujoNy/rB9m91Dph2HqakmtErS\r\n7mkFHgxzuPow11vktrHwkRr9gefIyBemxYeI6lx5v1LOtS7E9cHBs+cQ1g5z\r\nwvDtR+8Q+hjpHXFkazo+RcGox3im29AQuaN0utcTeNUJacO1+UAnMWyM937q\r\nZWUSzfc7Q3jvhv7BgXviX5NY8Ws9X+Y62PF/+VeiG6bXUhjTfeCHCzpAt12H\r\nQdqygEa/02i57OFgOBNeI8UEo79bMz7hqYlN9LvbQ0/cI0MbWAJyYj1Br04g\r\nvGrEUr3PF5XW0wVMcQinacf+H9VfrdSVhNE=\r\n=7Z+W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/density":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/tab-scroller":"15.0.0-canary.23073a303.0","@material/tab-indicator":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.23073a303.0_1678457829928_0.3346970527518647","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/tab-bar","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.51c7d4014.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4b8def4e863b9409924405a9e70db8aa8d72ad","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.51c7d4014.0.tgz","fileCount":37,"integrity":"sha512-Md1IhtOuIvKJi1RrcLOKjVmJj8xp4EAK8gsgZhSmKq4mLe5XvA5NHrSw4drBqaZJ97LOEJyusdIVaoHbrKIwEg==","signatures":[{"sig":"MEYCIQC5keAWYcYCu4O0AX/kf2RmhgWE7/vdimXVFUd9i0yNNwIhAJXwy7GB2CEXFtsPgAycMCoeRcaNDHCy618wQJVFFhQW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC1+jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcZA/+KywGQdni5nylGzJSpXliA3hAlmTHDcK1eiHO6d70Pe7p/fiz\r\nykHdKyrUl/+KwkLjmDAkGngPgbO1MRXRatRUOXnLKUVPTzxrnrLG1+BBTcKh\r\n/rZLSRpgWiZhG1xNj3uWx29sSm+NCtKcLd1Eox25zNvzHg5a5dA8zSVuDlJ4\r\ngRhiVKO0GAevfUGx0VWz81L86m0wX4FSt9JTaMRUJTYtnBgt+qK8nT2bGey7\r\nue1vgKawtPJ1h52BesNiA3xj+TC6PWusYntcX+T9cKZaKhWVbYVwAsSv7oUW\r\nt85/WqBmnjNcj/R3HHhOzgEEg1LF3lFiXVebf8TRM2KnzDV1XQ/iVw+raIyh\r\nLTQ6+qIzlj3PHCjZWVIFJ5k/TUk7H694+6N7bqdrLsJ40Cik9YIvINy3ooVZ\r\nm2SqayUEeOMvah31EkLDfyptpWgCBnGZSvLOEPhBw67Q+3F8wY3r2RhCswHH\r\naE87GVgSsErQTKmsm/M/XhiT0RIo/2NhaWq3/VNKi7LdjJ7FHvY6AQNYlb0K\r\n1x8NB1dVzPEpFkRW7tz5x1cOjcR0ENkz0ssF7Tjvcc30MqD+hh85ZcdMyz6B\r\nLSXHn0MWZOx0FLaF/pOQMw+2lx2gdhwebfZZQ8NuUZbc2GrfTLl0FI+zLpmE\r\n1RuA2izh/T9f/MDSLakmLzweOAcl0KSwB2w=\r\n=v4YI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/density":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/tab-scroller":"15.0.0-canary.51c7d4014.0","@material/tab-indicator":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.51c7d4014.0_1678466979365_0.3596770193404326","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1175a5be0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83e0bfbc83a5c515e6ee2c1b73c36a853595513e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1175a5be0.0.tgz","fileCount":37,"integrity":"sha512-oOfB7+VewpUpclI+L7W0NCMAI7vm9Uj7132MiwIRNp7xtd0qL5Yb9ijwU6rm2uylptIpm5gtmUcnQiGR9QkqEA==","signatures":[{"sig":"MEUCIQCabcseZa1P1xZF+uCEMmUIb3wtEccTtoRCFWREG8kQzgIgC3NOugaa8dE/QSUk8Q5kk0L+c/K5l999+ipWitSQE2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5gAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW+g//eP7PpGe4GW6jSPa9mmvgdcYTMYLm7zoCbmeDQV4HGde/7OAv\r\nnLRML946xkpuqwA2ePEshfU7QTbRpebzjqtQMoE+WgQOB2IUj93mdrRjGBzG\r\npNOu9gw+iwEjk1enCTSm2P82AqaGp2OndRKYb7E20QPtOLFuq3IKIXHaO7yE\r\nLZPuNpBSCzvk66ZqsrijxSvWJ0yYDdXtzlBH1dnvmN7UUup/xezgaHjKEqzI\r\nZ9DRaQsDCJcywsw9dBLpdoHBRX6hehCXEq5ZS0fxEr+RnzVRaxwpGqAFfSGP\r\ngzmLUmTa+88n+0asl4t2VJlgGOSEGAFSu/tR64bh9H48xUrf9FoafrZldyr2\r\nttaZP9vKG37YOI8sVDGiP+oB5XE03CKJAwugMfpHMAZZt15gA/GtxoK3Fvft\r\nJXj4i6cldAvsCSLjidjrF4iFo1lQO6BPNdCBlTjja/dsOy6PR3/aMbcit5RF\r\nG0LlAUUq4OezJ8Rz7465LKVUYHKW7P+ZfELrHB9gZjFzYNzq08rNLqT77SO0\r\nogAThX6wkZBonoleK2MQx4JEZS2fZ6eM54vnnHAXg/eL1O50uX31AeTuCO5q\r\nVKqgQq17WECyYBd9lDg6KU6ELhN4V/AGX/qORVzkxUU1lW4ewyzSb0+oSX5z\r\nD7PFZfvRPnnmuXjThn5SgAmAMM192pFCgSY=\r\n=6a9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/density":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/tab-scroller":"15.0.0-canary.1175a5be0.0","@material/tab-indicator":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1175a5be0.0_1678481408209_0.9892694558197066","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7adf3af80.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a591960846d5a4b41d3184d233f0eacc5e7090c9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7adf3af80.0.tgz","fileCount":37,"integrity":"sha512-4SZiCyJwvjDCfIFCG7nIe9TyN3ck7iLhmCxAIx34cheUgapyIEIhj2Sdew/sSNyNvdHUamwGYxAorZ+jCcpIWA==","signatures":[{"sig":"MEUCIQDoicYkjvV8pPMjIjHfrVKxOQiLC0yI5Vf90z7yusI+wgIgYdM2Q5dDfivV1sbB1E3yJzjV9/1HQnS4Yp21BJLXVLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaPg//cfxZPzUgBWaBJVFHEAAbdb2ZFZk7B4WlSaUCh+fFxidW8a/c\r\nmEiKJbvEW7s+WxzLPv7HrKEzcoC5QMykGONSneYrY7DGxQCGgGAWZ0y1bowo\r\nmXxDHp1QZ63JdI0C98vRiVZJu86GoAZPOtb6tBEj7ysy42FJcJmH0NCsZC7T\r\nkGrxuWXwSu0N9scCP7js+v3EboqGHKbytXUkEw8YC04dHUPd24d7GserM2Xx\r\nURE4wWgQpRHEZaVgnjwoQ3yv7pJYzIDavjtlgQTUS0mosop5X6jkAsS3+xlF\r\nsM94youQ/wKluACJwbujuYX7F2XrRYmpwJ9ch3AGN+0iDAzYjDdZCDvGW4Wk\r\nGup7tX2OuTQvl/DohazH2zKsoDT5fgdO3q4TzkmgayDIpp7vCpwJDRBTI8JL\r\nF1Aip5WWxe7rt9xrFaGNJy4ZXJbonwqhMkz2maRIEvVc6N0g3z+TjR2PFyou\r\n6WT6WJ1qmUeF9GgWd5F99Gl4sTZbmGnVCLPnQ2mOpxAT+yAxbnJuBQ+IC5Af\r\nXmG20Kv9eYQd2m/P1VBqr2p+CIaoWE05STweoxfN31g1dX5V2Xo5w2mxCQZs\r\naI6TsiXBFvTvM3OHRV15ZfiCVWU5dZtxJ6+dVxYZuTjwewWIq2bix4TyVkLq\r\ni25Sk2C5r+T7Er/RTC44xznGVDciJ2kbxU8=\r\n=rpGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/density":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/tab-scroller":"15.0.0-canary.7adf3af80.0","@material/tab-indicator":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7adf3af80.0_1678498019488_0.9137256694540394","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/tab-bar","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.82554d770.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b00b9197f3197687ac9f625e129bc23784d07764","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.82554d770.0.tgz","fileCount":37,"integrity":"sha512-Vq4/K2eVOkNpXo3qMUpkwr5LKDDwNz6inzzfRBvewMnl4u9pc/PcZ0hgRMbwz1TmMdok71hYSpnGwAIJ2PZJSA==","signatures":[{"sig":"MEYCIQCZ7Mr0qx8upNXbiOhmvpS3oduQz0SjIvSK9cNCtNBQFwIhAOCVYnEBEYtrHs71L4GytlFvcM4X53YQx3O+rfA9Ki6D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9vFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMQ/9FI/vSCoWh3Sr9Lvk+3DEbyaMGNQ8tqUorZvu+csyYKJDgPpo\r\nTS0dzUNZT5xSneQEzZygGf6H8BQgxEnUp98AdKkdESncgdjZ3KDzycYTV9Om\r\nmbzOVTZQhQDoe1mCTDO9lLkVUYM6aZ8VLLlytiF+GAMnulTvTbw/G7tztePD\r\n3o38WXmXpVZlftSlriuZEN8nRg0m6tku6CqEqxpdL5qTMrHKR2wMzefOHENt\r\nVnT86tyDFglN/IVp1xC07O0PmoJgoJk8XfpKmODF946PMo9AwwKs7whJdsiY\r\nsn7JPWjSkj/VSyXMjBFgyCDzJFt1qOxDkNtN8FBrT+v8sVN7i/qF3SDdkmI/\r\nPottsw5GNNr2HOQcVg9S0bcoAc5A3kGmcOVx7zfwhVg21u8DcYVMKx3fwxvt\r\naF2pXrxYGsuvg0iMFhYuZrPqMBcYeoYeeqQwQjf2CwppblbEJ3ZpYrzcDjVr\r\nS5ePq9cTKKIN5X8XgRN7SRsvHJbNlEg32flbMMPTixnCX68PmGU4c5CVd2EI\r\nY5JtJ28rYndKUeTxiUEc+tkpqDYELG5ok8IaANV0L154WrLy8/18QT6I3K28\r\nv6mrBdEQdItsdwA82ohL0VtGukpOu9dNFQGt764WzWoeuN5w8Hx9DqWql/rK\r\nI5sB9TpqFd3fe3DrZw9nSpCobgTEfGO12rI=\r\n=mEpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/density":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/tab-scroller":"15.0.0-canary.82554d770.0","@material/tab-indicator":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.82554d770.0_1678498757073_0.8306069811586017","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/tab-bar","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.93fc524b7.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30ffd8fae52697a7ab0ee1f4d21fae5837a6c44d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.93fc524b7.0.tgz","fileCount":37,"integrity":"sha512-cuHqbDDXVU4tj1cgY8u3f6N0Do3jb2GacShH8o3UikriCs7MIAdQKNm5cAeb5+q3GCt3vDcIQ9fLHBpSL2FiJw==","signatures":[{"sig":"MEQCIGZbdS595HcUCtKxOXzbCFfP5eefFj7N+z8516yP10hHAiBm1r+5tSkVMs3JQEDEAgjqUdIzW2sJvB0sT9crVOFvGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuGqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHtBAAhvFFHWeXzyuuk57+1QaSPqcaLLTTsxB0K5o9wTehSa7t44VR\r\nBCehWkYcUlPsjf8fGHUAVQYlAScrJXR4AkHRwkX+N0r3xY9mgehvvDsa/p3P\r\nKEX5OstEUceyKyZ+4hI4ZUD4CB2R3AUm2KclwRsQG6X8PKOftoEt4n6k8747\r\nCsFozSwvyNb5HYEYo9uQMG+bQPPz1U6NBjgE4t5vpV5iqCyUkJberAMjyHDD\r\ndBmuZwt74a3xG3EidiGZlckh+qGB3MOMKmE11m5IQAgvT3RNPpjYFj02iMd4\r\nHOyyWkL6SZZgRcXM0uktGO6c4B+xxMgO7jzmdcSlVSwqjVVwEdFZoqwSBsCe\r\nPS8xJakw/zAJnPrUUBdradX+UbleQwwcOUcBhCFI6Ybyw7Mgm8lwLQFDfWPd\r\nMKA9+4Ql0nD3Z+CDuEwAD6gf+m5iH9jIWMkvy572OLwwU+y6kFMCuR35bMer\r\nxQsVgy1dlIhhamiBNV9NAansRS+e5mFeAB2J82bW2mYGpPZVXvjM+cRS1eDM\r\npGWeCV16INcNOP78Jo6UQHbExnZ/uoLKJJI1EDEFKpnEY6MFiPwXJLT7mmAj\r\niNDFC3k9CvSf6NhpeFvudbEs4k9gm3h9wRmN8CPi6UmbS0VV/SwxozjMXhWH\r\nt8kh/khJbsK5tFdlWIKwcR3MGUdcgPAFtdM=\r\n=56TY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/density":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/tab-scroller":"15.0.0-canary.93fc524b7.0","@material/tab-indicator":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.93fc524b7.0_1678696874177_0.47007132344944735","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/tab-bar","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.50be0fbae.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9990acd7d1680cdccd2c0353bb04e689cae3fdd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.50be0fbae.0.tgz","fileCount":37,"integrity":"sha512-W7o7IZWzluALw9h8VauQERPaTQVKmiEydbNPKi6nX1Ad/+BnRfVuNNd/NMKu14MXWfALeEmVPyKOGjzcrhd2DA==","signatures":[{"sig":"MEQCIFuoFbuMQKhgZUJEhNHR0UG+0AZ6n0EKvvyEjVajF1WCAiB+pLqC+8+kaJaLw6kT4jtXcC9WQxzBiuliGO/XBlcsZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDCA/6AjXfaYBI6J3yY46vC5rlNL2l0TiseJoj3ZrWvItTPaDcm79z\r\nEq9RFbn9MKjefdFxB2XKbmOvtYlVPme3DbfE3JhIGzK8wVETLLE+8z0rPiLM\r\nohbKW4Ecj6yMbm/KiKLPdpSszMYiltQ75THQRIGw7FjeeY1F74/u5vwe3oEr\r\nwbWKX+wRIJBc2bHG7B2QH9/CU+8rY3WDF1boUaWx8UHRNde2EJ5o9sFvSXjG\r\nD8q/41nxKjcHOdAwgq2HUQIDIx6ctmr9bRCN8qRNNMDCjZUKrgHetRxFJhVp\r\nrhq5Ynonxnw0LlyO4MOdrSAYmVJce9IOkpQ1EpBrm3Az+jhonMHzDr4Dte8M\r\nKRevV4Lmhiu8B+BKsc2gVn9TyvBU053HW6AwE5UTUL2nabgWS7C7mnO2JgXx\r\nzuanxWanzpjr/9ihwGZHGZMqBPVrz93nORKYik81M3cxMZR5yCscclVuoliL\r\ns1fnLIWH8/zvczxRn8nkReTTX/jgnuGst1nYFyGaOh6o24OD5n3r6Lt6u4AS\r\n1l39TqPKXt6RpwoJU+Ov0bJ2gvW9z/UfeSL8JF6AgwSv4dWmPXRXlhD05CRS\r\n4zAycjSyKAE1oGDfEVQUToJz79PwVv/y9HalRpBR77mME7UrFbGrFanSD9G7\r\nrj4CWP6R0Z1Uo9SzvDGqk2l8o5sdcWOic04=\r\n=UO/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/density":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/tab-scroller":"15.0.0-canary.50be0fbae.0","@material/tab-indicator":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.50be0fbae.0_1678729580216_0.11826800146071181","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6b5ffccd9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9155d5bed6f51280e37986e96345feef31dddc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":37,"integrity":"sha512-h8dRK2DYW8FXSmykOdF1ar6j+wyElZMNDKa41ApQ0tMAQA8K38PGRT2JaeYU7AzLQaEqIHYJuTZbZMAMO7r1iw==","signatures":[{"sig":"MEUCIQCx2mdtHsgG+O27pfhJwHvvAx4jHuAUCQ+Fv33cCnm7lAIgM4h4GPLKIYgrDo7g0c4unzPZ6k6YGvcF+RGey3FUkqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2JBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdfg//ZOP/wO+SFInRHjYlR2XgMQfU+hc+1TUain51VuHrnatnfJ0m\r\nC0TGo3OFKibogAZChDHm/uYYsB39UsHZA5AQCHW+EWAS3H8TCcseSr5a8VCb\r\nRdbQv7xPFM7QL9WyZueRfEoEwu5t8INPhpY6sSqvfPubeANAfFrJD+9gMa0B\r\nChNeasxVQ7zvxYbYWi8VH09w8VNrplf4ZDW1Q/KfBKNcAnvYJ6wfvcXAtfeA\r\nrT7czpG2KwY8YBIvHR3svsvvjE2kCCgGToZQA4alGMVf7PUpb6/EgpY/90sh\r\nhGr5ZedCKeEdSS4+OKrLN+WMkRbm91605I1vDlYLAsZRArtgg05ER6BK3tgB\r\n0mDQ/LAzE7WCA4nJiwE4RCZuBbU10tRyyTJMwg219ku9doy4HGCgP2Nu6gwD\r\n4+U1zYSXoq4es2GIeQxKQia7vgNKZEHSb0FonwecciMGvPh/7Rd1ZbX+mzXq\r\n5MG8/byG9XKq7bzAOP1jC+YIj39dBKaPjwoRh59zRl6YsdgDJf0EZg7ABLq9\r\n0HiK8XaMQD+6HJn6cQJS12463/n3Lu9lSW7OAHMLlBuNqTo92c9FWRkiCrj1\r\nduCmNG4xBPY9NQEXDcGaN4Sl5xI5RE00E7WEEtTW2DLB18zt5Ld8yKWh+H+7\r\nPaj4d+JZx1/uJzt0PIq/9QfUvv6oDRnVUZg=\r\n=NpD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/density":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/tab-scroller":"15.0.0-canary.6b5ffccd9.0","@material/tab-indicator":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6b5ffccd9.0_1678729792968_0.6690824838778822","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1c8013f4e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c12489f2fc033e1aa929d2447785fc7b0d03b19f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1c8013f4e.0.tgz","fileCount":37,"integrity":"sha512-friDFA4Uh8rmVM8mkMG3XyE0uqNtGHMiRE9J0fH7I5ZBqWExOlgJbsyNG5voh+n1pmITO5acgaTkS4FRzXkGrQ==","signatures":[{"sig":"MEQCICVvh487AbEmBB8MMgk8Kn5zjhgytAj0xzMLfVQvcfHeAiAJ9JgcnMzx/9hbgAh8jEVidMTF8MTGJ41/RL2xzKzpRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2XTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+bxAAlb/6Ygptx6tX2Rgh5fBU/mONoTMMkZY84cye+CWQ4x54YBqF\r\nUOPvoEkoTGuBF7bifIi3N/z0YxgMo4fxW3HhTckWzyKa5wyRe7+7TY0WI84O\r\nWk+bkwsOeW1VhuxI9OK52X0rwfTnw4q7UqOY6ouwsPfhtXpRyaVhNILYFZrx\r\ntTypc43iJ4EB0K+FD/9cpYrffrRuQw2MvfLA88IF3YlepYEF/AmcB2kl9g3N\r\nuaiXbYY5MxVU5LEmEdRjD/1yynz8lhDxTOtleIHLksro7DV1V1+aBIaQxoGO\r\nVQmWr8OHlal8GcuKZs1OjCSPya85/vbgCUlyM02L/kc05DYaYYtsvQQE2dll\r\nInZhSJdnpjNXtRRWthfAar3+A1t8Ye42lEbiuMPPiYkxxpIvjn8xtQEAiCfP\r\nAEik+r1kFEUFlhLnXugGdc08jT2Rb+u9TwdJbLtOl+yJbdekSqpU4G5CUiQc\r\nqHymzHXvIycIt2DWyIKdXpzNkTgFJfLFE3lsGIg+6vAa0iJBImibfG+yjbs5\r\nlN1u6oC7WDIY88SkpjQyKWCUQCoT/pbD0yE6qTx/y+/QoOi8xqwxTlAC50nn\r\n4/qzaAxMW/nipMTeciK31TXkW/pmTFtG+Gz4wQPZfVFBftKT+T2/pjD5kFjC\r\nBImRpRFUmIyT28KtL/Rl0px527Y4CrZZPu8=\r\n=0jWc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/density":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/tab-scroller":"15.0.0-canary.1c8013f4e.0","@material/tab-indicator":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1c8013f4e.0_1678730707177_0.5903680771077982","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.112715df5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef73f1e115803e21aae6c824d1cfe0f9c6d90eb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.112715df5.0.tgz","fileCount":37,"integrity":"sha512-RerTgEKmfhF6OfqM8TWnh7fcQAvV9vjfA7Cz8oXVsHIUmyDL0YiJdmhZWuaoZzN/R4ty9Ff98Sp8HKE6MzrKpQ==","signatures":[{"sig":"MEQCIHZu0xgqe6lqLiSwKIlrl+LzTEBPBQl2O59jM4414LLfAiBLNXX/hA0twqKaXNoNadbqHlHOO+P5nAJSldG7ET4B1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD25XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbew/9HqVFREp4d6KRP9BT00RfHoU/lxbl8wYee8Uoy3E+qEOHTYGa\r\n29v8yzKeskGo4WZsr+M5tKYc10KIUroa8FFcjEiakkgfvcclUKgCOgu7EOW2\r\nINnN+S7LSTXEUBghheMdOReSaGKEC3Qn0xtf26BP59jIgpG1uvb0J2s7nqLj\r\n76JakU5IYVFm21eG66q1xKsFkV4fs/c7D8cYX0HCT3nxeqmYjjQ9mr7Wg4W+\r\nvmQy8qPc/ncxgAjaoLji1DZPA0YMVcT2kfIx3nU5GiDZaJEETrYkolexJsDm\r\nf+JvNA3llSYTFVzh8tUvnpOSSjcMf7HVd/El/bbGxv0r1N6cRXwQrpxHb2pO\r\nuSBL1Qf0c/+pGScpx9dtwusFVBWZCmd2ViyyPyor6gcIok5TcsRLvXR8Jv5V\r\nST8ZoBr3mFMqGNb9YgFVVB0LhIKDNBAE2nz+gawg1npLlS/6yn6vQSYi3ybp\r\nboV7Yq8VKgsq0hyuDSaGXdS98J3txvuCPrZeeA8UyOrbYH+9r2CAnca7FsfR\r\nNEs+opAvpD+DzOOnJVuIXwjjWQULoHrdEYmLmhgnNvQHNtagRgeA7gu8lfFq\r\nqO0G4piekDHR34NIqVxvhiYMbn4K8Vt2LFGLy6vIxpoVbuIgi72RbrJc2L1n\r\nok3SeWyVw9HyUVITp36OyHw1shOWZpAcSu0=\r\n=OSa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/density":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/tab-scroller":"15.0.0-canary.112715df5.0","@material/tab-indicator":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.112715df5.0_1678732887170_0.2166055874791617","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d250911f2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9fe93fc0ce28719116ba63f77ce83e179e72d50","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d250911f2.0.tgz","fileCount":37,"integrity":"sha512-jL+GnM8D4qR6cUR/WCuCNLSmOVm++QOvyngqudUtmc8VVKTA5Ye7LN2mojfiZ2tGHrXbtTwcwZBkpAXcjYpPWw==","signatures":[{"sig":"MEQCIHl58yq5Oy+7D/Ss1gWIgMk/D5Z58aSS5/bEX2hoZeWPAiAZvtAHOkclMgQRvp+SCC9x+P8rarfoPiNNyhw86EP2rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3qaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov4w//SJTl0BNj157Xwmx6OFSfqcQc4AhdVs3UNwztd/oLuWh5D6vj\r\ng2s943FPT2t11T4sLPsH2Q7Xc9BJ8UNwUzbh19r1FK3lIwuilF1SF+92bO0h\r\n9wSsRZwfd4CHIHROtIWpRn0G5FGYu2CNFS8eAfGlBc2PF1zAkSy4COyNErQD\r\nj6w9ZrS6nVN3948wd3h5xMMt0CDXzFe6SDGJme8m/G+NAO33thePtf4CeR3N\r\nnzsTD1WZ7kPJkSVQgB9dJkP3tKDTuCaWynbAIHAnb/xsoVpdQ94YHRlHH8zo\r\nSkIAFZBbOM5zMCWLrmFD3bobVtYbTifX5Cp4eq1tPYa6EmZxc1skhat87zxe\r\nFlCkEAVy5aYJUEXwoMWuJakPKahoCWrOXnZTp3QOYAFxdJFJ+eSAfsRC1P4p\r\nZ6Gtp9giezbODbFHY+6CWrf39dVMpTzcBWVvpG2aXOb5SUsctmqvKMB3Au/M\r\nVbesXZ9HhSjNP8dIxv3w5ApZ4x9wbrmTXnKenFARpjDJVVrEajE3zVG+lHUn\r\nbKbpeeswPwcocchRbG75ETatsn1gmO/yutHpXNrgKDv8JcMswYF+C853ArnF\r\nKQnfCHB1lvms8JUI8z2qjmvNQoU7vQEkS2qVOat/U5NKcAH7ZZBbcN0/LlPv\r\n0zDWAbpueBnyT59RPjuzH5Vmb43d9XJ608w=\r\n=jbAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/density":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/tab-scroller":"15.0.0-canary.d250911f2.0","@material/tab-indicator":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d250911f2.0_1678736026301_0.8219288049401132","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7cd925c12.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a0aeb0047bdb28fa2a1a3b1dd8fe4495d10e1a5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7cd925c12.0.tgz","fileCount":37,"integrity":"sha512-pXfi93pTvMd6WHadk142xZ7dwF7T2MZzAUfOhDDRLvjfBvTVFaj/RGvLj6cgqLmKvpP8Wmv8eWcyKrgcJsS/1Q==","signatures":[{"sig":"MEQCIAIxVS7dVqoHtmsLxDLYXxUsA3rvlbXoA4T85gGkfPQiAiBmp6uIJNokzaavu31Kg/8ceFphBrRP+NuoqUysV12DZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3xiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRFA//avFMdD+BROYFDFvE11V8QGoJZ+s1nl7LM0g/p/nnvYR8e4Px\r\nGhtm9v2Ml8mtG45fwjebHFOKYguW+tKWQRYADztuPWQqPIUcp/A3d0r/Yy74\r\nNmtNdvlP4xzfXqgmRhVzMF+E04yn3L9c3tOm5Bc6xvmi8a9PAGPN143ByiH6\r\nYriq/Jkw0COlmdC3fBge95j00aiWa0fGlVc4eA/HzomBYfJ5buAeWpf163Kl\r\nIwflQn7HNTl1Mz+N3hwHRRo7ssQ5q1COoChRUtlWqtb+th9Szinmp4+6yyb3\r\ncFq7UNjita0t8PzBttzO+8T5TxzkefZkBi3g12HismiT1eFtTZQ6Z+HDWxbW\r\nKxCw449QCJBP37s9IAcggQBtu31p8Qutw80gNGbYgMKrln1BIaX4tkMAKhz9\r\nkCn/44yG4366vjbaqEBiiaRj0fVq1Km0VzbCIjVE3uEs5dMu2jpVMZqdV32Z\r\nYVmiIp0MFfrMjsWQWsDmX2A6Hn+72tt9WvJnSxIVYl/O7Bw1GKr4glpCKa+B\r\nbdcafMsqFaRfcu9LwaVxAXY9+67T0nipRGIGYHw4RZIDtgu4hszl0FtpksC6\r\n+qkrdBjg0Y7v1nr+KO3Hyx4aNwj5wgqSDWCxZSskRkmHHEktDuQ6PbCUOkD0\r\n7WRCmZCGNMiYxpV1xf1aDmPCvbVYGcrTpHQ=\r\n=OTAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/density":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/tab-scroller":"15.0.0-canary.7cd925c12.0","@material/tab-indicator":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7cd925c12.0_1678736481951_0.4291025384910636","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b2ddacf73.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b753927af1514a641352399ebf1458f735203d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b2ddacf73.0.tgz","fileCount":37,"integrity":"sha512-i4X8U/4N0qQG5PrYS+g0OrkCWIeg+IkQf//P3RT2EJUR4tS6dqarZNKusx5Qx/Lwhoy412YR3h/XzhPR2iF9mw==","signatures":[{"sig":"MEUCIDfPZAZBbmzTz3eKdZtRpBsb1ff5Om39Zgorgu+FJ9RdAiEAl1QO5ZUL7E1yBCbQ0L/OETwTesVznlTW/vTcYaqESJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD31aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1zg/9F8Br/tFCNgLbSAfsQaW8a/RH3MIVWMcZ3+1Rt/GkdzWbv5AA\r\n4feZYDw1/AdCd4tK/pdfkk+2CptZBnBNi0Qpe7izCvcH6CvHHv844qE0+iMl\r\n8KkmbTiHyMeoKdXu8fbDSc/13LPNdQjSZOboXDBls3Xf/J43fs+2FJGv5IAV\r\nA187TWsILISQrLFhZHk8GLYwyr5T3oFRD49p87S2Togrhca/qWg+UzD+3eyz\r\nayB6NQ68vqWj6cpooK9VNycHv+p6huU8L2yk+D60EDTxTyBtZMxeEkqX70vB\r\n/mygbGbp3uv9To8Z089Vxg6XgysSyesS+eZNwmAEtTBtdgTK0Xq8H1kmjAPM\r\nxPXKyNBUWQT6OTR69bjtd7UkCfaTHSgbBLuxB6FFnaQkO15HGjcwQRpIki8/\r\nBjx8NMQcbmSeepMDH6JSXRqQ3y7Mg+tVKvAoA3QwiwPyfH5hL2Q7IHDRj6Im\r\nvSQMjFgVm10gStJONjoLGjTXh473SJfrolwKnGaqeHjWWm0B9oNRkQ59ntv9\r\nIZxC/gpzbVXuUTRG39hWAfZL1AjxnMHkcbE7fvxTlnN2L8Hx1COiKuwncayq\r\nGAPtpTSyQT6CGQRfISGSGLPlyt5cAbomEyB7ifz+MhYgee2S/ZOzRxvmWIGk\r\nMnczjunLYSaIImq1qk79zjgMpRvg3K6etxE=\r\n=7VFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/density":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/tab-scroller":"15.0.0-canary.b2ddacf73.0","@material/tab-indicator":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b2ddacf73.0_1678736729970_0.6040536218404613","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.989ae2ecc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c76c03ca06af58fc8f85fd456f971dc491560f5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.989ae2ecc.0.tgz","fileCount":37,"integrity":"sha512-8lrfgVdBOgJ66Uc6uTet7b8Rja6gyMmgYhIr0ygLM0Mpv5Onyq6DnbhcSK/Wfw0/Axsld7KNQvnA/RB4HY6Seg==","signatures":[{"sig":"MEYCIQDKMz6x786HdcyBiSfcWgTWEkOCVn7sG66g7P+HLkYlrgIhAL4k2IzsH1Q1fASUy9x9NP1Y2p0/sO8ap5di0+sjV8sO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC4Q/8CuSA6fWY7rUFcKS4Pzu2RlvL5To4Mj4ie6YmBhP0YpO+uhm3\r\n61f89rUEKUkub311kjNE39guVocBh17EIHHCoULAxVdFUYecruzXZpJwfaVe\r\n4+EifR3NacFe7GLyu41uNLu+FBPMSapz1fYX6eWcZK6HDmeAAUIGoPGg4Z1k\r\nYZBwbU+8UE4f3Dj7KWvJxZxJgeYVDrq5wpKv8vsZ5+k0joNfaVAK4f78/KAX\r\n1ZU3wkF46msJzR/h2WQHIH+mXlp4rHrvM2JGcYqkw37tKAZesBo2vwvZNxlh\r\niv/Q/8ddw3SlQNxx/fOdQVc4nViluQMyebWuxMCXGUGqr0L6udX9i/UwEtPS\r\n/99/tr2+TrcVhrFJt+ChhlwqpdthMG9s24ZXCc/xM2pXD3VDENjRYjKXaBEK\r\niNYQcYelaJa/tA+gXVEM5MQ50yGPqBalIOBAwHPFWxXjrCed3UnVjOcqzO38\r\nkF/cGhSBAwmUn13gBWpD43l3FkdR9pUwycCzese8hLQ9yidQ1MaXcldGnSgl\r\nApE1Pz7e0tdyap/xnnBrnoIqG0C8Ih4tMfy1hm3wdrKB0DBR2pSVEmt/J+Ym\r\ns7GZ9TSDHaToCOowaM+3pFF7tkojEgtNGfgIgYr2ZkboBO6b1VTHYX3qkhT1\r\np5qJ091KfWnIzEXdlxLKL0ae+EBc9qsTdXY=\r\n=dbWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/density":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/tab-scroller":"15.0.0-canary.989ae2ecc.0","@material/tab-indicator":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.989ae2ecc.0_1678737301080_0.820877873349602","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.89c66483a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a03f0a920b5c04a95ad6a0ccb1f699ed2500c4a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.89c66483a.0.tgz","fileCount":37,"integrity":"sha512-x5IjxFUVP0kyt4C87Gh6YXi/YIYh+4JazVQ4rq7UrRQl8yBcJuqAOfDxIdErbFm2YhNSLl/hHDJblbssmx/R6A==","signatures":[{"sig":"MEYCIQC8j0Uwh2QjYC3oEWe8tCj3HUUvCBsR+wpeR7DxBNgppQIhAIcCJUZibNjjqAan5uHjqO9z3VTZoH/hy7FrDmD2cYr5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4UVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnXxAAgpIM7LRBFaGKNZ/ph/5uSu3tL/z+2RS1ziu5l8AV8ijhKCdl\r\nDJAGe1l0I+XEAxaHmOP2iFCBJ8u/k+t+L0vaPTOzD9yDTSZk6m6gZVu7JvO6\r\nT/BBM8ZcjYVQHgh663yeWjOUVDLHdzDp3LR1pyyZ6zu2BE4pD/pOi7CZmMm1\r\ntvefta4TYMUJWY1Z8fmM7IdQF6KWmkXDUjuR2fUeUkLYOHs9E6OVceKaE5nl\r\nLyu6KUH2jTlN3GVw7aEzSmzN8YKGIG1S6MsHKdJB34vM9obABIexNLoQYoow\r\nhpjwhCd7QhfntJzR++ec5/4UTZHcYHfCOql16AqC5ZMmMyEPO6IIoeEQzr/K\r\nQg5MhMuZ49b3u3aS4T4JJzNNmGvdicxhPuO1AIgYI+10lPVpD7l4YBYCtzI9\r\ni1uKgaUB4PD0YxkQSoW7G4mdKBvCr4r1Ba3DILItrxAqnSoG6rG751tJgVVh\r\nJ9yjAq6TLFMihDKDKF61QDyZXUqexVGLyB+dR72Lh4wmh/lruK+HvVGGq0H5\r\n4v40BLxmZqEwrcQHCj0jnU5e1Yh3gRxHD2k2Cg0AjZEYcpaTMVU2E7JnZvCr\r\nHtfwmpn//UhAR2e8ICqEj5VsV7LBcELSi3ZFkJjPNAes7nJSgHyFYyr0EcR2\r\n1zGzZ6MO0cZqY9Zbl4ZvXOk10x5KHROaX0Y=\r\n=4xip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/density":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/tab-scroller":"15.0.0-canary.89c66483a.0","@material/tab-indicator":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.89c66483a.0_1678738709460_0.8497735446619794","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6a85742c2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"899f79757276f7ae4aa1452de5e93e13b0bd82a5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6a85742c2.0.tgz","fileCount":37,"integrity":"sha512-tYQF7fXAqbu4ePqNXCmA5XALtVUcnC+KYiEry+g46gl+Qw8wQrs/HII2rQ8Iz1q/i7T64f9+bTDWcOUVbj3p8g==","signatures":[{"sig":"MEUCIQCUk6aRlhkjnLUrzkT1AQVlDS8edc9Q/eJebp360/b8ywIgcZmZ0rJh/NGHWTuJhtWSnQhnaEhjrZf2++g70UO0Vus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+C3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7uhAAlH3EVx6NsOs3KfdqwWNEr5S9SHOA5WRypdYrxz+MY1GtoWAW\r\nFPcgRV1q94S1/KxqvdEZtmLQXpU0CH5VRZMEQG3xMTmWLdOdoJhOQ/vFLdLU\r\nysDoIE8k5VKaKkmQT5p1Eu/VZdavvSys9Ph4+tO6dYpXCAj+32Axc6Twh3bQ\r\nOus1gH500NaKyGVIkoubfb6v23rBzSw2igmPMmdKUGrfmHQfZTd84V16buVu\r\nj8tJ2nzGDnqkcR6/vOmgycklzy0wUOW8jvwD/FaU9vhd66qHsCH1HrKiSJqt\r\nxrGxY0CELSuEE11Av+0udTph7ysDSqDVdrQsKcfIWpYiFqSGZIBBo+J0acLa\r\nRrvfcJo5g/dD0yunnByeMzr2z4R87/06AgEEab3cTy+iToXqGsFnyxEeXyZG\r\nxzEdGdo83Ahqh/JXvpXoi/y5O0DWuced9pxFP5vfh4cxEW8kXzlEPdSOPS4E\r\njFBKw9AYDbW2yc9ff5yPrhAOZDVKXAKimRCu8+fucx9gw5A5fDQtg5gJEALO\r\n5DpcpRcs9scDC4csW/b0REmZNTMDJ1DKWj7/M13TC9KLs+2+Lhr9J/Wvh8LP\r\nKQWBOGVXVQwYz2BvvZD3jA5WdvN+LbmL1HCsOLATYE+08gyfSzLHf0WlzQsu\r\n3rOiTlA6tYfe1USjTheJJ/ub2rWKlkyyvYU=\r\n=U5I7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/density":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/tab-scroller":"15.0.0-canary.6a85742c2.0","@material/tab-indicator":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6a85742c2.0_1678762166807_0.38060088352720456","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bb6cd78d5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a30a17465c0ee13a859b97b89a0266f7663ecf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":37,"integrity":"sha512-nxFs/HzCUMEtaYPfqvTFafpDfbDqYZm+w3NI4aXaS+D9iS7B8W2s58+S6NS3g9ktSjH+j1ZQ7bWeOauKJnPyKA==","signatures":[{"sig":"MEUCIQCkSoSmxZeePNBWqRPySWJp2cni+6NW2Stomqypt/qDvgIgUdgAyiVRgmQZ1iOxHaDqcwdTryu0KYR9pJWsYLtxYmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZHw//YM3h6fJOvM4yH/oRR7Tx7She6sOJTBKDlK6vxvN+21ivB0JY\r\nSyhHmg95qM4mKr2zc/TqmaCzPlQFUC5fX9zOM7M4QEw3Xw9wmgoAB1peo0jj\r\nW0WPefeZCS8xs4mh8BlkmaPQr4dYcNzoKITxtYPc23KzwVvyN8lJnjFTfp4j\r\n5/6lirbaaId+orSfeRB3pIizzmc6kh9Si6VsAntubtODt5xTi+qYBFVPkpbZ\r\nP5teapLTIJrRtc2+m8aanhC3bFdkl16G6MTtJibRSlj9QxyU/wni8AHwXz4g\r\nchDRcBIg92Yc5k93IDFK1FP6Aq/NxggeWJQT6V2sBMMNVTpFU/9QLJgu1Yj2\r\ntNNgSL0y48ofNCHCRO9rEJXowt7XoiXHK4Ym8MERJrbfhGxsvCQXTJ97SVaI\r\nZ4MX+bNmN35WsZjjpwSFfpjx8OLLxcXSXuCXVn00gARrAI9ANa4oTcTutH3y\r\nw4r37gdfI/JNo+JKj1c0JY/uTQ1Iv/j4kLYj7WsGUiZWC2HMTF2HAyvD831a\r\nwUaSeJMcifY4cv1RoOrWDiKdgU/B1SRO79yKASkzMLK57WSABj7Qi1lyxwRV\r\ngqUOdr+7pMlgQGt59EMf9FD7lcv+YruC3HHHpUKtfRb2YXMbSMBGqERgQmng\r\nA7m1Ag7KwvkXyJhm50VWNDGS45m+TUy3uCw=\r\n=BWht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/density":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/tab-scroller":"15.0.0-canary.bb6cd78d5.0","@material/tab-indicator":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bb6cd78d5.0_1678817942301_0.2119373342276205","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5f94aa37d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ae36a28e677dc742c1dc654086a5a5b8e3d944b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5f94aa37d.0.tgz","fileCount":37,"integrity":"sha512-yfN6nM3lNhO3abQVkm2Spq4Bikb0Jc4R14VBWjfZXgmsCCQGPeI17LCfq5SyxrmnrQdNog1i8jrVhEhyQ6aHKw==","signatures":[{"sig":"MEUCIQC5NXd6uu2NqI/os+0OznSUE/LXVdJNi36/1T24rZ+DWgIgXIdTG6sjckPYxaFDDSLFgXfWayah2pAyyNOKBAuVmUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELtaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjihAAnL1KC5ykhwQzO+b0MILmc4doHNDnS6I+ka3tMCuIWkoifQvk\r\nAS8lJAYL90gjeDusTE3kayWgHnTKH2iJOd12GQWq+MAFcAvSllpVUVC0p/Ek\r\nwMdRn5+Y+p7nOhqgYGoB3p5++LWEhijt5+A0MFJoFuZhfzxnbEhZCt/OGyUa\r\nhxT24r/L4IUndnpML5AkJBCfv3G/tKCQnsHB2c/1y0PcCazHI69FRmJgZIcP\r\nLcR6wC0vxz3RvX1kEKwEC9AGayQ9hMxHqsHOOO9bZeESem8Vz3h8WqnoSDXz\r\nSQSlDHHv8/ihdPE8cE3PEW0+AzCw1qPc6ZykrHvPCdsMowYw6nCgyxc8wBYe\r\n136qPwg8BlVZd1B37nPacQcJbPskoVgQ8lImsfjXddOApmNlf+lOli4iJuoW\r\n5r7X5bjWjb8LQqHhI2SWy06aHdq96f2xSdwBEgLt1wkfvQBBIzU/YZBxSEsh\r\nHl0CazzJ6Di4XxEC6dYCWdNpH8ic/MYeIzuIoOScqogZhLQUxpqeCHhHxqak\r\nZDyLeton8RK0PkOjWMCqw6Ugqgq/Qd+3dFIkCuMhVT0Cp0s3PSw97gmtNc4P\r\nPLrXP+1lZ20VQ8ODGMXx8VvGTIcrGPx6K6jcMiG/zdxBLBIvMJdRMSZqFlft\r\nWzOnQA1KKKEjfo8ukYZitPeaDoWcO+r4Uxo=\r\n=GufO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/density":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/tab-scroller":"15.0.0-canary.5f94aa37d.0","@material/tab-indicator":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5f94aa37d.0_1678818138513_0.25556946441621475","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1bd317240.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5273b57fa1598b62275cac6c9a6a4ad1c2f53f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1bd317240.0.tgz","fileCount":37,"integrity":"sha512-yFYEMh6vA7e6fs+i4COzxrLya+iYxiTJTMfpu3WHnUOrJi12nFemUQj9cAzVh5WJIMb6qaNWR5eFjhsqPt+YGA==","signatures":[{"sig":"MEQCIF0dRhLq7ubZclaf0hbBYaavhJk56bsU2Yod4VVic8mzAiAsFGE9jldRnFPuZjOr+Xbf6I+oF8hvyg64UTTPlu0Tyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEDhAAmbzskmdzZWgDjyMqkU+1Hxrpg77tuAYR5tFSD3NxqtfDGj22\r\n9DJ++RTcpkTHYcNfzNTzT3BrraF5Muke527FWEewhqOAdjWPq+DjYQr2IsKZ\r\npS6imMLSRGxL/EJMQIyjfKWNTdZyoHe3MMGen+rqhGHvqsmBlexr4iUHwS05\r\nzvVGLUe8t2D7GWuGU6dpgLCuzv7Rw/TIgZd0yat/Nj/x5p7bcHbkv+b5ep/J\r\n/zNyXmiu5a5TZ2zi+pDFmbBpNLjddlOAEGYzzZVIS6xVnowZu0bGouLyBxBI\r\nWeNFgf5/gTD6dDIk+lBZDPbZthC+AcSI8KHwDcekAiP4+n8cYpKnlr6YZrR/\r\nykXX3U9YILr2F4q2qo8fZhXcwZDYxubLvEmAYTTQdlyUexyBSTdgRJCCl/RQ\r\nxI3nQhhU5k7bFi7pXdKloSYS8lC7bsRzmYSrULteNpMqvDnrgGxw1+rLp9KG\r\nWM5GD26HFRaq1RWHrdOj3kKl/G45aWG6VstUhFO9Ym/E0esOtSJjMygm17TJ\r\n45BnJwR9fYSlDAA4d04AaJz0AHA43h0DycmzYnE3LE1ZNxRtR67WQNRxayma\r\nToa+yD1DBS72aEH4NAg5XJm3x43YiJmNFi/EDpPNn1H26VcO6uI9SqFxKs2F\r\nU3IXSYW01aY/R/dsohKvHWCyU4MdAnl3I28=\r\n=+cz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/density":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/tab-scroller":"15.0.0-canary.1bd317240.0","@material/tab-indicator":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1bd317240.0_1678818373172_0.9976943450860096","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d441d2a2a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bbe3a1bb05007c9850acf84952e2422516f3653","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d441d2a2a.0.tgz","fileCount":37,"integrity":"sha512-CUYGGWYoQW/7pKDqitXNvB/T3qKP0vv0jtDQIXayCa3IwvrBpL2hvZPCDNO+yLN25LHR0kYK8Ioen/OWl/NuBw==","signatures":[{"sig":"MEUCIQCn9F5e+FAfrIHYLgX9PwoifynkVxK3Lh9D3vWMPIcqkwIgR/1gj5mUd18J53rUlyvpfreFoEDo9UOOLxtsixoLp6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqLxAAjJHOxmLZOGL+6HO07kzGYXH4oUZ7GtdYJoq9+IE3J9P7ClTV\r\no5la3kuwy6Pr94vgi6kOjwvt32WseLh1ewSC/0BiM3c3IGtxx3bYpvmZXbVf\r\nuAnzR14/BW5HiSOX8+31Du9/gzQp81pLCmUPu/M5uJEk92zCVpMQ9hvo974l\r\nlxuPzJrvSskRXCX10nhgwQonIv5wsewZkSrWwOuJP9hPeyXDvjSAmMaeBbq8\r\n26fZHklRfbe61QeKZURn+fc7ZMfsNR+CYgzERTUmlgPlTZUWtSQUHmmXu2yf\r\nJDIDJixb7j+IfUJdPAna7nVctSj1aVRn8VxqnM5T0XPvK+4IuMrmbrnrTsFg\r\nFnb/m/o5Mml0hlbVazgtKtWG+9HFRi9rUUt6N/fqVl6xaVNzQXp5khuKlHIP\r\nWQYOvvWZGc6FUMlumlq8hIOjjd9NsPRRx3gbLQsJB1iiyal1V2kzVU7FRCxk\r\nvlNZ+9SUNZmVSZ4MW0CgXK0nNly5ar7TY8fTDrcXgOEoJh6/baGCWmsN+7/+\r\nAWpxPOLewsOiPxUPqiLVR0zK+1evH6I9BhpGDsH32eesgwKF1kT8yv1mc19V\r\nLaSTtL08JP2uWsAa8Ka7oddVJ5m0Vfk4cJbVed9Wx1aM6vD90Uf/fdX4NFLJ\r\nLR/R4XpnHlfDpPe6r8wdeXos2uhaf5rgNG0=\r\n=712g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/density":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/tab-scroller":"15.0.0-canary.d441d2a2a.0","@material/tab-indicator":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d441d2a2a.0_1678818534735_0.979070336915473","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.fff4066c6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d7999690b6f17c5b13990ade44bc9eadcc79cc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.fff4066c6.0.tgz","fileCount":37,"integrity":"sha512-5FQBmBROmQ6UECyc+HvyMd0Sjx6q8lp3UQU1s/X3kT1uAiKeXPaozF8GUYAExh+1A7gN+k/IJ5LLRVOYKcVAcw==","signatures":[{"sig":"MEQCIDXF/XDnBwrgE8+qUwYHXHxSm5aIgyXWUB32yTCxcGMnAiB7ebqE1eTbz8IZPNWDHHwjVgmp3RLAMuKn8E8Fh8XESg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEL0QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw1Q/+OpkddW4DbPWPd7QaBTRca7DprO/0G7ERvFRnwbCwWr7zf84y\r\n3Qf/h5FgqYzrd7M9ls28XnzH5zuUB+t5dUJBXJTLnu0LJuqN0UEVWGP8rezf\r\n4KtIYw6j1x0Gj223jVD90F4KjlzpH8a92ml7ec9eArCAEv1/6aVYlshV6667\r\n9g4V3VF55WGfDX+WObULFtft4tmpdmCdj8o7MpsCl9Va6toHVp0pqVkjusyA\r\nH0dYnAXQSPSWOqfnwuPYo3gKi5gvMjKc4ox4XzjUX40pOqKIiEqTu+z7+qGX\r\n/6JiJHjNTxjU0SeyoIARngqJx5I6jWsySQkYnE7cbvnCD2frvyevduCrSlGa\r\nYqwTin/ZxKO4RpcZXLhmtb2X8OUhzwEDnvffeuyCbGgXKxfT//Oc1x6sfhsh\r\nR1rspiIPSy7BA4C3Z0oAEK4VwX9l6POSyC0g+VNG2aoOM0olg4UZ8W0R3HsS\r\neb6lFxsnoxZaiD1gQM7tSwOphtWqSLp/fc/O71idi+K2FRoEgQH3EZ16Bps5\r\nB0A9NQ/ZR+lQQmyNTccwxt7mL6nMwN3CBNhup2Ww3Lw/hR/LtGiHAFaPQ0Zw\r\nHPkQgM43TK1vwHEvtkwxbVVx2TsN7i9ldb8pHUMuVyg9xuCdwzVjOrQIVX1j\r\nW+f3S6oqWtcR9weOTLvmObVHH732dCpP2DU=\r\n=vllc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/density":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/tab-scroller":"15.0.0-canary.fff4066c6.0","@material/tab-indicator":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.fff4066c6.0_1678818576196_0.08826654161330949","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/tab-bar","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.87809c710.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b0e631622f3041f32620fc6b5466b07baa70a9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.87809c710.0.tgz","fileCount":37,"integrity":"sha512-IPijFBIOY6ObfUM84vb4PRJh15X5/59x6RGAF7Hbw6uHYgy/mbMwnUrK6PFAXeuh96oFbS51t0eltuqFMgFAOA==","signatures":[{"sig":"MEUCIC5ctofvjeRehGXJFPCR3OmH8cSBL44bePs8NZZVBxgyAiEArumT6Q6G1O/UiiMIFWeCeHEZApnj578cwucR1SK0dfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMDLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrivA//TjYZrf7Ftq4oA+CUS15XG9UYeQ68JuN+x1cnA7ucSVeRgy8o\r\n8//mWZhqCMXP3sN2STREMY81Y8xrRRBRtafohCY1xT9l+KTdKkujE0YD+jt1\r\nImxPsrK0O12L4vQUCI9YY4XQsHEoRxtnETnZrnK9sC2W2f3ZRlOF5axYuJvT\r\nRsygskLlNPp3js1aEnQ/u/1675eAWsJppm+o+1rIJqMDNY1Z34DnzvXJzdCB\r\nUdVBBROmNThoLAhEWvzurMKAgj1S2aTNsmKDOIpDg/UrinH4w3MXiy3FQVS+\r\naJ7yxy3o5L2OmtX7fDisrQzhjo81oXeEuLVbopBUStEyKJ9BFaKsqRGHYq89\r\nhPjJqak/JJJazO8BBb28HuqmxeFx/EezdDHGoyiuaFSc7iapCGCINjzmvBiA\r\nqzd/xcd5+CVX09HppuU+vYS+zNsVK8uBSNIh2hhEQ3Kj5wTQ0IcHgOeNFFZo\r\nJMkLKWHwLMw0rP07mZ5/8tx5THRQH1kg4/5Yum7Y1pw6Lel2g32Buuy253Cg\r\n0PPYAL8aVWymRm1w03A9ZI7050yMT6greXu7UM7CIu1g06bZok32OOXnbhQP\r\n2z7hOk1ODmV+Jmg0p8wICcYxMmTKZxaoHFJWRGIVW6fnxzECIwc8OiCdAo6V\r\nS9G+ioRgFlD7MuG49EOAEVRRv3doKBvLTfA=\r\n=cpIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/density":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/tab-scroller":"15.0.0-canary.87809c710.0","@material/tab-indicator":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.87809c710.0_1678819531537_0.4762934816775042","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.48d30012d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc2f1f61ddcf6ccc08f1c6b4dd1c67d4d5b6054e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.48d30012d.0.tgz","fileCount":37,"integrity":"sha512-1o4HFP/axbiGv351DBvCJrz9/UFl34Dzgds8wSBePVsjtOKKMIWvh53kH95BODT9o4S5uC+40nMubCBqUtmsqw==","signatures":[{"sig":"MEYCIQCt5mmCSvr1XPj0091hWk7rG7U9Q72PNCBdFLD18knQIgIhALFdgvOLt9oj8mhzyA4hmIzJcGGmIZKwxTEdqsd5m+0w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMHPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotQA//eT0h8v5gnbaAZz42w1iRcDsnUTd3CZ4S0/twlOiMnTHnUXiY\r\nHUWA2+QXDUwprdQo9+IEDPj6Vd6zUsZIfnb7SbO46/JvUe1Jf1hC3Ln4Jh4+\r\nCY/QO7iKTJswwLq9o/G1iUurvbfhPhgAgKwgmKIr738ohDshPIlH2ppieCh9\r\nYhcEFEE0Ri2fvqP2CYorSdUkx4uACyTWsp5Wb6mUc1YXIWgnwdwXPvCkuwIE\r\nnKmNbDCJKi8QPabpZRowximUvIjz1+PbhYUrL8U73qumSZlAdglOILGMGZ7S\r\nvJA0siXhT3JaW0YidTmbFnch+5FcEZtN+U1jbfEvWjpBI8UeiPLhBq4xBLCE\r\nQXxyirxq5lVa14aeWtayhZHts10OKK8Z02EajJLd+2vsMHWfBZScZ34e4jJt\r\nG07I+DxWqsZROTYg+N9vF6MPvo1KoEo63Lsj1Xu9ogeHsXIELs5YNH98RW7i\r\n9hJgB1ZupdaOhOz3n5GGuRpXz1hMX/bZahZpOeI23NRd1mx+iJ0YZaSabGVE\r\nFnQYxTcRFjSqebWFEc/oXN9gA3P/16HJ1EjnD9KtN0CwrqUcXCZ2HIbuU9tZ\r\nROUPd888W68Zl3pjBRQz748KNXuDhb1P0vfIw9czpiBIYA/2pUiInqzvSUyj\r\nd2R7dGl0BYvcZwIYVYQHf1WyT0MeeUzi5Xg=\r\n=mJej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/density":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/tab-scroller":"15.0.0-canary.48d30012d.0","@material/tab-indicator":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.48d30012d.0_1678819791470_0.14311361494465236","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.419b23cc6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0d56ff404a94c7a9c6859a168241862b36eb558","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.419b23cc6.0.tgz","fileCount":37,"integrity":"sha512-LeymG7NY5qTyvqIHlvWFNpi1j/UL1h+nr3HXrDITDj1qFJhraOGPvzW9EWQzVNppgltWD+L4qOSBIq4YWA2TRw==","signatures":[{"sig":"MEUCIEnfO6c0iOPsFeTybdI4zeS7GDu4wGvABjbB17RiwOrfAiEA4S5QtPd7758oOkk0ZeEEm9es8pt1QQVR1MpxOETHFDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw5Q//ctiENShl+uw5ryVS0xLv/wcQXNKixk6mbiubzLaBfU8O2oPm\r\nUjJ5HRsgynY94rRqlRNIJ7XpRD/7xHIrzl2E+lKatkBvBxrCyz+kRKkIUM0v\r\nHZ8XDR/HeqRDYscVfQGuPgrSJJFP7+wKfj/TRcP3cK1FJR0GZpKTq1y8yawq\r\n3vWAinAyLmb6B4UG2oJffuPtffrBbKpgbQAPFiUjO2y06WCgsgjUUppte5j+\r\nC95qj1caDORjKI87Wr+3x4NNIxpkULopy4nSxzaDX2mVI5abkKmRFvkYWd8V\r\nC+fJ4l0G8jkmDUiyLPzUSB1BuNBhHO6UeDljE2zi2w6eYknGcY+De4FXkB6U\r\nNWUdFq3l7RVobP95N9kOxQk/7jOlBE9zm1sDsBe86QUIHgQX080ukZT+OfNS\r\nuZMTcZIVKfib/M40qBCVAKJDkCpHWjDwNNrzJJ0ol5Cdn2yxeiMZKCB/Pvnr\r\nLSn7hXWuME/v5YeOFy5qZ7w7eX+sqjftIl4ogWzN+JeITCZYpRz0VfzvRMl+\r\ndRg9UEVNRRQ0SS2mG+EjKlSoSdJf/xIpYrkq2yPWqKBTbfpY6H3w5k1DQZkN\r\nxKZdj7Ipe62td3pDAKIiR8nWF05qL9loc2Q8IZo4N3zIiTPZMIrm5eiXJHWS\r\nArai24SLqM6HgIHuHSTUZ5W4wDLACOqT5fI=\r\n=Witm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/density":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/tab-scroller":"15.0.0-canary.419b23cc6.0","@material/tab-indicator":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.419b23cc6.0_1678820456330_0.5414144597945276","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bf86521f4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db613b4f04f6fbf4e0a20a722a2c8c13a73ced6f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bf86521f4.0.tgz","fileCount":37,"integrity":"sha512-PfWhrKJQ9uJSAPCNz3TRF9VAr2/6szyezMj6PeP2mirW7VJHjNSAvJvRUo6vdwQD8uZ/uchp6+ASswsb1eJ57A==","signatures":[{"sig":"MEQCIG7mOEv+AF/kPi6B9L+Yc3WaNo80TmIK5wf6eCHnCCNvAiAjtEghWyfOMd58DPllhnvRifIZV0q3MAXmEB33GNOL+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/VRAAo5a2oTEUdg6MMj8Jf/FmnkYXbtabPkMnvTi5DxJ/MegBdK/X\r\nkh/nQSx+KoJuzNfiRr76phT8EXeDcfApoiyqXMqpmkf2S31Fwk3ymfFS+Kz+\r\nz8pCCa7f81WVvFvS3x9OSyxWcANh5qbQF04BacUhRdC6onC1R45HYy6X24fs\r\noJwgFXinzdB22EVKL6KBomkG9IESRWeANhOMM1lubFMMMK57WrERStrcEDo2\r\nqeSpwz8gOV3IcAFx4OXg+DnEkHbewSipriXCTugYpS53U4LRGLjQIUI8cpZj\r\nzunV/feC/XO2Gf4Mhq8vELkcH6O3ZdHv2qQbrG05FznURslLtabCpC+PW8uR\r\ngA+2E0vfEsU8yLHeODFO+Fl14C1sHx51f09nonpl+V9x3xvMOHezkPddtvHQ\r\ntO8Trbm1oKNKgsOYyxIHHxxrLH0v1do4TfuYKeHiYkxRv8EqxAHYN7vBArYI\r\nDUCduvjmilw0BWtA1na3dHx9cnVUPWmaX+dOIFw7RGIaTHqMNOdTLn4nxc/S\r\nJ3H0bThCTXIPzNJ2RvalO3s+9BVfjd9mtXP/aBDmJFX+X1VeGIrLjIaazk+G\r\nVR0jNDlA1I4mo3lnbKvxX94AZ/ihkGyaMKbp/qyM14YWghmUlFyiE6h2DnLM\r\nsyt3lXBtfk44KfxnsfH1q/eBaQ/aK3hRF2k=\r\n=m0IW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/density":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/tab-scroller":"15.0.0-canary.bf86521f4.0","@material/tab-indicator":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bf86521f4.0_1678835748529_0.4054749102873503","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.11f3d280e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d8d17f8eb4707425680ba6c0623c4c68417250","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.11f3d280e.0.tgz","fileCount":37,"integrity":"sha512-8uvl8Tw7ec2MGfELkECFecezRIwMiw4gypn+Dh7Ly5MIDoxFnnkBcDuSQ/VBLBO+gw5+ABszi6Q5ApGP2ycJDA==","signatures":[{"sig":"MEUCIHl2hpx3+JzItFfyMnGblC90SE7kFmgUNwljSVC840EsAiEAtNZPTLyTOivVlAykDGPlrYozeWK0PSgaA3zM9A5qUrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ2iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjVg//dpsqYAcpFjN/xqReZXCe/oNnP+E5y4vRyYAD4YdcjjZ1K8fw\r\n/OGV4kpApqbqNC7OOOpmky3JDGDXlO2vuVFdQZ7s0WsivmEeZxbYeCzcoCVL\r\n0BIkwiSPynLU9ItFs9cvPlGxFQ96itnJXRst3lMUssZ/y6i6zhqR6BQ42R9R\r\nclwz/ka2SUBzCdEhpFp4v8fJSmDLZIXZJciEifgJMucvZd2YTQtRXNEllPOy\r\nMv5TJ+V/wJIOqSKHQ5EBvtycbcH4Y2VaCjUw4pEMLRDyxgfMJ/zVTKXDnbRi\r\nmomAa2mlKkOOWJn8evauy3YSH2L8/xoTo/oLQpacGwGbsotMMjBq1/7dYIU3\r\nH28OwfACXjI9Psq3XfhYzbI2Z2S5FAGW5T/rFz7lXjuHkXi/gwURhKq508YK\r\nycAdFr2K8PWuYFx5vk7VSxnQjP/1XFl2wuOzP4NKHQ9y+l3F+tnBeg3EzIcf\r\n/vXx/GNd3+9WDC+B+NINxWBhgkrM+1qW4AubfU0wFNPZb/wWx2WKiyRhD5sn\r\nvyGb8p41Y53VU5/oYrXZYrarXnRs7n/lyg0iMTENBAwkQlt3ItrxYGxOJjT1\r\nyfYhT1RNUfUKgFQLIGZMprSRV+bTwcOKVz2sTpx0QKAlqJgaD8QJX/ViFXqY\r\nG85qxskpkUcbpqa2RjznI1yRc57czXVEH4U=\r\n=KbHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/density":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/tab-scroller":"15.0.0-canary.11f3d280e.0","@material/tab-indicator":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.11f3d280e.0_1678839202700_0.7440820673579265","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b281a409a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a9aa8e5a2e17f622ddb15e6cf79c423ffa40015","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b281a409a.0.tgz","fileCount":37,"integrity":"sha512-TkOxb/9NYHJXJEkY+9atpaL1f4GBjtmq5TvncKmFEQggctYji9iTCJ1HPWwCQLqhob0eqG122vcPg4UhDq6r5w==","signatures":[{"sig":"MEUCIDvGRTkXeXBPr/zLHoqOSAXEvktc7nPZ424/YDD/de4VAiEAx+QYOi0DQGSq5/RVKYfp5PUOj7MrcOQiTPjaSD+ycvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojFg//Rg+dLk1mxt7jHRZ8fb5njdo6MaYrQwxVNfZqv0aXx1HPwlKP\r\nG2ND94xJO1zIXcHdJNbtgIxmZKBVDzRzhCpf4PtafCLdRqOZ3LrMMxm80jPy\r\nChs0R76rFPBgDBr0ZfwSwzLd6n+Aj+eoA7r3gi6fHAKE5uG5qNd5WkZ7kwIV\r\nESs77m5apJU6h62wNqHbrRS4vkslI2teg66/3dhWs9quoIL23nWN6+jIf965\r\nMEmgmydQcWT2HXRmWt8vLIKHkXYW4wiNfwitvuHTJLUiiWZyCdzcw7UJPTZt\r\nz0aG6ll2WfLms4yOXyvDahSO3q53xoNJnSzWJsMEGjaqSlDOWk2DBzQXuD42\r\n+aA2jgZcvH0eT6qb7k1JReAzZhVeGDz6YpIwb0lzeBZ3FBEJX6w6Psc95LT7\r\nVHRX7h7qyI9k2j3IjoOfAIDx0WuuKnMZC+4MH22h+A2ERDHgE21A4XCAO1WL\r\n8KDYCXr8oZwygz4w4v81ybprWQKYgoSB1J/G51AZdXsi9gWDwkEEoSglFSly\r\nEKq/t9S3+WcH1vK0LSegrjTWh3nRDRyY71JlHIgJBvzcppBCiTm4kzNnsnXp\r\nyBZz5DvNheWrEgsLwYScQW1A3NGY7qGQFWoIgj4h97tCTE76h747cL4qhRht\r\nbRIdx6PPSpJ7FgopW+FybH7SlOj2kJcbnu8=\r\n=+1Oe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/density":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/tab-scroller":"15.0.0-canary.b281a409a.0","@material/tab-indicator":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b281a409a.0_1679413431457_0.9178895700426746","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/tab-bar","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.39e473690.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a0e0254ac0c6c9bef93cabfe0c70713139e40cd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.39e473690.0.tgz","fileCount":37,"integrity":"sha512-VJ5JtyRI7+EdzuIAXxLpjlmi3A8h5eYWeS5zYPwm+bVahoatgQjxGzAY7Tq74dnr3ZdGNjF/GA8oq5Y4nAjo1A==","signatures":[{"sig":"MEUCIAdGCl21YA29GlHI54bjhSDxrCspTkp7jiZh0WUB5KwbAiEAizKasH+37vjtVaaIlJg3sUp70NBLVodPuWegOnUZxwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe8iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpklA/+KmaGB2MaX9M5rEO0MTbplbi2s2SiYxdCKj07/RFdjTG0SAlf\r\nwofvTI/6L84jXIwuyMWYKKlgfVUlY7Gn9FIw0QnkjJp2FcWUFtanONDwcPoy\r\nNFhrDg2528FQgcW5DTJBTalE41ricPDzgNVT0kTmKc5oHCDhRb+YnVqGboPE\r\nMukj49UERQZLScNJCdP7uJpoL0scl0C1ZLdUWZQLH0A107d5CrTTCJblyEaI\r\nZyV2kjXNGKpjFx3HD8j65bpzzt32bPT86GkTQduFI8P87b+Z7Rwkmnl6DiZK\r\nnGzOOsImmjJesQtYHdT10XcC0J1Uzy1E+PM2WuiGTH5qOC9cWJRIPGGbCdAT\r\nY6DFZu+qxYoVnI7ahdb+ZZuKpwj0VGuK3pxq9qCq3qYXj/kldiwFdlotaPSV\r\nGUYqZQ1uwKNKpKz/+qqaaamzbnOhxcVgA4qlF43PuwGC9vPRUaQLhAL8FRor\r\ntKgyzlll7M1ii26StRLvoLHkZJhPeD/rYPSNZNVXs8pqlexAekuOO7xszG3G\r\ny1moPbBFfidug2myrVc3NezUrTTE/BYeVMXrCNBNKAoeATue4XUK4IC34Ug0\r\nVtRQmeBNVISgzSa75w0oC5QczmJQuuTmokmtuW5StVD3mOsSmOlzL23PKiD9\r\nFJWKiMwGZNZoBEKauOnJxR+Tu1SBwaa1FAg=\r\n=bjbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/density":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/tab-scroller":"15.0.0-canary.39e473690.0","@material/tab-indicator":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.39e473690.0_1679421218409_0.5892309753893943","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cedffb44c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"022d3202c2b2ec6b31367c31bbba6f9d2efdf439","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cedffb44c.0.tgz","fileCount":37,"integrity":"sha512-jB8Y8SJ4FWkI5zTB24oQ7agIxpwylcTZSUHpH1MSwB8BRv/k/Dt/DkrhW1CsPxCzRn4QA3ldkJIN36bqFiT0Kg==","signatures":[{"sig":"MEUCIQCVbUOBaiHoelT+uUirDjbJnjtId0SAo0G3V3qNAXPcSgIgd2TKWos9VxgqkNkgEksT/O7EstUo40cWjbcHcDXM4BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfDCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4jQ//Th/zyQ9tqBPrcHwA5+q031LMUSXUJCv0cLVv04HmQuAuqvQr\r\nAChtWnCwG4aqoF77yor/oWH1s17xJQgwMzohdnXhURR+TVTJBlAP1Y0mMD6j\r\nZ9uXv2OmbBwH2Nmiz0y9gRufo1btHSgLAVe8XwKmhy0n9lApAP6QmHLDVN9C\r\n5uxFHoQ8L8U7tbUONB3kw6rXK9Bx5oAvXL735bqd1zQ9aZokXSuM7Ot5b3ij\r\nlBVLZnJz4yXuzAEmfRV9lCYocY4wGl/51+6HNsT4h/Qkrfl+im6tUv4ME+G/\r\nmcV3Tv6Oz+6Pg/PSeWc6yscpALrsfKydnsXvl3OG7xfE054qKWvwrjfFcM0O\r\nCBr/3M2ZfqsXmOhzqAagORZzKZuWhgdwE+s+r0m2YJ3+WGAys+iAbh0OBbae\r\ngyeeG7cyBOw4MpYJdlpT8XKI9cj9YoQuK0MqFGutF/+srKQy0UmoY9l8Diff\r\nUiCEmsSenuVyQhFQS8drqasbiLAAS4SF0JUf/wUFyvmpiXPlsjZ1lBIRtcKC\r\n1QfAckvv3NqYF9wOEBKDfW+KKNmXhRLRdrPnQrDJQtvyyxI6V7bgQJ39vMvF\r\nV0EdAvAJyIpep2T9kCPgj3pCuWN/XoNh6JQiGpmIfH1HJbeMKuu0LHn/emEz\r\n3rBHrUY0DxGmIQ22vUePhLIoDFOXPE7WPO4=\r\n=UaG8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/density":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/tab-scroller":"15.0.0-canary.cedffb44c.0","@material/tab-indicator":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cedffb44c.0_1679421634372_0.41798223046511973","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/tab-bar","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.36a4cba99.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0de898bd510c61bf13a99ea98ac7d748fd4a956","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.36a4cba99.0.tgz","fileCount":37,"integrity":"sha512-GlvCK2cZEqDdkHW8anWHKr06dMJxliOcZJCMXn8ZRuWbNP9mxmBdWePeckPVqkb3Yg6LeD986ZTvRNib90tw0A==","signatures":[{"sig":"MEQCIHYp4lMv64bquXeG9GsHfWrw4yLXrcyoi5BClSd/hlgGAiBSMb4AMyDBLdGZd7WdThRqMDbgbZgzIBoan+eD6PiBeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIylRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc6hAAksTWUHcd8bOzYRT1p04d1SyX4wvgB4a310srdD7VOw5CCWtx\r\nnZoNo5hfDO74k2aMeSdLfRJmYbPh4B6+7v6Rn2WaRoAUBmTGGJOJjvB/wqBw\r\n+wQI89Sn2DnUPBezdBEfAZ8+lOhtbqC7W3dj5X5r3evngzF7bKv+ajyoj2wF\r\n706J6qrZo9B+EZfTzPoCQOYQOnZM2XqPlfOss4vI9VibhkncgLYF1QYQaT2p\r\nTAzRbPVpDj4CG8LXtslvZWP1hJsUBQdoLVN6zrmvR/wa1ZlOPu/6DIeTK85/\r\nAwQXFfTb/68b/FMFhEfu9g3IadX/4jOHYhqHZP4jyGfWImKgvNJU3CH6AVSB\r\nlhb5HYCRTrg5pNp+3rEJjYB9dbjwQwuKKo26MzWTF/EyITkjW1bKgoC7WfX+\r\ng8wSgtvfFubK5++W3jpAs0bbfAiBDn5+X3ItJ4QynYbMTViUK8+AfGu2v+rA\r\n4rl8ep0+CuwhReTbDZaXPOLZJ4x/tgTl12Nmb8JU5evLHhIGPO3fNov8RvEC\r\nnHOr3QYwuhf/o0DM/CQVYpOlgeYj9Ck3y8GHwW6I12FOzxILKdgIVqN2x5Xi\r\nk5O9cHl/woyVQBpAwVpo1Q0orOxnPiQjONkZwDjSqvfTFXKP03n6Gs89K52w\r\nDFMLEnV2TQjId5P9f4OhIkh1WhwdesV6cj4=\r\n=zsuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/density":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/tab-scroller":"15.0.0-canary.36a4cba99.0","@material/tab-indicator":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.36a4cba99.0_1680025936901_0.004582793214387371","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ed7e82ded.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2108038c82a78f5df513b8a4fe9f776ca2dc00","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ed7e82ded.0.tgz","fileCount":37,"integrity":"sha512-D9/oNAJpQh2RAKQvQ+rLOqMBDpXoM+4Wxcbh8fLf+rebVrcH+PbCpOZtAZMcs7AQnfc7UgBBzi/Cx14sPxF0/A==","signatures":[{"sig":"MEYCIQDlErDdDhgHtxseFKt/fbMg1GMFo3Zknhi18l5MgPVodQIhALAATHdB83RAL1eBrnTutVqhFAAqJ9SOpwMw6H542eLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAlhAApEp5r7SVhYQ1dWRzgKzb0nchJj1yizC6bupzt9TbVmtjINRH\r\nVLjx9dNB5qG3Vwm7dmym0judwVpCVHfKKs4YM2AVJ6ZTB+UQaE6F5/TgWdAv\r\nZcMHyQYYgBW8qsQpM42OjDz/PKkOBiREJg+r3WTPgv8QeoxgNvUrx5/bSl9G\r\nDcnNtaIT8bQTW5UCnXO/3yXXpKqYedJOnUzz2fm9VuNvJVwk81ZAoYuEmOP5\r\nv3izxwTDj93MHJlbZaw3JTfbb0R2pvaJn3lBO+DqX8xDY8u38/9CJVWlPPgA\r\nxkC09hmQiDcWC8oYUwD5Y7piqB4/B1MmgGUqEo8HxD81LtwrzJjfounGFhKV\r\nqhkj5WMG//w4BUeU9T6ZqNHH++Qg30GtGPSpnqoLbdV413lZ6QB5BTIf72+t\r\ng86uifOJ1ZQsqd6ihqgpQNMtpISSJ28qv+ckcJTWckR31E2P46i1/A6v29+S\r\n+wGB5rR8MLfBny5rq8BV3peGWjgb9YQTOlojcC2j+W3F2LKsHWTm6kT/wnL7\r\nE8GsbsiCztKbBCnAFp15mEtzIF6I0hXOoiKHkBL767sGFJSI/WtyQGc/8VbH\r\nvx62pfEJsecaMhENTJvzEMoU1u3osK+UeQnwLV5TttC4rgB76ovJRaUITdjb\r\nnfVgzKaKaxjZQTMqZvZYjRt1esfomeSyDgs=\r\n=1iFz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/density":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/tab-scroller":"15.0.0-canary.ed7e82ded.0","@material/tab-indicator":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ed7e82ded.0_1680035823356_0.6052017468532058","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.55093ee1e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"298fb62599771fd9e2597d64e2ecc012d7f94490","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.55093ee1e.0.tgz","fileCount":37,"integrity":"sha512-8uS4clVZHnGW9egU2B5TNyAfNznfJ2GOY+Yk5DnrZ562lvA04U706JhipTeF1kavYpNKoc9t6mqlhiaRD6172Q==","signatures":[{"sig":"MEYCIQCnt00bNCPDPYrhAD42p9OszZXB5IBOfh2/i9m9Oe6VBwIhALNKIFELBLz2jYG2JwDww7joIKsZJjMesAX4y/aVcd9o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjwA//Qp6Jbl6ZeDsKd6MZo3EsLIMnXNvRFcn3cuyJY/1nf9Z3Nl4Q\r\ng+8xrZuutKHoimwMI1iBmQcil2NripCrwU95awV2+Gqx3EoJC7zzxAptvIm1\r\n1DtwR3eIhjA2XKLEx5qNopsQF/ThbSdD8XX30QYAd7hMbI+UQSiKwMiIEFpD\r\ncxxZQ4JgJZEYksML1iok02sf9j72k+OtjBdvgZQyo+AfXMoRdttK7t+kL0VU\r\nnRcByXvZ2nYmAZG5YWwikczMcLpl9iazTmP+F3OnpgdjtTOfo1j/ZoHtaI6v\r\nXkQli+LjUmbVEFH5Og8GFZ486X50s5CwYc10LirZ9asKiCt4by/tYWVr2NRd\r\n89AQky658oD3J4BYkynYFw69315DQw4Zop/IHcybiTct8uwaVmgOk5a9neeL\r\nUpcPmFg0yyh7bf0dBsZpJuwkUSB5N7qI9+h3ybfUZFLywF72eASmKlmMO1We\r\nI7BGm4GHsZ7xaa+C1Z6b2J+sdTRzr0CewuYQJNTYtvgEgLluDF9sjB968TLY\r\nNQvCJSBxZSyolIGqcJiPiJdilSLutldAvwlb3L7O6dWqwB1iRN4y9sGKVxV1\r\nlf+LDrXx5FwpZA4fXv2AA4Yoz3c3U9dZggZpArtsVmfq2KE0QFmaOWBNXNfh\r\nMXZWdCbGSs60qY/elZGorX2eTgGc1kasnew=\r\n=43P0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/density":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/tab-scroller":"15.0.0-canary.55093ee1e.0","@material/tab-indicator":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.55093ee1e.0_1680115866391_0.17764936917887897","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0c53abc81.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627f12590f6db4d19b6ec6fcbd7f57d34aa77d28","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0c53abc81.0.tgz","fileCount":37,"integrity":"sha512-cZyU2UTHrP9UWdqnk7qsI4GRKvqvF4n7joQJdMX5a0S5ylh6GJUUeKZZc3JJnJCAIuNq+/s+wborCS2OHE8iaA==","signatures":[{"sig":"MEUCIQCxHOhi6Ww7Gr4UUsZE+3OtzAO+Gc8DC8317Z/0ZiodCQIgSzrg0LCRWb9SnUXd2pVfptfwXL/c9fFs6nGTVXcyKVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3UqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8PQ/9Gp2Jxe2xC8B5ftjUWe5SbJnAQ8sggNU2JJrvja5NaGFQj1Dx\r\nSIerIxR8r5XeDVyIUnWy0PMKaHUuOcK8N6K9m1eHgFDl9tIDzM4bH3wv6gPn\r\n31zCCWL6MnuDGpCPOEEdmHGjD4EMjEKKxsvyaswIG2pJ1RhLxgleJg2X6viP\r\nKQrwymok//rTcbJPIFFLOZijTIEuV9oIHI6v8OIktDKTT8F9u0Rt9EOQbTpA\r\nI0etrrl0NZZ41i+jeSceSFf6k+arERm4CX8M+kPmYGpvD06g5YiNBHgu03Lc\r\nKf5icC2ZKxKNSISHHh4itq9OTe/a9qTEjhnxsY75ly7BnSTiyrRo0NNNdij2\r\nqI6l9yrzOm9uA0xX7W67Hy+6Do37D8zVqD2l4vs4ECx3yrZGIs7etLQmM4uU\r\n6fgeWj/jbnXzrPVD7aHZidMXCTeI8ZUMRYD8u95/q7RfzA9VZBny1KKM8qgs\r\nvtUjgGHA4ZkhZ5viFusl7EdEukANLBSx4ygdGntS2unvlEcwPUsnzKL8dQ15\r\ng8D3v9lTla5Zph01q5o2h+51IXkI4nYC2Fuxv7jocJnEcYGoPKdfCb4XHZ6M\r\np90sXTPJX6EmDJh6c0EgTaAfK31d+lACbYQ+nFijUgyAm3T2w7ue7oAAm5r0\r\n6iA3MzeH0ORY0rd+vImoq5PBJIOHM27AzJk=\r\n=DMtm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/density":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/tab-scroller":"15.0.0-canary.0c53abc81.0","@material/tab-indicator":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0c53abc81.0_1680831786112_0.7304612522762715","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.51311e69e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2eb41fd00297d00b73a54b0cae8a674f103025c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.51311e69e.0.tgz","fileCount":37,"integrity":"sha512-3acfZqtypUf+vJJpeD4rFSfTODnVlZuNHNXWCENO3LUWsCvKiIsnT6KcK2iOz89QPBHtNxBIejX2KljNiIyucQ==","signatures":[{"sig":"MEYCIQDR0HAFGmLVchxUjdRprUY+LAUMtA+3PPu5fQ1excUxQQIhAOlZ+cAMPvNL2aDUmPbN1k85c/udjfr5FQvEuL0hPUhu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0chAAidM67dWT3pd1hyrOSK+wH3pxmDtzAwHBi/1Q8nuGkw3+AEmJ\r\nVhiNCt7dLtCjeJ9v3qRP5KC2fEfvUrAskjbkhnTHNUb/rq6bG1YwWpg1JxsI\r\nFztYZvonVE9X3OMssGZf2HyaC9aKMJx2uhtgwytacRSNSrcfjOGc3rrn2SHn\r\nVhRkABtnv+ZsNkIkKMi4z2HBgt5WS00pXsNUi6v8xMBN57tPRHVmgf9utJXc\r\no/xCRhs3+AmNConqkbMmMkd+d/2MfvJ0Fsd5psb1lUFogZxFErBW1YzWmR9a\r\nS/KkXYSeQlQqZRt7s8Zfk1UbqiufstTCDbbtlVX7n6Lkt7KyqbEj/PahXJHh\r\nD0ik7+NUbD8BS1Io0UEQ7YaOZ1HjYpICKZSrKQcLhdYCkM7v3Lhlvas/Y6yr\r\ni0d/y6R2sW/S5aQMUdJwjT6z0UvblhV4yESaIHxfm+7oTfD6mceqFwVx6pqg\r\nqHFn4VXT1sQR3fd5D4AtZ63xubtENTYtx9Zkrdj3XfaB2DBVf7sf9rbv3dHk\r\nqf6vTeu4eETT1Pa8CSz2lDXOr1EiLHdU8cHeUMFDsEJtIcvom3MI+XQ3UgWM\r\nRqba19iZ4/TTVW/SIMWf2W5v8hkjIF0mjftBl6ZlCbPKZ6goNIAADkWdFVC1\r\nIONr6u+16+rcrXX7LvNMm5uXxjJg0YxPBSw=\r\n=MVnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/density":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/tab-scroller":"15.0.0-canary.51311e69e.0","@material/tab-indicator":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.51311e69e.0_1680890993383_0.8407687140075959","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.113b1a38e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d16e96a78925009db6cc32a7f3d494a055c6c33a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.113b1a38e.0.tgz","fileCount":37,"integrity":"sha512-qWtW9iATUednXor0omWX9DmWL03aTAflvQeS2LjiApfMJilZa2c3jfL5MdQ5TjFjIx+V0T50NTRntZd/tSHKjg==","signatures":[{"sig":"MEUCIQCORFDgHfkc/nWxz0WMIWW4fV+1lzsCKtBNeDqdVNQ9BAIgJ0JNW5ZD4W+Rlo6vQmWB60HMEk9gcIBr8MT3JzQ1NfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIXjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqvxAAlG13Ij0d3JCrzgGAHHcr8ZjWjs9wdFM/pB95q/HmDW9w1s7l\r\nK8F/plANJLJgO/4jDzV0/V2FYslCMW5P531+KXyyk1iIJ3h8PpFArHRWFu+Q\r\n94vu6BtyJP9W0+t4PiuCyDhlpHSzEZpNXsQ328N59z1p/dqL7pofrcYRruA7\r\n/tv/Y604ODdlT3SST7TrIMRAtnWBre5tuzcgNxz4Z+UrEnTrHN11DcpW4kKm\r\nuSYqeC7S+aoCca+YRO9G6mIYGDpte1m9NVzVOnBSrphNZYKvqQIJkV53ANUR\r\ntqILq4zV6K379IqtsGIlrFa2LwOxLS4GR4f1unLde96m9y2FjdbOi3IRHgi2\r\nDpj+cnQEkRMEisZ3LDGBu3PTmeonjvK2HxKN6bh5pFB+ZDDaAMIW/rKCkVhB\r\n/BWpno095XXoRUhZF8W8VXYqUuyuU8xWHl+TIAPNJ1ncgZ5bdAf7sxAjMHeS\r\nB40H6NGCRCHUP0zWoeOrTaivIxqjakcPquEJ7SJsiMTkO5qakyhyS2xlgfdd\r\n4UYHYe9t0wdLhL/LWPWrevRhJMRR9R2Iamh7J/5Y3iFkIWxOyuQb33FYqHFt\r\nvrXBTbOtnc89hkMUg4Ee7oiHna3pRJPlXuzITXbnOsuxNFd2jyIhZTgcsIOa\r\nZvKWXCdvzIXcHoQKZgcKkpx57DYM3hB60HE=\r\n=0/Wh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/density":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/tab-scroller":"15.0.0-canary.113b1a38e.0","@material/tab-indicator":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.113b1a38e.0_1681163747395_0.6902908199624536","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ea2191426.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8c6fa89fb446e6fde21c6602975690d3e062038","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ea2191426.0.tgz","fileCount":37,"integrity":"sha512-IToNANhwzBsCLthA1dG/+vNUzeXcE1NILXKi4q6aMFSxY5Lc5o3ka2lW/Vw+EXh9uvvTjpiPxoScn7MVmWAPAg==","signatures":[{"sig":"MEUCIQDaBhMWHc9GYqy0afMow90p9t6L0o+o9tf7k7fFC1mbkQIgft7f0yOS+vOYccaol8hrMwtEJzay4Ia//ajTE0YKZ28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdfZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRIA//XGeLwHj9XflRvjyIiQvGEy/RlKF0eHfJmdtaqiTNY0rP+zbc\r\nFN2oF6OHayk6OFp7Zna1YdlEUJt48wJpbAgSzPV0RK5KqSw02uWNqpX/2zsW\r\nCw2cmqoNhsZPh4PVEpN2QkHeItuUST/5CcH9BV/r6UnB4rHkbHBf5MmPJkqy\r\nbEg8lVBAhq5HqEN30KYywh4ZuLmj748AMPGtkpVdly2dMkPAmp5T6hlVXoiF\r\nhOPI0Wh3rUIxrdBMbipL5JnwXdR/tfgL+6CGYrb6VaLE2FeIEN7sKuMNg+pt\r\nePxFP59UOgh/l6cXhl2vcph69r/Sk08lJiRnRxK+eZQ+GN8lA0RSOrXrZM83\r\nGHnwwWVEc99cZKxITZvPU3bG/gYjnkkNfj9dmeADSocVwofWYxky4/xvFeke\r\nWIHQ3fAn77a9EEkJlwZkOx9y/jQ7ngoJrNamUTfL5HL9dNswWhwr+c8EG5+D\r\nq2LEkSwkt/ZSkBDh6pWLyAc/lNco+Ox9MhMrG4iCrrdm4KRZnIXs2xPV4Q8V\r\nZES1tD/wKEpFZPsjYc31CxPCERH2ODc9jfzEVj4cqFtOejH9wneD5OQVfsCO\r\nb3g2+yW2K/+vXLRt9egGmKvA4Ggw2qpdV+mtLR/U0BO+8B6shZiZdeRxQQRx\r\nHYIjFVUmLY0RHNxw+DaffRZSAH1NHyDSEaE=\r\n=gUvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/density":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/tab-scroller":"15.0.0-canary.ea2191426.0","@material/tab-indicator":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ea2191426.0_1681250265256_0.8189928445845425","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5a5c38538.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd361ab855e41b14e176ef4ddb26e85b1785325c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5a5c38538.0.tgz","fileCount":37,"integrity":"sha512-IMhILq6Mrk6AWlO82c7WdbvZZDVffqtum/+tyBbYXtKMy1K9+09hukqGOr0MT6ee/7+eT7TcG/240klFx29K5Q==","signatures":[{"sig":"MEUCIFveSv0ZNVUq9fEqFGHiaFRAVhvJ99iJV4kWv30D6mLeAiEAxcjUmvQWAx54WIl7gPVFKCDSUJ+pMv4Iz7BA2qfd5+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjEg//TTzVJ6iS2bsYuGRdt0murb/0yz3g0EYpV9FrfyzqsBZLXRdO\r\nfVL9UKYxkgbZ/2NwxlvEnvP2qIt4Osy4bae8HJjxDQaWJuGxnJ1MHXYrS59i\r\nVsIeHY7r2egzkeaCPQh9D5L3zmtRfJNEr4Ja5g31P0SJ7emYoaldVfNhyahv\r\nXVKsYYnE2rD8kSHEUCtcIZ+AdHtGDSTc3mYlI2Ej7RLYglOMoeuoDjS9odwc\r\nh9OSPPB3aU9pWBp1o292Of/ybY8p6dUTHo5QY6oHCmi9q5yDkVeFbzLwBuWc\r\ndMMIPiCyLmFHnyuu3LKdUhWASA3TdbplC4pB0WwWcBZzwrcUQHdOfgQhFjM+\r\ngNu/2hRitegCT8xRqd0/BbWL3M/MIWpXydMkHpXvzsEfd/9/6Ka/19byRnlc\r\nOhFJ0zYfkSV5YKafW7EUlvAgV5T3X1DEEG0f5usi8daNZpzjW4zU03Hn07kk\r\nZJ5FR95Zs3iWzhdvn6S87zr1SSoWXCE4wmj1xgk6foi0Gsl+PZ2ltClH5qys\r\nCl7D0U57fNZE8a9P1a5VR+0iTIyNm7VLac3Tw7YlkfY3ueenwA7M48IJGDJ0\r\nEIOBWAf6YsjPvOHDs2KT8O2hrivE6HzRDVywkpqi26QzcsBt7yCLYx7Jua83\r\n0HHIGJfcWTH4VMAcvkPmQp503yD3DkQUPf4=\r\n=nXjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/density":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/tab-scroller":"15.0.0-canary.5a5c38538.0","@material/tab-indicator":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5a5c38538.0_1681252339636_0.5150401739583195","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e4b5ea7eb.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2168ae7c62eacfebd0cea88b89b29fb4b07cf658","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":37,"integrity":"sha512-PzIZIcv1BZqQKHK4CDrF/d9aXfzRl/B7TLWfzL24iB/sebtxevUvvPn6lo+7CalfZ7bAH0lKxXRtZiEnsR3lvw==","signatures":[{"sig":"MEYCIQCdKYLphlMuLn3ihYMdnoN9Iq0m2d/c+cq4G570omNgVAIhAIGF8DOgGzZMdtd8+zrLVAzXasvlrsI0SfwljcmG4K1n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNegRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJAQ/9HAtJqh/+YiXNn1OLfpkl8kJFUDhC8I+xcXDJaa7ttLU21Wbg\r\nlzhrHgmLom5pGZkdTKKkNXqiOlQuFnMBv+eZRpTT7fO4L+i7mmZ6W8JAoIt+\r\nnNQO0OmmL1XfsrQVpNmV90K0wxNmDO4M8QvbZasYboLB7Z+mjMWN+mfX0evX\r\nZTvTPczw9EVbnK6vnNlMt5RR6iT7hxbUhqq3gua58Jqv5eSlP9JdcGJsophM\r\nx8ojThILkJjs+TFZWYfu44vwZHE1YyViF9GFMi9eCg70Fl4haupGU1Iqj1Nb\r\nerbL6zFwEuAdmpVLRsF9+0f5w1wYCF4sFHEBfzghBQnJBW9SRvUCuwWoh99k\r\ntvrj6dXEaGmqMP/8BIqHnHVDyGYFUMMoV2+UvS3EMQVzXgeiiBzrBNtMMrPE\r\nbuphRtkt8W4D4tqLsvqB+mWv+jJtErPUUMt1l8mnb1UADkNrAKbgioz1brnM\r\nBDq21vdcEIN/gvYUktLn/zZEIYOaRSw26tNjwtbZSPAcw+gT4jEgYC2k9Xya\r\n+yfzD2j/mNTGrhe+le9uk86Jrv15jEJV0wR/CPWrmjBthvYnue/0bz4NWSSy\r\nqEbcxNCk092YJqNrs70kfIR93D+JpXaTbTE3R+8+VlGJ0O/hPV6udsCa6LXr\r\nkvBMzeZJ5w6mGHbqqSELMkvxyoNVKvdov+k=\r\n=qlQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/density":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/tab-scroller":"15.0.0-canary.e4b5ea7eb.0","@material/tab-indicator":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e4b5ea7eb.0_1681254417393_0.8937705849191833","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a094dd9c1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49c78eca99c7661fb10371bb9dff75cfd725cffd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a094dd9c1.0.tgz","fileCount":37,"integrity":"sha512-NXmslSP+PcngolqrnVlKrbrSqyRyhP/nrf+llo7HhbjKIJcxfuysq9wZgTNrJmmcIIpzKgP+HzrI8uMsqVJ1qw==","signatures":[{"sig":"MEUCIEScnjQFnTtVJtEZJSiHfO4G4BAvheaaLzseRgsNyuASAiEA4tIV7rOOAC9egvM7rLK0lE/qfSvg0QntMfX3Td7OlfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOddPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzGg/+K10FU0d772e3CB9xekZXPVTyVQJ+4D2WwTYuSI1Kc6UXpaid\r\natND/T+AhZAWf7hfIlrhOEgSqssFLZH3De8qQDWVI3LzyvaUlVYpO63CWweA\r\n2GR7Bh8gDtLCApoi6Jg6aPNL9TfHI25hqODSVL1cYsAoNb5WGwvxLBzypXY3\r\nxY99oK7wT7GKlJHvDalfwwh/RuKJC5xLPa1IUBMqY/viUqxkbC70hWJWw074\r\nxx6g+F1bKy8/6J5aeWld4EOxxiliI2igSHIix7jqS8z+FfTp2ADoT2tLFIOo\r\n1r2vzNwdFdg0fUdPsJnUywWe0xBjoqMhCoZtnGzMUfA3S0r9glAQ+hVgIauV\r\nDeIuGT3zi5Ri3abqB7FuO6dZvtM4RYYhtQxYsq6BksCugxyIjAP2C0Hj9SBl\r\nKeuAQnc+J6Imrx4Mn0JVJI8uXXqbcoAAB4k4xbewAN+nLOu30GbRA7rfKf6f\r\n3qOLoREBb0GK6Ewigf3jFR/rZWzc9rMq2xXahXRLaBS0vFIw+VJ5YcVQL85H\r\n7Xvz62kV3yChrQvVrPHmMz50WuXETuTzCrwZOM/EOeIQJxPOSv9LUXlGUq8C\r\nRpqnQEIlq0uJYsjmG3hfdFdkcc6LUfnOYqooQXqymMlhsmTTqX0YeiV+8nl0\r\nl6ebx/4sb2pT3PoaWScBDIcJupBtB8B12q8=\r\n=rEM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/density":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/tab-scroller":"15.0.0-canary.a094dd9c1.0","@material/tab-indicator":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a094dd9c1.0_1681512271342_0.08531333425352483","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f771b091c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"725cfdf9f698c60dc1dfb3f8acd6adeb99f10ba9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f771b091c.0.tgz","fileCount":37,"integrity":"sha512-VSuw894+7M8B8CT7WhfMuYJGbhLhOWOIREIkklaxGZQANuDk1tRpkoIdc/65qq+jtxc5mmpvu2hv2XJHijkavA==","signatures":[{"sig":"MEYCIQCIKDKL7PABOXPCgeWI1OR2kZ6XTBLLTitqjNizv28VHAIhANbj977K5KyTc1PYCoDw18M/sOq09BnRXUu4ABjWU0rk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWiBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowng/+LJzqyiXLyTEc7jSjPDEvJJwzmwg1kRMO83NNkIn2qxzCpUy2\r\nz/a9mlK58i0KP2uxsGk3284r7+QGT6Cb/uJlwGMunFKQtngt2H91q2a13PdT\r\nzmW9xpxtf++BibSOX/i0beaBry1ggrSJIEc+4NZ8qK9EQ4q8jnk3wgtptviz\r\n6f+Mzu15fSiongEgbbD85wCpaA7Q1rl+l35VImRD1E+I9Mc2a2uP51PmRC1/\r\nK7WhKxj2JsBTMeBlmGi7TX1QlSz/HpZhPPfu5IESxaDYny32vePw+i68KZP0\r\nVnz1J9G4bfJduBmQekVXCw5Vbay+lnpPxKts99qBC4nzOxBIP9pE7OiFXwMF\r\nA5r6SxvZo7WnwRAgZAQBaTLwhyHedoVXNFuXUhvnDPjhmNpmyfhNYjUr0mJz\r\nfLPlASROKQfHZdLBUXpbxnShaHvmgXe8wyebUcQXQhxXuCRinC4x/EG1E/4l\r\ngMjj+/ec0pzZQ2zKCnqWVzUQfFtc3wADNa90zwNptnO6MtZNz/5A7mQcb54F\r\n3//n6QQBnfXaUvA88N8zK+MGaYjoEgYEQJDW7sJKyDbrxkN5231ClPMA/CK5\r\nrwyUfqQ4kQCwdkrIu+fp6LDDBHRfRZDa6Ldn3UeyOB8tBOnPHQClHjr2J6JC\r\nyImCq6dIo6ZSXehCR7EEawk4hvYVaUyEaew=\r\n=TGKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/density":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/tab-scroller":"15.0.0-canary.f771b091c.0","@material/tab-indicator":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f771b091c.0_1681746048911_0.3999575336750527","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.79b1b612b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b91a7cae0acd78abacff8a21b1e599ceb42c2f4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.79b1b612b.0.tgz","fileCount":37,"integrity":"sha512-rnyCy7/vcAGteh1pdgoGxbZd7LrFr7YF5TZE/8dqled6zwVABO7mR+0YSMgaMluWGvEcPRhcIhChagtcc2aQsw==","signatures":[{"sig":"MEQCIC9ZC3BEqoiObhlcb+0t/y8rBGJ9WQP0DFtdqvPgyGt5AiANG6ai4tZ8dorxAkadL8+tmiy2O/pQswLQZxK/VrBuNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHxTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8fA/+MLVi063sWPdYfItLGLc5AUWCmGcPP066L1OrfWs4S1Ez4LaD\r\nSqabdcoSxm72lXMXIviN6x+tU1ua/3lU0l5pwlCzGrlrIty36lqZKjRai97e\r\nkbcLfzMPUSMSGghf53df4ccPKEITmpfLe059jo+UyOXg8jZ7PBUkVBasaVZ+\r\n2JwMv95PNGKhr/T/m1w6kj26CrWN4kUUB9lIg17EB3p+1s3zu09uMQs3Ln8b\r\nSrwtgPmkT+kky8lB6DmygU8+y1F7ekqHYaFPzNG4DxkSTplVoTgVd86PJA+Q\r\nLJlgWLavPSGR1C75jLAMf/pQh8vUxggreqdHW68TUspqi7tPKHEXgprPIPbI\r\nXUbHnjDDCaWTKMGLD8nXTWyGSW9lgDk//e7SsyOOz0QpnegQfqj7vI7XjdFN\r\nE2SkZu8mBZjIMsvy1w1duSxGnq5eezEfYoaUcRPd6DniyCod5CZa829f6fOX\r\nkdUZyfyJYrzYuQJtk+fL8v/0N0T9dZFpbEIHfIuIv2+ceGzePYCWvKmU5uEs\r\nVisoh6qUu+ScdDHnfGd1s60KSzT0P5Sj7B3EHah9E9xir8AJOzTlJXF+Jkf7\r\nMQiPgQhNrOSoNpaB+xyUnTT9RO3uL5biyhnDq9Z3NKzq+qOwrFsbScw6nggq\r\n3hP91GIIAycLNgno1oJrxzTFzGKsUVxnggU=\r\n=ZJJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/density":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/tab-scroller":"15.0.0-canary.79b1b612b.0","@material/tab-indicator":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.79b1b612b.0_1681947731135_0.9188738708563202","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6f50071e5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96cf5302de8707d19232ccee6ffe6a50dda03be0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6f50071e5.0.tgz","fileCount":37,"integrity":"sha512-9XgELyupsXX1w/CJ/zsuJMvKGYT/z8lGz4TtwmgStJ44D0qhXmkcqU7ytGS4gDdTwqbQbtbkax9muI6IF0o+aA==","signatures":[{"sig":"MEUCIQDpomsECwbgrMIUO8A+LyRAH0SX12rOFh09cw4ZmtmJdAIgYlARe3rcpqx78u+L19oMgSF9BG0wvZwhIBGiaD78i/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX5fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoosg/+J+BqO5Vup7svHkN14rIR5sCD6/7L2026wlvSFWsXwNb0H3/b\r\n98SdBxa76FneDUE5tehg3ay2fsisy9qCIzwm5zqPqqRRZGBFJxoSTmpIa4Bn\r\n5YzsqeogLbzi8P7guYrwwEESKi7B4WVv77m1aqfE5tAPm45vPzL5Oz5z1Z3Y\r\naDjjn+UAliuedIbgoVlXt28ZVNkf5mH2L3TugfDQN4auMg2HvhJPst55pwzV\r\ntGPiKmFXb1oN32oWIae0davpTTO8yUkba61jz9JoMx8PckISmvsUwNCQEg6k\r\n3nCDQGWjwgpxVbvK/8ZCELb7W6zSVbx0AeyIVqo7+b1qqVFti1iVSXmovc5F\r\nPArR26uw20h3vqyUqVVrzBqONWsQNFYfDNd04WQC1jes4+2QDTSpOsmr/fcf\r\ngh65BFtyMNbBJVi2sVYiLB8oIduUooW2EP3E9Hu3qmAK8YQjbnaA8vi5Lenz\r\nsaO8goH6z3Ob3YjduPoPjTYZRKb6MzS9cZGJxPHEbfWn4atIXcrCMECWivh7\r\nfVjVTdECtYOGThci/6g/xMARYr8cOkV6aUxKotZ/97BubCfvp+9pPCPeOSbq\r\nFzrF/KCHtWfNgGmiUItcPSgENOkYqw8MEoXK5aJ5PqOFC1U3zTiJ7xaY9MWP\r\nPs3c4GzA4X4CxLMgAAh+eBToU83l9sqThGc=\r\n=kdyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/density":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/tab-scroller":"15.0.0-canary.6f50071e5.0","@material/tab-indicator":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6f50071e5.0_1682013790942_0.04483625043476769","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ef754381c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fca0dcb0e1454899a65cb935fd6af9343280cf7","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ef754381c.0.tgz","fileCount":37,"integrity":"sha512-6zYmijX3lUsWIR2ALVLW7EXuouB2m+3mFvC6oMVrpivrMwS8Ob3VAYamitYIw9lwG8PPRLmPYZtQxjwdyd/kKA==","signatures":[{"sig":"MEYCIQDgBYf6dYqy06cc8YfDgFqKpIecLo55AuszjqERHiiMiwIhANxUhv1Z85YjNxHRnxFCvLhgBKSmFXMTntY1X8LCTyre","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJew/8CwCHmOFPHM+9BANA63ZNxt62f2yo85vkIOhoATkGu53+8MBH\r\nAMsNxonfrM9+Ej+fziDNN+K7uKaK0Y5TK61Vt/UZsgF2AKh6lvDFoxJqc/hs\r\n9yMI1InbORSzGm1/hTA+AtWijwHzo3m63sI7JgzsvmlYDmxIKRbk81dZrnHE\r\nEVrBow09uk9qR9brqdU2xqE2BateArUbmfgAS85fpIl20WwjU5e3eXApCRkI\r\nVi1bqMB62xRGyK28FRfLfjwL/ryKp6nXjHVINwhFN9Fu8mIXlF6X34Go+Mz5\r\n8/hxj6Qghjn0zP1AZNjCnqcNGmxAIavQoUZjL+UqTehBUuAIA0lGQa1eSVIY\r\nbEon/QwF52BtA0CnRza8csULfmyLFXW38Y82DnLnAhqtjHo5PBsS+zKTMqgw\r\n39o4qGZr2BoNOcOsbuhF60carz84jdLS5dUCh9zAUPyf+1T11qAWm9ZTQngC\r\n+f48DAqMvnrxcFbwna9aoMP6pvD+GAGgSt6MtT5h15uoeIBYfw0DB60AIRvu\r\nrrB3KIEeZU65nz/jsppKh+rfj9mVqqf3L/JXJ4m+S044w4tcOgDIzMAkVamg\r\nMkpU0j9JtPxQQIK6u5jHvxR9bF1p1D8RzZrNTU0su3XY2c1z8gDaA2LwRZga\r\n5Ea9afWpJQjnKsshg7Uhn9sNA111xaH55ak=\r\n=kVkZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/density":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/tab-scroller":"15.0.0-canary.ef754381c.0","@material/tab-indicator":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ef754381c.0_1682369579371_0.17527979413220307","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/tab-bar","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.69ebf61ea.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41e31fc7ac358902c64c0c0193cc66753fd554e0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.69ebf61ea.0.tgz","fileCount":37,"integrity":"sha512-GoA+wU7fi1KcJ5NtlLKguTGE3j6DMgcNXjZxKdR8mmWagUIbY0Uq1VXRt/tM2MEulIdyhiSnFnkoVjwOK0H02g==","signatures":[{"sig":"MEUCIQDsz0j/oWDzuld/BZJYfRJ/f6IvyTU2JjQNLaD5nN7lWQIgR8aSq1qpvEiVGY05BArgABo72jt+IkT7ta518YKlHnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq+dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrLw//dVnSJ+VvgbngMafXVaWiwcixgYLGgKv0CyzSKVGbqwgcpyaA\r\nNaojNbB/WmFFPwpCt3SRanJkQ/um7pOPdqicZKVL0GbYo9+0S94zqAzayqJW\r\nwEVFVYsZSskgHE9OSLvkrXXeM5pcsXryq0rlmfD4UOisPBu4xBUD01sSJK8e\r\nXm3FPcFBISVK8wBS3fdGRAQ3fTUZBeWGWVU0vPcMWGBuynXFLLqL1f0mMkVP\r\ntJHS7IS8EonryGJOKnCyrnZFPNsSdq63cjAmhKY7PxtF/MeLD7eFzPuta3uR\r\nwZWMKj+8fO8a43Z2/DDRDelvSCfEEPWsFfSVYk6cHGMrLYqzmSKs1/2DZZgE\r\nCUxsgOFnCO+AY+JYIWlUbFrftfYuCn+uwW9g1dgpuYlRnY2h0o6t1LIwJ+C7\r\n+0rerX8RvJye4IH5VdnPhXG+Mzrf+x+wQRtvbzshtQU9YAjNBjDAq8x4a8IX\r\nMedeOBcqPbCyiCWXLrs1auwcA1RkOnVRw1p8tvxWxFySj/zku1EpxV5espq5\r\n13A2s3q8HEw14T6uB+yApWDCZ3qK4EYU0kj0NeSg3FMBNVtCNKl5BXax9y5N\r\niuIk/50FBq8ZVg3fawhlFvgawrIXuWe99i894EBAP+fiXv1mZE4ljY5Gn94n\r\nHJSSfV4d9eGxWHcRjrze3o4a2deuksAJuc0=\r\n=RetA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/density":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/tab-scroller":"15.0.0-canary.69ebf61ea.0","@material/tab-indicator":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.69ebf61ea.0_1682616220877_0.7338298996444632","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b90be86de.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dafcbd2167b3fd7a8526b42c622a65b4122c5569","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b90be86de.0.tgz","fileCount":37,"integrity":"sha512-l1/Uq6u0KGsy1KtCS6EYUcDUkEDuxtmL43tKNgyBgmnh2+39X5trSvjfR5ZdtG+pjSjgRB6mxl+bxqtiuhiQtw==","signatures":[{"sig":"MEUCIQCpnhhPD24x54CSutGtApjV5OiQXxvhQXlvrVZ3pFypLwIgO4mNuf5wG1nmXeeH2VkKh/fqQneCLXUuuumqt5uYFOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGOQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiVg/9GlR3DUbkLwBYMrBu6tAlvyWblSOdsr0ax+/BY9BxLklrs/Dy\r\nHF9j2FLoC+5atNTJkbm3XCdkljqC492pDft1xXlYhOt+1cGNLKxLnH2G+LuO\r\nsgSQZGHgaPdknnRmdbzwWAphELOlidUohyL94UGFRCEsF3JWFWG8vTqq9HYC\r\nU4T+G/91arqYCgSSvlyAhYHOZfSr2kLM7i4fidQuaIKnJj8MNdFb+VowbUCU\r\nzk3za439AKGBLaLUh7IxS4s3ZmscRJ9sAp8bIEnmHR26cSeEQevmKEs3A5un\r\ncX9loVaJudq6X6K/DOfhxidIilyvzcp1nc5yP9Jwcy2IQYrw+eh7aX1R/Dgt\r\nfm6u1Gdzj3vqyoEegIT+mqHj6O4BFxc+AjHhim3loKucoDZ8K1fbWH1dT5Qw\r\n2+uJpeXl96a0K077rF5pR9FHwiqOkF8NMAdBQoxtnfzzBdu5czQkK4OTqeXm\r\n3z2SwlcwQ2MbJ3gJ7l5c41iXc8qMAQ4rINXU06WkZ/KLCiMQTQfvh5kLU7PL\r\nsaPkHRFB7Zbz1PS2apdsvP6pZsRJijbeBUALMh8JUi4S0UCyfwV1ezXbOW91\r\nT+sw3KxRzZ/q3PN8k6pjPWH8kiUiChAorGb4xPcbjATPBrfGdBrkRZfl/cpZ\r\nE784lzNyOzN0BI1L4MLGoz3Lh0iirpMW4GU=\r\n=wcR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/density":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/tab-scroller":"15.0.0-canary.b90be86de.0","@material/tab-indicator":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b90be86de.0_1682727823928_0.7609357619267574","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/tab-bar","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.51f9c0c28.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c4c2cf5552fccc0e81f722b4929dc1f0254ab48","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.51f9c0c28.0.tgz","fileCount":37,"integrity":"sha512-C0lE3ye6QycNNTbzhgCe5lUj01Z5tZpm/BF/aw2z9N49cXVB0Ka59cn4jktOs7wTzoW0OQOilhs72/xf0PR7Cw==","signatures":[{"sig":"MEUCIHEBwsGeqZsm8C5un5WBqHZW23SJ6X+vWEHRa2dQZDC9AiEAij+aoDyOrsi97Wg843rceM7qIbBIvS69LVqqOD+q1WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGXWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZbw//UfamnDBcgvIUev6J3G2730zQak9yXi9iaT7IPHlCUs/iRS75\r\nutETXLnxl9u32WI7oX7hhX2jaV72Lxni+HbkgiiIaQpKZzrsSrk09//j7F6c\r\nM/pVUsZE/w6FVCneSqxZX3NBQuFqMPnRBWzd8PX6lis0/IcURFd9pz/l57R8\r\nJU9cq9dUF5+rUiwRm2I+CqH40wAzp33OBq80XeveTHfX/HqoXLe3lRZKRXos\r\nG+JmMLQsuxnkbk+j5q7cDBZCE6boNHOHjCgfbY+Bxhayj9pcpni2mKa5/dkK\r\nrslVwRt6Mdhrg+6zZ96HMxQ/tpUlEBsttkGVBDh3d1lnGCmvCwugnNUvscV2\r\nII+qJ/KKU2aM8WjVlgVkCweRK1g4qizXEB+66EqH3dquRhswgLtRDwNziY5Z\r\n5MaRYBYKHCi6M9pkQlEDygIQsP2lJayhHIb8QtBupaBtL0ZI3j++eJi5WQ4D\r\nMq5bV+Qmr7Z0RKJ5GorTGzyXOtY8bzz9a4uU01fSgK5JeuuixmWD6cNlHuFN\r\nae2A30a3gNIR7RX2SVw9fNgcV7DNXkx72wCZ719csLmNqvrU5a75coY7fzZC\r\nG7Cit7o7POB31QmZnDLjXZVup9+m1tv0P4uhGm+Krnz5BNo/28URNWa2cqQ0\r\nbcWXShU5WKroHJSxtMBzSm4YynfpGmzUync=\r\n=X+Ia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/density":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/tab-scroller":"15.0.0-canary.51f9c0c28.0","@material/tab-indicator":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.51f9c0c28.0_1682728406279_0.19111653381524962","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4e840d685.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00312402745cfba4abd6d9390c09ebbb36118c2c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4e840d685.0.tgz","fileCount":37,"integrity":"sha512-XYs/4weOFaNYxHsuRqEYBWMr8oB6S5oU4sd0EO7nyURqa3geWOuuyY59IK8uYw/7L59qwA3J8cgxL6fn0Ua4Zg==","signatures":[{"sig":"MEUCICtm/dkQvhVStSsB1HYTmLA34gviYwbsKCJ+CVCi4SHnAiEAxrafWsWmOlN0iNRnzZSKZcSaDyqJ6ALXfJaCiIoSUlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/density":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/tab-scroller":"15.0.0-canary.4e840d685.0","@material/tab-indicator":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4e840d685.0_1683041769327_0.08424576380174598","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.10b8563e4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"964cd80fbca4a63d2e4d7d394bdbca05a098cdc5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.10b8563e4.0.tgz","fileCount":37,"integrity":"sha512-vKmWymWHmbwZi9vLoY1vyu/7Q6CkBCyjEp4jPQhBrOmc26Ac29tSQyzp5t7MJ7EH2/1IycZ6XbIqFIHYB0mrhA==","signatures":[{"sig":"MEUCIQDIKyIN3J23JMvM0opU1qQ+Ql2ws1hS7jjYSwsbAFz5PAIgHy6ZN1jeydJQDte8OdtSaFLYSpZ24WfMQP+bcMwELws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaA2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7yA/9EgIdt65fN43LbJOtM+59dU32eCSxzi9Bj+o1V/mQtY7Pp7tp\r\n0HUxa7cyB46/MeKXD1C8tkUhe0MllVbZlHQjtjXtP6PR8k5Jz4nt7JJ2soyh\r\nSJlpocVtecrcfhtmQLRYPQbzrpvf1eeU5CPCYi/yYcKhQvO3NlJpCWX1BZIM\r\nAfUfWHGx6PV8+1vSckfu9VeMovnydaC5iztnn8ssw8jcswD+lGZ65MQfqkAi\r\nbz4N6fgeIknAg1h7JrcGXGWHzSvVLJIf/KSJjFXoaVQJho275860AqXgKWkt\r\nnmduji1HHMcEZ879U8b+HiKj6Z/H/ZOTg4alfStBi7AeklW7VlqPF1/7/VcE\r\nI06QoWRLl8FiEh4MMZL37+Zx2bQPEfxAcbA/L42XXsS/echkXpsNgQmPszjP\r\nUK8tA1f7l4Fn+6Pu+vuI7uS4znL1tvzg5g4xcwq/z5NIhDQbuf3FRPQNPsas\r\nTOJbhP2Ve15Y4ImZA8hlG3BIC3ohrTM+CGv0HhjaJkoSB1jDnR3bUwTnfFqF\r\numufC21JcVU+M9ExD+4GQLnzMxPu0fGWTWnWX29eqXwUXuzmjbmT7SCJWBbG\r\nrjgmXm2FguZbs5mbOelE2uxE9yu5ISodULnmH852VM4B5wO0wjGWOzzHYICZ\r\nJDNnE14mxUjFNkbzLFxyWO3arsCuhdGGwIk=\r\n=LcZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/density":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/tab-scroller":"15.0.0-canary.10b8563e4.0","@material/tab-indicator":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.10b8563e4.0_1683071030561_0.7797800750415234","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.736b7fda4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e85b7a4f084f194bcd904866f4c7e3f9ebed766","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.736b7fda4.0.tgz","fileCount":37,"integrity":"sha512-pu3RuQZaqAnT2QWJT+HwsbPZ5nJ2LsJ+GZqW+PXbDCwOyD0WbD/SreO6NrCrJVNL7zdJTCsLFpAzdSCQ8qT6/Q==","signatures":[{"sig":"MEUCIQDHAl+AyiZoAQRE+FljecW4oRQGWPxTl0mJETrvCCEliwIgdkBsotgT24Rpg1s0oxcoes4w0sq2C6Z+hlQguRAScVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfaA/6A5oOZv8DkjXNWmLmu7V9lSGVJMBia4KgHcxvt0o4bfwmnVAb\r\nMMzi+Bzq16rt1v1o967wlHBTYcTM/4PMMRwZyx4+jdPX7cwAT6iaB+Bzk8Bf\r\nn09/+2u5lk1INuhSJ0aM3awJ8iCQ5FXES4rcFbY1kAKjdowp9eOAL9itqjup\r\nALWO4JngzeRh37I11LV4szcK0bDkxWubYRDRaiOiM4jWg5GZUZHmHC/jJDye\r\nnhvFw2HXdxxJ3C4URtFkfXOFr+UIlZ5TIs2YuGJG7PlPKqcCYdtoSwD9NlGh\r\nZEHOrG0l13DcvcH4ywDq/FMOFboGxp7ViP3yao47pIPEx2IGtu9NLqS+LEdZ\r\n7d7/KX12H4HQDCPn+GVtpHkgAJ09w/zbN2uIby0vvpQuXjYPE/824fVThP/M\r\nKhQQygaN3oj3HhEtNMno82aNQCGzMi0z87YvBG2MjXPUzLpifKMNm1sEt5Iy\r\n0xf72EXMBbspQGqUl5CKQy0WQTbevdE8jf6LT5SyVcAhFXfdbAXl4y1cZ4GL\r\nJZDeb8Mg18JOCkFE98Ufxt6RCuDqMhxzrqrXT/JM4DmXNX7IR3RkKywB9jHp\r\ntDQebmLUU+1DxxnwTqSofb/i9MuixkFEmznoL6wDoi1sH7iAwyDu3b1Lvece\r\no3tS6IkOmWWzoP9G5Atk44s1DVYJFluOHtw=\r\n=58ii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/density":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/tab-scroller":"15.0.0-canary.736b7fda4.0","@material/tab-indicator":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.736b7fda4.0_1683126703552_0.16910357150571098","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0e533c5a1.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744cc5414212a4a2bc919f3314fc48e385411882","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0e533c5a1.0.tgz","fileCount":37,"integrity":"sha512-TwH9VAX2tF0AGEwQr5up3Uw891855vwrrMIB4fcmBktcEXNPHG4XJK4ChfUSpoWMy1PGRVpvzuXUNtJ8FhP2ZA==","signatures":[{"sig":"MEUCIQDXXQaWchMN35v+9FTvjjx/gFK/i20gIawAPhRKvZruvwIgYmtQb7NkCNQsVa+Sxs5dgES7qFAIU8adVj3tRUAMNW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/density":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/tab-scroller":"15.0.0-canary.0e533c5a1.0","@material/tab-indicator":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0e533c5a1.0_1683305932219_0.6971480126624585","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5f01c15a2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ccc39849fa34ee149ac0af772419ae3543092b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5f01c15a2.0.tgz","fileCount":37,"integrity":"sha512-TVQEOl/lzYflPIrHe6YiPAAU2lRbHXCIeVJARXjF1fodBurPrNDajZIfhU2HoZ+AA0toAU3sRcTmxCI8Hbfw3Q==","signatures":[{"sig":"MEUCIQDHQk190ZWO98Rn9EW+vxPkVR2gNCgQUffLW54ndxRgUgIgWmXVFU0cowhxVDtok9LkP84R7vzXLhbY2xO7UN/MUcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/density":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/tab-scroller":"15.0.0-canary.5f01c15a2.0","@material/tab-indicator":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5f01c15a2.0_1683307705162_0.035404516999930635","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3b5b55e31.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67498c955a629f1bbd3fb3ea6b9faa0dd6cda3ce","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3b5b55e31.0.tgz","fileCount":37,"integrity":"sha512-hUOHNzH64hAhZ6WQ+HCDradmLGVZkb06/4sPC2dh6C1aMLIhgGoa+MQ+rPXrUZiKk1zupWe2Etgtq3mpCodIyA==","signatures":[{"sig":"MEYCIQDZ0RZiIZ1odpD6L8LCk1MfBXeMqBvTfShcAnzj8TyCNwIhAOoA5/ATqE6d9HCq9Yi4fGtU/MROrZEoTB6Sl2iGosuD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/density":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/tab-scroller":"15.0.0-canary.3b5b55e31.0","@material/tab-indicator":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3b5b55e31.0_1683312083639_0.15406188998321424","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d0788120f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88ade7cc0d0561c4f87f3b224aa180c5afc7d04f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d0788120f.0.tgz","fileCount":37,"integrity":"sha512-5aJwbJloMFaNjnqHEPAe4gAqDZZTTVVc2JKmMboqGG/QbnJyqlVXJxmaDM93aewiexc5to+Mdjf2AzYrX02+TA==","signatures":[{"sig":"MEUCIER7ReJDgwH8do5Syt1LZ2VdJICJh4Y6zQuyPUhmgRiRAiEAyNEErDwbOU/q6A+fgTFCLR3cEqaWsOChBzc4tbiTkkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/density":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/tab-scroller":"15.0.0-canary.d0788120f.0","@material/tab-indicator":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d0788120f.0_1683620727293_0.7129727800843981","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f52358dd0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50190305faa152f287c3e798f772134357bf6dca","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f52358dd0.0.tgz","fileCount":37,"integrity":"sha512-qJlmGqMXMvLz7EjhPZLNA4hNWfNOxwJH0OMeXf9ZB7vIagzUG9oaa/Bua6lEKX2j8zeVIS4PK88rJ+geEOp/uw==","signatures":[{"sig":"MEUCIQDKmI1VpOKjHQnrcBVwGKH6GkNBqaNIvD3rkMmxPQ2aWQIgAZLaFoDqKZqhuVBQNaSHDO9eWROksWKQ+QMeKzf27WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/density":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/tab-scroller":"15.0.0-canary.f52358dd0.0","@material/tab-indicator":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f52358dd0.0_1683901956346_0.6354626565207595","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.576d3d2c8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d53fcd995f4267b27bfd1074facc13fb7253660d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.576d3d2c8.0.tgz","fileCount":37,"integrity":"sha512-CuBJe4jt3mOO7zUy8tpUZizeac76AP2Scw/R8GZCArj+tW/Sxtx+J0VAMMzpLrkxChbflLKdKj7/vehvt1dRpA==","signatures":[{"sig":"MEQCIBMV/7hZZS5vVJjRNopgfvVE+3LJCH4XC2VQBjPjuIteAiB0t2iGMTtVcrgm7F5hHQMp9Fv2wsu976uLmivMQK8X2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/density":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/tab-scroller":"15.0.0-canary.576d3d2c8.0","@material/tab-indicator":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.576d3d2c8.0_1684202523832_0.5590580805061798","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/tab-bar","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.19bb36a46.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f0d7eae3e143c366e9fe131c99dd08614981590","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.19bb36a46.0.tgz","fileCount":37,"integrity":"sha512-TVqfdGvDxBbHs/iv3bRp+mc1SOz1U6nhN2ePn+KfSjSn/pZP/gNVaYhMRYHyIYfxDGufSpvE/PKaEegU3E7AGQ==","signatures":[{"sig":"MEUCIGwJu1OlhxdtRlkDihWQm0J40h5TUkmPoKELptNPxprVAiEA6yGKtv7IhNgQhTlNRpd1jkf2sKHc0W2VQFTNp9Pc7gM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/density":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/tab-scroller":"15.0.0-canary.19bb36a46.0","@material/tab-indicator":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.19bb36a46.0_1684266978431_0.26025209668797267","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.aa5ac7fe5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40ff2baee4fc6684d3ead879e0222503c70104c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":37,"integrity":"sha512-rXN56s3Dm6lXp9kCWqx+PnMUH78KXGsDU8E5wgw9S9FsVX43bFC3PfcI0bfQsJ3Ly4NtSChFXveElxvj4y/yOQ==","signatures":[{"sig":"MEUCIBsEaEjvpsIjEiHLVypbyvcfzTC78HZqLgyCJiyTtzdQAiEAqoU32LDDeDNKMgjSqaW/NRLjaGNBefayTzsVLJA8sl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/density":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/tab-scroller":"15.0.0-canary.aa5ac7fe5.0","@material/tab-indicator":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.aa5ac7fe5.0_1684776482379_0.16039480183356503","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/tab-bar","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.90291f2e2.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e4330d900eb999ac06cad9d6241b93edc56cdd3","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.90291f2e2.0.tgz","fileCount":37,"integrity":"sha512-dTC7oGZg6KuDK2OXO7luJWqshtNY2YgImwZbQ9a1vZZrIGMRHdu+ZtP6RVH2srFVlNIWjzcxfLgNrG+U027RdA==","signatures":[{"sig":"MEQCIA0p/WKy8j2a9DCnuyaNU28opMEuBuiWSAW5/QTnGjwfAiBucDyf51bIaWDHXB7Dr/erulgGuetlFFN7dA1T7d9X8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/density":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/tab-scroller":"15.0.0-canary.90291f2e2.0","@material/tab-indicator":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.90291f2e2.0_1684863923843_0.4356931213321291","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/tab-bar","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.446734f27.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5fbe5e586b80c52aa8e6dca797042f81b7424dc","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.446734f27.0.tgz","fileCount":37,"integrity":"sha512-yL2zaN3kI43JXIeZ6O3GY5TwfathfnpLnnH/3u4PdJtDf2xelswidWzmkadSiJVT8Fzn+YhzqYZXSnHvCLPC5g==","signatures":[{"sig":"MEUCIAkIBjcW0qtxLATsgMHpphKMsbpdzBNNZhazCB68QHstAiEA4vdYs1Yye5XsFaulCgldpR1wR7lZjFVbMmnHbA2+DOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/density":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/tab-scroller":"15.0.0-canary.446734f27.0","@material/tab-indicator":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.446734f27.0_1685483414711_0.12395489091295842","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/tab-bar","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.19de312d8.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bdd9c7d7d59ca3354b8310c801218024e0b0927","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.19de312d8.0.tgz","fileCount":37,"integrity":"sha512-zaK0rMvSefjz4CcFtp+yfeVjeY7Za1LH+lyk9OC104+VemukXrYp462iX7TzIO9xISU8bkQ2WwW6d0iSFNLJ/Q==","signatures":[{"sig":"MEQCIGt+pqVO63ltubX8FYMgPj8WhLbmakBRqc410eMktTYZAiBFdGYAC5RHOl5ksSbNhIECeyotBtjEckuZuA9qKBZZZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/density":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/tab-scroller":"15.0.0-canary.19de312d8.0","@material/tab-indicator":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.19de312d8.0_1686072037011_0.49431170137591574","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6081d829b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a849f1f11376f71016f30b6eca1758d525faea","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6081d829b.0.tgz","fileCount":37,"integrity":"sha512-c8AlHLvw+463RuKqvQE8/22iV4DIBIGD0/MGHo3KaeVhLffxUfqAAw7LvF2heQCAndaQPjLmyUoaJGQWGFdU8Q==","signatures":[{"sig":"MEUCIQCzkejpa5I9rIzL8+B0/Ss2dlZwbr6+C+2A8rRZjRPpvAIgDb78YIf+qduYW32PUktT77U8I8Fh3B8Hs21e9nDpEBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/density":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/tab-scroller":"15.0.0-canary.6081d829b.0","@material/tab-indicator":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6081d829b.0_1686100568165_0.7098893733715406","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b26c34a68.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67530d7f4cd549171fe7182e6515b50037c2f1f2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b26c34a68.0.tgz","fileCount":37,"integrity":"sha512-UzkJ3oh3pJYqZdx564SaIJikJQRGcpwzZywIMz87QKqCsAqRg0REuUoUNCpGEXaLHG0amWC3BXkivtTDqLZeTw==","signatures":[{"sig":"MEUCIEdfUMVPsbVYUPrFCNSlVtKf7+2NiU+/dfI9QOwZtQcBAiEAxd9kzVxW+KwY8FWuGFgyVSeXIar/RpIiPw7vIrpDW/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/density":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/tab-scroller":"15.0.0-canary.b26c34a68.0","@material/tab-indicator":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b26c34a68.0_1686169240819_0.46219042236622476","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4fe911371.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c69503e51e45b266232901431cd144871af0241c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4fe911371.0.tgz","fileCount":37,"integrity":"sha512-ulqLje1YDDadQ7+Q2m9miRYdmHmhG30X6AxMQXMAhsqfpR+uqLGjAW4Wg2JbGp8ZyOfYJymuwy0Sl8wLGWcBBw==","signatures":[{"sig":"MEUCIFhcraiJITdPTkQaPGbw530pLjDwazhChKRHSm1t5UcRAiEA7fNlIuuTBRyuktenReBzrRYV+L93zpBxSaJRoHHZgHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/density":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/tab-scroller":"15.0.0-canary.4fe911371.0","@material/tab-indicator":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4fe911371.0_1686179291317_0.8076990396765626","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a9ff9866f.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fe3335449083490b02e968efda7e06647ad6aa2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a9ff9866f.0.tgz","fileCount":37,"integrity":"sha512-pkuAgy0PCpDcDmKH7/mRclg9gYU9k55j3FpTz7Bao6AQSir8zzyoRvtsZXFKT8jInjG3y3ow7o/gR+BcbBVIbQ==","signatures":[{"sig":"MEUCIQCxouZqtEaHrR2pAY0TPW/mXjaHAcwY7cixk9xUpIO6OAIgJZaQPpXDnDFN7TN9nfRNlmB1/Ccw/zuGv3s/O+1cuUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/density":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/tab-scroller":"15.0.0-canary.a9ff9866f.0","@material/tab-indicator":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a9ff9866f.0_1686656419168_0.15417677412428565","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b994146f6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6d0c493b154632f433ac519ca56a75b65ef469","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b994146f6.0.tgz","fileCount":37,"integrity":"sha512-F9NegACnFEWMu1pAAypV4Jd7qROeffkvEgVO28Xxk/CvzZxFz8kAjYJZ+rI6RUhPX3BhXzwsz/AlLwsJMT2tnA==","signatures":[{"sig":"MEQCIAzjRj3N3uO2PPTA2IC7tyNxnen1rPEeBQQ7LkBTFuiWAiA9L8nO4r4nhJiFsha4kJzmzW0ihlK/7e+OOIKsMb0jpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/density":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/tab-scroller":"15.0.0-canary.b994146f6.0","@material/tab-indicator":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b994146f6.0_1686776756605_0.0335584354923133","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1fb4b1a06.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"727054deef9a65953d0a22fb5312c895979ca099","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":37,"integrity":"sha512-Tr75UUFcB+SXnMXIThu8bnsmGV3EUyvNvCppmzrancIi94/BBqUZoEEOdSw3K45a6mQJi7HVWiCIjSxuWhHesQ==","signatures":[{"sig":"MEQCIF+SSQfOSc/enP7e6aCu6h85EMDLOjcnyQT1MX2F66QjAiAGmxhDTu0PNDgzKSlheFZl5y+2sMFFYOT3TgUVTCq9lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/density":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/tab-scroller":"15.0.0-canary.1fb4b1a06.0","@material/tab-indicator":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1fb4b1a06.0_1687892368043_0.2580262232651027","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c64a2776e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0992e02d0e26419c8f472e8d4351855122b994b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c64a2776e.0.tgz","fileCount":37,"integrity":"sha512-6HT8q8yPfFpqSJCDdNwicUAzTR/FX/6+ExZnAxt8A+eNJ+/ljiNItgMFjV67m0NiPLOsc8R/hIu342vF2uka/g==","signatures":[{"sig":"MEQCICA+CJ7H/Ut4E7oN1xcvgJ+zbW1++EUY8HkMain5nzx+AiBHs8Q88TK8U5e7khPnh8mVRWWg46DZ+hIQt4TfcbdsWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/density":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/tab-scroller":"15.0.0-canary.c64a2776e.0","@material/tab-indicator":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c64a2776e.0_1687897130136_0.5447295629821174","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.b05d9eb7c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c2e90dfbcb21ff86ff0eead344873736728596","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":37,"integrity":"sha512-cxr5CE2Ck6AHFBj4YmnG/2Q+Rcj/hEb6dQbBmEpSvBCSJpCSkyDNxMpGCbK6HvsOWDA26pGFQECqAQH5rCMXSQ==","signatures":[{"sig":"MEUCIDMTf3UjegsEys7kUic9oZ+h4SO3pDk2pGdxefPFWclPAiEAhxTTzFi5HPdajGXREvN+JJ/p/Tm6rUR3yAGyq4gBpJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/density":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/tab-scroller":"15.0.0-canary.b05d9eb7c.0","@material/tab-indicator":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.b05d9eb7c.0_1688055957683_0.6002320528281","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2a9697dc5.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66bf21a0318504af2538cdb20eac5a67c75e4840","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2a9697dc5.0.tgz","fileCount":37,"integrity":"sha512-54BoaiKYo/foi8k6n9kvojeSLQ7F762LLi8c/1SSfZ1P+Lsdq7iULwLiK0owcQY9t9bU/RusLYOceezRBfJxWA==","signatures":[{"sig":"MEUCIQC5aQ8YXTBpsxR8il9vWz1IBU8z++hGjQb9wMdh4A63gAIgMaeLeLIv7YPdYhbF4Kju7q+XKRt6gH2TGO4usax/nQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/density":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/tab-scroller":"15.0.0-canary.2a9697dc5.0","@material/tab-indicator":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2a9697dc5.0_1688163356436_0.34181663121178807","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0c52adeab.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cde889e305aaac3f8751558b591baa5463883a6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0c52adeab.0.tgz","fileCount":37,"integrity":"sha512-3f/YLTzz7PA3ZL+riSunnEoV7C+MJuV9dk/YIvq74yQZYA5b8tty+LBgoBuDfYtsmZVrOweYcobz4sOpjzGvKA==","signatures":[{"sig":"MEUCIQD75Ahb8K8QUDDrrSdMAC5e/Z0IvTz4ddIwxmvulWC22QIgOUb9O8KUKcUabjiF7QWiYDlA1BIMnnoWoE/VMpVKoms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/density":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/tab-scroller":"15.0.0-canary.0c52adeab.0","@material/tab-indicator":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0c52adeab.0_1688574485781_0.3531362153425601","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/tab-bar","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.83355c322.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"933c1f58c6d271b8b164b8562c46aad52d1b1bdd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.83355c322.0.tgz","fileCount":37,"integrity":"sha512-0OX4O4OaU73n1y8nexDW/TTG0HscvONxUE+qH35GYARJWmRSY7Y/2XvG2Rv+XQ5WdV6uLfVPTDiCrrrZe3BSxg==","signatures":[{"sig":"MEQCIAILfAxfWxNGuifA9QxukCXBxTVvsVA25Hdp4oEMiJvrAiBPN0r+GoY74NxlIhK4dUtFXH/96u/bEuRLswXL6SCX6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/density":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/tab-scroller":"15.0.0-canary.83355c322.0","@material/tab-indicator":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.83355c322.0_1689001687248_0.04449536325503001","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.bc9ae6c9c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"952ce40f811a8fe1d54c1698454c9baf84a57e9d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":37,"integrity":"sha512-Xmtq0wJGfu5k+zQeFeNsr4bUKv7L+feCmUp/gsapJ655LQKMXOUQZtSv9ZqWOfrCMy55hoF1CzGFV+oN3tyWWQ==","signatures":[{"sig":"MEQCIGofpaCCwgVWOekCopGcwmrXMdIgCMJSa1zTq9PORbETAiAWHu5DN4SkrjzVYrSIrquvfdI016seO5ML+4czjkd5Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/density":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/tab-scroller":"15.0.0-canary.bc9ae6c9c.0","@material/tab-indicator":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.bc9ae6c9c.0_1691097822253_0.9380680246409006","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/tab-bar","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.3c44cd956.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519dbcaafe3adf1f29ffe4ace05c7807040a8c9d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.3c44cd956.0.tgz","fileCount":37,"integrity":"sha512-bPHwN194l2lwmuYiPgZE3UV7VYp2fPgsElJW8MdmMAausPgj5zg2gySwGwP2xakz68mTcCwJKUkxGhhaKcVl7g==","signatures":[{"sig":"MEUCIQDKpWvTr/wwKPtuM1rTK+cLT08in+YW9TeoSQvagZ+VUAIgGt6p4jWO3jR3HBbmisi6VomqgsKmxCPMji/i91/HUTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/density":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/tab-scroller":"15.0.0-canary.3c44cd956.0","@material/tab-indicator":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.3c44cd956.0_1691430637955_0.30252976833949585","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/tab-bar","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.02702296e.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52969f8749411f4d77a298a1c8c884a469a5a1cb","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.02702296e.0.tgz","fileCount":37,"integrity":"sha512-IrBdmk5Oasa2YTsIPrsTPl2g6UyoTJ3mPVfHm4FXO6de05ZOevcGpaSJPVMe+i44DuFTU97Q8MKEvo7QyZKOew==","signatures":[{"sig":"MEUCIQCD4ck7o1dONqAK2L4S9ElpdyDy6yUcT3Zat249h43nawIgKCPSmqN/vSWbsTKRtKysqcfKnscVC41R+mcfpGGYWoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/density":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/tab-scroller":"15.0.0-canary.02702296e.0","@material/tab-indicator":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.02702296e.0_1692965258740_0.22309159096882625","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/tab-bar","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.872b65832.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b65a532d4ed88e6eb412760fefc23fc9a22f6422","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.872b65832.0.tgz","fileCount":37,"integrity":"sha512-6t0YwMw2F1QMZaMTIwU0Df4KqOakbpofgNYbVfbAwD1l4ly9oz+CDa+OiOudG6Smo8CqHcGQYu78nRVUf8L6lQ==","signatures":[{"sig":"MEYCIQC3LdD8wtVvhdRTU8lLNvOE1k9NP65aN16n3bNyX85YdAIhAO/zIWL4EWuodTSMnPQRGFyG0pfXatbD5wAImdEjxI5c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/density":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/tab-scroller":"15.0.0-canary.872b65832.0","@material/tab-indicator":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.872b65832.0_1693397748120_0.5614142602641794","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/tab-bar","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.89b2e4122.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78707927919d8593718807fba074f2f12c3a5c2b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.89b2e4122.0.tgz","fileCount":37,"integrity":"sha512-aexIHLbldtTsggEDKuhmUZCtw0FO7UwICaFG0KUb/QNXnclBL2vgQtIw8KMjzPeWEkvxIgSFH8vClh5V4p2WmQ==","signatures":[{"sig":"MEUCIGs9GsF6Om/HBbn2Z5REYV68i7O1ilcYa/6UEK/KusDkAiEAkZRpFuhiz76YRP2EbP6fjUcEbyxTi05HcfCZ7tdwdKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/density":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/tab-scroller":"15.0.0-canary.89b2e4122.0","@material/tab-indicator":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.89b2e4122.0_1693498146660_0.17370538302306748","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7a3942e7a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1fa581df026b25e848c1595acb0295da1bdec1a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7a3942e7a.0.tgz","fileCount":37,"integrity":"sha512-rH/17Lcb94aeeigAfhDKylXDaJRsCboqXSSpL5uLDDNAYKrajF7AzI6BfCC7PxWpN7Mgom+fmn05eWj93amveA==","signatures":[{"sig":"MEYCIQCAI0L+gHM1wTMtFKk1cLb/wMeq20X1b+pHLaXdfJ/ZBAIhAJxvX2v3i+2BnlpDzbgY6TPnS4Dm5gGjKFVpZtzQFYbM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/density":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/tab-scroller":"15.0.0-canary.7a3942e7a.0","@material/tab-indicator":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7a3942e7a.0_1693507314952_0.04036769334458956","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/tab-bar","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.54feb3020.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ab59b80729327a2c35d34e96bed09d5cdd0bd4","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.54feb3020.0.tgz","fileCount":37,"integrity":"sha512-ncw3acSbJFL7vR+Qqp+NvefhfHPvuomsucg8M5qzU7FTt9LuVnmeSCmIi3bZYw6CC6CfDoQcxWN24UrCYOs2lQ==","signatures":[{"sig":"MEUCIQCGZtBPJdfebq/0qkI5PG4Ubc+qMSuph0tPvzTTRnMEfQIgd6Bfo/Y2z5oI+LBoEUwa7EDNMSy6c6XevwxorpuuNDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/density":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/tab-scroller":"15.0.0-canary.54feb3020.0","@material/tab-indicator":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.54feb3020.0_1694466458383_0.9958750815329382","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.6cda3ce8d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7dbbd6e94a5f49713c625627f16cc3c854f881d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":37,"integrity":"sha512-03IMaADJaAdAOv1REPsyHyG4NPUOjrBTV5G0sNP4CWiin6WHko3TShmDzsYs2S3FeuMCg6laIMJVK8AecKnevw==","signatures":[{"sig":"MEUCIQD/W8tN/Dd1RwI0zy281roRptseBL5vl90v91s0PByvjQIgaxF6IcBo0kizS1mRKPnEt6pziLonWlFqymv4LfHZIx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/density":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/tab-scroller":"15.0.0-canary.6cda3ce8d.0","@material/tab-indicator":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.6cda3ce8d.0_1694483253747_0.3632320957553494","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/tab-bar","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.205b20b36.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f06390d08327ce3a2b9146417153cbd3d479843","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.205b20b36.0.tgz","fileCount":37,"integrity":"sha512-vc3BL7atdFiUSeFooTEn5LsVZSqH2ndAnbfC07YL6rH3TGRvpJIkTbXx5qVdb/s0vP/bDJHhl7wtSr0YCGDXgg==","signatures":[{"sig":"MEQCIHVdBxIQ458vf97KscN8ukKCsvfuLBo/vvn3t8xPvgdfAiBhoSSBur4kqHCwgwnF8fErO1rEdvTTdsvW17hBhSxvJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/density":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/tab-scroller":"15.0.0-canary.205b20b36.0","@material/tab-indicator":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.205b20b36.0_1694625678439_0.9979040373447801","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/tab-bar","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.22bf82024.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61248e4f8f0aa4f4a0969bbd3e230c9f6f939545","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.22bf82024.0.tgz","fileCount":37,"integrity":"sha512-kG8gwXEl6VFX+w3bKgZvQJHgDyxHiYFzvBPWe4eYcPwBjk9ZSJhebhTKH2q0Q9YPFTIV2tyTM0RiRB6Nyg1CMw==","signatures":[{"sig":"MEUCICVL/Zvs1rS099WruOSqgM9rhnh4QDFQMEVRr/DxjSKZAiEA4AvcSbaB/91dyEir9A04q+Ybx8BK9D3KM/apMfkJeyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916909},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/density":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/tab-scroller":"15.0.0-canary.22bf82024.0","@material/tab-indicator":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.22bf82024.0_1695028449258_0.3995908706756959","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a246a4439.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"548c79f54c5ad912157eab95d2ede6b96bdd8697","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a246a4439.0.tgz","fileCount":37,"integrity":"sha512-dMQb1vXsBchQXcjbwgJZIGqTZHngm+3QGSOSb4LWjqHIgC5+w2RRrHsIAjNTyRhKssJ9nKKrbpM/Yz5vTPWH6w==","signatures":[{"sig":"MEUCIQCU/wx7vALXjFKDKhMCohyOPE86qMhnG4ai90zNSF6mCwIgXcbjTitI9/vR1owh3bJRLNVdff1BQgTH0Bsvi6U864U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917292},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/density":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/tab-scroller":"15.0.0-canary.a246a4439.0","@material/tab-indicator":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a246a4439.0_1695059317533_0.48645966584325695","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d153db62b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1b65ba67b10f7a28e5b4a913643094eca35f27","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d153db62b.0.tgz","fileCount":37,"integrity":"sha512-o9Cd2w2KHwlMtHn6GbY0XTRmVkpcdyywg1Hoebi/zX6U6S9BnWoDsju3yZsD9SRSnQX1k0V6+kDRmTzjQEUKSQ==","signatures":[{"sig":"MEUCIQCuFfE4JL8Tq/o/4E3m6b2/bgKCYowyNJwfL4V6CHrSEgIgWTI+U7XjO0vjS51eND2D1BnEI+NjIK2PoV+Kq/cTCG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917292},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/density":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/tab-scroller":"15.0.0-canary.d153db62b.0","@material/tab-indicator":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d153db62b.0_1695151061375_0.9181433404006614","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2528c1c3b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"130b136ecbfdc487aa4d79c49de37b961149b3e2","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2528c1c3b.0.tgz","fileCount":37,"integrity":"sha512-zji7AlnBpi3gNv082VsRglQQnZypk8gU96gxiu54Q7r2wlAf92EC6mSoyB+h+yqwLto++Y+kDqqpmobBsw5zYw==","signatures":[{"sig":"MEQCIA5dVFaAcu7ytWDDXentkUp0is8tW3GZi9lGjBokTTTDAiBrS2wO9uwrZ+0tiz0i4Yh0fAdPSriZs0zUog8P07pA0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917292},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/density":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/tab-scroller":"15.0.0-canary.2528c1c3b.0","@material/tab-indicator":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2528c1c3b.0_1695233347718_0.952462865423249","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/tab-bar","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.1728a6dcf.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5251329f2e9485d98f1b4eb71923d5c05b463b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.1728a6dcf.0.tgz","fileCount":37,"integrity":"sha512-9oVRBJbkN8HzHatGWGeoqn/a9VJrXI7c/QHuKQ3LkXxUfPn0vwfpVHNDR73VQfuQlK8nWrMOq7yH0Fyp2ziXkA==","signatures":[{"sig":"MEUCIQD/AoLPEDqXN1ht3KvOuyLtfh3PEIohiwWUwy9FwWNM4AIgfskUpnE000WrdwD0oDs2iiu2rvC1xrazCoPEpUAT8+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/density":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/tab-scroller":"15.0.0-canary.1728a6dcf.0","@material/tab-indicator":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.1728a6dcf.0_1695691522432_0.8082104199948987","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/tab-bar","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.ebb636f3d.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db719e01995aaf6a90dfd441bb742753155c3e47","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.ebb636f3d.0.tgz","fileCount":37,"integrity":"sha512-h2xa+ySKg4Xv6UVkZdqjSw/Pd70ZKImK0J+vxdZBPPknYLkoSDYJQwEBJmZU7BrfHkEKCb/u9R54XpxZYJmxrg==","signatures":[{"sig":"MEQCIEAgtM5F6k8uvVXA2XcWyJ8R5oxm4TrLqpGPWR6oaxohAiBIgNdN8AbW+CHNgdaand/Mvh8kk13MziQCJUYa+Rrx7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/density":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/tab-scroller":"15.0.0-canary.ebb636f3d.0","@material/tab-indicator":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.ebb636f3d.0_1696016783941_0.5152111712020127","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c0d21ecc9.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96f1295dbad75d2fffcc7a66402b99f531da1722","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":37,"integrity":"sha512-l9RU4FuUcpQ3BXUtOV39HQgNR59QsCaijZ3GIQNr5c+FdrWIIpZBgi1U4SuS3k3W59jYNsvVWM7sULwV4ptCpg==","signatures":[{"sig":"MEUCIQCMBATPTm3fiDOLjesXWHT9i5EaQLHTLZ8bFgTIiqmo0wIgWykj6Gzzdp72Xc6fLn4LpLl5nRZccd1U+bQ0Cr+ovf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/density":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/tab-scroller":"15.0.0-canary.c0d21ecc9.0","@material/tab-indicator":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c0d21ecc9.0_1696880329828_0.5820845287095269","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/tab-bar","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.127a44b28.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56f0733e00a8dd279eb313bb9c80291eb15ff53c","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.127a44b28.0.tgz","fileCount":37,"integrity":"sha512-OQfhLp4C99c0dObcBO739+2mEj4f4plT38OfvwobpbjOll0EmH0iznnPlvFqQ12UtUi8lsCi1mQggyvY9W6bfA==","signatures":[{"sig":"MEUCIQDgclYIFDlvOUSHO+1cukwtm1UYk1QCF2bi5zAsvSWfHgIgcnBmE7ZLUS1DAeKiZ596WD4m92H7PA2vL/RMbN6Dwuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/density":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/tab-scroller":"15.0.0-canary.127a44b28.0","@material/tab-indicator":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.127a44b28.0_1697140965997_0.4035389006565753","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/tab-bar","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.0ad128337.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3930d13f8821b5b6458f9e525cb213e25f4ed7f","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.0ad128337.0.tgz","fileCount":37,"integrity":"sha512-aFoQjtxtbThnaB5/v9qpjP8i833lXDaffxqNV4mqmvN0tvb86jPm69DhY7ismgxqDxpTzwKTiwqLzhknzfsoqg==","signatures":[{"sig":"MEUCIQDajMBnZNAO8EIkIYJKDAX3XrR9mGSGwisAS1ldw4hK7wIgaaS3W+tyu/KSLlCAIdeskhU3WV3PJ27l5ZCIHHZIdxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/density":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/tab-scroller":"15.0.0-canary.0ad128337.0","@material/tab-indicator":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.0ad128337.0_1697741662786_0.8009302398302935","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/tab-bar","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.9cec94097.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0c3ac88e2815ee5216c42f0b9804b9b88e49c0","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.9cec94097.0.tgz","fileCount":37,"integrity":"sha512-uTIuc8gaSM6XpPMgULqAQx2XnrLfJWE68BXX6f1xMRro7jLA5RWMW0ejqLWV86TAp0vsLxXOZIpsS2rC/WsooQ==","signatures":[{"sig":"MEUCIG7vx2GT84ivRLRHfGQbvMWgLH0+umuy4KhvnN4Ka8quAiEA19NIq6veBSEoNgkNpQPUCW/+s4N9t7TfDNj1eDoMFHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/density":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/tab-scroller":"15.0.0-canary.9cec94097.0","@material/tab-indicator":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.9cec94097.0_1697757099607_0.965171612979137","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c51a0bbcc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbf268093532fad055c611ce5e0c114df7525f64","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":37,"integrity":"sha512-3u8JuOBdFXUq+Vrog9FEdenDUahtfECnYrox8fykCJuKguWJe5mKfdePu7vNRtzG9+q+fIB6BbfLCQO8M0Z1tQ==","signatures":[{"sig":"MEUCIHqWYImGmodBrl6UlI3FhaT/13V9jxr0D5z6E7XDhAkhAiEAm2kxe/rEZKEBPaH0BnNLFi1CABGRs+RMb/t/YiGDyFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/density":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/tab-scroller":"15.0.0-canary.c51a0bbcc.0","@material/tab-indicator":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c51a0bbcc.0_1700081978319_0.15529177418434692","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.d76666ad4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c201149b88c136aac598db092b05a5219e2ab9c5","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.d76666ad4.0.tgz","fileCount":37,"integrity":"sha512-emj40A4OkhY0WW6HB+bIPmjbVpWY7IbwYHn06/RptDy3r+Q0gKzYia85BD30MpY5tFEsSnJU4fMvhYUUhyiQpw==","signatures":[{"sig":"MEUCIQCy99+YZk6tlENWBjVg9kqcR/tj7Gi3oqWh10q80lphygIgDZtVf2SfUUuKXu9cuHu/6oGL9CBnn4zdlQAeXRCmwkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/density":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/tab-scroller":"15.0.0-canary.d76666ad4.0","@material/tab-indicator":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.d76666ad4.0_1701123242990_0.8186831868631641","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.8656bf0e0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c370e74cb3cfe518d2654835f6d1ce5213def1ef","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.8656bf0e0.0.tgz","fileCount":37,"integrity":"sha512-gPas14Lhwj53YOVcZEh09ObEoGMKUNIUjNolRlJSXH3yQOzDEBZe3kFa/RtGOw7fGE+2x8KbgKL3yMNnHm3FHA==","signatures":[{"sig":"MEYCIQC2EGAAGRAUOEfOtc85o5jRkc5Fb1EsI8MLhuKcs+hCrQIhAPym7kghg3IzkhioeVxIj9j6SMy8Z/e86mTdHPZb9Qaz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/density":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/tab-scroller":"15.0.0-canary.8656bf0e0.0","@material/tab-indicator":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.8656bf0e0.0_1702415984609_0.9064131735799539","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/tab-bar","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.7f224ddd4.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fb2585163c4da265ce6ca318e6bf6efd7caf1b","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7f224ddd4.0.tgz","fileCount":37,"integrity":"sha512-p1Asb2NzrcECvAQU3b2SYrpyJGyJLQWR+nXTYzDKE8WOpLIRCXap2audNqD7fvN/A20UJ1J8U01ptrvCkwJ4eA==","signatures":[{"sig":"MEQCIGpKSXpRCRP7gKkOGU86dKL6nRSqFbqEwoBseyNJeNQ2AiB1ZN024i2MjGiCviZMkHVi6SDpUAKEL0DiCsxc5TF22g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/density":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/tab-scroller":"15.0.0-canary.7f224ddd4.0","@material/tab-indicator":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.7f224ddd4.0_1703743803197_0.6695107770664861","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.a0b8a90c0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0385a783ac7de26487b02c28085ffccea9edb1ae","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":37,"integrity":"sha512-I2/0/OFsbc6cQUNDFg+hqm14CAxIEw/k+qd9qORlP+NTe5F/eWJFUigL1ZkUlEUKJC1R5d6p4TJ9DnRmp/5f0Q==","signatures":[{"sig":"MEUCIDSuyK/t7QUTuljxTASJLsNo6GgBHK2fBWn1hqkHHUWgAiEAjd+ZEKgfoVlWHQHbfqm723/azQMr2BrC4k4vOcyEUvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/density":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/tab-scroller":"15.0.0-canary.a0b8a90c0.0","@material/tab-indicator":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.a0b8a90c0.0_1707333629837_0.34808978421176473","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/tab-bar","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.e50b478eb.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8571f1999472293aadbeed2867ad1413f140f078","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.e50b478eb.0.tgz","fileCount":37,"integrity":"sha512-rGEQBAL25WwG7xbd8Cq6coBjygR4grPDV+GDKbT9lGl1jJkIWKphPhExntFDSweNIFSZ9t0LFMyMmn1yXvE6qw==","signatures":[{"sig":"MEYCIQCIgKpREdeQq2PLD3D59l0SiHGpgKWO6nzk7KzNrBxl1QIhANFPr/8hf+3/NWqZ4lQNYjm++xWIFoPOTB9uY/VSjw1w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/density":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/tab-scroller":"15.0.0-canary.e50b478eb.0","@material/tab-indicator":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.e50b478eb.0_1707415752325_0.7704738645832845","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/tab-bar","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.c43b3438b.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef75f93b06e8d600bdc06670b3543c913797f46","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.c43b3438b.0.tgz","fileCount":37,"integrity":"sha512-ylaVtDR2kHSCjGZcYLTbBVwZS185EmI9A9eEGBsreIa9L+6t0Ph9A2XWJBE0daUzdQXZ0VjTt8d0yjYzIgO2gA==","signatures":[{"sig":"MEUCIATFfBRZ7+fkdZ/Bvgxq92eROvQzH5WNZVPlBl/zPQdBAiEAsDFNWVkiaZKA5zn/4kfg0iKCMgwEGq4DBjCc/8V1Wv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/density":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/tab-scroller":"15.0.0-canary.c43b3438b.0","@material/tab-indicator":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.c43b3438b.0_1708719517566_0.7129915357310459","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/tab-bar","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.819498d8c.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520835bbed3738d722b443e5fdbdecfa166c94e1","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.819498d8c.0.tgz","fileCount":37,"integrity":"sha512-2BRLyuicbpBkaoumpi/wYwKhTjRqRK8qA5Jh3H/MgId2i3qcsOSBgfgl7IWJ7QDRRbWqwbFU2b+vcWXG72dkHw==","signatures":[{"sig":"MEQCIDu88Bzf3t28m9jfAGxJQAurbC19PmmEnUCsSSDRsfoMAiAyTym1e+JEo8VbksjITyotLn9PAWRZm/K5gdNKCgIQ3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/density":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/tab-scroller":"15.0.0-canary.819498d8c.0","@material/tab-indicator":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.819498d8c.0_1710515770764_0.06015750384735963","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/tab-bar","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.453a6248a.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca099da92932b92ef084a722e364258062cc99db","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.453a6248a.0.tgz","fileCount":37,"integrity":"sha512-/wUa7Ft613lJvRH69aAcz3uBiFgBIOcl9fwmSt14ImG5aiI+gdldb9imooy+wI+IV76DRApNnjTZwUDSlmmL9A==","signatures":[{"sig":"MEUCIBr++XOCspkMXreS6QZtUpieOP6WqcxF392RPT/oDi7VAiEAjlV5i534f54hDEwOJj3cTohEMuSJl/UpyIS/0CmrlKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/density":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/tab-scroller":"15.0.0-canary.453a6248a.0","@material/tab-indicator":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.453a6248a.0_1711386875550_0.37759210687428757","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/tab-bar","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.68edc03c6.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3849958dbade77e9dcb2131936619293aaade572","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.68edc03c6.0.tgz","fileCount":37,"integrity":"sha512-HZxfFz3WlL49/ixh3f9bIhFBZg2cR58VDs0ALvNe4GJuHwtULXDHQu9I6bh6BNviXgrVf+JzmjqD/Ht/EIPFyQ==","signatures":[{"sig":"MEUCIQDY0JsRfHXftEGeEwH2Zn/hkznu+BIi6XRUOTsEDWTi2gIgE9xZR96ZrYnlqxK606pcqLjJhs4gbwj3GOCIMenO32c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/density":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/tab-scroller":"15.0.0-canary.68edc03c6.0","@material/tab-indicator":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.68edc03c6.0_1712603265147_0.6860604550526708","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/tab-bar","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.5bebc0064.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf0957892757db626603d49f13c77087ebc4eaaf","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.5bebc0064.0.tgz","fileCount":37,"integrity":"sha512-e407SORZdAKUagFiopJZHk6cIy39DLr4+lVu6pldTUVjSwNwHMhrZpAzayFZ4prHZ7wm6CLDq+eFdZd0Bqg+bQ==","signatures":[{"sig":"MEUCIQDfRixW60p6Kl8OMFV2DL/EPiAuF6qD2NXv7Gh7pu5ixAIgZmu8mNEFONVkrf3eGsSDsGZyPiD9pUtu+8+h6mLKkPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/density":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/tab-scroller":"15.0.0-canary.5bebc0064.0","@material/tab-indicator":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.5bebc0064.0_1712871761212_0.585689489880413","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/tab-bar","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.311f29a60.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc446321d40120c6604fb0597cc2b2d1fb09244","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.311f29a60.0.tgz","fileCount":37,"integrity":"sha512-rcCQploMpgRuZ0cqRO2lasXXmj0fc6J/5zKhVe06UDvMkm4x1ZzXZHXI9ipPg6YA5lXEIS77Z9ojbG9srxGkCg==","signatures":[{"sig":"MEQCIHyHx4xqK6BIM9WENP9J4KI9pR+lNS4MShe/7ajF/qEwAiBCpakj8Qb8FfiGiqAIThKFIEB1a20tTOJCODO74ReYJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/density":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/tab-scroller":"15.0.0-canary.311f29a60.0","@material/tab-indicator":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.311f29a60.0_1713895300270_0.6099544156825805","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/tab-bar","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.65c10a622.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"954f7567d444b204f6ff5443ecf874aa5f8c3761","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.65c10a622.0.tgz","fileCount":37,"integrity":"sha512-IGuY1aSuQ3s/rH4l3PmihtfEB3ylNKipD0VH+r6gBr4IVSZUiTgMGumlaKJ4HCNTMx/+XT/xmDLHuFuR5QBTuQ==","signatures":[{"sig":"MEUCICB5h6wDQ4hU0O1FCAc7o0Dt+8PeJePliRsnp9Tf5xu4AiEAi5niToa3j51VXAhjf1OEzAsntEJ7gPCT/QDAsWTctqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/density":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/tab-scroller":"15.0.0-canary.65c10a622.0","@material/tab-indicator":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.65c10a622.0_1714071004022_0.6925810031777675","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.4b35cb7d0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84680bafde0e5f3733eb38a08b11001e6a64569d","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":37,"integrity":"sha512-WApO+v3IvpOnNFSssSIUg3ZHMC5Hg1O1ORN3X8uo4PC8+VM+dOvYLgfaZfkHlEkZUtixHDc3WB81iWz89m01sA==","signatures":[{"sig":"MEUCIAd4Q744pTCSgYZXvImu8Qlp+1vE1KFZe/n+KYf4X2ohAiEA3Knj/jH8lqlp2UBi/utUKAZx8vZbVwhn8XROBPEts9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/density":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/tab-scroller":"15.0.0-canary.4b35cb7d0.0","@material/tab-indicator":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.4b35cb7d0.0_1714651447726_0.6213254032254456","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/tab-bar","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.f80ac92b0.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9b88e5893e1bd263963dfc623b93b8499e78010","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.f80ac92b0.0.tgz","fileCount":37,"integrity":"sha512-2jBJXihdWmRnJKZKef2cpGHMn/eVaBhQOyUZllKrtdx8Ww3Cu90d06o+xaKiPcyyyp7hZdqWzPOO9ZVrWanjPg==","signatures":[{"sig":"MEUCIQDMnAKAX053fZpk6DCMYPzrzIyJ87OFkNy6sRyzft3RYAIgLgiczElskz3kyr/DH58dWdkLn/OEFc7ISjilGBd+p+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/density":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/tab-scroller":"15.0.0-canary.f80ac92b0.0","@material/tab-indicator":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.f80ac92b0.0_1714652055936_0.8240429045278157","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/tab-bar","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.2f5b899bc.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b294e6b9dff40abc774816bac18f0196ceba15d6","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.2f5b899bc.0.tgz","fileCount":37,"integrity":"sha512-pzKQGl5t+hA/W1kAfjxLLkVA0YS9M49Vw+hqlKF7xJrpiU1r503qZgJql77lZHqjHDxPR2OOJeDpzw6Vpe1fmg==","signatures":[{"sig":"MEUCIQCNq+T7rq3oTNoDU2melpdGpF5milSrd5XvNzQq6YwdjwIgPExP7dhzQhjJq2WX3ury+jlqmUY/UiICFxme1FKfD+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/density":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/tab-scroller":"15.0.0-canary.2f5b899bc.0","@material/tab-indicator":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.2f5b899bc.0_1716213476184_0.8529959127030453","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/tab-bar","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","tab","bar"],"license":"MIT","_id":"@material/tab-bar@15.0.0-canary.cfec83c74.0","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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f57d2e177c31291c0b1908c3924077195e4d5b9","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.cfec83c74.0.tgz","fileCount":37,"integrity":"sha512-h9/8jTVdOyyhq82ybeCWH+veLjX4vG2a27IKmYugt4Zua8BIFW0zNC021/AxbGCz9tZ2VGL0diKoecyIoqapug==","signatures":[{"sig":"MEUCIQDQ/JnNv4/6OeaEWS6289QrjHiXhdpdE2b+lxPl66nOTgIgD/PXT4038YfPmjLdKhkGJLPU2LxhqB4bLlLyr5MDhb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918693},"main":"dist/mdc.tabBar.js","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab bar component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/tab":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/density":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/tab-scroller":"15.0.0-canary.cfec83c74.0","@material/tab-indicator":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_15.0.0-canary.cfec83c74.0_1716231484647_0.5285662384684509","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/tab-bar","description":"The Material Components for the web tab bar component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","tab","bar"],"main":"dist/mdc.tabBar.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-tab-bar"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/tab":"15.0.0-canary.423edc3dc.0","@material/tab-indicator":"15.0.0-canary.423edc3dc.0","@material/tab-scroller":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/tab-bar@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-j4Gz5++20ajYJMO97zMxlLL1IzcKggB1PBcvweBGcYtSiQfnDlS2nEEU+rqKZDRUhVAi0cmpeGlE+TOQp2EKFg==","shasum":"f379c6864e1064563207c18c4260b32d43fb3fcd","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.423edc3dc.0.tgz","fileCount":37,"unpackedSize":918693,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtRTdEC8iQ7URyriB0JBF/mGT82oGFqftiG77dSnWobAiEAscSdxADGnJUfPn9DUMJ6VqGKjXCGmNYgk2FdeBenKHc="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tab-bar_15.0.0-canary.423edc3dc.0_1719425551291_0.27232558909969073"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-30T17:08:00.849Z","modified":"2024-06-26T18:12:31.953Z","0.38.0":"2018-07-30T17:08:01.069Z","0.38.1":"2018-08-13T20:39:40.716Z","0.39.0-0":"2018-08-16T15:16:52.727Z","0.39.0":"2018-08-27T17:41:21.331Z","0.39.1":"2018-08-31T21:37:10.204Z","0.39.2":"2018-09-11T16:55:46.795Z","0.39.3":"2018-09-11T17:19:41.514Z","0.40.0":"2018-09-24T20:02:40.771Z","0.40.1":"2018-10-08T21:15:37.810Z","0.41.0":"2018-10-29T20:22:44.242Z","0.42.0":"2018-12-04T22:55:22.826Z","0.43.0":"2019-01-07T19:49:51.783Z","0.43.1":"2019-01-22T22:43:14.021Z","0.44.0":"2019-02-04T18:24:54.770Z","0.44.1":"2019-02-19T23:03:28.333Z","1.0.0-0":"2019-02-28T00:00:19.233Z","1.0.0-1":"2019-03-04T23:34:04.457Z","1.0.0":"2019-03-06T21:08:53.964Z","1.0.1":"2019-03-11T22:08:11.086Z","1.1.0":"2019-03-26T19:26:38.096Z","1.1.1":"2019-04-08T20:14:18.170Z","2.0.0":"2019-04-29T17:40:35.165Z","2.1.0":"2019-05-06T15:34:01.203Z","2.1.1":"2019-05-10T17:25:48.945Z","2.2.0":"2019-05-13T22:17:25.338Z","2.3.0":"2019-05-28T21:24:24.073Z","3.0.0-alpha.0":"2019-06-12T04:07:21.594Z","3.0.0-alpha.1":"2019-06-12T19:02:42.897Z","3.0.0":"2019-06-25T22:28:12.101Z","3.1.0-alpha.0":"2019-07-16T13:29:42.009Z","3.1.0":"2019-07-22T22:03:06.510Z","4.0.0-alpha.0":"2019-08-07T21:10:10.175Z","4.0.0-canary.0":"2019-09-05T04:38:22.552Z","4.0.0-canary.1":"2019-09-09T20:21:14.833Z","3.2.0":"2019-09-12T21:54:04.426Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:22:02.153Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:53.115Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:41.400Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:27.740Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:44.425Z","4.0.0-canary.735147131.0":"2019-10-16T01:24:08.859Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:02:04.477Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:28.533Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:29.628Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:39:06.069Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:41.863Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:56.061Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:55.569Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:46.465Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:42.851Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:29.519Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:30:04.721Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:24.647Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:43.960Z","4.0.0":"2019-11-02T18:12:15.132Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:35.932Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:38.157Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:33.737Z","5.0.0-canary.821871e04.0":"2019-11-08T21:29:01.768Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:08:06.832Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:43:10.398Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:37.250Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:42.548Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:40.205Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:07:03.212Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:44.882Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:24.262Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:20:17.913Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:53.072Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:30.244Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:51.195Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:56:09.576Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:38.283Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:23.642Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:19:05.052Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:21:00.638Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:22.689Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:56.096Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:41.711Z","5.0.0-canary.aa0eba489.0":"2019-12-06T02:00:01.984Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:49.721Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:43.102Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:21.755Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:48:14.276Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T19:00:24.771Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:11:04.345Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:38:08.471Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:11:22.975Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:25.519Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:30.946Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:18:04.930Z","5.0.0-canary.391674a26.0":"2019-12-18T19:18:18.570Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:36:01.681Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:30.069Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:25:13.414Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:51:14.132Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:26:14.049Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:49.475Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:28:09.491Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:25:09.030Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:54.840Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:28:06.349Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:48.662Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:51:08.547Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:33.522Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:31.909Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:04:09.385Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:55:01.736Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:43:11.272Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:11:29.770Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:29.960Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:38:04.847Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:27:27.464Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:30.044Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:55.098Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:59.069Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:33.082Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:34.048Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:16:11.216Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:27:06.101Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:45.121Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:18:12.704Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:20:15.258Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:46.980Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:23:10.696Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:58:04.754Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:58.891Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:32.325Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:11:31.358Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:50.849Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:23:15.124Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:33.345Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:59:19.507Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:26.282Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:24:03.221Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:41:14.444Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:01:08.054Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:55.670Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:11:13.650Z","5.0.0-canary.aab102017.0":"2020-01-10T00:13:16.952Z","5.0.0-canary.426913342.0":"2020-01-10T01:45:14.832Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:26:27.217Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:47.653Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:28:18.160Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:47.911Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:35.687Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:40.858Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:16:13.182Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:54:23.720Z","5.0.0-canary.60354c577.0":"2020-01-14T22:47:14.646Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:51.863Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:44:05.622Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:11:19.529Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:49:05.877Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:26.616Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:27.046Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:25:01.730Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:48:00.186Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:08:14.382Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:45.583Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:01:20.633Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:25.596Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:48.277Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:37:04.427Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:51.975Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:41:11.281Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:42.626Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:51:12.366Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:38:17.218Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:21.186Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:59.122Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:40.936Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:47.581Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:54.310Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:18:11.490Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:28.693Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:40.514Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:33.445Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:56:06.456Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:37.563Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:22:29.875Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:47:07.482Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:27.759Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:57:03.626Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:25:10.867Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:24.221Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:23.072Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:55.068Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:53.280Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:51.538Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:50.773Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:25.687Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:21.886Z","5.0.0-canary.181486643.0":"2020-01-30T20:57:20.889Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:24:13.626Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:57.881Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:11:29.290Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:40.123Z","5.0.0-canary.535398572.0":"2020-02-03T18:13:15.710Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:56.354Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:54.671Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:05:28.649Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:34:35.818Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:53.725Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:22:11.026Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:29.351Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:30.190Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:52.379Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:26:22.072Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:54.308Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:23.490Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:44:16.021Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:32.879Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:45:07.824Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:07:14.272Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:38.968Z","5.0.0":"2020-02-14T00:09:49.744Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:49:17.251Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:46.746Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:46.592Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:17:03.537Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:59.117Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:52.044Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:59:03.762Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:49.426Z","5.1.0":"2020-02-25T21:39:10.367Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:41:04.509Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:58.848Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:05:19.494Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:13:09.648Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:44.522Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:27:17.546Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:45:07.807Z","6.0.0-canary.98b843417.0":"2020-03-05T18:32:01.180Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:25.732Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:17.069Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:25.108Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:43.079Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:38:10.971Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:35.344Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:27.395Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:22.730Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:43.120Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:39:08.005Z","6.0.0-canary.bec065920.0":"2020-03-12T20:22:00.571Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:55.281Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:02:11.377Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:59.318Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:36:02.067Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:53.156Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:38.584Z","6.0.0-canary.35a32aaea.0":"2020-03-20T20:00:12.691Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:16:14.184Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:45.597Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:48:16.426Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:24.662Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:06:02.051Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:28.093Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:30.715Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:17.137Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:57:07.631Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:44.638Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:15:09.084Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:05:09.442Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:49.990Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:57.987Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:56.074Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:31.999Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:31:00.702Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:21.258Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:24:19.536Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:36.324Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:32:17.107Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:50.850Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:35:16.936Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:07:07.772Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:25.263Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:40.761Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:21.041Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:48.666Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:28:02.406Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:23.051Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:35.755Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:01:19.186Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:34:01.854Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:27.979Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:04:02.010Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:40.137Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:19:03.573Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:37.620Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:57:11.778Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:27.643Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:16:11.013Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:50.079Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:43:27.137Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:31.337Z","7.0.0-canary.8540808be.0":"2020-04-23T17:27:25.527Z","6.0.0":"2020-04-23T17:28:03.065Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:52.985Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:22:18.804Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:07:12.277Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:56.996Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:59.959Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:30.134Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:36.365Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:33.802Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:45:16.834Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:53.157Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:29:08.030Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:34:16.671Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:46.695Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:27:06.145Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:50.626Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:57.933Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:39.434Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:20:16.908Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:32:27.886Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:35:17.661Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:28.898Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:41.913Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:53.908Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:09:08.851Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:56:17.011Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:53.114Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:37.276Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:35.715Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:43.631Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:41.096Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:45.215Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:28.771Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:37.101Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:58.298Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:28.208Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:26:18.029Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:33.690Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:36.613Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:59.574Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:53:06.968Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:54.856Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:46:00.244Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:19:18.868Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:56.091Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:35.440Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:32.277Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:38:42.836Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:48.315Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:55.157Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:14:00.278Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:38.716Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:03:15.476Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:16:01.133Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:19:31.112Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:21:12.573Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:57.135Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:30:04.076Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:30:29.202Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:33:03.823Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:34:14.791Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:49:21.262Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:22:22.103Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:01:14.404Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:05:12.233Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:51.303Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:33:22.152Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:34:07.904Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:47.234Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:39.878Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:54.385Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:55.088Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:47.997Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:53.217Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:58.731Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:01:07.456Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:46.228Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:22:01.330Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:31:18.386Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:37.298Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:38:15.903Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:23.383Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:34.402Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:33.403Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:16:26.047Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:06:16.557Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:58.711Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:48.373Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:45.189Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:50:21.691Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:58.372Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:27:22.347Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:04:13.055Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:47.515Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:43.173Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:48:07.618Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:28.748Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:59:18.823Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:10:22.669Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:14:04.161Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:52.604Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:48.972Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:57.549Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:37.570Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:43:17.634Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:50.573Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:55:21.649Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:28.854Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:40.645Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:53.408Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:46.574Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:36.626Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:51.510Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:26.374Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:31.075Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:48.314Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:28.022Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:32.292Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:32.373Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:29:01.073Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:29.638Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:12:23.400Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:21:12.115Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:31.202Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:47.746Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:41:00.683Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:51.386Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:34.400Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:59.547Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:04:09.395Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:33.963Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:39.091Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:30.031Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:35:12.765Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:58.372Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:53.562Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:45.783Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:22.963Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:41.821Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:37.115Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:30.393Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:29.106Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:35:14.935Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:43:19.697Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:22.249Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:43.353Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:01:15.432Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:26:12.520Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:49:07.959Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:38.292Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:04:06.282Z","7.0.0":"2020-06-23T19:12:09.143Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:13:02.955Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:42:24.922Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:57:02.461Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:48.546Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:58:10.847Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:27.180Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:46.176Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:53.035Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:45.434Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:56.086Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:18:04.193Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:21.284Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:46.507Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:30.664Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:59.353Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:53:19.331Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:07:08.181Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:46.535Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:48:25.858Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:40.422Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:28:22.337Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:40:12.288Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:48.890Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:35.986Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:17:15.470Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:45:21.941Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:42.234Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:30.375Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:40.801Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:57.667Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:56.123Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:45.696Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:44:00.079Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:29.231Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:33.045Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:29.375Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:56.325Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:14:19.036Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:16:19.085Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:52.165Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:37.308Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:56.745Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:21:34.950Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:54.159Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:25.367Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:31.383Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:38.639Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:35:05.339Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:49.643Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:54:13.581Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:51:06.267Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:35.488Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:43.733Z","8.0.0-canary.9d9f47473.0":"2020-07-23T20:00:07.533Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:01:10.293Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:25:01.394Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:25:18.128Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:45:02.010Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:12:01.475Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:58:12.449Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:39.181Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:08:09.742Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:53.348Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:39:26.848Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:52.904Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:37.687Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:34:02.562Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:51.862Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:51.877Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:29.689Z","8.0.0-canary.c2852000d.0":"2020-07-27T21:00:01.971Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:25.354Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:58.187Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:40.960Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:54:16.452Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:17:21.395Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:48.295Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:39.157Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:22:14.628Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:31.499Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:40:14.507Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:31.854Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:59.968Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:51.196Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:12:09.073Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:40.089Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:29:04.029Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:36.044Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:48.165Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:40.789Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:32.655Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:10:12.491Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:46.409Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:55.112Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:01:12.622Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:48.900Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:24:21.783Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:52:26.601Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:55:35.534Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:56:05.828Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:56:24.990Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:53.686Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:50:08.402Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:41.730Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:50:25.160Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:37.779Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:34.178Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:46.637Z","8.0.0-canary.08090126b.0":"2020-08-06T19:34:04.499Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:27.720Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:28:13.943Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:56.962Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:46.642Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:30.891Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:50:11.285Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:54:07.725Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:32:19.244Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:31.445Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:41.286Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:43.478Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:43.765Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:43.237Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:02:13.565Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:30:12.006Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:51.779Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:32.142Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:52:13.337Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:19:18.215Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:32.678Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:39.191Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:43.713Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:55.581Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:59.234Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:45.774Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:33:28.336Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:38:17.716Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:37.006Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:25:27.588Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:28.646Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:37.160Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:39:16.147Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:54.999Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:45.918Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:20:00.721Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:47.705Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:59:09.728Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:57.467Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:54:13.636Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:30:19.966Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:13:20.851Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:52.998Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:42:20.339Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:05:19.209Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:57.408Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:53.333Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:46.854Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:57:37.299Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:58:30.505Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:57.225Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:14:20.704Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:31.415Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:12:07.486Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:51:24.428Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:57:07.134Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:56.960Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:43.251Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:34:16.858Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:56:04.259Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:29.366Z","8.0.0-canary.a306aa488.0":"2020-09-17T01:00:30.402Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:30.454Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:49.211Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:12:02.722Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:19:22.992Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:42.326Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:49.106Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:58.835Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:34:03.147Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:40.385Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:53:00.980Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:26:32.828Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:56:00.500Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:51.922Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:30.816Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:43.755Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:48:18.813Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:58:25.441Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:17:22.805Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:19:15.415Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:59.049Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:10:06.464Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:53:19.340Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:39.234Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:38.144Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:14:06.561Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:55.878Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:33.557Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:54.714Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:56.150Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:34:25.319Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:56.697Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:45.208Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:01:20.403Z","8.0.0":"2020-11-02T23:01:44.260Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:23:07.337Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:58.400Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:52.708Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:11:00.968Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:49.981Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:32.331Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:07:02.260Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:58:14.082Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:40.967Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:46:37.608Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:28.035Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:55.731Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:28.668Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:58.068Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:45.425Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:29:33.957Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:56.057Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:57.913Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:29.100Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:50.548Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:54:04.628Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:57.641Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:20:08.236Z","9.0.0-canary.a41527604.0":"2020-11-19T20:03:01.844Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:45.375Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:49:21.804Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:41.388Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:17:26.480Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:44.080Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:36:06.934Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:42:05.263Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:58.935Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:01:22.988Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:48.953Z","9.0.0-canary.977585650.0":"2020-12-02T14:44:10.751Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:51:18.481Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:09:16.728Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:18:17.226Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:24:13.404Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:29.864Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:43:25.973Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:52.493Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:03:22.191Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:47:03.649Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:42.909Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:41.822Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:44:05.830Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:51:16.690Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:03:21.450Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:15:08.096Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:30:05.259Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:34:07.143Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:57.102Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:07:16.429Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:48.981Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:54.310Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:44.237Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:48:13.610Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:30:12.570Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:07:13.978Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:09:09.071Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:31.097Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:29:19.325Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:09:13.449Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:47.582Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:55.457Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:47:12.389Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:10:09.636Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:35.582Z","9.0.0":"2020-12-29T19:47:45.920Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:49.027Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:38.579Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:48:12.323Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:06:09.682Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:11:19.235Z","10.0.0-canary.365c69360.0":"2021-01-05T17:50:17.718Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:02:26.915Z","10.0.0-canary.766981c15.0":"2021-01-05T22:42:06.784Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:38.966Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:48.065Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:55.189Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:28:29.697Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:55.997Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:33.826Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:53:25.203Z","10.0.0-canary.089de519c.0":"2021-01-08T22:22:20.194Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:57.721Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:26:22.434Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:14:17.513Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:57:07.682Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:56.955Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:59.701Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:57.901Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:28:17.058Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:35.891Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:21:16.352Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:10:00.768Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:49.515Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:11:23.391Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:43.837Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:58:11.341Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:53.293Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:53:16.719Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:45.184Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:26:00.947Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:12:01.572Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:42.707Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:54.060Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:35:26.684Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:53.874Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:06:00.104Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:29:09.408Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:22:02.953Z","10.0.0-canary.994873795.0":"2021-01-27T14:53:00.762Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:04:09.509Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:34:32.536Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:44.988Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:05:31.492Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:35.364Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:22:19.001Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:51:11.805Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:45:02.124Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:20:20.236Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:58.199Z","10.0.0-canary.05f249666.0":"2021-02-04T17:52:14.736Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:45:09.359Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:44.881Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:02:22.995Z","10.0.0-canary.533092a90.0":"2021-02-05T03:48:29.391Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:39.449Z","10.0.0":"2021-02-05T16:20:57.284Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:44:04.668Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:33:27.106Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:07:07.079Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:42.833Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:38.440Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:19:25.229Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:02:33.470Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:43:10.382Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:41.709Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:54.012Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:47.167Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:40.214Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:44.245Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:01:21.280Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:48.182Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:51.146Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:18:05.148Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:12:02.772Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:56.739Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:57.222Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:39.372Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:53.442Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:07:29.078Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:40:10.479Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:25:20.315Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:53.938Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:29:24.065Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:45.518Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:52.208Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:38:28.430Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:39.527Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:02:32.812Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:51:23.237Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:37.181Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:32:29.390Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:16:07.200Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:35:09.517Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:36:29.130Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:37:16.447Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:52:32.855Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:17:36.478Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:50:09.555Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:24:21.708Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:57.428Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:10:00.098Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:56.967Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:55:04.325Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:52.512Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:34:05.529Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:58.768Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:50.376Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:55.406Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:50.320Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:51:19.603Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:47:27.887Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:47.690Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:55.358Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:29:19.477Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:54:09.187Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:59:16.352Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:53.158Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:40.184Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:58.861Z","11.0.0-canary.81911b707.0":"2021-03-11T18:25:09.265Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:33.785Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:03:15.925Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:56.933Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:35:17.056Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:42:17.777Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:46:02.525Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:52.121Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:51.955Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:45.788Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:56.903Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:40.757Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:14:10.628Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:41:23.056Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:43:05.652Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:03:33.599Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:01:10.842Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:55.572Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:19:03.389Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:51.942Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:41.047Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:40:26.625Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:53:10.587Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:01:25.521Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:14:33.309Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:51.579Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:46:02.420Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:58.401Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:39:27.210Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:38.109Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:37.963Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:56:06.394Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:06:19.246Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:31:25.035Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:18:25.497Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:34:31.884Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:59:22.572Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:50:09.991Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:22:23.070Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:35:15.645Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:13:12.502Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:32.764Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:58.132Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:02:30.185Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:44.683Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:41.773Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:47.742Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:02:17.220Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:42.911Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:46:31.989Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:55:21.817Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:59:21.418Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:37:26.102Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:40:13.244Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:37:04.060Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:45.042Z","11.0.0-canary.24255c408.0":"2021-04-09T20:14:08.113Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:55:04.433Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:17:10.307Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:59.347Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:30.717Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:37.869Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:33:04.685Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:49.274Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:49.345Z","11.0.0":"2021-04-15T22:59:51.179Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:37.286Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:48:28.185Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:46.786Z","12.0.0-canary.b52196498.0":"2021-04-19T19:59:23.077Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:10:17.562Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:52.244Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:39:24.360Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:54.027Z","12.0.0-canary.cad489689.0":"2021-04-22T16:51:11.930Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:36:07.554Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:51.802Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:41.899Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:51:14.564Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:11:29.529Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:21:35.058Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T08:00:11.104Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:38:06.231Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:59:35.529Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:46.250Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:09:02.852Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:38.310Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:30.189Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:55:19.674Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:46:25.595Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:58.644Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:41.714Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:38.455Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:25:27.360Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:43.273Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:39:22.717Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:59.567Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:55:12.371Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:24:23.200Z","12.0.0-canary.33148231f.0":"2021-05-03T19:40:24.220Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:47:29.059Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:43:34.112Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:54.838Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:51.335Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:02:03.846Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:12:10.653Z","12.0.0-canary.718c90178.0":"2021-05-04T19:29:25.699Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:32:25.733Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:32.345Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:51:20.959Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:52.260Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:47.796Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:08:24.104Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:32.782Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:18:03.186Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:58.313Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:54.965Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:44.409Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:54.393Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:51.254Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:58:20.304Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:31:13.027Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:53.298Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:45:02.313Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:35.971Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:25:18.550Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:24.908Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:39.048Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:42.812Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:36.356Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T01:00:23.686Z","12.0.0-canary.cb162da37.0":"2021-05-11T02:00:21.107Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:19:19.021Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:24:22.144Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:47.002Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:25:09.057Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:42.079Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:50.148Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:48.459Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:15:29.460Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:42:19.995Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:39.890Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:52.814Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:30:03.481Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:31.433Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:53.414Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:20:43.695Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:35.790Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:16:11.158Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:37:09.887Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:34.010Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:47:20.993Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:56:08.576Z","12.0.0-canary.464a00286.0":"2021-06-03T14:48:01.569Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:55.591Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:48:00.784Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:50.787Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:43:19.422Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:50:09.755Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:56.361Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:34.529Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:08:10.809Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:09:06.383Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:32.170Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:37:24.849Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:31.176Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:48:00.432Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:41:01.630Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:47.990Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:46.016Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:55.521Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:05:18.960Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:47.477Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:55.042Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:08:09.758Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:07:08.226Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:56.308Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:26:19.208Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:13:23.826Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:42:16.931Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:48.542Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:46.841Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:26:18.605Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:29:09.254Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:44.346Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:54:14.044Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:36.842Z","12.0.0-canary.796811db7.0":"2021-07-01T00:05:11.239Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:08:21.616Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:53.411Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:47.547Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:11:37.635Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:05:33.019Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:51.856Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:27:10.702Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:53:07.881Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:51:11.949Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:11:17.889Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:46:04.927Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:37.593Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:52:32.151Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:24:17.380Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:50:03.747Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:56.000Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:40.137Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:44:01.907Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:54.854Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:43.519Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:49.270Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:48.051Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:54.196Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:48.138Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:11:00.591Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:33.127Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:07:18.610Z","12.0.0-canary.791311bba.0":"2021-07-20T22:09:17.441Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:45.076Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:41.526Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:08:12.207Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:40:04.983Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:59.919Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:56.877Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:29.884Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:38.014Z","12.0.0":"2021-07-27T19:51:49.426Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:53:24.141Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:58.833Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:44.745Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:49.905Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:37:05.944Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:54.284Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:35:06.628Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:25:07.127Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:38.875Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:31.906Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:58:26.930Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:44:07.295Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:20:02.816Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:44.706Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:36.489Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:09:18.474Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:19:05.764Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:19:24.796Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:23:25.449Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:36.467Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:01:27.056Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:33.419Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:57:19.083Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:47:08.560Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:50:20.655Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:53.785Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:42.730Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:59.851Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:16:07.235Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:59.660Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:04:02.602Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:19:27.260Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:43.328Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:59.511Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:28:25.990Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:22:06.243Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:46:01.807Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:30.307Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:33.748Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:58.639Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:41.004Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:50:19.270Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:20:08.167Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:35:02.242Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:33.501Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:01:16.511Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:40:03.767Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:49.610Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:11:03.347Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:46:06.638Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:56:07.678Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:13:25.156Z","13.0.0-canary.611db508e.0":"2021-09-02T03:17:07.891Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:41.765Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:40.972Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:48:17.758Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:32:14.907Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:39.081Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:34:06.611Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:49.814Z","13.0.0-canary.72464476c.0":"2021-09-07T15:36:06.668Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:35:24.074Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:45:06.480Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:37:37.613Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:03:14.404Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:12:17.867Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:27:17.551Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:48.897Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:46.295Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:35.280Z","13.0.0-canary.08398f880.0":"2021-09-13T23:36:09.023Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:52:11.336Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:14:12.694Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:01:01.864Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:19:18.010Z","13.0.0-canary.80a583365.0":"2021-09-17T20:37:09.936Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:41.135Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:37:25.566Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:52.390Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:57.787Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:13:22.288Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:59:18.190Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:57.907Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:43:23.624Z","13.0.0":"2021-09-24T19:47:10.819Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:55.496Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:12:31.233Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:50.444Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:44:30.043Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:58:12.570Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:38.809Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:30:03.033Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:48:15.896Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:37.153Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:01:08.968Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:23:11.828Z","14.0.0-canary.348665978.0":"2021-10-21T14:52:09.229Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:58.351Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:54:22.649Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:59.610Z","14.0.0-canary.a986df922.0":"2021-10-29T21:36:31.072Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:07:20.776Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:31.187Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:52:05.729Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:58:06.602Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:48.586Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:26:04.633Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:45.576Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:31:10.632Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:15:21.184Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:38.651Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:44.407Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:55.568Z","14.0.0-canary.554c71829.0":"2021-11-16T16:21:24.657Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:26:06.663Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:01:14.403Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:47.320Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:41:13.251Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:59.177Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:06:25.968Z","14.0.0-canary.93134d453.0":"2021-11-23T15:41:17.495Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:34:07.550Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:39:16.115Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:52:30.394Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:53.307Z","14.0.0-canary.17a072535.0":"2021-12-02T18:07:09.921Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:46:20.888Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:08:31.668Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:27:17.494Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:31:12.602Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:57:11.845Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:48.673Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:52.922Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:39.004Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:34:27.637Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:56.092Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:16:07.938Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:03:27.316Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:56:15.130Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:53.032Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:51:35.639Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:44:21.438Z","14.0.0-canary.390220e42.0":"2022-01-17T16:48:09.265Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:41.150Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:19:25.635Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:56:23.225Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:05:20.620Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:34:00.708Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:15:07.991Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:39:12.394Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:43:20.835Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:42.541Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:49.835Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:59:05.080Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:44.781Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:38.213Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:01:23.584Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:08:32.150Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:31:22.189Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:54.358Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:53.793Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:38.934Z","14.0.0-canary.868793776.0":"2022-02-22T19:38:28.918Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:37.229Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:44.033Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:51.153Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:02:19.769Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:48.369Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:30:10.918Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:31:10.498Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:32.404Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:05:04.027Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:19:20.995Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:57.111Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:44.207Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:37.285Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:32.862Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:52:14.041Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:20:01.195Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:41:32.853Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:06:02.931Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:36:27.560Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:46.935Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:34:27.031Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:47.519Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:42.363Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:57.467Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:07:14.907Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:49:16.580Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:51.306Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:03:27.518Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:58.566Z","14.0.0":"2022-04-28T16:57:33.904Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:34.310Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:16:14.250Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:33:04.569Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:32.430Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:51.717Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:26:49.136Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:54.269Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:20:06.513Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:51.590Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:28:34.562Z","15.0.0-canary.05930a453.0":"2022-05-13T18:49:00.513Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:32.973Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:34:12.079Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:04:18.781Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:23:42.727Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:59:25.545Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:47.585Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:57.523Z","15.0.0-canary.df47894db.0":"2022-06-13T17:10:09.821Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:31:33.625Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:59:04.992Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:24:16.890Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:45.877Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:30:04.646Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:29.222Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:56:02.316Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:48.195Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:43.840Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:04:33.019Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:33:10.684Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:40:20.688Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:41:02.226Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:37.353Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:39.514Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:39.717Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:41.857Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:07:06.897Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:54.329Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:51:08.915Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:59.535Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:56.092Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:07:00.744Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:26:02.418Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:48:32.399Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:48.995Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:31:32.683Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:39.705Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:57.895Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:52.241Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:11:04.251Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:06:32.105Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:47:37.747Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:15:29.007Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:42:39.220Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:41.552Z","15.0.0-canary.10196647d.0":"2022-08-03T21:55:30.995Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:42.810Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:22:46.548Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:43.801Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:03:06.333Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:07:42.515Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:49.543Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:20:08.473Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:21:36.854Z","15.0.0-canary.4299717da.0":"2022-09-07T16:17:32.598Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:58.514Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:44.740Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:59.418Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:56:39.296Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:19:27.375Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:22:16.394Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:38:12.741Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:26:11.375Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:49:50.130Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:10:07.490Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:58:13.403Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:59:22.808Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:36.746Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:59.941Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:59:10.962Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:51.796Z","15.0.0-canary.db414b864.0":"2022-09-28T14:54:30.855Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:57.422Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:57:34.739Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:59.044Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:15:32.221Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:51.126Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:20:01.503Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:21:18.329Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:05:30.598Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:38.498Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:38.358Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:39:31.112Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:57:16.153Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:40.296Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:34.162Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:40:13.906Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:59.594Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:04:17.289Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T17:00:26.989Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:23:07.270Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:45.601Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:53:06.498Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:46.321Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:53:24.546Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:20:01.633Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:58:09.027Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:24:36.087Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:51.449Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:42:21.267Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:44:10.933Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:25:14.549Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:36.228Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:15:12.484Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:56.879Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:39:01.583Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:42.960Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:58:32.422Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:36.150Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:55.461Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:01:01.257Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:52.641Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:32:30.604Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:17:12.850Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:34:17.985Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:51:30.655Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:58:26.711Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:42.038Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:37.224Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:49.356Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:21:04.773Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:55.372Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:55.452Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:53.205Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:06:01.086Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:26:22.281Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:15:12.943Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:44.969Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:58:22.466Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:20:06.607Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:37:25.123Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:55:06.650Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:43.944Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:08:14.675Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:49.875Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:38:30.362Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:44.916Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:47:12.133Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T16:00:31.404Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:57.123Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:30:19.514Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:04:10.367Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:32:05.024Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:55.683Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:15:17.204Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:17:39.903Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:53.396Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:59.217Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:02:08.303Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:07:26.333Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:45.806Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:50.542Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:02:05.103Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:03:18.906Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:57:03.807Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:41.464Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:23:03.433Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:18:21.985Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:03:04.521Z","15.0.0-canary.d58410453.0":"2022-11-18T19:27:05.968Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:47:05.601Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:56:00.002Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:50.149Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:56:04.691Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:51.155Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:55.884Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:18:40.775Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:41:31.046Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:53.991Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:18:12.092Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:46.011Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:49:24.553Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:45.638Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:36:03.354Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:51:05.542Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:50.724Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:16:19.130Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:55.097Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:31:23.258Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:56:32.263Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:26:22.207Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:52.914Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:03:03.549Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:09:00.392Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:43.272Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:55.849Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:47.396Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:55.200Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:05:45.531Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:43:24.316Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:46:34.814Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:51.538Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:48:40.477Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:04:23.917Z","15.0.0-canary.817002c29.0":"2022-12-13T21:56:17.595Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:31:05.489Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:21:14.421Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:47:03.392Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:25.548Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:44.242Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:43.980Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:29:23.018Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:51.094Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:27:31.247Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:14:20.482Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:07:23.293Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:06:14.396Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:46.373Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:04:27.166Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:43:09.639Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:08:04.089Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:50.098Z","15.0.0-canary.af490a848.0":"2023-01-03T16:00:18.015Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:41:10.075Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:15:21.828Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:34:38.108Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:58.411Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:58.571Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:56.381Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:11:36.690Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:24:08.390Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:18:07.485Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:45:27.887Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:26:12.799Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:30:27.985Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:47.954Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:45.451Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:20:29.910Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:15:00.311Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:56:25.714Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:58.959Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:58:04.372Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:38:43.520Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:27:02.997Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:52.429Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:41:18.296Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:59.090Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:37:05.725Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:29:09.661Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:35.147Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:32:22.431Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:46:31.679Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:53.373Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T19:00:45.561Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:36:32.212Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:40:34.399Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:11:09.068Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:40.432Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:26:24.590Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:41.407Z","15.0.0-canary.de38de758.0":"2023-02-09T15:44:37.371Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:05:48.912Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:58.655Z","15.0.0-canary.066d9439b.0":"2023-02-15T20:00:26.696Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:36:27.903Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:22:17.269Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:42.792Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:58.444Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:55.819Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:29:35.752Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:56.937Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:58.824Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:28:25.999Z","15.0.0-canary.274610c77.0":"2023-03-09T15:01:04.518Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:49.847Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:47:09.161Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:49:28.339Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:53.747Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:10:01.603Z","15.0.0-canary.23073a303.0":"2023-03-10T14:17:10.131Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:49:39.629Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:50:08.498Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:59.700Z","15.0.0-canary.82554d770.0":"2023-03-11T01:39:17.296Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:41:14.439Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:46:20.481Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:53.211Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:05:07.398Z","15.0.0-canary.112715df5.0":"2023-03-13T18:41:27.384Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:46.565Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:41:22.201Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:45:30.218Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:55:01.348Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:18:29.752Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:49:27.042Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:19:02.561Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:22:18.743Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:26:13.320Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:54.954Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:29:36.434Z","15.0.0-canary.87809c710.0":"2023-03-14T18:45:31.752Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:51.726Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:56.614Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:15:48.734Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:13:22.897Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:51.669Z","15.0.0-canary.39e473690.0":"2023-03-21T17:53:38.608Z","15.0.0-canary.cedffb44c.0":"2023-03-21T18:00:34.630Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:52:17.113Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:37:03.633Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:51:06.594Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:43:06.323Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:53.567Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:47.614Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:45.480Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:32:19.894Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:57.589Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:44:31.584Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:40:49.132Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:42:11.476Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:03:11.230Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:59.661Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:41.075Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:44.202Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:33:26.527Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:36:09.601Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:50.834Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:43.774Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:52.450Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:28:25.452Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:41:23.860Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:25:27.533Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:32:36.634Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:02:04.087Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:56:18.650Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:28:02.691Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:45:24.076Z","15.0.0-canary.446734f27.0":"2023-05-30T21:50:14.899Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:20:37.359Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:16:08.662Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:20:40.999Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:08:11.559Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:40:19.415Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:56.846Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:59:28.327Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:50.337Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:58.005Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:56.678Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:28:06.025Z","15.0.0-canary.83355c322.0":"2023-07-10T15:08:07.558Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:42.513Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:50:38.184Z","15.0.0-canary.02702296e.0":"2023-08-25T12:07:39.041Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:48.353Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:09:06.970Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:55.207Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:07:38.792Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:47:34.033Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:21:18.853Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:14:09.532Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:48:37.730Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:17:41.687Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:09:07.977Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:25:22.766Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:46:24.239Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:50.170Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:46.347Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:54:23.164Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:11:39.914Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:38.540Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:14:03.149Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:44.864Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:10:03.420Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:30.168Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:09:12.542Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:37.994Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:16:10.914Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:36.049Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:45.340Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:42:41.394Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:40.529Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:50:04.175Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:04:08.009Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:14:16.118Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:56.398Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:58:04.865Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:31.536Z"},"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-bar"},"keywords":["material components","material design","tab","bar"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}